many more document elements

5 files changed, 82 insertions, 29 deletions

diff --git a/book/book.js b/book/book.js
index 00c83426..2ae7335a 100644
--- a/book/book.js
+++ b/book/book.js
@@ -1,16 +1,15 @@
 
 const tr = t => ({ translation: { id: t, params: [] } })
 const plain = t => ({ text: t })
-const par_raw = (s, th, bold) => ({
-    t: "par", es: [{
-        t: "text",
-        s,
-        color: th ? "#ffffff" : "#000000",
-        size: 15,
-        bold,
-        font: "FreeSans"
-    }]
+const span_raw = (s, th, bold) => ({
+    t: "text",
+    s,
+    color: th ? "#ffffff" : "#000000",
+    size: 15,
+    bold,
+    font: "FreeSans"
 })
+const par_raw = (s, th, bold) => ({ t: "par", es: [span_raw(s, th, bold)] })
 const par = (t, th, bold) => par_raw(tr(t), th, bold)
 const h2 = (t, th) => ({
     t: "text",
@@ -26,14 +25,24 @@ const emph = (t, th) => ({
     size: 20,
     font: "Gluten"
 })
+const label = (id, e) => ({ t: "label", id, e })
+const ref = (id, e) => ({ t: "ref", id, e })
 const title = () => ({
     t: "page", background: "cover", es: [
         { t: "text", s: tr("b.title"), size: 70, color: "#000000", font: "Great Vibes" }
     ]
 })
-const toc = () => ({
+const toc = (pages) => ({
     t: "page", background: "toc", es: [
-        { t: "text", s: plain("TODO: Table of contents"), size: 20, font: "FreeSans", color: "#000000" }
+        h2("b.toc"),
+        {
+            t: "list", es: pages.map(p => ref(p.ref, ({
+                t: "container", es: [
+                    par(p.title),
+                    { t: "align", dir: "flow_end", e: par_raw(plain(`${p.page}`)) }
+                ]
+            })))
+        },
     ]
 })
 const about = () => ({
@@ -67,25 +76,29 @@ const recipe = (n, i, th = false, extra = []) => ({
     ]
 })
 
+const toc_pages = [
+    recipe("tomato_soup", ["leek", "tomato"]),
+    recipe("bun", ["flour"], true),
+    recipe("burger", ["lettuce", "tomato", "cheese", "steak", "bun"], true, [par("b.burger.variation", true)]),
+    recipe("mochi", ["rice", "strawberry"], true),
+    recipe("curry", ["coconut", "tomato", "leek", "rice"], true),
+    recipe("icecream", ["strawberry", "coconut"]),
+    recipe("nigiri", ["fish", "rice"]),
+    {
+        t: "page", background: "drinks", es: [
+            { t: "text", s: tr(`b.water`), color: "#ffffff", size: 30, font: "Great Vibes" },
+            par("b.water.steps", true),
+            { t: "text", s: tr(`b.strawberry_shake`), color: "#ffffff", size: 30, font: "Great Vibes" },
+            par("b.strawberry_shake.steps", true),
+        ]
+    },
+    about()
+]
+
 console.log(JSON.stringify({
     t: "document", es: [
         title(),
-        toc(),
-        recipe("tomato_soup", ["leek", "tomato"]),
-        recipe("bun", ["flour"], true),
-        recipe("burger", ["lettuce", "tomato", "cheese", "steak", "bun"], true, [par("b.burger.variation", true)]),
-        recipe("mochi", ["rice", "strawberry"], true),
-        recipe("curry", ["coconut", "tomato", "leek", "rice"], true),
-        recipe("icecream", ["strawberry", "coconut"]),
-        recipe("nigiri", ["fish", "rice"]),
-        {
-            t: "page", background: "drinks", es: [
-                { t: "text", s: tr(`b.water`), color: "#ffffff", size: 30, font: "Great Vibes" },
-                par("b.water.steps", true),
-                { t: "text", s: tr(`b.strawberry_shake`), color: "#ffffff", size: 30, font: "Great Vibes" },
-                par("b.strawberry_shake.steps", true),
-            ]
-        },
-        about()
+        toc(toc_pages.map((p, i) => ({ page: i + 3, title: p.es[0].s.translation.id, ref: `page.${i}` }))),
+        ...toc_pages.map((p, i) => label(`page.${i}`, p))
     ]
 }))
diff --git a/book/book.typ b/book/book.typ
index 2dc7bdf5..8b1c3e3d 100644
--- a/book/book.typ
+++ b/book/book.typ
@@ -50,13 +50,23 @@
   ] else if elem.t == "list" [
     #list(..elem.es.map(element))
   ] else if elem.t == "par" [
-    #par(..elem.es.map(element))
+    #par[#for x in elem.es.map(element) [#x]]
   ] else if elem.t == "table" [
     #table(columns: elem.es.at(0).len(), ..elem.es.flatten().map(element))
   ] else if elem.t == "conditional" [
     #if (elem.cond in document_flags) == elem.value [
       #element(elem.e)
     ]
+  ] else if elem.t == "ref" [
+    #link(label(elem.id), element(elem.e))
+  ] else if elem.t == "label" [
+    #element(elem.e) #label(elem.id)
+  ] else if elem.t == "align" [
+    #align(if elem.dir == "flow_end" { right } else { bottom }, element(elem.e))
+  ] else if elem.t == "container" [
+    #for e in elem.es [
+      #element(e)
+    ]
   ] else [
     #elem
   ]
diff --git a/book/locale/en.ini b/book/locale/en.ini
index 303c6786..b8bb12d1 100644
--- a/book/locale/en.ini
+++ b/book/locale/en.ini
@@ -44,3 +44,4 @@ b.tomato_soup.steps=Firstly take your fresh tomato and puree it in a light blue
 b.tomato_soup=Tomato Soup
 b.water.steps=A glass is filled with nutricious locally-sourced tap-water in a sink.
 b.water=Water
+b.toc=Table of Contents
diff --git a/server/protocol/src/lib.rs b/server/protocol/src/lib.rs
index ca6e7c8c..2ef07015 100644
--- a/server/protocol/src/lib.rs
+++ b/server/protocol/src/lib.rs
@@ -359,6 +359,10 @@ pub enum DocumentElement {
         background: Option<String>,
         es: Vec<DocumentElement>,
     },
+    /// Implicit element layouting
+    Container {
+        es: Vec<DocumentElement>,
+    },
     List {
         /// Should only contain par or text elements
         es: Vec<DocumentElement>,
@@ -387,4 +391,25 @@ pub enum DocumentElement {
         value: bool,
         e: Box<DocumentElement>,
     },
+    /// Makes the child element clickable that jumps to the label with the same id
+    Ref {
+        id: String,
+        e: Box<DocumentElement>,
+    },
+    /// Declares a label
+    Label {
+        id: String,
+        e: Box<DocumentElement>,
+    },
+    Align {
+        dir: DocumentAlign,
+        e: Box<DocumentElement>,
+    },
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Encode, Decode)]
+#[serde(rename_all = "snake_case")]
+pub enum DocumentAlign {
+    FlowEnd,
+    Bottom,
 }
diff --git a/test-client/protocol.ts b/test-client/protocol.ts
index 55d2fc15..25d33cb5 100644
--- a/test-client/protocol.ts
+++ b/test-client/protocol.ts
@@ -110,3 +110,7 @@ export type DocumentElement =
     | { t: "par", es: DocumentElement[] }
     | { t: "text", s: Message, size: number, color?: string, font?: string, bold: boolean }
     | { t: "conditional", cond: string, value: boolean, e: DocumentElement }
+    | { t: "label", id: string, e: DocumentElement }
+    | { t: "ref", id: string, e: DocumentElement }
+    | { t: "container", es: DocumentElement[] }
+    | { t: "align", dir: "flow_end" | "bottom", e: DocumentElement }