From 1b652f686d99bc92673481660d69a5a08b4e2a4c Mon Sep 17 00:00:00 2001 From: saicaca Date: Mon, 28 Oct 2024 00:45:16 +0800 Subject: [PATCH] feat: add configurations for TOC component --- src/components/widget/TOC.astro | 42 +++++++++++++++++++++----------- src/config.ts | 4 +++ src/layouts/MainGridLayout.astro | 7 ++++-- src/types/config.ts | 4 +++ 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/components/widget/TOC.astro b/src/components/widget/TOC.astro index 7b4f2a1..1ef6e5f 100644 --- a/src/components/widget/TOC.astro +++ b/src/components/widget/TOC.astro @@ -1,23 +1,33 @@ --- import type { MarkdownHeading } from 'astro'; +import { siteConfig } from "../../config"; interface Props { class?: string headings: MarkdownHeading[] } -const { headings = [] } = Astro.props; +let { 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}` - }) -} -*/ +// headings = [ +// { text: 'Heading 1', depth: 1, slug: 'heading-1' }, +// { text: 'Heading 2', depth: 2, slug: 'heading-2' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 2', depth: 2, slug: 'heading-2' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 1', depth: 1, slug: 'heading-1' }, +// { text: 'Heading 2', depth: 2, slug: 'heading-2' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 2', depth: 2, slug: 'heading-2' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// { text: 'Heading 3', depth: 3, slug: 'heading-3' }, +// ] let minDepth = 10; for (const heading of headings) { @@ -36,9 +46,11 @@ const removeTailingHash = (text: string) => { } let heading1Count = 1; + +const maxLevel = siteConfig.toc.depth; ---
- {headings.filter((heading) => heading.depth <= minDepth + 1).map((heading) => + {headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) => @@ -46,15 +58,17 @@ let heading1Count = 1; { "bg-[var(--toc-badge-bg)] text-[var(--btn-content)]": heading.depth == minDepth, "ml-4": heading.depth == minDepth + 1, + "ml-8": heading.depth == minDepth + 2, } ]} > {heading.depth == minDepth && heading1Count++} - {heading.depth == minDepth + 1 &&
} + {heading.depth == minDepth + 1 &&
} + {heading.depth == minDepth + 2 &&
}
{removeTailingHash(heading.text)}
)} diff --git a/src/config.ts b/src/config.ts index 8908057..d2c38b5 100644 --- a/src/config.ts +++ b/src/config.ts @@ -24,6 +24,10 @@ export const siteConfig: SiteConfig = { url: '' // (Optional) URL link to the original artwork or artist's page } }, + toc: { + enable: true, // Display the table of contents on the right side of the post + depth: 2 // Maximum heading depth to show in the table, from 1 to 3 + }, favicon: [ // Leave this array empty to use the default favicon // { // src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro index ba98acd..354855d 100644 --- a/src/layouts/MainGridLayout.astro +++ b/src/layouts/MainGridLayout.astro @@ -93,7 +93,7 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
-
+ {siteConfig.toc.enable &&
@@ -101,7 +101,10 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
-
+
} + + + {!siteConfig.toc.enable &&
}
diff --git a/src/types/config.ts b/src/types/config.ts index 500035d..67e5f25 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -20,6 +20,10 @@ export type SiteConfig = { url?: string } } + toc: { + enable: boolean + depth: 1 | 2 | 3 + } favicon: Favicon[] }