docs: floating toc

packages/docs/components/toc.js

@@ -0,0 +1,41 @@
+const getLinkInContent = (el) => {
+  const [_, id] = el.href.split('#')
+  const element = document.querySelector(`a.markdownIt-Anchor[href="#${id}"]`)
+  const level = parseInt(element.parentElement.tagName[1])
+  return { navElement: el, element, level, id }
+}
+
+const linksInSidebar = [...document.querySelectorAll('.markdownIt-TOC a')]
+const linksInContent = linksInSidebar.map(getLinkInContent)
+
+const map = linksInContent.map(({ navElement, element, level, id }, i, arr) => {
+  const offsetTop = element.offsetTop
+  let nextEl
+  for (let j = i + 1; j < arr.length; j++) {
+    const item = arr[j]
+    if (item.level <= level) {
+      nextEl = item.element
+      break
+    }
+  }
+  const offsetBottom =
+    nextEl?.offsetTop || document.documentElement.offsetHeight
+  return { offsetTop, offsetBottom, element, id, level, navElement }
+})
+
+const onScroll = () => {
+  const scrollTop = window.scrollY
+  const height = document.documentElement.clientHeight
+  const scrollBottom = scrollTop + height
+  map.forEach((el) => {
+    if (el.offsetTop < scrollBottom && el.offsetBottom > scrollTop) {
+      el.navElement.classList.add('active')
+    } else {
+      el.navElement.classList.remove('active')
+    }
+  })
+}
+
+document.addEventListener('scroll', onScroll, { passive: true })
+
+onScroll()

packages/docs/index.css

@@ -106,6 +106,7 @@
   touch-action: pan-x pan-y;
   padding: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);
