docs: linkify headings

DylanVann · DylanVann · commit 52292a50610b · 2020-10-18T02:57:09.000-04:00
diff --git a/packages/docs/components/change-favicon.js b/packages/docs/components/change-favicon.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Change Favicon
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // For changing the tab icon.
diff --git a/packages/docs/components/cycle-button.js b/packages/docs/components/cycle-button.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Cycle Button
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/emoji.js b/packages/docs/components/emoji.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Emoji
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/form.js b/packages/docs/components/form.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Form
-//----------------------------------------------------------
-
 // Get the elements.
 var subscribeButtons = document.querySelectorAll('.subscribe')
 
diff --git a/packages/docs/components/label.js b/packages/docs/components/label.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Label
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/mode.js b/packages/docs/components/mode.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Mode
-//----------------------------------------------------------
-
 var { modeSaved, modeOS } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/reset-button.js b/packages/docs/components/reset-button.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Reset Button
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/root.js b/packages/docs/components/root.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Root
-//----------------------------------------------------------
-
 // We want to make sure that if the OS mode is 'light'
 // and the saved mode is 'dark' that we do not transition
 // between the two, so we add the transition after a frame
diff --git a/packages/docs/components/select.js b/packages/docs/components/select.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Select
-//----------------------------------------------------------
-
 var { mode, modes } = window.__pdm__
 
 // We can use a select element for choosing a color mode
diff --git a/packages/docs/components/syntax-highlight.js b/packages/docs/components/syntax-highlight.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Syntax Highlight
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get the color mode links.
diff --git a/packages/docs/components/toggle-button.js b/packages/docs/components/toggle-button.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Toggle Button
-//----------------------------------------------------------
-
 var { mode } = window.__pdm__
 
 // Get some elements we will use.
diff --git a/packages/docs/components/top-bar.js b/packages/docs/components/top-bar.js
@@ -1,7 +1,3 @@
-//----------------------------------------------------------
-// Top Bar
-//----------------------------------------------------------
-
 // Get a floating button element.
 var floatingButtonEl = document.querySelector('.floating-button')
 var topBarEl = document.querySelector('.top-bar')
