website/templates/layout.pug

mixin nav-item(url, name, color)
    a(href=url, style=`color: ${color}`)= name + " "

mixin image(src)
    if typeof src === "string"
        img(src=src)
    else
        picture
            each pair in src
                if pair[0] == "_fallback"
                    img(src=pair[1], loading="lazy")
                else
                    source(srcset=pair[1], type=pair[0])

doctype html
html(lang="en")
    head
        title= `${title} @ ${name}`
        script(src="/assets/js/page.js", defer=true)
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        if description
            meta(name="description", content=description)
            meta(property="og:description", content=description)
        meta(property="og:title", content=title)
        meta(property="og:type", content="website")
        meta(property="og:url", content=`https://${domain}`)
        meta(property="og:site_name", content=name)
        link(rel="manifest", href="/assets/manifest.webmanifest")
        link(rel="shortcut icon", href="/assets/images/logo256.png", type="image/png")
        meta(content=`https://${domain}/assets/images/logo256.png`, property="og:image")
        if katex
            link(rel="stylesheet", href="/assets/katex.min.css")
        link(rel="alternate", type="application/rss+xml", title="RSS", href="/rss.xml")
        style!= css
        if comments !== "off"
            script(src=`https://${domain}/rsapi/static/comments.js`, async=true)
    body
        .nav-container
            nav
                a.logocont(href="/")
                    img.logo(src="/assets/images/logo256.png", alt="osmarks.net logo")
                    .logotext osmarks
                +nav-item(`/me/`, "About Me", "#5AF2F2")
                +nav-item(`https://b.${domain}`, "Microblog", "#F25AF2")
                +nav-item(`https://mse.${domain}/`, "Meme Search", "#5AF25A")
                +nav-item(`https://docs.${domain}/random`, "Documentation", "#F2A65A")
                +nav-item(`https://status.${domain}`, "Status", "#EEDC5B")
                +nav-item(`#`, "Search", "#12E193")
                block nav-items
        .sidenotes-container
            main(class=!haveSidenotes ? "fullwidth" : "")
                .header
                    h1.page-title= title
                    block under-title
                    if !internal
                        h3.deemph
                            if updated
                                span= `Updated ${renderDate(updated)}`
                                if created || wordCount
                                    span= " / "
                            if created
                                span= `Created ${renderDate(created)}`
                                if wordCount
                                    span= " / "
                            if wordCount
                                span= `${metricPrefix(wordCount, "")} words`
                    if description
                        em.description!= description
                    if prev
                        div
                            .prev
                                span= "← "
                                a(href=`/${prev.slug}`)= prev.title
                    if next
                        div
                            .next
                                a(href=`/${next.slug}`)= next.title
                                span= " →"
                block content

            if haveSidenotes
                .sidenotes

            if comments !== "off"
                main.isso
                    h2 Comments
                    section(id="comments-wrapper")

            if squiggle
                script(src="/assets/js/squiggle_rt.js", async=true)