From 8fb5bf887718f33803f229af3c70fd857a7e5b8b Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sun, 20 Aug 2023 22:33:58 +0800
Subject: [PATCH 1/3] feat: add a sidebar menu to the rule page

---
 site/rules.html     |  5 ++++-
 site/src/global.css | 19 +++++++++++++++++++
 site/src/rules.js   | 20 ++++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
diff --git a/site/rules.html b/site/rules.html
index 88812cc..92bfc67 100644
--- 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="docs w-full max-w-3xl mx-auto p-4 pt-10 relative">
       <div style="display: none">
         <svg>
           <symbol id="autolink-icon" width="24" height="24" fill="currentColor">
@@ -43,6 +43,9 @@
           </a>
         </nav>
       </header>
+      <div class="absolute aside-menu-container">
+        <div class="fixed top-0 aside-menu"></div>
+      </div>
       <!-- rules.md -->
       <footer class="my-16">
         <a class="anchor-link" href="/"> ➥ Back to main page </a>
diff --git a/site/src/global.css b/site/src/global.css
index b8e27a7..168c011 100644
--- a/site/src/global.css
+++ b/site/src/global.css
@@ -90,6 +90,7 @@ body {
 .docs li {
   line-height: 1.5;
   opacity: 0.8;
+  list-style: none;
 }
 
 p {
@@ -197,6 +198,24 @@ button {
   );
 }
 
+.aside-menu-container {
+  top: 80px;
+  left: 100%;
+}
+.docs .aside-menu-list {
+  margin-top: 80px;
+  width: 200px;
+  text-overflow: ellipsis;
+}
+.aside-menu-list li {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.aside-link {
+  text-decoration: none;
+}
+
 @media (prefers-color-scheme: dark) {
   html,
   body {
diff --git a/site/src/rules.js b/site/src/rules.js
index 9ff5a0e..7a353cf 100644
--- a/site/src/rules.js
+++ b/site/src/rules.js
@@ -24,3 +24,23 @@ function setHashActive(hash, active) {
     heading.classList.remove('active')
   }
 }
+
+function renderAsideMenu() {
+  const hashElements = document.querySelectorAll('h2')
+  const ul = document.createElement('ul')
+  ul.className = 'aside-menu-list relative left-0'
+  hashElements.forEach(el => {
+    const text = el.id
+    const li = document.createElement('li')
+    const a = document.createElement('a')
+    a.className = 'aside-link'
+    a.textContent = text
+    a.title = text
+    a.href = `#${text}`
+    li.appendChild(a)
+    ul.appendChild(li)
+  })
+  const asideMenu = document.querySelector('.aside-menu')
+  asideMenu?.appendChild(ul)
+}
+renderAsideMenu()
\ No newline at end of file

From b23fb71997661a8880681dafdf2ea9498735e97e Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Mon, 21 Aug 2023 14:55:55 +0800
Subject: [PATCH 2/3] feat: inject html through plugin

---
 site/rules.html                    | 10 +++------
 site/scripts/vitePluginMarkdown.js | 34 +++++++++++++++++++++++++++++-
 site/src/global.css                | 22 ++++++++++++-------
 site/src/rules.js                  | 22 +------------------
 4 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/site/rules.html b/site/rules.html
index 92bfc67..6cf6a8a 100644
--- 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 relative">
+    <main class="docs w-full mx-auto p-4 pt-10 relative">
       <div style="display: none">
         <svg>
           <symbol id="autolink-icon" width="24" height="24" fill="currentColor">
@@ -43,13 +43,9 @@
           </a>
         </nav>
       </header>
-      <div class="absolute aside-menu-container">
-        <div class="fixed top-0 aside-menu"></div>
+      <div class="rules-content-container flex justify-center">
+        <!-- rules.md -->
       </div>
-      <!-- rules.md -->
-      <footer class="my-16">
-        <a class="anchor-link" href="/"> ➥ Back to main page </a>
-      </footer>
     </main>
   </body>
 </html>
diff --git a/site/scripts/vitePluginMarkdown.js b/site/scripts/vitePluginMarkdown.js
index 3d51887..b7e0378 100644
--- a/site/scripts/vitePluginMarkdown.js
+++ b/site/scripts/vitePluginMarkdown.js
@@ -59,7 +59,39 @@ export function markdown() {
       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 idMatch = /<h2\s*id="(.*?)">/g
+        const links = []
+        let execResult, htmlText = ''
+        while(execResult = idMatch.exec(rules)) {
+          links.push(execResult[1])
+        }
+        htmlText = `
+        <div class="aside-menu-container">
+          <div class="aside-menu">
+            <ul class="aside-menu-list hide">
+              ${links.map(link => {
+                return `<li>
+                  <a class="aside-link" title="${link}" href="#${link}">${link}</a>
+                </li>`
+              }).join('\n')}
+            </ul>
+            <ul class="aside-menu-list show">
+              ${links.map(link => {
+                return `<li>
+                  <a class="aside-link" title="${link}" href="#${link}">${link}</a>
+                </li>`
+              }).join('\n')}
+            </ul>
+          </div>
+        </div>
+        <div class="max-w-3xl">
+          ${rules}
+          <footer class="my-16">
+            <a class="anchor-link" href="/"> ➥ Back to main page </a>
+          </footer>
+        </div>
+        `
+        return html.replace('<!-- rules.md -->', htmlText)
       }
     },
     handleHotUpdate(ctx) {
diff --git a/site/src/global.css b/site/src/global.css
index 168c011..51e5922 100644
--- a/site/src/global.css
+++ b/site/src/global.css
@@ -199,18 +199,18 @@ button {
 }
 
 .aside-menu-container {
-  top: 80px;
-  left: 100%;
+  margin-right: 40px;
 }
 .docs .aside-menu-list {
   margin-top: 80px;
-  width: 200px;
-  text-overflow: ellipsis;
 }
-.aside-menu-list li {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+.aside-menu-list.hide {
+  visibility: hidden;
+}
+.aside-menu-list.show {
+  position: fixed; 
+  top: 0; 
+  z-index: 5;
 }
 .aside-link {
   text-decoration: none;
@@ -276,3 +276,9 @@ button {
     height: 5rem;
   }
 }
+
+@media screen and (max-width: 1290px) {
+  .aside-menu-container {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/site/src/rules.js b/site/src/rules.js
index 7a353cf..65f50c1 100644
--- a/site/src/rules.js
+++ b/site/src/rules.js
@@ -23,24 +23,4 @@ function setHashActive(hash, active) {
   } else {
     heading.classList.remove('active')
   }
-}
-
-function renderAsideMenu() {
-  const hashElements = document.querySelectorAll('h2')
-  const ul = document.createElement('ul')
-  ul.className = 'aside-menu-list relative left-0'
-  hashElements.forEach(el => {
-    const text = el.id
-    const li = document.createElement('li')
-    const a = document.createElement('a')
-    a.className = 'aside-link'
-    a.textContent = text
-    a.title = text
-    a.href = `#${text}`
-    li.appendChild(a)
-    ul.appendChild(li)
-  })
-  const asideMenu = document.querySelector('.aside-menu')
-  asideMenu?.appendChild(ul)
-}
-renderAsideMenu()
\ No newline at end of file
+}
\ No newline at end of file

From 5fda6a2d1c6fd1cb7ac882a6fd09086663397882 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 25 Aug 2023 15:20:03 +0800
Subject: [PATCH 3/3] Polish rules aside

---
 site/rules.html                    | 19 +++++++---
 site/scripts/vitePluginMarkdown.js | 56 ++++++++++++------------------
 site/src/global.css                | 41 +++++++++++++++-------
 site/src/rules.js                  |  8 +++--
 4 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/site/rules.html b/site/rules.html
index 6cf6a8a..adde88d 100644
--- 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 mx-auto p-4 pt-10 relative">
+    <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,8 +43,19 @@
           </a>
         </nav>
       </header>
-      <div class="rules-content-container flex justify-center">
-        <!-- rules.md -->
+      <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>
diff --git a/site/scripts/vitePluginMarkdown.js b/site/scripts/vitePluginMarkdown.js
index b7e0378..fdc4ecb 100644
--- a/site/scripts/vitePluginMarkdown.js
+++ b/site/scripts/vitePluginMarkdown.js
@@ -58,40 +58,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()
-        const idMatch = /<h2\s*id="(.*?)">/g
-        const links = []
-        let execResult, htmlText = ''
-        while(execResult = idMatch.exec(rules)) {
-          links.push(execResult[1])
-        }
-        htmlText = `
-        <div class="aside-menu-container">
-          <div class="aside-menu">
-            <ul class="aside-menu-list hide">
-              ${links.map(link => {
-                return `<li>
-                  <a class="aside-link" title="${link}" href="#${link}">${link}</a>
-                </li>`
-              }).join('\n')}
-            </ul>
-            <ul class="aside-menu-list show">
-              ${links.map(link => {
-                return `<li>
-                  <a class="aside-link" title="${link}" href="#${link}">${link}</a>
-                </li>`
-              }).join('\n')}
-            </ul>
-          </div>
-        </div>
-        <div class="max-w-3xl">
-          ${rules}
-          <footer class="my-16">
-            <a class="anchor-link" href="/"> ➥ Back to main page </a>
-          </footer>
-        </div>
-        `
-        return html.replace('<!-- rules.md -->', htmlText)
+        const rulesHtml = (await markdownProcessor.process(markdown)).toString()
+        const tocHtml = getTocHtml(rulesHtml)
+        return html
+          .replace('<!-- rules.md -->', rulesHtml)
+          .replace('<!-- rules.md (aside) -->', tocHtml)
       }
     },
     handleHotUpdate(ctx) {
@@ -104,3 +75,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
index 51e5922..6be50b9 100644
--- a/site/src/global.css
+++ b/site/src/global.css
@@ -198,22 +198,31 @@ button {
   );
 }
 
-.aside-menu-container {
-  margin-right: 40px;
+.rules-aside-toc {
+  padding-left: 2rem;
 }
-.docs .aside-menu-list {
-  margin-top: 80px;
-}
-.aside-menu-list.hide {
-  visibility: hidden;
+
+.rules-aside-toc ul {
+  margin: 0;
+  padding: 0;
 }
-.aside-menu-list.show {
-  position: fixed; 
-  top: 0; 
-  z-index: 5;
+
+.rules-aside-toc li {
+  list-style: none;
+  line-height: 1.5;
+  margin-bottom: 0.2rem;
+  opacity: 0.8;
 }
-.aside-link {
+
+.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) {
@@ -259,6 +268,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) {
@@ -281,4 +296,4 @@ button {
   .aside-menu-container {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/site/src/rules.js b/site/src/rules.js
index 65f50c1..e9d283b 100644
--- 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')
   }
-}
\ No newline at end of file
+}