diff --git a/packages/docs/index.css b/packages/docs/index.css
@@ -245,3 +245,21 @@ svg .text-shadow {
 .emoji.blue {
   background-image: url('images/blue.png');
 }
+
+.markdownIt-Anchor {
+  position: relative;
+  text-decoration: none !important;
+}
+
+.markdownIt-Anchor::before {
+  position: absolute;
+  display: table-cell;
+  vertical-align: middle;
+  left: -1em;
+  content: '#';
+  visibility: hidden;
+}
+
+.markdownIt-Anchor:hover::before {
+  visibility: visible;
+}
diff --git a/packages/docs/index.pug b/packages/docs/index.pug
@@ -51,35 +51,42 @@ html(data-pdm="light dark blue" lang="en")
 
             hr
 
-            h2 Examples
+            :markdown
+                ## Examples
+
+                ### Label
 
-            h3 Label
+                Display a label showing the mode.
 
             span.pdm-label(style="visibility: hidden;") Light
 
             include:code(lang="js") ./components/label.js
 
-            h3 Emoji
+            :markdown
+                ### Emoji
+
+                Display an emoji showing the mode.
 
             i.emoji.light.pdm-emoji(style="visibility: hidden;")
 
             include:code(lang="js") ./components/emoji.js
 
-            h3 Toggle
+            :markdown
+                ### Toggle
 
-            p You can toggle the color mode.
+                You can toggle the color mode.
 
             button.min-w-1.rounded-sm.pdm-toggle(class=outline)
                 i.emoji.light.pdm-emoji(style="visibility: hidden;")
                 span.ml-1.pdm-label(style="visibility: hidden;") Light
 
             include:code(lang="js") ./components/toggle-button.js
 
-            h3 Select
+            :markdown
+                ### Select
 
-            p You can use a select for the color mode.
+                You can use a select for the color mode.
 
-            :markdown
                 Perfect Dark Mode allows for more than just `light` and `dark` color modes.
 
                 On initialization PDM will read a list of modes from the `<html>` element's `data-pdm` attribute.
@@ -90,19 +97,32 @@ html(data-pdm="light dark blue" lang="en")
 
             include:code(lang="js") ./components/select.js
 
-            h3 Reset
+            :markdown
+                ### Cycle
+
+                You can use the `.update` method to cycle through color modes.
+
+            button.min-w-1.rounded-sm.pdm-cycle(class=outline)
+                i.emoji.light.pdm-emoji(style="visibility: hidden;")
+                span.ml-1.pdm-label(style="visibility: hidden;") Light
+
+            include:code(lang="js") ./components/cycle-button.js
+
+            :markdown
+                ### Reset
 
-            p You can reset the color mode and fallback to system color mode.
+                You can reset the color mode and fallback to system color mode.
 
             button.min-w-1.rounded-sm.pdm-reset(class=outline) Reset
 
             include:code(lang="js") ./components/reset-button.js
 
-            h3 Mode
+            :markdown
+                ### Mode
 
-            p For debugging/understanding here is the saved color mode and the OS color mode.
+                For debugging/understanding here is the saved color mode and the OS color mode.
 
-            p The displayed color mode is <code>SavedColorMode || OSColorMode</code>.
+                The displayed color mode is `SavedColorMode || OSColorMode`.
 
             pre
                 code.pdm-mode-saved Saved Color Mode:
diff --git a/packages/docs/obj.js b/packages/docs/obj.js
@@ -14,9 +14,16 @@ module.exports = {
       return ''
     },
     markdown: (text, options) => {
-      return require('jstransformer-markdown-it').render(text, {
+      const markdownIt = require('markdown-it')
+      const markdownItTocAndAnchor = require('markdown-it-toc-and-anchor')
+        .default
+      const prism = require('prismjs')
+
+      const md = markdownIt({
+        html: true,
+        linkify: true,
+        typographer: true,
         highlight: (str, lang) => {
-          const prism = require('prismjs')
           if (lang) {
             try {
               return prism.highlight(str, prism.languages[lang], lang)
@@ -26,7 +33,11 @@ module.exports = {
           }
           return ''
         },
+      }).use(markdownItTocAndAnchor, {
+        wrapHeadingTextInAnchor: true,
       })
+
+      return md.render(text)
     },
   },
   ...require('./data.json'),
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -4,8 +4,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "run-s build:copy:* build:data build:tailwind build:html build:pretty",
-    "build:pretty": "prettier --write dist/index.html",
+    "build": "run-s build:copy:* build:data build:tailwind build:html",
     "build:copy:lib": "cpx '../../node_modules/perfect-dark-mode/dist/**/*' dist/perfect-dark-mode/dist",
     "build:copy:style-light": "cpx ../../node_modules/prism-themes/themes/prism-base16-ateliersulphurpool.light.css dist/syntax",
     "build:copy:style-dark": "cpx ../../node_modules/prism-themes/themes/prism-nord.css dist/syntax",
@@ -24,7 +23,8 @@
     "fontsource-montserrat": "^3.0.9",
     "fs-extra": "^9.0.1",
     "gzip-size": "^5.1.1",
-    "jstransformer-markdown-it": "^2.1.0",
+    "markdown-it": "^12.0.0",
+    "markdown-it-toc-and-anchor": "^4.2.0",
     "npm-run-all": "^4.1.5",
     "perfect-dark-mode": "*",
     "postcss": "^8.1.1",
diff --git a/packages/docs/tailwind.config.js b/packages/docs/tailwind.config.js
@@ -1124,7 +1124,7 @@ const typographyTheme = {
 const theme = merge(defaultTheme, typographyTheme)
 
 module.exports = {
-  purge: ['index.pug', 'index.js'],
+  purge: ['index.pug', 'components/*.js'],
   future: {
     defaultLineHeights: true,
     purgeLayersByDefault: true,
diff --git a/packages/docs/usage.md b/packages/docs/usage.md
@@ -1,6 +1,6 @@
 ## Installation
 
-**Yarn:**
+### Yarn
 
 ```bash
 yarn add perfect-dark-mode
@@ -10,7 +10,7 @@ Then you must somehow add `node_modules/perfect-dark-mode/dist/index.js` as a sc
 
 How you do this will depend on the framework you are using.
 
-**UNPKG:**
+### UNPKG
 
 You can add directly this directly to the `<head>` of your page:
 
@@ -69,7 +69,7 @@ Here is a simple implementation of dark and light modes:
 
 In the rest of your app use `--color` and `--background` as needed.
 
-**Listening:**
+## Listening
 
 - You can `subscribe` to the mode, this can be used for rendering a toggle component.
 - The first call of your listener is synchronous so you can get the value before rendering.
@@ -79,7 +79,7 @@ const { mode } = window.__pdm__
 const unsubscribe = mode.subscribe((v) => console.log(v))
 ```
 
-**Setting:**
+## Setting
 
 - You can `set` the mode.
 - You can `update` the mode based on the current mode.
diff --git a/yarn.lock b/yarn.lock
