fix: dashboard numbering (#1071)

- Only shows the first section for each file because we only have values per file.
- rewrite dashboard client side with the same logic as toc
- css and js cleanup
- katex only loads when content is in the viewport


closes #1062 #1063

assets/js/content-model.js

@@ -0,0 +1,60 @@
+// [
+//   { text: "Foo", id: "foo", tagName: 'h1', children: [
+//     { text: "Xyz", id: "xyz", tagName: 'h2', children: [
+//       { text: "Bar", id: "bar", tagName: 'h3, children:[] }
+//       { text: "Bar", id: "bar", tagName: 'h3, children:[] }
+//     ]}
+//   ]},
+//   { text: "Baz", id: "baz", tag: 'h1', children: [] }
+// ]
+
+function buildTocModel (contentSelector) {
+    const model = []
+    const headingList = document.querySelector(contentSelector).querySelectorAll('h1,h2,h3,h4,h5,h6')
+    let parents = [{tagName: 'H0', children: model}]
+    let prevSibling = null
+    for (let el of headingList) {
+      let node = {
+        id: el.id,
+        tagName: el.tagName,
+        text: cleanHeadingText(el),
+        page: Boolean(el.dataset.page),
+        dashboardWeight: el.dataset.dashboardWeight,
+        dashboardAudit: el.dataset.dashboardAudit,
+        dashboardState: el.dataset.dashboardState,
+        children: []
+      }
+      if (!prevSibling || headingNum(node) === headingNum(prevSibling))  {
+        parents[parents.length - 1].children.push(node)
+        prevSibling = node
+
+        // is h3 > h2 ?
+      } else if (headingNum(node) > headingNum(prevSibling)) {
+        parents.push(prevSibling)
+        prevSibling.children.push(node)
+        prevSibling = node
+      } else {
+        // h2 or h1 after an h3... gotta find out how far to unwind, parents may not be contiguous in a bad doc, so we walk.
+        let prevParent = parents.pop()
+        while (headingNum(node) <= headingNum(prevParent)) {
+          prevParent = parents.pop()
+        }
+        prevParent.children.push(node)
+        parents.push(prevParent)
+        prevSibling = node
+      }
+    }
+    return model
+  }
+
+  function cleanHeadingText (el) {
+    return el.textContent.trim()
+  }
+
+  function headingNum (el) {
+    return Number(el.tagName[1])
+  }
+
+  export {
+    buildTocModel
+  }

assets/js/dashboard-spec.js

@@ -0,0 +1,44 @@
+import {html, render} from 'lit-html';
+
+const tableData = (model, depth, output=[]) => {
+    const index = depth.length-1
+    for (const node of model) {
+        depth[index] += 1
+        output.push({number: depth.join("."), ...node})
+        if (node.children) {
+            tableData(node.children, [...depth, 0], output)
+        }
+    }
+    return output
+}
+
+function buildDashboard(selector, model) {
+  const data = tableData(model, [0])
+  const tpl = html`
+<table id="dashboard" class="sort Dashboard tablesort">
+  <thead>
+    <tr>
+        <th>Section</th>
+        <th>Weight</th>
+        <th>State</th>
+        <th>Theory Audit</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${data.map((i)=> i.page ? html`
+    <tr>
+      <td class="Dashboard-section">${i.number} <a href="#${i.id}">${i.text}</a></td>
+      <td>${i.dashboardWeight}</td>
+      <td class="text-black bg-na bg-${i.dashboardState}">${i.dashboardState}</td>
+      <td class="text-transparent ${i.dashboardAudit > 0 ? 'bg-stable' : 'bg-incorrect'}">${i.dashboardAudit}</td>
+    </tr>
+    `: '')}
+  </tbody>
+</table>  
+  `
+  render(tpl, document.querySelector(selector))
+}
+
+export {
+    buildDashboard
+}

assets/js/katex.js

@@ -0,0 +1,19 @@
+import renderMathInElement from 'katex/dist/contrib/auto-render.mjs'
+
+function renderKatex (target) {
+  console.log('init katex for ', target)
+  renderMathInElement(target, {
+    ignoredTags: ["script", "noscript", "style", "textarea"],
+    throwOnError: false,
+    delimiters: [
+        {left: "$$", right: "$$", display: true},
+        {left: "$", right: "$", display: false},
+        {left: "\\(", right: "\\)", display: false},
+        {left: "\\[", right: "\\]", display: true}
+        ]
+  })
+}
+
+export {
+  renderKatex
+}

assets/main.js → assets/js/main.js

@@ -3,13 +3,14 @@ import { initToc } from './toc.js'
 import panzoom from 'panzoom'
 import tablesort from 'tablesort'
 import Gumshoe from 'gumshoejs'
-
+import { buildTocModel } from './content-model'
+import { buildDashboard } from './dashboard-spec'
+import { renderKatex } from "./katex";
 // Note: the tablesort lib is not ESM friendly, and the sorts expect `Tablesort` to be available on the global
 window.Tablesort = tablesort
 require('tablesort/dist/sorts/tablesort.number.min.js')
 
 function initPanZoom () {
-  console.log('init panzoom')
   var elements = document.querySelectorAll(".zoomable")
   elements.forEach(function (el) {
     panzoom(el.querySelector('*:first-child'), {
@@ -20,7 +21,6 @@ function initPanZoom () {
 }
 
 function initTableSort () {
-  console.log('init tablesort')
   var elements = document.querySelectorAll(".tablesort")
   elements.forEach(function (el) {
     tablesort(el);
@@ -36,7 +36,6 @@ function initTocDepthSlider () {
   })
 
   function handleSliderChange (depth) {
-    console.log('handleSliderChange', depth)
     for (let i = 0; i < 6; i++) {
       toc.querySelectorAll(`.depth-${i}`).forEach(el => {
         if (i < depth) {
@@ -52,17 +51,30 @@ function initTocDepthSlider () {
 }
 
 function initTocScrollSpy () {
-  console.log('initTocScrollSpy')
   var spy = new Gumshoe('.toc a', {
     nested: true,
     nestedClass: 'active-parent'
   })
 }
 
 window.addEventListener('DOMContentLoaded', () => {
-  initToc({tocSelector:'.toc', contentSelector: '.markdown'})
+  const model = buildTocModel('.markdown')
+  initToc({tocSelector:'.toc', model })
+  buildDashboard('#test-dash', model)
   initTocDepthSlider()
   initTocScrollSpy()
   initPanZoom()
   initTableSort()
+
+  // load katex when math-mode page intersect with the viewport
+  let observer = new IntersectionObserver((entries, observer) => { 
+      entries.forEach(entry => {
+        if(entry.isIntersecting){
+          renderKatex(entry.target)
+          observer.unobserve(entry.target);
+        }
+      });
+  });
+  document.querySelectorAll('.math-mode').forEach(img => { observer.observe(img) });
+
 });

assets/js/toc.js

@@ -0,0 +1,36 @@
+function initToc ({tocSelector, model}) {
+  const toc = buildTocDom(model)
+  document.querySelector(tocSelector).appendChild(toc)
+}
+
+function buildTocDom (model) {
+  const parent = document.createDocumentFragment()
+  buildList(parent, model, 0)
+  return parent
+}
+
+function buildList (parent, children, depth) {
+  let ol = createList(depth)
+  parent.append(ol)
+  for (node of children) {
+    let li = document.createElement('li')
+    let a = document.createElement('a')
+    a.setAttribute('href', '#' + node.id)
+    a.innerText = node.text
+    li.appendChild(a)
+    ol.append(li)
+    if (node.children) {
+      buildList(li, node.children, depth + 1)
+    }
+  }
+}
+
+function createList(depth) {
+  const ol = document.createElement('ol')
+  ol.className = 'depth-' + depth
+  return ol
+}
+
+export {
+  initToc
+}

content/intro/_index.md

@@ -41,7 +41,7 @@ Each section of the spec must be stable and audited before it is considered done
 
 ### Spec Status Legend
 
-<table class="Dashboard"">
+<table class="Dashboard">
   <thead>
     <tr>
       <th>Spec state</th>
@@ -69,8 +69,7 @@ Each section of the spec must be stable and audited before it is considered done
 </table>
 
 ### Spec Status Overview
-
-{{<dashboard-spec>}}
+<div id="test-dash"></div>
 
 ### Spec Stabilization Progess
 

layouts/_default/_markup/render-heading.html

@@ -15,6 +15,7 @@
   $level is the corrected heading number given the depth of the file in the tree.
 */}}
 {{- $level := add $pathSize (sub .Level 1) -}}
+{{- $originalLevel := default 1 .Level -}}
 {{- $anchor := "" -}}
 
 {{/* 
@@ -34,7 +35,7 @@
   - headings get numbered by css; changing the nesting requires updating numbered.scss.
   - heading text is grabbed by toc.js as the ToC link text
 */}}
-<h{{ $level }} id="{{ $anchor | safeURL }}" class="level-{{ $level }}">
+<h{{ $level }} id="{{ $anchor | safeURL }}" class="level-{{ $level }}" data-page="{{if eq $originalLevel 1 }}true{{end}}" data-dashboard-weight="{{.Page.Params.dashboardWeight}}" data-dashboard-state="{{.Page.Params.dashboardState}}" data-dashboard-audit="{{.Page.Params.dashboardAudit}}">
   <a href="#{{ $anchor | safeURL }}">{{ .Text | safeHTML }}</a>
 </h{{ $level }}>
 <div class="section-badges">

layouts/partials/single/inject/body.html

@@ -1,7 +1,5 @@
-{{ $js := resources.Get "main.js" | js.Build "main.js"}}
-<script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
-
-{{ $js := resources.Get "katex.js" | js.Build "katex.js"}}
+{{ $opts := dict "targetPath" "main.js" "minify" "true" }}
+{{ $js := resources.Get "js/main.js" | js.Build $opts}}
 <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
 
 <pwa-update swpath="{{ "/sw.js" | relURL }}"></pwa-update>