feat: fold toc, fix z-index issue

Author: Xecades

docs/index.md

@@ -16,7 +16,7 @@ Hi [👋]{.waving} 欢迎来到我的笔记本～
 :::
 ::
 
-::grid{align=equal gapx=15px gapy=20px}
+::grid{align=equal gapx=10px gapy=20px .home-grid}
 :sep{span=24}
 :::fold{always expand title="关于我" info .home-fontawesome-list}
  :user: 网名 Xecades，读作 /'zɛkeɪdz/

src/assets/css/markdown.styl

@@ -44,6 +44,9 @@ schemer(--quote-background-invert, 0, 1);
     .katex
         font-size: 1.08em;
 
+        .cjk_fallback
+            font-family: $font-family;
+
     .katex-display
         margin: 0.3em 2px;
 
@@ -354,6 +357,12 @@ schemer(--quote-background-invert, 0, 1);
 
                 &:hover
                     color: var(--color);
+    
+    /* .home-grid 标签 */
+    .home-grid .fold
+        .fold-height-listener
+            dual(--wrapper-padding, 0.8em 1.4em, 0.2em 0.9em);
+
 
 /* Animation */
 @keyframes waving

src/assets/ts/rightbar.ts

@@ -5,15 +5,23 @@ import type { MarkdownHeaderJsx } from "vite-plugin-vue-xecades-note";
 import type { Ref } from "vue";
 
 /** Header type used for ref rendering */
-export type HeaderRef = MarkdownHeaderJsx & {
-    readonly width: string;
-    readonly indent: string;
-    readonly opacity: string;
+export type SerialHeader = MarkdownHeaderJsx & {
+    width: string;
+    indent: string;
+    opacity: string;
+    index: number;
 };
+export type CascadeHeader = SerialHeader & { children: SerialHeader[] };
 
 const width_preset: string[] = ["50px", "40px", "30px", "20px", "13px"];
-const indent_preset: string[] = ["0rem", "1rem", "1.7rem", "2.3rem", "2.8rem"];
-const opacity_preset: string[] = ["1", "0.7", "0.7", "0.7", "0.7"];
+const indent_preset: string[] = [
+    "0rem",
+    "1.3rem",
+    "1.7rem",
+    "2.3rem",
+    "2.8rem",
+];
+const opacity_preset: string[] = ["1", "0.8", "0.7", "0.7", "0.7"];
 
 /**
  * Determine rightbar status (i.e. whether to display or not).
@@ -32,20 +40,41 @@ export const get_rightbar_status = (): RIGHTBAR_STATUS =>
  * @param toc - Raw TOC data imported from json
  * @returns Normalized TOC data
  */
-export const normalize_toc = (toc: MarkdownHeaderJsx[]): HeaderRef[] => {
-    const levels: number[] = toc.map((item) => item.level);
+export const serial_toc = (toc: MarkdownHeaderJsx[]): SerialHeader[] => {
+    const levels = toc.map((item) => item.level);
+    const minLevel = Math.min(...levels);
+    const maxLevel = Math.max(...levels);
 
-    const maxLevel: number = Math.max(...levels);
-    const minLevel: number = Math.min(...levels);
-
-    return toc.map((item) => ({
+    return toc.map((item, i) => ({
         ...item,
         width: width_preset[4 + item.level - maxLevel],
         indent: indent_preset[item.level - minLevel],
         opacity: opacity_preset[item.level - minLevel],
+        level: item.level - minLevel,
+        index: i,
     }));
 };
 
+export const cascade_toc = (s_toc: SerialHeader[]): CascadeHeader[] => {
+    let res: CascadeHeader[] = [];
+    let prev_root = 0;
+
+    for (let i = 1; i < s_toc.length; i++) {
+        if (s_toc[i].level === s_toc[prev_root].level) {
+            const children = s_toc.slice(prev_root + 1, i);
+            res.push({ ...s_toc[prev_root], children });
+            prev_root = i;
+        }
+    }
+
+    if (prev_root < s_toc.length) {
+        const children = s_toc.slice(prev_root + 1);
+        res.push({ ...s_toc[prev_root], children });
+    }
+
+    return res;
+};
+
 /**
  * Scroll listener class for rightbar.
  */

src/assets/ts/utils.ts

@@ -58,15 +58,20 @@ export const sleep = (ms: number) =>
  *
  * @param id - ID of the element to navigate to
  * @param smooth - Whether to scroll smoothly or not
+ * @param pushState - Whether to push state to history or not
  */
-export const navigate = (id: string, smooth: boolean = true) => {
+export const navigate = (
+    id: string,
+    smooth: boolean = true,
+    pushState: boolean = true
+) => {
     const OFFSET = 4 * 16;
     let el = document.getElementById(id);
     if (el) {
         const y = el.getBoundingClientRect().top + window.scrollY - OFFSET;
 
         window.scrollTo({ top: y, behavior: smooth ? "smooth" : "auto" });
-        history.pushState(null, "", `#${id}`);
+        if (pushState) history.pushState(null, "", `#${id}`);
     }
 };
 

src/components/LeftBar.vue

@@ -235,13 +235,14 @@ $width = $toc-offset-left + $toc-width;
     dual(--offset-top, 28px, 32px);
     dual(--offset-left, 35px, 27px);
     dual(--height, calc(100vh - var(--offset-top) * 2), unset);
+    dual(--z-index, 100, 1001);
 
     position: fixed;
     left: var(--offset-left);
     top: var(--offset-top);
     width: $width;
     height: var(--height);
-    z-index: 100;
+    z-index: var(--z-index);
 
     .nav
         display: flex;

src/components/Logo.vue

@@ -39,12 +39,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <a
-        id="logo"
-        href="https://xecades.xyz/"
-        target="_blank"
-        title="点击跳转主页"
-    >
+    <RouterLink id="logo" to="/">
         <svg
             id="logo-svg"
             xmlns="http://www.w3.org/2000/svg"
@@ -57,7 +52,7 @@ onMounted(async () => {
                 v-for="svg in svgs"
             />
         </svg>
-    </a>
+    </RouterLink>
 </template>
 
 <style scoped lang="stylus">