+  scroll-behavior: smooth;
 }
 
 .title {
@@ -164,13 +165,6 @@ h4 {
   background: var(--focus);
 }
 
-.container,
-.prose {
-  max-width: 65ch;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 hr {
   border-style: solid;
 }
@@ -187,6 +181,10 @@ a:visited {
   min-width: 120px;
 }
 
+.max-w-65 {
+  max-width: 65ch;
+}
+
 button,
 select {
   text-transform: capitalize;
@@ -263,3 +261,25 @@ svg .text-shadow {
 .markdownIt-Anchor:hover::before {
   visibility: visible;
 }
+
+.toc {
+  list-style: none;
+}
+
+.toc a,
+.toc a:visited {
+  color: var(--gray-300);
+}
+
+.toc a.active,
+.toc a.active:visited {
+  color: var(--gray-900);
+}
+
+.toc ul ul {
+  padding-inline-start: 1rem;
+}
+
+.markdownIt-TOC {
+  padding: 0;
+}

packages/docs/index.pug

@@ -21,10 +21,10 @@ html(data-pdm="light dark blue" lang="en")
             include ./index.css
     body
         - var outline = ['focus:outline-none focus:shadow-outline']
-        div.container.fixed.top-0.right-0.left-0.flex.flew-row.px-3.mt-3.pointer-events-none.top-bar(class="md:mt-6")
+        div.max-w-65.mx-auto.fixed.top-0.right-0.left-0.flex.flew-row.px-3.mt-3.pointer-events-none.top-bar(class="md:mt-6")
             button.rounded-sm.pdm-cycle.ml-auto.floating-button.opacity-0.transition-opacity.duration-300.ease-in-out(class=outline)
                 i.emoji.light.pdm-emoji(style="visibility: hidden;")
-        div.container.px-3.mb-3
+        div.max-w-65.mx-auto.px-3.mb-3
             div.header.flex.items-center.justify-between.flex-col.my-3(class="md:flex-row md:my-6")
                 h1.mb-3.title(class="md:mb-0") <i class="emoji dark"></i><i class="emoji light"></i> Perfect Dark Mode
                 button.min-w-1.rounded-sm.pdm-toggle.flex.flex-col.items-center(class=outline)
@@ -41,49 +41,55 @@ html(data-pdm="light dark blue" lang="en")
                 a.badge.rounded-sm.overflow-hidden(href="https://github.com/DylanVann/perfect-dark-mode" target="blank" rel="noopener" class=outline)
                     +simpleBadge("GitHub")
 
-        div.prose.px-3.pb-10
+        div.prose.max-w-65.mx-auto.mb-12.px-3
             include:markdown ./markdown/features.md
 
             p
                 | Created by
                 |
                 a.rounded-sm(href="https://twitter.com/atomarranger" target="blank" rel="noopener" class=outline) @atomarranger
 
-            hr
+        div.flex.flex-row
+            div.order-3.flex-1.flex-shrink.w-0.hidden(class="xl:block")
+                div.sticky.top-0.p-3.overflow-y-auto.max-h-screen
+                    div.border-l.border-gray-100.pl-3.py-3.toc
+                        include:markdown-toc ./markdown/docs.md
+            div.prose.px-3.pb-10.order-2.min-w-0.mx-auto
+                include:markdown ./markdown/docs.md
 
-            include:markdown ./markdown/docs.md
+                hr
 
-            hr
+                - var label = 'block text-gray-700 text-sm font-bold mb-2'
+                - var input = 'shadow appearance-none border rounded-sm w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white'
 
-            - var label = 'block text-gray-700 text-sm font-bold mb-2'
-            - var input = 'shadow appearance-none border rounded-sm w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white'
+                p.mb-4
+                    strong Join my Newsletter
+                    br
+                    | I'll send you an email when I have something interesting to show.
+                form.subscribe.relative
+                    div.subscribed.absolute.top-0.bottom-0.left-0.right-0.flex.items-center.justify-center.bg-white.hidden Subscribed!
+                    div.content.flex.flex-col.space-y-4
+                        div
+                            label(for='name' class=label) Name
+                            input(type='text' name='name' placeholder="Name" class=input)
+                        div
+                            label(for='email' class=label) Email
+                            input(required='' name='email' type='email' placeholder="Email" class=input)
+                        button.min-w-1.rounded-sm.overflow-hidden(type='submit' class=outline) Subscribe
+                        a(href='https://twitter.com/atomarranger' target="blank" rel="noopener" class=outline) Or follow me on Twitter for more stuff like this.
+            div.order-1.flex-1.flex-shrink.w-0.hidden(class="xl:block")
 
-            p.mb-4
-                strong Join my Newsletter
-                br
-                | I'll send you an email when I have something interesting to show.
-            form.subscribe.relative
-                div.subscribed.absolute.top-0.bottom-0.left-0.right-0.flex.items-center.justify-center.bg-white.hidden Subscribed!
-                div.content.flex.flex-col.space-y-4
-                    div
-                        label(for='name' class=label) Name
-                        input(type='text' name='name' placeholder="Name" class=input)
-                    div
-                        label(for='email' class=label) Email
-                        input(required='' name='email' type='email' placeholder="Email" class=input)
-                    button.min-w-1.rounded-sm.overflow-hidden(type='submit' class=outline) Subscribe
-                    a(href='https://twitter.com/atomarranger' target="blank" rel="noopener" class=outline) Or follow me on Twitter for more stuff like this.
-
-            script
-                include ./components/change-favicon.js
-                include ./components/cycle-button.js
-                include ./components/emoji.js
-                include ./components/label.js
-                include ./components/mode.js
-                include ./components/reset-button.js
-                include ./components/root.js
-                include ./components/select.js
-                include ./components/syntax-highlight.js
-                include ./components/toggle-button.js
-                include ./components/top-bar.js
-                include ./components/form.js
+        script
+            include ./components/change-favicon.js
+            include ./components/cycle-button.js
+            include ./components/emoji.js
+            include ./components/label.js
+            include ./components/mode.js
+            include ./components/reset-button.js
+            include ./components/root.js
+            include ./components/select.js
+            include ./components/syntax-highlight.js
+            include ./components/toggle-button.js
+            include ./components/top-bar.js
+            include ./components/form.js
+            include ./components/toc.js

packages/docs/markdown/docs.md

@@ -1,5 +1,3 @@
-@[toc]
-
 ## Examples
 
 ### Label

packages/docs/options.js

@@ -15,6 +15,28 @@ module.exports = {
       }
       return ''
     },
+    'markdown-toc': (text, options) => {
+      const markdownIt = require('markdown-it')
+      const markdownItTocAndAnchor = require('markdown-it-toc-and-anchor')
+        .default
+      let toc
+
+      const md = markdownIt({
+        html: true,
+        linkify: true,
+        typographer: true,
+      })
+        .use(markdownItTocAndAnchor, {
+          wrapHeadingTextInAnchor: true,
+          tocFirstLevel: 2,
+          tocCallback: (tocMarkdown, tocArray, tocHtml) => {
+            toc = tocHtml
+          },
+        })
+        .render(text)
+
+      return toc
+    },
     markdown: (text, options) => {
       const replaceAll = require('string.prototype.replaceall')
       const markdownIt = require('markdown-it')

packages/docs/package.json

@@ -11,6 +11,10 @@
     "build:data": "node data.js",
     "build:html": "pug index.pug --out dist --obj options.js",
     "build:tailwind": "NODE_ENV=production postcss tailwind.css -o dist/tailwind.css",
+    "dev": "run-p dev:live dev:html dev:tailwind",
+    "dev:html": "pug index.pug --out dist --obj options.js --watch",
+    "dev:live": "live-server dist",
+    "dev:tailwind": "NODE_ENV=development postcss tailwind.css -o dist/tailwind.css --watch",
     "serve": "serve dist"
   },
   "devDependencies": {
@@ -23,6 +27,7 @@
     "fontsource-montserrat": "^3.0.9",
     "fs-extra": "^9.0.1",
     "gzip-size": "^5.1.1",
+    "live-server": "^1.2.1",
     "markdown-it": "^12.0.0",
     "markdown-it-toc-and-anchor": "^4.2.0",
     "npm-run-all": "^4.1.5",

packages/docs/tailwind.config.js

@@ -19,6 +19,7 @@ const fontTitle = ['Libre Baskerville', 'serif']
 
 const defaultTheme = {
   colors: {
+    ...require('tailwindcss/defaultTheme').colors,
     color: 'var(--color)',
     background: 'var(--background)',
     white: 'var(--white)',