working on toc

content/bulk.typ

@@ -9,4 +9,5 @@
 = Interleaved vs Sequential Channels
 = Chained vs Shared Reference
 = Broadcast and Multicast
+= Entity Batching
 

content/core.typ

@@ -5,6 +5,18 @@
   title: [Core Mechanics],
 )
 
+#tip[
+  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.
+]
+
+#warn[
+  Until version 26.2, this only works on multiplayer servers. See @singleplayer.
+]
+
 = Entity IDs
 = Stationary Item Optimization
 = Observable Drop Delay

content/toc.typ

@@ -0,0 +1,15 @@
+#import "/docs.typ": docs-page, note, tip, warn
+
+#show: docs-page.with(
+  route: "/toc/",
+  title: [Contents],
+)
+
+#context for doc in query(document) {
+  let target = selector(heading).within(doc.location())
+
+  show outline.entry: it => {
+  }
+
+  outline(depth: 1, target: target, title: link(doc.location(), doc.title))
+}

docs.typ

@@ -15,10 +15,29 @@
         html.title(context title)
       })
       html.body({
-        html.header({
+        html.header(context {
-          html.h1(context title)
+          html.h1(title)
         })
-        html.main(content)
+      })
+      html.main(content)
+
+      html.footer(context {
+        let prev = query(selector(document).before(here()))
+        let next = query(selector(document).after(here()))
+
+        html.nav(class: "panel", {
+          if (prev.len() > 1) {
+            link(prev.at(-2).location(), html.span(class: "go-prev", prev.at(-2).title))
+          }
+          if (next.len() > 0) {
+            link(next.at(0).location(), html.span(class: "go-next", next.at(0).title))
+          }
+        })
+
+        // html.nav(class: "panel", {
+        //   let main = query(selector(document).before(<home>)).last()
+        //   link(main.location(), html.span(class: "go-home", main.title))
+        // })
       })
     }),
   )

index.typ

@@ -5,36 +5,17 @@
   title: [The Wireless Masterclass],
 )
 
-Welcome! Here, we will talk about Entity ID based wireless redstone for Minecraft Java Edition.
+= Entity ID Wireless Redstone <home>
 
-#warn[
+Welcome! Here, we will talk about Entity ID based wireless redstone (EID Wireless) for Minecraft Java Edition 1.14+.
-  Until version 26.2, this only works on multiplayer servers. \
+
-  Starting with version 26.2, singleplayer is also supported. See @singleplayer for details.
+#note[
+  Until version 26.2, this only works on multiplayer servers. See @singleplayer.
 ]
 
-#context {
+#html.nav(
-  list(
+  context for doc in query(document) {
-    ..query(document).map(
+    html.h3(link(doc.location(), doc.title))
-      it => {
+    // outline(title: none, depth: 1, target: selector(heading).within(doc.location()))
-        link(it.location(), it.title)
+  },
-        list(..query(heading.where(level: 1).within(it.location())).map(it => link(it.location(), it.body)))
+)
-      },
-    ),
-  )
-
-  // for page in query(title) { page }
-  // outline(target: selector.or(heading))
-
-
-  // repr(query(selector(heading).within(locate(doc.location()))))
-
-  //for item in query(selector.or(heading.where(depth < 2), title)) {
-  //str(item.body)
-  //}
-}
-
-// #outline(title: none, depth: 2)
-
-= Objectives
-== Use Cases
-== Advantages and Limitations

main.typ

@@ -2,6 +2,7 @@
 
 #include "static/index.typ"
 #include "index.typ"
+#include "content/toc.typ"
 
 #include "content/core.typ"
 #include "content/interference.typ"
@@ -10,3 +11,4 @@
 #include "content/transport.typ"
 #include "content/bulk.typ"
 #include "content/network.typ"
+

static/style.css

@@ -1,13 +1,88 @@
+@media (prefers-color-scheme: dark) {
+:root {
+    --mode-note: cyan;
+    --mode-caution: coral;
+    --mode-tip: springgreen;
+
+    --bg: #111;
+    --fg: #eee;
+    --fg-dim: #aaa;
+}
+}
+
+@media (prefers-color-scheme: light) {
+:root {
+    --mode-note: mediumblue;
+    --mode-caution: brown;
+    --mode-tip: forestgreen;
+
+    --bg: #eee;
+    --fg: #111;
+    --fg-dim: #555;
+}
+}
+
 html {
     font-family: "Libertinus Serif", serif;
     font-size: 18pt;
     line-height: 1.5em;
+    background: var(--background);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, nav li {
     font-family: "Mojangles", "monospace";
 }
 
+nav > * {
+    margin-block: 0;
+}
+
+nav {
+    margin-block: 1em;
+}
+
+footer > nav {
+    display: flex;
+    flex-direction: row;
+    gap: 1ch;
+}
+
+footer > nav > *
+{
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    text-align: center;
+    font-family: "Mojangles", "monospace";
+
+    text-decoration: none;
+
+    --mode-color: var(--fg-dim);
+}
+
+footer > nav > *:hover {
+    --mode-color: var(--fg);
+}
+
+
+.go-next::after {
+    display: block;
+    content: "Next page";
+    font-size: smaller;
+}
+
+.go-prev::after {
+    display: block;
+    content: "Previous page";
+    font-size: smaller;
+}
+
+.go-home::after {
+    display: block;
+    content: "Home page";
+    font-size: smaller;
+}
+
 code {
     font-family: "Libertinus Mono", monospace;
 }
@@ -25,18 +100,31 @@ li > * {
     margin-block: 0;
 }
 
+footer > nav > * ,
 .callout {
+    color: var(--mode-color);
+    border-color: rgba(from var(--mode-color) r g b);
+    background-color: rgba(from var(--mode-color) r g b / 5%);
+}
+
+footer > nav > * {
     display: block;
-    margin-inline: -2ch;
     padding-inline: 2ch;
     padding-block: 1ch;
     border-radius: 4pt;
     border-width: 1pt;
     border-style: solid;
+}
 
-    color: var(--mode-color);
+.callout {
-    border-color: rgba(from var(--mode-color) r g b);
+    display: block;
-    background-color: rgba(from var(--mode-color) r g b / 5%);
+    padding-inline: 2ch;
+    padding-block: 1ch;
+    border-width: 1pt 0;
+    border-style: solid;
+
+    margin-inline: -2ch;
+    margin-block: 1em;
 }
 
 .callout::before {
@@ -52,41 +140,17 @@ li > * {
 }
 
 .note {
+    --mode-color: var(--mode-note);
     --mode-name: "Note";
 }
 
 .caution {
+    --mode-color: var(--mode-caution);
     --mode-name: "Caution";
 }
 
 .tip {
+    --mode-color: var(--mode-tip);
     --mode-name: "Tip";
 }
 
-@media (prefers-color-scheme: dark) {
-    .note {
-        --mode-color: cyan;
-    }
-
-    .caution {
-        --mode-color: coral;
-    }
-
-    .tip {
-        --mode-color: springgreen;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .note {
-        --mode-color: blue;
-    }
-
-    .caution {
-        --mode-color: orangered;
-    }
-
-    .tip {
-        --mode-color: seagreen;
-    }
-}