better docs

Author: DylanVann

packages/docs/index.css

@@ -76,9 +76,7 @@
 }
 
 body {
-  padding-top: 1rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding: 0.5rem;
   margin: 0 auto;
 }
 
@@ -113,12 +111,7 @@ button {
 
 a.badge {
   text-decoration: none;
-}
-
-a.badge svg {
-  height: 20px;
   display: inline-block;
-  margin: 0;
 }
 
 a.badge svg .background {
@@ -129,14 +122,21 @@ a.badge svg .text {
   fill: var(--background);
 }
 
-.npm {
-  margin-right: 4px;
-}
-
 .prose pre {
   background: var(--color);
 }
 
 .prose pre code {
   color: var(--background);
 }
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.header h1 {
+  margin: 0;
+}

packages/docs/index.js

@@ -13,17 +13,27 @@ const changeFavicon = (src) => {
 const { mode } = window.__perfect_dark_mode__
 
 // Get some elements we will use.
-const toggleElement = document.getElementById('toggle')
+const toggleElements = document.querySelectorAll('.toggle')
 
 // Listen to the color mode and update the UI.
 mode.subscribe((v) => {
-  toggleElement.textContent = v === 'dark' ? '🌚 Dark' : '🌝 Light'
+  toggleElements.forEach(
+    (el) => (el.textContent = v === 'dark' ? '🌚 Dark' : '🌝 Light'),
+  )
   changeFavicon(v === 'dark' ? 'moon.png' : 'sun.png')
 })
 
 // At this point our callback will have been called,
 // so the checkbox state and text will be correct and we can show them.
-toggleElement.style.visibility = 'unset'
+toggleElements.forEach((el) => (el.style.visibility = 'unset'))
+
+// When the checkbox is clicked we update the mode.
+// Our listener above will do the rest.
+toggleElements.forEach((el) => {
+  el.addEventListener('click', (e) =>
+    mode.update((v) => (v === 'light' ? 'dark' : 'light')),
+  )
+})
 
 // We want to make sure that if the OS mode is 'light'
 // and the saved mode is 'dark' that we do not transition
@@ -37,12 +47,6 @@ requestAnimationFrame(() =>
   ),
 )
 
-// When the checkbox is clicked we update the mode.
-// Our listener above will do the rest.
-toggleElement.addEventListener('click', (e) =>
-  mode.update((v) => (v === 'light' ? 'dark' : 'light')),
-)
-
 const button = document.getElementById('button')
 
 button.addEventListener('click', () => mode.set(undefined))

packages/docs/index.pug

@@ -1,4 +1,5 @@
 include ./badge
+include ./simpleBadge
 doctype html
 html
     head
@@ -11,12 +12,17 @@ html
         style
             include ./index.css
     body.prose
-        h1 🌚🌝 Perfect Dark Mode - <a href="https://github.com/DylanVann/perfect-dark-mode">GitHub</a>
+        div.header
+            h1 🌚🌝 Perfect Dark Mode
+            button.toggle(style="visibility: hidden;") 🌝 color mode
 
-        a.badge.npm(href='https://www.npmjs.com/package/perfect-dark-mode')
-            +badge("npm", version)
-        a.badge.size(href='https://bundlephobia.com/result?p=perfect-dark-mode')
-            +badge("size", size)
+        div.flex.space-x-4
+            a.badge(href='https://www.npmjs.com/package/perfect-dark-mode')
+                +badge("npm", version)
+            a.badge(href='https://bundlephobia.com/result?p=perfect-dark-mode')
+                +badge("size", size)
+            a.badge(href="https://github.com/DylanVann/perfect-dark-mode")
+                +simpleBadge("GitHub")
 
         include:markdown-it features.md
 
@@ -34,7 +40,7 @@ html
         // For users with JS disabled there will not be a color mode toggle, they can change
         // their system color mode.
         p You can set the color mode, this will be saved.
-        button(id="toggle" style="visibility: hidden;") 🌝 color mode
+        button.toggle(style="visibility: hidden;") 🌝 color mode
         p You can reset the color mode and fallback to system color mode.
         button(id="button") Reset
         p For debugging and understanding here is the saved color mode and the OS color mode.

packages/docs/postcss.config.js

@@ -16,7 +16,7 @@ module.exports = {
     tailwindcss('./tailwind.config.js'),
     production &&
       purgecss({
-        content: ['dist/index.html', 'index.js'],
+        content: ['index.pug', 'index.js'],
         defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
       }),
     production && cssnano({ preset: 'default' }),

packages/docs/simpleBadge.pug

@@ -0,0 +1,8 @@
+mixin simpleBadge(text)
+    svg(xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='20' role='img' aria-label='#{name}: #{text}')
+        title #{text}
+        g(clip-path='url(#r)')
+            rect(width='80' height='20' fill='black' class="background")
+        g(fill='#fff' text-anchor='middle' font-family='Verdana,Geneva,DejaVu Sans,sans-serif' text-rendering='geometricPrecision' font-size='110')
+            text(aria-hidden='true' x='400' y='150' fill='#010101' fill-opacity='.3' transform='scale(.1)' textlength='350') #{text}
+            text(x='400' y='140' transform='scale(.1)' fill='#fff' textlength='350' class="text") #{text}

packages/docs/tailwind.config.js

@@ -1111,7 +1111,7 @@ const typographyTheme = {
 const theme = merge({}, typographyTheme, defaultTheme)
 
 module.exports = {
-  purge: ['dist/index.html', 'index.js'],
+  purge: ['index.pug', 'index.js'],
   future: {
     defaultLineHeights: true,
     purgeLayersByDefault: true,