Add sidebar menu to rules page (#65)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
bluwy · Aug 25, 2023 · c5e04de · c5e04de
1 parent cf64c1e
commit c5e04de
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 10 deletions.
diff --git a/site/rules.html b/site/rules.html
@@ -9,7 +9,7 @@
     <script type="module" src="./src/rules.js"></script>
   </head>
   <body tabindex="-1">
-    <main class="docs w-full max-w-3xl mx-auto p-4 pt-10">
+    <main class="w-full mx-auto p-4 pt-10">
       <div style="display: none">
         <svg>
           <symbol id="autolink-icon" width="24" height="24" fill="currentColor">
@@ -19,7 +19,7 @@
           </symbol>
         </svg>
       </div>
-      <header class="absolute top-0 left-0 w-full z-10 px-4">
+      <header class="absolute xl:fixed top-0 left-0 w-full z-10 px-4">
         <nav class="bookmark-nav flex gap-4 justify-end max-w-3xl mx-auto">
           <a class="bookmark decoration-none" href="/" title="Go to main page">
             <img
@@ -43,10 +43,20 @@
           </a>
         </nav>
       </header>
-      <!-- rules.md -->
-      <footer class="my-16">
-        <a class="anchor-link" href="/"> ➥ Back to main page </a>
-      </footer>
+      <div class="flex justify-center">
+        <div class="docs max-w-3xl xl:ml-32">
+          <!-- rules.md -->
+          <footer class="my-16">
+            <a class="anchor-link" href="/"> ➥ Back to main page </a>
+          </footer>
+        </div>
+        <div class="relative hidden xl:block">
+          <aside class="rules-aside-toc pt-18 sticky top-10">
+            <p class="font-semibold mt-0 mb-2">On this page</p>
+            <!-- rules.md (aside) -->
+          </aside>
+        </div>
+      </div>
     </main>
   </body>
 </html>
diff --git a/site/scripts/vitePluginMarkdown.js b/site/scripts/vitePluginMarkdown.js
@@ -60,8 +60,11 @@ export function markdown() {
     async transformIndexHtml(html) {
       if (html.includes('<!-- rules.md -->')) {
         const markdown = await fs.readFile(rulesPath, 'utf-8')
-        const rules = (await markdownProcessor.process(markdown)).toString()
-        return html.replace('<!-- rules.md -->', rules)
+        const rulesHtml = (await markdownProcessor.process(markdown)).toString()
+        const tocHtml = getTocHtml(rulesHtml)
+        return html
+          .replace('<!-- rules.md -->', rulesHtml)
+          .replace('<!-- rules.md (aside) -->', tocHtml)
       }
     },
     handleHotUpdate(ctx) {
@@ -74,3 +77,20 @@ export function markdown() {
     }
   }
 }
+
+/**
+ * @param {string} rulesHtml
+ */
+function getTocHtml(rulesHtml) {
+  const idMatch = /<h2\s*id="(.*?)">/g
+  /** @type {string[]} */
+  const links = []
+  let m
+  while ((m = idMatch.exec(rulesHtml))) {
+    links.push(m[1])
+  }
+  return `\
+<ul>
+  ${links.map((link) => `<li><a href="#${link}">${link}</a></li>`).join('\n')}
+</ul>`
+}
diff --git a/site/src/global.css b/site/src/global.css
@@ -95,6 +95,7 @@ body {
 .docs li {
   line-height: 1.5;
   opacity: 0.8;
+  list-style: none;
 }
 
 p {
@@ -202,6 +203,33 @@ button {
   );
 }
 
+.rules-aside-toc {
+  padding-left: 2rem;
+}
+
+.rules-aside-toc ul {
+  margin: 0;
+  padding: 0;
+}
+
+.rules-aside-toc li {
+  list-style: none;
+  line-height: 1.5;
+  margin-bottom: 0.2rem;
+  opacity: 0.8;
+}
+
+.rules-aside-toc a {
+  text-decoration: none;
+  transition: color cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+}
+
+.rules-aside-toc a.active,
+.rules-aside-toc a:hover,
+.rules-aside-toc a:focus {
+  color: #cf7522;
+}
+
 @media (prefers-color-scheme: dark) {
   html,
   body {
@@ -251,6 +279,12 @@ button {
       rgb(209, 213, 219) 100%
     );
   }
+
+  .rules-aside-toc a.active,
+  .rules-aside-toc a:hover,
+  .rules-aside-toc a:focus {
+    color: #e6ab73;
+  }
 }
 
 @media (min-width: 456px) {
@@ -268,3 +302,9 @@ button {
     height: 5rem;
   }
 }
+
+@media screen and (max-width: 1290px) {
+  .aside-menu-container {
+    display: none;
+  }
+}
diff --git a/site/src/rules.js b/site/src/rules.js
@@ -13,14 +13,16 @@ window.addEventListener('hashchange', (e) => {
  * @param {boolean} active
  */
 function setHashActive(hash, active) {
-  console.log('as')
   hash = hash.replace('#', '')
   if (!hash) return
   const heading = document.getElementById(hash)
-  if (!heading) return
+  const tocLink = document.querySelector(`.rules-aside-toc [href="#${hash}"]`)
+  if (!heading || !tocLink) return
   if (active) {
     heading.classList.add('active')
+    tocLink.classList.add('active')
   } else {
     heading.classList.remove('active')
+    tocLink.classList.remove('active')
   }
 }