lib.typ

#let serve(paths) = {
  for p in paths {
    asset(p, read("assets/" + p, encoding: none))
  }
}

#let wrapper(body, crumbs) = {
  html.link(rel: "icon", type: "image/x-icon", href: "/favicon.ico")
  html.link(rel: "stylesheet", href: "/styles.css")

  html.nav(class: "crumbs", crumbs.join([/]))
  html.hr()
  body
  html.br()
  html.hr()
}

#let page(path, title: none, lbl: none, body) = context {
  // Navigation system
  let segs = path.split("/").map(s => s.replace(".html", ""))
  let ancestors = segs.slice(0, segs.len() - 1)
  let crumbs = (link(label("index"))[\~], )
  for seg in ancestors {
    crumbs.push(link(label(seg))[#seg])
  }

  // Render figures as SVG's on html export
  show figure: it => {
    if target() == "html" {
      html.elem("figure", attrs: (class: "typst"), html.frame(it))
    } else {
      it
    }
  }

  // Hack to show alignment in HTML, courtesy @t0mstone from the typst discord.
  show align: it => context if std.target() == "html" {
    let body = it.body
    if it.alignment.x != none {
      body = html.elem("flex-align", attrs: (axis: "x", align: repr(it.alignment.x)), body)
    }
    if it.alignment.y != none {
      body = html.elem("flex-align", attrs: (axis: "y", align: repr(it.alignment.y)), body)
    }
    body
  } else { it }

  // Remove index.html from the ends of links.
  // show link: it => {
  //   let dest = if type(it.dest) == label [ it.dest.name ] else if type(it.dest) == str
  //   if(type(it.dest) != str) {
  //     it
  //   } else if it.dest.ends-with("index.html") {
  //     link(it.dest.trim("index.html", at: end))[it.body]
  //   } else {
  //     it // Leave other links untouched
  //   }
  // }

  // Wrap it all up

  let wrapped = wrapper(body, crumbs)
    
  if label != none {
    [#document(path, title: title, description: [Hello there], wrapped) #label(lbl)]
  } else {
    document(path, title: title, wrapped)
  }
}