add functioning TOC links

src/ttfrog/themes/default/base.html

@@ -22,9 +22,9 @@
         <div class='content'>
         <main>
             {% for message in g.messages %}
-            <article class="alert">
+            <dialog class="alert">
                 {{ message }}
-            </article>
+            </dialog>
             {% endfor %}
             {% block content %}{% endblock %}
         </main>

src/ttfrog/themes/default/page.html

@@ -4,7 +4,7 @@
 {% endblock %}
 
 {% block content %}
-<div id='froghat'>{{ page.body }}</div>
+<article id='froghat'>{{ page.body }}</article>
 {% endblock %}
 
 

src/ttfrog/themes/default/static/froghat.css

@@ -279,7 +279,7 @@ div.macro {
     display: inline;
 }
 
-div[data-macro-name="toc"] {
+[data-macro-name="toc"] {
     display: inline;
     float: left;
     border-radius: 5px;
@@ -290,43 +290,52 @@ div[data-macro-name="toc"] {
     padding: 0ch 2ch;
 }
 
-div[data-macro-name="toc"] ul {
+[data-macro-name="toc"] ul {
     box-sizing: border-box;
     list-style: none;
-    padding-left: 2ch;
+    padding-left: 0ch;
     font-weight: normal;
     margin-left: 0px;
 
 }
 
-div[data-macro-name="toc"] > ul:first-child {
-    padding-left: 0ch;
-    margin-left: 0px;
-}
-div[data-macro-name="toc"] > ul:first-child > li {
-    padding-left: 0ch;
-    margin-left: 0px;
-}
-div[data-macro-name="toc"] > ul:first-child > li {
-    font-weight: bold;
-}
-
-div[data-macro-name="toc"] > ul > li {
-    font-weight: bold;
-}
-
-div[data-macro-name="toc"] > ul > li {
+[data-macro-name="toc"] ul ul {
     padding-left: 2ch;
 }
 
-div[data-macro-name="toc"] a {
+[data-macro-name="toc"] > ul:first-child {
+    padding-left: 0ch;
+    margin-left: 0px;
+}
+[data-macro-name="toc"] > ul:first-child > li {
+    padding-left: 0ch;
+    margin-left: 0px;
+}
+[data-macro-name="toc"] > ul:first-child > li {
+    font-weight: bold;
+}
+
+[data-macro-name="toc"] > ul > li {
+    font-weight: bold;
+}
+
+[data-macro-name="toc"] > ul > li {
+    padding-left: 0ch;
+}
+
+[data-macro-name="toc"] a {
    display: block; 
    width: 100%;
 }
-div[data-macro-name="toc"] a:hover {
+[data-macro-name="toc"] a:hover {
     background: #CCC;
 }
 
+[data-macro-name="toc"] .header {
+    font-size: var(--default-font-size);
+    width: fit-content;
+    margin: 2ch auto 0 auto;
+}
 
 #froghat {
     display: none;

src/ttfrog/themes/default/static/froghat.js

@@ -243,9 +243,6 @@ class MacroPlugin extends FroghatPlugin {
 
     macros = {
         // image: {}
-        // toc {}
-        // widget {}
-        //
         style: {
             inline: false,
             toHTML: (token, node) => {
@@ -272,9 +269,9 @@ class MacroPlugin extends FroghatPlugin {
         },
         toc: {
             inline: true,
-            element: 'div',
+            element: 'aside',
             toHTML: (token, node) => {
-                return node + "</div>";
+                return node + "</aside>";
             },
             postprocess: (html) => {
                 const subList = (depth) => {
@@ -284,9 +281,10 @@ class MacroPlugin extends FroghatPlugin {
                     return li;
                 };
 
+                var tocIndex = 0;
+
                 const buf = document.createElement('div');
                 buf.innerHTML = html;
-                const tocElement =
                 buf.querySelectorAll('[data-macro-name="toc"]').forEach(tocElement => {
 
                     var params = {
@@ -296,6 +294,11 @@ class MacroPlugin extends FroghatPlugin {
 
                     const headings = buf.querySelectorAll("h2, h3, h4, h5, h6");
 
+                    var header = document.createElement("h2");
+                    header.className = 'header';
+                    header.textContent = 'Table of Contents';
+                    tocElement.prepend(header);
+    
                     const toc = document.createElement("ul");
                     toc.setAttribute('role', 'list');
 
@@ -311,7 +314,8 @@ class MacroPlugin extends FroghatPlugin {
                         }
 
                         var index = document.createElement("li");
-                        index.innerHTML = '<a href="#h">' + heading.innerHTML + "</a>";
+                        var ref = camelCase(heading.textContent).join("");
+                        index.innerHTML = `<a href="#${heading.id}">${heading.textContent}</a>`;
 
                         var list = null;
                         if (depth > lastDepth) {
@@ -441,6 +445,15 @@ class MacroPlugin extends FroghatPlugin {
         const plugin = this;
 
         this.editor.marked.use({
+            extensions: [
+                {
+                    name: 'heading',
+                    renderer(token) {
+                        var ref = camelCase(token.text).join("");
+                        return `<h${token.depth} id='${ref}'>${token.text}</h${token.depth}>`;
+                    }
+                },
+            ],
             hooks: {
                 preprocess: (source) => {
                     const matched = source.matchAll(plugin.multilinePattern);