big cleanup, minify

content/01-core.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/core/",
-  title: [Core Mechanics],
-)
+#set document(title: [Core Mechanics])
+#show: docs-page("/core.html")
 
 #tip[
   Until version 26.2, this only works on multiplayer servers. See @singleplayer.

content/02-interference.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/interference/",
-  title: [Interference],
-)
+#set document(title: [Interference])
+#show: docs-page("interference.html")
 
 = Entity Spawns
 = Single-Player (before 26.2) <singleplayer>

content/03-design.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/design/",
-  title: [Design Considerations],
-)
+#set document(title: [Design Considerations])
+#show: docs-page("/design-tips.html")
 
 = Tilesets
 == Binary vs Lexicographic

content/04-channels.typ

@@ -1,12 +1,8 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/channels/",
-  title: [Channels],
-)
+#set document(title: [Channels])
+#show: docs-page("/channels.html")
 
 = Static Channel Allocation
 = Dynamic Channel Selectors
 = Looped Connections
-
-

content/05-transport.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/transport/",
-  title: [Transport Protocols],
-)
+#set document(title: [Transport Protocols])
+#show: docs-page("/transport-protocols.html")
 
 = Mod 4 Binary
 = Mod 2 Binary

content/06-bulk.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/bulk/",
-  title: [Bulk Transport],
-)
+#set document(title: [Bulk Transport])
+#show: docs-page("/bulk-transport.html")
 
 = Tileable Receivers
 = Interleaved vs Sequential Channels

content/07-network.typ

@@ -1,9 +1,7 @@
 #import "/docs.typ": docs-page, note, tip, warn
 
-#show: docs-page.with(
-  route: "/network/",
-  title: [Network Protocols],
-)
+#set document(title: [Network Protocols])
+#show: docs-page("/network-protocols.html")
 
 = Collision Prevention
 == Checkbit

docs.typ

@@ -1,86 +1,116 @@
+#let site-title = [The Wireless Masterclass]
+
 #import "/static/index.typ": stylesheets
 
