3 files changed, 96 insertions, 51 deletions

diff --git a/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts b/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
index d1559f2f..07071441 100644
--- a/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
+++ b/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
@@ -529,20 +529,13 @@ function processEmail(node: DjotEmail): Element {
   };
 }
 
-function processFootnoteReference(node: DjotFootnoteReference): Node {
-  void node;
-  // TODO
+function processFootnoteReference(node: DjotFootnoteReference): Element {
   return {
-    kind: "text",
-    content: "",
-    raw: false,
+    kind: "element",
+    name: "footnoteref",
+    attributes: new Map([["reference", node.text]]),
+    children: [],
   };
-  // return {
-  //   kind: "element",
-  //   name: "footnoteref",
-  //   attributes: new Map([["reference", node.text]]),
-  //   children: [],
-  // };
 }
 
 function processUrl(node: DjotUrl): Element {
@@ -799,25 +792,24 @@ export function djot2ndoc(doc: DjotDoc): Element {
 
   // Process footnotes if any exist
   if (doc.footnotes && Object.keys(doc.footnotes).length > 0) {
-    // TODO
-    // const footnoteSection: Element = {
-    //   kind: "element",
-    //   name: "section",
-    //   attributes: new Map([["class", "footnotes"]]),
-    //   children: [],
-    // };
-    //
-    // for (const [id, footnote] of Object.entries(doc.footnotes)) {
-    //   const footnoteElement: Element = {
-    //     kind: "element",
-    //     name: "footnote",
-    //     attributes: new Map([["id", id]]),
-    //     children: footnote.children.map(processBlock),
-    //   };
-    //   footnoteSection.children.push(footnoteElement);
-    // }
-    //
-    // children.push(footnoteSection);
+    const footnoteSection: Element = {
+      kind: "element",
+      name: "section",
+      attributes: new Map([["class", "footnotes"]]),
+      children: [],
+    };
+
+    for (const [id, footnote] of Object.entries(doc.footnotes)) {
+      const footnoteElement: Element = {
+        kind: "element",
+        name: "footnote",
+        attributes: new Map([["id", id]]),
+        children: footnote.children.map(processBlock),
+      };
+      footnoteSection.children.push(footnoteElement);
+    }
+
+    children.push(footnoteSection);
   }
 
   return {
diff --git a/vhosts/blog/nuldoc-src/djot/to_html.ts b/vhosts/blog/nuldoc-src/djot/to_html.ts
index 3c95c14b..cc74e538 100644
--- a/vhosts/blog/nuldoc-src/djot/to_html.ts
+++ b/vhosts/blog/nuldoc-src/djot/to_html.ts
@@ -250,21 +250,84 @@ function setDefaultLangAttribute(_doc: Document) {
 }
 
 function traverseFootnotes(doc: Document) {
+  let footnoteCounter = 0;
+  const footnoteMap = new Map<string, number>();
+
+  forEachChildRecursively(doc.root, (n) => {
+    if (n.kind !== "element" || n.name !== "footnoteref") {
+      return;
+    }
+
+    const reference = n.attributes.get("reference");
+    if (!reference) {
+      return;
+    }
+
+    let footnoteNumber: number;
+    if (footnoteMap.has(reference)) {
+      footnoteNumber = footnoteMap.get(reference)!;
+    } else {
+      footnoteNumber = ++footnoteCounter;
+      footnoteMap.set(reference, footnoteNumber);
+    }
+
+    n.name = "sup";
+    n.attributes.delete("reference");
+    n.attributes.set("class", "footnote");
+    n.children = [
+      {
+        kind: "element",
+        name: "a",
+        attributes: new Map([
+          ["id", `footnoteref--${reference}`],
+          ["class", "footnote"],
+          ["href", `#footnote--${reference}`],
+        ]),
+        children: [
+          {
+            kind: "text",
+            content: `[${footnoteNumber}]`,
+            raw: false,
+          },
+        ],
+      },
+    ];
+  });
+
   forEachChildRecursively(doc.root, (n) => {
     if (n.kind !== "element" || n.name !== "footnote") {
       return;
     }
 
-    // TODO
-    // <footnote>x</footnote>
-    //
-    // <sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1">1</a>]</sup>
-    //
-    // <div class="footnote" id="_footnotedef_1">
-    //   <a href="#_footnoteref_1">1</a>. RAS syndrome
-    // </div>
-    n.name = "span";
-    n.children = [];
+    const id = n.attributes.get("id");
+    if (!id || !footnoteMap.has(id)) {
+      n.name = "span";
+      n.children = [];
+      return;
+    }
+
+    const footnoteNumber = footnoteMap.get(id)!;
+
+    n.name = "div";
+    n.attributes.delete("id");
+    n.attributes.set("class", "footnote");
+    n.attributes.set("id", `footnote--${id}`);
+
+    n.children = [
+      {
+        kind: "element",
+        name: "a",
+        attributes: new Map([["href", `#footnoteref--${id}`]]),
+        children: [
+          {
+            kind: "text",
+            content: `${footnoteNumber}. `,
+            raw: false,
+          },
+        ],
+      },
+      ...n.children,
+    ];
   });
 }
 
diff --git a/vhosts/blog/nuldoc-src/pages/PostPage.tsx b/vhosts/blog/nuldoc-src/pages/PostPage.tsx
index 751692bd..97a24048 100644
--- a/vhosts/blog/nuldoc-src/pages/PostPage.tsx
+++ b/vhosts/blog/nuldoc-src/pages/PostPage.tsx
@@ -56,16 +56,6 @@ export default function PostPage(
                 // TODO: refactor
                 (doc.root.children[0] as Element).children
               }
-              {
-                // TODO: footnotes
-                // <div id="footnotes">
-                //   <% for footnote in footnotes %>
-                //     <div class="footnote" id="_footnotedef_<%= footnote.index %>">
-                //       <a href="#_footnoteref_<%= footnote.index %>"><%= footnote.index %></a>. <%= footnote.text %>
-                //     </div>
-                //   <% end %>
-                // </div>
-              }
             </div>
           </article>
         </main>