buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-24 03:01:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhancer toc

Browse Source
This commit is contained in:
KazooTTT
2025-02-07 17:19:02 +08:00
parent 2619f3c307
commit 84730146a6
6 changed files with 47 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/componentsBefore/blog/TOC.astro
View File

@ -1,26 +1,26 @@
---
import type { MarkdownHeading } from 'astro'
import { generateToc } from '@/utils'
import type { MarkdownHeading } from "astro";
import { generateToc } from "@/utils";
import TOCHeading from './TOCHeading.astro'
import TOCHeading from "./TOCHeading.astro";
interface Props {
headings: MarkdownHeading[]
headings: MarkdownHeading[];
}
const { headings } = Astro.props
const { headings } = Astro.props;
const toc = generateToc(headings)
const toc = generateToc(headings);
---
<aside
class='sticky top-20 order-2 -me-28 hidden h-[calc(100vh-6rem)] basis-60 lg:flex lg:flex-col'
class="sticky top-20 order-2 -me-28 hidden h-[calc(100vh-6rem)] basis-60 lg:flex lg:flex-col"
>
{
toc.length > 0 && (
<>
<h2 class='mb-4 font-semibold'>TABLE OF CONTENTS</h2>
<ul class='max-h-[calc(100vh-10rem)] overflow-y-auto pr-4 text-card-foreground'>
<h2 class="mb-4 font-semibold">TABLE OF CONTENTS</h2>
<ul class="text-card-foreground max-h-[calc(100vh-10rem)] overflow-y-auto pr-4">
{toc.map((heading) => (
<TOCHeading heading={heading} />
))}