add ids to markdown headings

extension/helpers.js

@@ -142,8 +142,41 @@ fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) =>
   web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escapeHtml(
     tokens[idx].content
   )}</code></pre>\n`;
+fmt.md.core.ruler.push(
+  'heading_ids',
+  function (md, state) {
+    const slugs = new Set();
+    state.tokens.forEach(function (token, i) {
+      if (token.type === 'heading_open') {
+        const text = md.renderer.render(state.tokens[i + 1].children, md.options),
+          slug = fmt.slugger(text, slugs);
+        slugs.add(slug);
+        const idx = token.attrIndex('id');
+        if (idx === -1) {
+          token.attrPush(['id', slug]);
+        } else {
+          token.attrs[idx][1] = slug;
+        }
+      }
+    });
+  }.bind(null, fmt.md)
+);
 // delete globalThis['markdownit'];
 
+fmt.slugger = (heading, slugs = new Set()) => {
+  heading = heading
+    .replace(/\s/g, '-')
+    .replace(/[^A-Za-z0-9-_]/g, '')
+    .toLowerCase();
+  let i = 0,
+    slug = heading;
+  while (slugs.has(slug)) {
+    i++;
+    slug = `${heading}-${i}`;
+  }
+  return slug;
+};
+
 /** - */
 
 export const fs = {};

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css

@@ -27,6 +27,7 @@ body {
 
 header {
   display: flex;
+  flex-wrap: wrap;
   margin-bottom: 1.25rem;
 }
 header > * {
@@ -66,6 +67,14 @@ header h1 a:not([data-active]) {
   [data-container='mod'] > .documentation--body {
     grid-column: span 2;
   }
+  [data-container='mod'] .library--card,
+  .documentation--body {
+    max-height: calc(100vh - 10rem);
+    overflow-y: auto;
+  }
+  body {
+    overflow: hidden;
+  }
 }
 @media (min-width: 1350px) {
   [data-container] {
@@ -99,6 +108,10 @@ header h1 a:not([data-active]) {
   max-width: 100%;
 }
 
+[data-container='mod'] .library--card,
+.documentation--body {
+  overflow-x: auto;
+}
 .documentation--buttons,
 .library--expand {
   margin: 0;
@@ -324,11 +337,6 @@ header h1 a:not([data-active]) {
   padding: 1rem;
 }
 
-[data-container='mod'] .library--card,
-.documentation--body {
-  max-height: calc(100vh - 10rem);
-  overflow: auto;
-}
 .documentation--body {
   padding: 1rem 2rem;
   font-size: 0.8rem;

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js

@@ -212,12 +212,16 @@ const views = {
   },
   _navigator(event) {
     event.preventDefault();
-    console.log(event);
+    document.getElementById(event.target.getAttribute('href').slice(1)).scrollIntoView(true);
+    document.documentElement.scrollTop = 0;
   },
   _reset() {
     document
       .querySelectorAll('a[href^="?"]')
       .forEach((a) => a.removeEventListener('click', this._router));
+    document
+      .querySelectorAll('a[href^="#"]')
+      .forEach((a) => a.removeEventListener('click', this._navigator));
     this.$container.style.opacity = 0;
     return new Promise((res, rej) => {
       setTimeout(() => {
@@ -262,6 +266,9 @@ const views = {
     document
       .querySelectorAll('a[href^="?"]')
       .forEach((a) => a.addEventListener('click', this._router));
+    document
+      .querySelectorAll('a[href^="#"]')
+      .forEach((a) => a.addEventListener('click', this._navigator));
   },
   async alerts() {
     this.$container.dataset.container = 'alerts';