-#let docs-page(title: none, route: none, content) = {
-  document(
-    route + "index.html",
-    title: title,
-    html.html({
-      html.head({
-        html.meta(charset: "utf-8")
-        html.meta(name: "viewport", content: "width=device-width, initial-scale=1")
-        html.meta(name: "color-scheme", content: "dark light")
-        for stylesheet in stylesheets {
-          html.link(rel: "stylesheet", href: stylesheet)
-        }
-        html.title(context title)
-      })
-      html.body({
-        html.a(href: "#main", [Skip to content])
+#let docs-page(path, header: auto, footer: auto) = main => document(path, html.html(
+  lang: "en_US",
+  {
+    html.head({
+      html.meta(charset: "utf-8")
+      html.meta(name: "viewport", content: "width=device-width, initial-scale=1")
+      html.meta(name: "color-scheme", content: "dark light")
+      for stylesheet in stylesheets { html.link(rel: "stylesheet", href: stylesheet) }
+      html.title(context document.title)
+    })
+    html.body({
+      if (header != none) {
+        html.header(if (header == auto) {
+          context {
+            let doc = query(document).first()
+            link(doc.location(), doc.title)
+          }
 
-        // html.header([header])
+          title()
 
-        html.nav(aria-label: "Table of Contents", context {
-          html.ul({
-            for doc in query(document) {
-              html.li({
-                html.details(open: doc == query(selector(document).before(here())).last(), {
-                  html.summary(link(doc.location(), doc.title))
-                  html.ul(context for sec in query(selector(heading.where(level: 1)).within(doc.location())) {
-                    html.li(link(
-                      sec.location(),
-                      [#counter(heading).display(at: sec.location()) #sec.body],
-                    ))
-                  })
-                })
-              })
-            }
-          })
-        })
-
-        html.nav(aria-label: "Outline", context {
-          let doc = query(selector(document).before(here())).last()
-          show html.elem.where(tag: "nav"): it => it.body
-          show html.elem.where(tag: "ol"): it => html.elem("ul", it.body)
-          outline(title: none, depth: 2, target: selector(heading).within(doc.location()))
-        })
-
-        html.main(id: "main", {
-          html.h1(title)
-          content
+          context {
+            let doc = query(selector(document).before(here())).last()
+            outline(title: none, target: selector(heading).within(doc.location()))
+          }
 
           html.nav(aria-label: "Page Navigation", context {
-            let prevs = query(selector(document).before(here()))
-            let nexts = query(selector(document).after(here()))
-
-            html.ul({
-              if (prevs.len() > 1) {
-                let prev = prevs.at(-2)
+            html.ol(style: "list-style-type: none", {
+              let nexts = query(selector(document).after(here()))
+              if (nexts.len() > 0) {
                 html.li(
-                  aria-label: "Prev Page",
-                  link(prev.location(), prev.title),
+                  link(nexts.at(0).location(), [Next: #nexts.at(0).title]),
                 )
               }
 
-              if (nexts.len() > 0) {
-                show html.elem.where(tag: "a"): it => it
-                let next = nexts.at(0)
+              let prevs = query(selector(document).before(here()))
+              if (prevs.len() > 1) {
                 html.li(
-                  aria-label: "Next Page",
-                  link(next.location(), next.title),
+                  link(prevs.at(-2).location(), [Previous: #prevs.at(-1).title]),
                 )
               }
             })
           })
+        } else {
+          header
         })
 
-        // html.footer([footer])
-      })
-    }),
+        divider()
+      }
+      html.main(main)
+      if (footer != none) {
+        divider()
+
+        html.footer({
+          if (footer == auto) {
+            html.nav(aria-label: "Page Navigation", context {
+              html.ol(style: "list-style-type: none", {
+                let nexts = query(selector(document).after(here()))
+                if (nexts.len() > 0) {
+                  html.li(
+                    link(nexts.at(0).location(), [Next: #nexts.at(0).title]),
+                  )
+                }
+
+                let prevs = query(selector(document).before(here()))
+                if (prevs.len() > 1) {
+                  html.li(
+                    link(prevs.at(-2).location(), [Previous: #prevs.at(-1).title]),
+                  )
+                }
+              })
+            })
+          } else {
+            footer
+          }
+        })
+      }
+    })
+  },
+))
+
+#let callout(kind: str, label: str, body) = html.section(class: kind + " callout", context {
+  let depth = counter(heading).at(here()).len() + 1
+  heading(
+    depth: depth,
+    outlined: false,
+    numbering: none,
+    label,
   )
-}
+  " "
+  body
+})
 
-#let callout(kind: str, body) = html.aside(aria-label: kind, body)
+#let note = callout.with(kind: "note", label: "Note:")
+#let warn = callout.with(kind: "warn", label: "Warning:")
+#let tip = callout.with(kind: "tip", label: "Tip:")
 
-#let note = callout.with(kind: "note")
-#let warn = callout.with(kind: "warn")
-#let tip = callout.with(kind: "tip")
+
+#let callout(kind: str, label: str, body) = html.section(class: kind + " callout", context {
+  let depth = counter(heading).at(here()).len() + 1
+  heading(
+    depth: depth,
+    outlined: false,
+    numbering: none,
+    label,
+  )
+  " "
+  body
+})
+
+#let note = callout.with(kind: "note", label: "Note:")
+#let warn = callout.with(kind: "warn", label: "Warning:")
+#let tip = callout.with(kind: "tip", label: "Tip:")

index.typ

@@ -1,20 +1,26 @@
-#import "/docs.typ": docs-page, note, tip, warn
+#import "/docs.typ": docs-page, note
 
-#show: docs-page.with(
-  route: "/",
-  title: [The Wireless Masterclass],
-)
+#set document(title: [The Wireless Masterclass])
+#show: docs-page("index.html", footer: none, header: none)
 
-= Entity ID Wireless Redstone <home>
+#title()
 
-Welcome! Here, we will talk about Entity ID based wireless redstone (EID Wireless) for Minecraft Java Edition 1.14+.
+Everything I know about Entity ID based wireless redstone (EID Wireless) for Minecraft Java Edition 1.14+.
 
-#note[
-  Until version 26.2, this only works on multiplayer servers. See @singleplayer.
-]
+#note[ Until version 26.2, this only works on multiplayer servers. See @singleplayer. ]
 
-```python
-def foo():
-    pass
-```
+#context {
+  heading(numbering: none, outlined: false)[Outline]
 
+  html.nav({
+    html.ol(style: "list-style-type: none", {
+      for doc in query(selector(document).after(here())) {
+        show html.elem.where(tag: "nav"): it => it.body
+        html.li({
+          html.div(link(doc.location(), doc.title))
+          outline(title: none, depth: 1, target: selector(heading).within(doc.location()))
+        })
+      }
+    })
+  })
+}

main.typ

@@ -1,12 +1,32 @@
 #set heading(numbering: "1.")
 
-#include "static/index.typ"
-#include "index.typ"
+// #import "docs.typ": docs-page
 
-#include "content/core.typ"
-#include "content/interference.typ"
-#include "content/design.typ"
-#include "content/channels.typ"
-#include "content/transport.typ"
-#include "content/bulk.typ"
-#include "content/network.typ"
+// #show: it => document("/index.html", it)
+
+// #include "static/index.typ"
+
+// #docs-page(include "index.typ") <index>
+// #docs-page(include "content/00-intro.typ")
+
+
+// #let docs-page(it) = document("index.html", {
+//   context {
+//     repr(query(selector(metadata).before(<front-matter>)))
+//   }
+//   it
+// })
+
+// #let docs-page(it) = context {
+// }
+
+#include "static/index.typ"
+
+#include "index.typ"
+#include "content/01-core.typ"
+#include "content/02-interference.typ"
+#include "content/03-design.typ"
+#include "content/04-channels.typ"
+#include "content/05-transport.typ"
+#include "content/06-bulk.typ"
+#include "content/07-network.typ"

static/index.typ

@@ -1,19 +1,5 @@
 #let fonts = (
-  (src: "/font/Minecraft-Seven_v2.woff2", name: "Mojangles", style: "normal", weight: 400),
-  (src: "/font/LibertinusKeyboard-Regular.woff2", name: "Libertinus Keyboard", style: "normal", weight: 400),
-  (src: "/font/LibertinusMath-Regular.woff2", name: "Libertinus Math", style: "normal", weight: 400),
-  (src: "/font/LibertinusMono-Regular.woff2", name: "Libertinus Mono", style: "normal", weight: 400),
-  (src: "/font/LibertinusSans-Bold.woff2", name: "Libertinus Sans", style: "normal", weight: 700),
-  (src: "/font/LibertinusSans-Italic.woff2", name: "Libertinus Sans", style: "italic", weight: 400),
-  (src: "/font/LibertinusSans-Regular.woff2", name: "Libertinus Sans", style: "normal", weight: 400),
-  (src: "/font/LibertinusSerif-Bold.woff2", name: "Libertinus Serif", style: "normal", weight: 700),
-  (src: "/font/LibertinusSerif-BoldItalic.woff2", name: "Libertinus Serif", style: "italic", weight: 700),
-  (src: "/font/LibertinusSerif-Italic.woff2", name: "Libertinus Serif", style: "italic", weight: 400),
-  (src: "/font/LibertinusSerif-Regular.woff2", name: "Libertinus Serif", style: "normal", weight: 400),
-  (src: "/font/LibertinusSerif-Semibold.woff2", name: "Libertinus Serif", style: "normal", weight: 600),
-  (src: "/font/LibertinusSerif-SemiboldItalic.woff2", name: "Libertinus Serif", style: "italic", weight: 600),
-  (src: "/font/LibertinusSerifDisplay-Regular.woff2", name: "Libertinus Display", style: "normal", weight: 400),
-  (src: "/font/LibertinusSerifInitials-Regular.woff2", name: "Libertinus Initials", style: "normal", weight: 400),
+  (src: "/font/minecraft-seven-ascii.woff2", name: "Mojangles", style: "normal", weight: 400, unicodes: "U+0000-007F"),
 )
 
 #asset(
@@ -25,6 +11,7 @@
       "font-style:" + str(it.style) + ";"
       "font-weight:" + str(it.weight) + ";"
       "src: url(" + repr(it.src) + ");"
+      if ("unicodes" in it) { "unicode-range: " + str(it.unicodes) + ";" }
       "}"
     })
     .join(" "),

static/style.css

@@ -1,217 +1,95 @@
 :root {
-    font-family: "Libertinus Serif", serif;
-    line-height: 1.3em;
+    font: 1rem / 1.5 sans-serif;
 }
 
-@media (prefers-color-scheme: light) {
-    :root {
-        --fg: black;
-        --bg: white;
-    }
-
-    [aria-label="note"] {
-        --fg: mediumblue;
-    }
-
-    [aria-label="warn"] {
-        --fg: brown;
-    }
-
-    [aria-label="tip"] {
-        --fg: forestgreen;
-    }
+.tip {
+    color: forestgreen;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --fg: rgb(240 240 240);
-        --bg: rgb(30 30 30);
-    }
-
-    [aria-label="note"] {
-        --fg: cyan;
-    }
-
-    [aria-label="warn"] {
-        --fg: coral;
-    }
-
-    [aria-label="tip"] {
-        --fg: springgreen;
-    }
+.warn {
+    color: brown;
 }
 
-nav, h1, h2, h3, h4, h5, h6 {
-    font-family: "Mojangles", "monospace";
-}
-
-math {
-    font-family: "Libertinus Math", math;
-}
-
-code {
-    font-family: "Libertinus Mono", monospace;
-}
-
-nav a {
-    text-decoration: none;
-}
-
-nav a:hover {
-    text-decoration: underline;
+.note {
+    color: mediumblue;
 }
 
 a {
-    color: var(--fg);
+    color: inherit;
 }
 
-nav ul {
-    list-style-type: none;
-    padding-inline: 2ch;
+a:hover {
+    color: LinkText;
 }
 
-nav > ul {
-    padding-inline: 0;
+@media (prefers-color-scheme: dark) {
+    .tip {
+        color: springgreen;
+    }
+
+    .warn {
+        color: coral;
+    }
+
+    .note {
+        color: cyan;
+    }
 }
 
-nav li {
-    margin-block: 0.5em;
+h1, h2, h3, h4, h5, h6, nav {
+    font-family: Mojangles, monospace;
 }
 
-nav summary {
-    display: block;
+ol {
+    padding-inline-start: 2ch;
 }
 
-nav details summary:hover::after {
-    content: "⮞";
-    float: right;
+nav > ol {
+    padding-inline-start: 0;
 }
 
-nav details[open] summary::after {
-    content: "⮟";
-    float: right;
-}
-
-html {
-    display: flex;
-    justify-content: center;
-    min-height: 100%;
-    min-width: 100%;
+ol ol {
+    margin-block-end: 1em;
 }
 
 body {
-    display: grid;
-    grid-template-columns: 25ch 80ch 25ch;
-    grid-template-rows: auto auto 1fr auto;
-    grid-gap: 4ch;
-    width: auto;
-    min-height: 100%;
-    margin-inline: auto;
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 0 10px;
 }
 
-body > a[href="#main"] {
-    position: absolute;
-    top: 0;
-    left: 0;
+.callout {
+    margin: 1em -1em;
+    padding: 0.5em 1em;
+    background: rgb(from currentColor r g b / 5%);
+    border: solid currentColor;
+    border-width: 1px 0;
 }
 
-body > a[href="#main"]:not(:focus) {
-    transform: translateY(-2em);
+hr {
+    margin: 0 -1em;
 }
 
-body > header {
-    grid-column: 1 / 3;
-    grid-row: 1;
+header p:has(+h1) {
+    margin-block-end: 0;
+    font-family: Mojangles, monospace;
 }
 
-nav[aria-label="Table of Contents"] {
-    grid-column: 1;
-    grid-row: 2;
+header p + h1 {
+    margin-block-start: 0;
 }
 
-nav[aria-label="Outline"] {
-    grid-column: 3;
-    grid-row: 2;
-}
-
-nav[aria-label="Outline"]:before {
-    content: "On this Page";
-    display: block;
-    margin-block: 1em;
-}
-
-nav[aria-label="Page Navigation"] > ul {
-    grid-column: 2;
-    grid-row: 3;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4pt;
-}
-
-nav[aria-label="Page Navigation"] > ul > li > a {
-    display: block;
-    text-align: center;
-    padding: 1em;
-
-    background: rgb(from var(--fg) r g b / 15%);
-    border: 1pt solid rgb(from var(--fg) r g b / 50%);
-    border-radius: 3pt;
-}
-
-li[aria-label="Next Page"] {
-    grid-column: 2;
-}
-
-li[aria-label="Prev Page"] {
-    grid-column: 1;
-}
-
-li[aria-label="Next Page"] > a:after {
-    content: "Next Page";
-    display: block;
-    font-size: small;
-}
-
-li[aria-label="Prev Page"] > a:after {
-    content: "Previous Page";
-    display: block;
-    font-size: small;
-}
-
-body > main {
-    grid-column: 2;
-    grid-row: 2;
-}
-
-body > footer {
-    grid-column: 1 / 4;
-    grid-row: 4;
-}
-
-aside {
-    border-block: 1pt solid rgba(from var(--fg) r g b / 50%);
-    background: rgba(from var(--fg) r g b / 15%);
-    color: var(--fg);
-    margin-block: 1em;
-    padding-block: 1ch;
-    padding-inline: 1em;
-    margin-inline: -1em;
-}
-
-aside[aria-label="note"]:before {
-    content: "Note:";
-    margin-inline-end: 1ch;
-    font-family: "Mojangles", monospace;
-}
-
-aside[aria-label="warn"]:before {
-    content: "Caution:";
-    margin-inline-end: 1ch;
-    font-family: "Mojangles", monospace;
-}
-
-aside[aria-label="tip"]:before {
-    content: "Tip:";
-    margin-inline-end: 1ch;
-    font-family: "Mojangles", monospace;
+.callout h1,
+.callout h2,
+.callout h3,
+.callout h4,
+.callout h5,
+.callout h6,
+.callout h1 + p,
+.callout h2 + p,
+.callout h3 + p,
+.callout h4 + p,
+.callout h5 + p,
+.callout h6 + p {
+    display: inline;
 }