Merge branch 'toc-new'

# Conflicts:
#	astro.config.mjs
#	pnpm-lock.yaml
#	src/components/GlobalStyles.astro

src/components/GlobalStyles.astro

@@ -120,6 +120,10 @@ color_set({
   --admonitions-color-important: oklch(0.7 0.14 310) oklch(0.75 0.14 310)
   --admonitions-color-warning: oklch(0.7 0.14 60) oklch(0.75 0.14 60)
   --admonitions-color-caution: oklch(0.6 0.2 25) oklch(0.65 0.2 25)
+
+  --toc-badge-bg: oklch(0.9 0.045 var(--hue)) var(--btn-regular-bg)
+  --toc-btn-hover: oklch(0.92 0.015 var(--hue)) oklch(0.22 0.02 var(--hue))
+  --toc-btn-active: oklch(0.90 0.015 var(--hue)) oklch(0.25 0.02 var(--hue))
 })
 
 

src/components/control/BackToTop.astro

@@ -25,7 +25,7 @@ import { Icon } from 'astro-icon/components'
     font-weight: bold
     border: none
     position: fixed
-    bottom: 15rem
+    bottom: 10rem
     opacity: 1
     cursor: pointer
     transform: translateX(5rem)

src/components/widget/SideBar.astro

@@ -2,8 +2,17 @@
 import Profile from './Profile.astro'
 import Tag from './Tags.astro'
 import Categories from './Categories.astro'
+import type { MarkdownHeading } from 'astro'
+import TOC from './TOC.astro'
+
+interface Props {
+    class? : string
+    headings? : MarkdownHeading[]
+}
 
 const className = Astro.props.class
+const headings = Astro.props.headings
+
 ---
 <div id="sidebar" class:list={[className, "w-full"]}>
     <div class="flex flex-col w-full gap-4 mb-4">

src/components/widget/TOC.astro

@@ -0,0 +1,60 @@
+---
+import type { MarkdownHeading } from 'astro';
+
+interface Props {
+  class?: string
+  headings: MarkdownHeading[]
+}
+
+const { headings = []  } = Astro.props;
+
+// generate random headings, for testing
+/*
+for (let i = 0; i < 50; i++) {
+    headings.push({
+        text: `Heading ${i + 1}`,
+        depth: Math.floor(Math.random() * 3) + 1,
+        slug: `heading-${i + 1}`
+    })
+}
+*/
+
+let minDepth = 10;
+for (const heading of headings) {
+    minDepth = Math.min(minDepth, heading.depth);
+}
+
+const className = Astro.props.class
+
+const removeTailingHash = (text: string) => {
+    let lastIndexOfHash = text.lastIndexOf('#');
+    if (lastIndexOfHash != text.length - 1) {
+        return text;
+    }
+
+    return text.substring(0, lastIndexOfHash);
+}
+
+let heading1Count = 1;
+---
+<div class:list={[className]}>
+    {headings.filter((heading) => heading.depth <= minDepth + 1).map((heading) =>
+            <a href={`#${heading.slug}`} class="px-2 transition flex w-full gap-2 h-9 rounded-xl items-center
+        hover:bg-[var(--toc-btn-hover)] active:bg-[var(--toc-btn-active)]
+    ">
+                <div class:list={["w-5 h-5 rounded-lg text-xs flex items-center justify-center font-bold",
+                    {
+                        "bg-[var(--toc-badge-bg)] text-[var(--btn-content)]": heading.depth == minDepth,
+                    }
+                ]}
+                >
+                    {heading.depth == minDepth && heading1Count++}
+                    {heading.depth == minDepth + 1 && <div class="w-1.5 h-1.5 rounded-sm bg-black/5 dark:bg-white/5"></div>}
+                </div>
+                <div class:list={["text-sm", {
+                    "text-50": heading.depth == minDepth,
+                    "text-30": heading.depth == minDepth + 1,
+                }]}>{removeTailingHash(heading.text)}</div>
+            </a>
+    )}
+</div>