Make it possible to jump to sections you need and back to the top.

admin/pages/DocsBrowser.svelte

@@ -1,11 +1,8 @@
 <script>
-  import { push, link } from 'svelte-spa-router';
-  import Validator from 'Validator';
+  import { link } from 'svelte-spa-router';
   import { onMount } from 'svelte';
   import Layout from '$/client/Layout.svelte';
   import Icon from '$/client/components/Icon.svelte';
-  import Markdown from '$/client/components/Markdown.svelte';
-  import Blockstart from "$/client/components/Blockstart.svelte";
   import Code from "$/client/components/Code.svelte";
   import api from "$/client/api.js";
 
@@ -14,13 +11,21 @@
   let url;
   export let params;
 
+  const jump = (id) => {
+    let node = document.getElementById(id);
+    if(node) node.scrollIntoView();
+  }
+
+  const jump_top = () => {
+    jump("top-scroll");
+  }
+
   const load_docs = async (to_load) => {
     const [status, data] = await api.get(`/docs/api/${to_load}.json`);
 
     docs_data = status === 200 ? data : {};
     url = to_load;
-    console.log(docs_data);
-    window.scrollTo(0, 0);
+    jump_top();
   }
 
   const load_index = async () => {
@@ -30,8 +35,8 @@
   }
 
   const type_to_syntax = {
-    callexpression: "()",
-    objectexpression: "{}",
+    "callexpression": "()",
+    "objectexpression": "{}",
     "function": "()",
     "class": "{}",
     "method": "()"
@@ -46,7 +51,6 @@
   $: if(params.wild && params.wild !== url) {
     load_docs(params.wild);
   }
-
 </script>
 
 <style>
@@ -137,6 +141,18 @@
     background-color: var(--color-bg-inverted);
     color: var(--color-text-inverted);
   }
+
+  toc {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  toc span {
+    border: 1px solid black;
+    padding: 0.5rem;
+    text-align: center;
+    background-color: var(--value3);
+  }
 </style>
 
 
@@ -151,19 +167,34 @@
   </sidebar>
 
   <right>
+      <scroll-sucks id="top-scroll"></scroll-sucks>
       {#if docs_data}
         <module-header>
         <h1>{ url }</h1>
         {#if docs_data.comment}
           {@html docs_data.comment}
         {/if}
-      </module-header>
+
+        <toc>
+          {#each docs_data.exports as exp}
+            {#if exp.isa == "class"}
+              <span on:click={ () => jump(exp.slug) }>{ exp.name }</span>
+
+              {#each exp.methods as member}
+                <span on:click={ () => jump(member.slug) }>.{ member.name }</span>
+              {/each}
+            {:else}
+              <span on:click={ () => jump(exp.slug) }>{ exp.name }</span>
+            {/if}
+          {/each}
+        </toc>
+        </module-header>
 
       {#each docs_data.exports as exp}
         {#if exp.isa === "class"}
           <export class="class-def">
           <heading>
-            <h2>class { exp.name }</h2>
+          <h2 on:click={ () => jump_top() } id={ exp.slug }>class { exp.name }</h2>
             <Code content={ exp.code } language="javascript" />
           </heading>
           <comment>
@@ -176,7 +207,8 @@
           {#each exp.methods as member}
             <export class="member">
               <heading>
-                <h4>.{member.name}{ type_to_syntax[member.isa] || "" }</h4>
+              <h4 id={ member.slug } on:click={ () => jump(exp.slug) }>.{member.name}{ type_to_syntax[member.isa] || "" }
+              </h4>
                 <meta-data>
                   {docs_data.source}:{ member.line_start }
                   <em>{ member.isa } of { exp.name }</em>
@@ -198,15 +230,17 @@
         {:else}
           <export>
             <heading>
-              <h4>{exp.name}{ type_to_syntax[exp.isa] || "" }</h4>
+              <h4 on:click={ () => jump_top() }
+                  id={ exp.slug }>{exp.name}{ type_to_syntax[exp.isa] || "" }
+              </h4>
               <meta-data>
                 {docs_data.source}:{ exp.line_start }
                 <em>{ exp.isa }</em>
                 {#if exp.static}<b>static</b>{/if}
                 {#if exp.async}<b>async</b>{/if}
                 {#if exp.generator}<b>generator</b>{/if}
-                </meta-data>
-              </heading>
+              </meta-data>
+            </heading>
             <info>
               {#if exp.comment}
                 <comment>

commands/codedoc.js

@@ -5,6 +5,7 @@ import logging from '../lib/logging.js';
 import { mkdir, mkdir_to, glob } from "../lib/builderator.js";
 import { create_renderer } from "../lib/docgen.js";
 import path from "path";
+import slugify from "slugify";
 import template from "lodash/template.js";
 import * as acorn from "acorn";
 import * as acorn_walk from "acorn-walk";
@@ -27,6 +28,8 @@ export const required = [
 
 const RENDERER = create_renderer();
 
+const slug = (instring) => slugify(instring, { lower: true, strict: true, trim: true});
+
 /*
   Strips 1 leading space from the comments, or the \s\* combinations
   in traditional documentation comments.
@@ -63,6 +66,7 @@ class ParseWalker {
   handle_class(root) {
     const new_class = {
       isa: "class",
+      slug: slug(root.declaration.id.name),
       name: root.declaration.id.name,
       line_start: root.loc.start.line,
       methods: [],
@@ -81,6 +85,7 @@ class ParseWalker {
           static: meth_node.static,
           async: meth_node.value.async,
           generator: meth_node.value.generator,
+          slug: slug(`${new_class.name}-${meth_node.key.name}`),
           name: meth_node.key.name,
           line_start: meth_node.loc.start.line,
           range: [meth_node.start, meth_node.value.body.start],
@@ -124,6 +129,7 @@ class ParseWalker {
 
   add_export(id, exp) {
     exp.name = id.name;
+    exp.slug = exp.slug ? exp.slug : slug(id.name);
     exp.line_start = id.loc.start.line;
     exp.comment = this.find_comment(exp.line_start);
     exp.code = this.slice_code(exp.range);