add page anchors

php-flasher · May 29, 2022 · 8185668 · 8185668
1 parent 8ec5f80
commit 8185668
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 16 deletions.
diff --git a/_data/entrypoints.yml b/_data/entrypoints.yml
@@ -6,17 +6,17 @@
         "/dist/homepage.99c5bdb6.js"
       ],
       "css": [
-        "/dist/28.b900db41.css",
+        "/dist/28.ad12939b.css",
         "/dist/homepage.0987a79e.css"
       ]
     },
     "main": {
       "js": [
         "/dist/runtime.6628e931.js",
-        "/dist/main.99790cbd.js"
+        "/dist/main.b4d47c94.js"
       ],
       "css": [
-        "/dist/28.b900db41.css",
+        "/dist/28.ad12939b.css",
         "/dist/main.d9477882.css"
       ]
     },

diff --git a/_data/manifest.yml b/_data/manifest.yml
@@ -2,7 +2,7 @@
   "dist/homepage.css": "/dist/homepage.0987a79e.css",
   "dist/homepage.js": "/dist/homepage.99c5bdb6.js",
   "dist/main.css": "/dist/main.d9477882.css",
-  "dist/main.js": "/dist/main.99790cbd.js",
+  "dist/main.js": "/dist/main.b4d47c94.js",
   "dist/adapter-flasher.js": "/dist/adapter-flasher.748d36e7.js",
   "dist/adapter-noty.js": "/dist/adapter-noty.30dd0998.js",
   "dist/adapter-notyf.js": "/dist/adapter-notyf.8e301da7.js",
@@ -14,7 +14,7 @@
   "dist/663.8391b532.js": "/dist/663.8391b532.js",
   "dist/426.b17ca3a6.js": "/dist/426.b17ca3a6.js",
   "dist/301.95337add.js": "/dist/301.95337add.js",
-  "dist/28.b900db41.css": "/dist/28.b900db41.css",
+  "dist/28.ad12939b.css": "/dist/28.ad12939b.css",
   "dist/fonts/fa-duotone-900.ttf": "/dist/fonts/fa-duotone-900.7aaed888.ttf",
   "dist/fonts/fa-thin-100.ttf": "/dist/fonts/fa-thin-100.e979819d.ttf",
   "dist/fonts/fa-light-300.ttf": "/dist/fonts/fa-light-300.c92b45dd.ttf",

diff --git a/_layouts/main.html b/_layouts/main.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
     <head>
         {% include head.html %}
     </head>
@@ -27,7 +27,7 @@
         </div>
 
         <main class="container mx-auto px-6 flex">
-            <nav id="main-navigation" class="hidden md:block">
+            <nav id="main-navigation" class="sticky top-0 hidden md:block h-full">
                 {% for section in site.data.menu %}
                     <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4">{{ section[0] }}</h4>
                     <ul class="list-reset mb-8">
@@ -62,13 +62,11 @@ <h1 class="mb-1">
 
                 {{ content }}
             </article>
-            <nav id="anchor-navigation" class="hidden md:block">
-                <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4">Jump to</h4>
-                <ul class="list-reset mb-8">
-                    <li class="px-6 rounded w-36">
-                        <a class="leading-loose text-md w-full text-gray-900" href="#main-article">Article</a>
-                    </li>
-                </ul>
+            <nav id="anchor-navigation" class="sticky top-0 hidden md:block h-full">
+                <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4">
+                    <i class="fa-duotone fa-bars-sort"></i> Jump to
+                </h4>
+                <ul class="list-reset mb-8"></ul>
             </nav>
         </main>
 

diff --git a/assets/js/_anchors.js b/assets/js/_anchors.js
@@ -0,0 +1,51 @@
+createAnchorNavigation();
+highlightCurrentAnchor();
+
+const links = document.querySelectorAll('a.anchor, #anchor-navigation ul li a');
+links.forEach((anchor) => {
+    anchor.addEventListener('click', (event) => {
+        event.preventDefault();
+
+        window.location.hash = anchor.hash;
+        highlightCurrentAnchor(anchor.hash);
+    });
+});
+
+function createAnchorNavigation() {
+    const container = document.querySelector('#anchor-navigation ul');
+    const anchors = document.querySelectorAll('a.anchor');
+
+    anchors.forEach((anchor) => {
+        const link = document.createElement('a');
+        link.href = anchor.hash;
+        link.innerText = anchor.innerText;
+        link.classList.add('leading-loose', 'text-md', 'w-full', 'text-indigo-500');
+
+        const li = document.createElement('li');
+        li.classList.add('px-6', 'rounded', 'w-36');
+        li.appendChild(link);
+
+        container.appendChild(li);
+    });
+}
+
+function highlightCurrentAnchor(hash) {
+    if (typeof hash === 'undefined') {
+        hash = window.location.hash;
+    }
+
+    const links = document.querySelectorAll('a.anchor, #anchor-navigation ul li a');
+    links.forEach((link) => {
+        const parent = link.parentElement;
+        link.classList.remove('text-gray-900');
+        link.classList.add('text-indigo-500');
+        parent.classList.remove('bg-indigo-500');
+
+        if (hash === link.hash) {
+            link.classList.remove('text-indigo-500');
+            link.classList.add('text-white');
+
+            parent.classList.add('bg-indigo-500');
+        }
+    });
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -6,3 +6,4 @@ import "../css/_monokai.css";
 import "./_menu.js";
 import "./_prev-next.js";
 import "./_clipboard.js";
+import "./_anchors.js";
diff --git a/dist/28.b900db41.css → dist/28.ad12939b.css b/dist/28.b900db41.css → dist/28.ad12939b.css
diff --git a/dist/main.99790cbd.js b/dist/main.99790cbd.js
diff --git a/dist/main.b4d47c94.js b/dist/main.b4d47c94.js
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   content: [
       "./_site/**/*.html",
+      "./_site/**/*.js",
   ],
 }