course.pug

mixin icon(name, size)
  svg(viewBox=`0 0 ${size} ${size}` class="icon" width=size height=size)&attributes(attributes)
    use(xlink:href=`/icons.svg#${name}`)

doctype html
html(lang=lang dir=dir theme=(section.background.includes('dark') ? 'dark' : undefined))
  head
    meta(charset="utf-8")
    title= section.title + ' | ' + course.title
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,400i,600i" rel="stylesheet")
    link(href="/course.css" rel="stylesheet")
    link(href=`/resources/${course.id}/styles.css` rel="stylesheet")

  body
    header
      a#logo(href="/")
        img(src=settings.header.logo alt="Logo" width=settings.header.logoWidth height=36)
        if settings.header.title
          span= settings.header.title

    .body
      x-course(id=course.id data-goals=section.goals)
        .sidebar(style=`background-color: ${course.color}`)
          .sidebar-hero(style=`background-image: url(/resources/${course.id}/hero.jpg)`)
            .sidebar-hero-gradient
            .sidebar-title= course.title

          .sidebar-body
            for s in course.sections
              if s.id === section.id
                .sidebar-row.on
                  x-progress(r=10 p=0)
                  | #{s.title}
                  .connection
              else
                a.sidebar-row(href=`/course/${course.id}/${s.id}${lang === 'en' ? '' : ('?hl=' + lang)}`)
                  x-progress(r=10 p=0)
                  | #{s.title}
                  .connection

        .sidebar-shadow
        .sidebar-toggle
          svg(viewBox="0 0 24 24" class="icon" width=24 height=24)
            use(xlink:href="/icons.svg#progress")

        article(class=section.background)
          if section.background
            .page-background
          h1= section.title
          .reveal-banner.off
            | Reading time: ~#{section.duration} min
            .complete Reveal all steps
          .steps!= course.getSectionHTML(section.id)

          footer
            p.skip-step
              | To reveal more content, you have to complete all the activities and exercises above. 
              br
              strong Are you stuck? #[a.skip Skip to the next step] or #[a.show-all reveal all steps]
              svg(width=72 height=10): path(d="M1 1L36 9L71 1" fill="none" stroke="#aaa" stroke-width=2)

            - var next = course.getNextLink(section.id)
            if next
              a.next-section(href=`/course/${course.id}/${next.id}` title=next.title)
                .small Next up:
                .title= next.title

        x-tutor(hidden=(!settings.tutor.enabled))
          +icon('fox', 40)(slot="icon")
          div(slot="header") #[+icon('fox', 32)] Archie

        x-modal#glossary-modal.light: .modal-body

        script(type="application/json")#glossary!= course.getJSON('glossary')
        script(type="application/json")#bios!= course.getJSON('bios')
        script(type="application/json")#hints!= course.getJSON('hints')
        script(type="application/json")#userdata {}

    script user = null;
    script(src='/polyfill.js')
    script(src='/resources/' + course.id + '/functions.js')
    script(src='/course.js')