improved nav link

Author: mariotaku

src/scss/page/_sidebar.scss

@@ -37,6 +37,14 @@ aside.sidebar {
 
     li {
       @extend .text-secondary;
+
+      &.active {
+        @extend .text-body;
+      }
+
+      li {
+        @extend .ps-2;
+      }
     }
 
     line-height: 1.75;

src/views/guides/_sidebar.md

@@ -11,7 +11,7 @@
         * [GetMeNow](/guides/rooting/getmenow/)
         * [NVM](/guides/rooting/nvm/)
 * :bi-sliders:System Customization
-    * [Multiview](/guides/customize/multiview/)
-    * [Fix Jailer Config](/guides/customize/jail-fix/)
+    * [Multi-View](/guides/customize/multiview/)
+    * Fix Jailer Config
     * Move Apps to USB
     * Remove Store Demo

webpack/markdown-to-page.js

@@ -7,6 +7,8 @@ import {visit} from "unist-util-visit";
 import {visitParents} from "unist-util-visit-parents";
 import {toString} from "hast-util-to-string";
 import rehypeStringify from "rehype-stringify";
+import {html} from "./htm-rehype.js";
+import {idFromTitle} from "./utils.js";
 
 /**
  * @param relative {string}
@@ -56,12 +58,30 @@ export function sidebarProcessor(activePath) {
        *
        * @param li {import('hast').Element}
        */
-      function removeSubList(li) {
+      function collapseSubList(li) {
         const ulIndex = li.children.findIndex(({tagName}) => tagName === 'ul');
         if (ulIndex < 0) {
           return;
         }
-        li.children.splice(ulIndex, 1);
+        const childrenBeforeUl = li.children.slice(0, ulIndex);
+        let useCollapse = false;
+        if (!childrenBeforeUl.find(({tagName}) => tagName === 'a')) {
+          const index = childrenBeforeUl.findIndex(({type}) => type === 'text');
+          if (index >= 0) {
+            const title = li.children[index].value;
+            const id = idFromTitle(title);
+            li.children[index] = html`<a data-bs-toggle="collapse" href="#${id}" role="button" aria-expanded="false"
+                                         aria-controls="${id}">${title}</a>`;
+            li.children[ulIndex].properties = {
+              'class': ['collapse'],
+              'id': id
+            }
+            useCollapse = true;
+          }
+        }
+        if (!useCollapse) {
+          li.children.splice(ulIndex, 1);
+        }
       }
 
       return (tree, vfile) => {
@@ -83,7 +103,9 @@ export function sidebarProcessor(activePath) {
           let active = false;
           visit(li, node => node.tagName === 'a' && linkMatchesActive(node), () => active = true);
           if (!active) {
-            removeSubList(li);
+            collapseSubList(li);
+          } else {
+            li.properties.class = ['active'];
           }
         });
       };

webpack/remark/tabbed-code-block.js

@@ -1,7 +1,7 @@
 import {visit} from "unist-util-visit";
 import {toHtml} from "hast-util-to-html";
-import {kebabCase} from "lodash-es";
 import {html} from "../htm-rehype.js";
+import {idFromTitle} from "../utils.js";
 
 /** @typedef {Code & {tab: string, tabId: string}} TabbedCode */
 
@@ -21,7 +21,7 @@ export default function tabbedCodeBlock() {
        */
       (node, index, parent) => {
         node['tab'] = node.meta;
-        node['tabId'] = kebabCase(node.meta.replaceAll(/[^\w\s]+/g, (s) => `u${s.charCodeAt(0).toString(16)}`));
+        node['tabId'] = idFromTitle(node.meta);
         if (isTabbedCodeBlock(parent.children[index + 1])) {
           return;
         }

webpack/utils.js

@@ -0,0 +1,10 @@
+import {kebabCase} from "lodash-es";
+
+/**
+ *
+ * @param title {string}
+ * @return {string}
+ */
+export function idFromTitle(title) {
+  return kebabCase(title.replace(/[^\w\s]+/g, (s) => `u${s.charCodeAt(0).toString(16)}`));
+}