// The website: one Typst bundle run writes every page, the stylesheet, the
// fonts and the media. Pages come from `chapters` in ../typ/style.typ, so a
// new chapter is a new page; the only prose of its own is the landing page.
//   typst compile --root . --format bundle --features bundle,html docs/site/site.typ OUT
// Every link is relative and every page sits at the top of OUT, so the site
// works from file:// and from any static server.
#import "../typ/style.typ": chapters, tutor-path, doc-links, tagline, project

#let clips = toml("media/clips.toml").clip
#let pages = (
  (id: "index", title: "pardes"),
  ..chapters.filter(c => c.file != none).map(c => (id: c.id, title: c.title, file: c.file)),
  (id: "tutor", title: "The tutor"),
)
#let href(id) = id + ".html"

// --- the files that are not pages --------------------------------------------

#asset("site.css", read("site.css", encoding: none))
#for f in ("DepartureMono-Regular.woff2", "CrimsonPro-VF-normal.woff2", "CrimsonPro-VF-italic.woff2",
           "LICENSE-DepartureMono.txt", "LICENSE-CrimsonPro.txt") {
  asset("fonts/" + f, read("fonts/" + f, encoding: none))
}
#asset("media/placeholder.svg", read("media/placeholder.svg", encoding: none))
#for c in clips.filter(c => c.ready) {
  for ext in ("webm", "mp4", "png") {
    asset("media/" + c.name + "." + ext, read("media/" + c.name + "." + ext, encoding: none))
  }
}

// --- the shell every page sits in ---------------------------------------------

/// An HTML element: el("a", (href: "x.html"))[text], or el("li")[text].
#let el(tag, ..args) = {
  let p = args.pos()
  html.elem(tag, attrs: if p.len() > 1 { p.first() } else { (:) }, p.last())
}

/// The running head: a tagline, the way a pane's tag reads, with the path
/// of this page and the chapters as its words.
#let trail(id, title) = el("header", (class: "trail"))[
  #el("span", (class: "grip", "aria-hidden": "true"))[]
  #el("a", (class: "home", href: href("index")))[pardes]
  #if id != "index" {
    el("span", (class: "sep", "aria-hidden": "true"))[/]
    el("span", (class: "here", "aria-current": "page"))[#title]
  }
  #el("nav", (class: "words", "aria-label": "Chapters"))[
    #for p in pages.slice(1) {
      if p.id == id { el("a", (href: href(p.id), "aria-current": "page"))[#p.title] }
      else { el("a", (href: href(p.id)))[#p.title] }
    }
  ]
]

#let shell(id, title, body) = html.html(lang: "en", {
  html.head({
    html.meta(charset: "utf-8")
    el("meta", (name: "viewport", content: "width=device-width, initial-scale=1"))[]
    el("meta", (name: "color-scheme", content: "dark light"))[]
    html.title(if id == "index" { "pardes" } else { title + " · pardes" })
    el("link", (rel: "stylesheet", href: "site.css"))[]
  })
  html.body({
    el("div", (class: "shell"))[
      #trail(id, title)
      #el("main", (class: "panel", "data-page": id))[
        #el("article", (class: "content"))[#body]
      ]
      #el("footer", (class: "colophon"))[
        pardes ·
        #if project.source != none [#el("a", (href: project.source))[source] · ]
        #if project.license != none [#project.license · ]
        built from `docs/typ` with Typst ·
        #el("a", (href: "fonts/LICENSE-DepartureMono.txt"))[fonts] (OFL)
      ]
    ]
  })
})

/// The headings of this page only, as a contents list, when there are
/// enough of them to need one.
#let toc(id) = context {
  let hs = query(selector(heading.where(level: 2)).after(label("start-" + id)).before(label("end-" + id)))
  if hs.len() >= 4 {
    el("nav", (class: "toc", "aria-label": "On this page"))[
      #el("div", (class: "toc-bar"))[#el("span")[On this page]]
      #el("ol")[#for h in hs { el("li")[#link(h.location(), h.body)] }]
    ]
  }
}

// --- the pages ------------------------------------------------------------------

#doc-links.update(true)

#let ready = clips.filter(c => c.ready)
#let start = (
  (id: "guide", label: [Start: the guide], note: [about 15 min]),
  (id: "tutor", label: [Hands on: the tutor], note: none),
)

#document(href("index"), title: "pardes", shell("index", "pardes")[
  #el("h1", (class: "masthead"))[pardes]
  #el("p", (class: "lead"))[pardes is an editor and terminal in columns of panes, each
    a file, a terminal, a PDF or an image. Click any text to run it or open
    it; the keys are helix's; scripts drive it through files.]
  #el("p", (class: "pitch"))[#tagline.]
  #el("p", (class: "runs"))[It runs in a terminal or in its own window (SDL), on Linux;
    macOS and browser builds are in the tree.]
  #if ready.len() > 0 {
    el("img", (class: "hero", src: "media/" + ready.first().name + ".png", alt: ready.first().caption))[]
  }
  #el("div", (class: "start"))[
    #for s in start {
      el("a", (class: "go", href: href(s.id)))[#s.label#if s.note != none [ #el("span")[(#s.note)]]]
    }
  ]
  #el("p", (class: "rest"))[
    #for p in pages.slice(1).filter(p => p.id not in start.map(s => s.id)) {
      el("a", (href: href(p.id)))[#p.title]
    }
  ]
  #el("div", (class: "clips"))[
    #for c in clips {
      el("figure", (class: "clip"))[
        #if c.ready {
          el("video", (poster: "media/" + c.name + ".png", muted: "", loop: "", playsinline: "",
            controls: "", preload: "none"))[
            #el("source", (src: "media/" + c.name + ".webm", type: "video/webm"))[]
            #el("source", (src: "media/" + c.name + ".mp4", type: "video/mp4"))[]
          ]
        } else {
          el("img", (src: "media/placeholder.svg", alt: "", width: "640", height: "400"))[]
        }
        #el("figcaption")[#c.caption]
      ]
    }
  ]
  #el("h2", (class: "install"))[Install]
  #include "../typ/install.typ"
])

#for p in pages.slice(1, -1) {
  document(href(p.id), title: p.title, shell(p.id, p.title)[
    #metadata(none) #label("start-" + p.id)
    #heading(level: 1, p.title) #label("ch-" + p.id)
    #toc(p.id)
    #{
      set heading(offset: 1)
      include "../typ/" + p.file
    }
    #metadata(none) #label("end-" + p.id)
  ])
}

#document(href("tutor"), title: "The tutor", shell("tutor", "The tutor")[
  #heading(level: 1)[The tutor] <tutor>
  The tutor as the editor shows it (#raw("Tutor"), or #raw("SPC h t")).
  #el("pre", (class: "tutor"))[#read(tutor-path)]
])