fix: restrict heading deps

SveltePress · Mar 5, 2024 · aa8162c · aa8162c
1 parent 21cd863
commit aa8162c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/.changeset/forty-plums-smile.md b/.changeset/forty-plums-smile.md
@@ -0,0 +1,5 @@
+---
+"@sveltepress/theme-default": patch
+---
+
+fix: restrict heading depth
diff --git a/packages/docs-site/src/routes/guide/default-theme/headings-and-anchors/+page.md b/packages/docs-site/src/routes/guide/default-theme/headings-and-anchors/+page.md
@@ -6,7 +6,10 @@ All headings in your page md files would render the toc on the right of the page
 As you currently can see on every page  
 And multi levels are supported
 
+# Level 1 heading
+
 ```md
+
 ## Heading1
 ### Some heading contains special characters&?:/.
 ### Heading1 nested2

diff --git a/packages/theme-default/src/components/PageLayout.svelte b/packages/theme-default/src/components/PageLayout.svelte
@@ -79,6 +79,7 @@
 {/if}
 
 <style>
+  :global(.theme-default--page-layout h1 .svp-title-anchor),
   :global(.theme-default--page-layout h2 .svp-title-anchor),
   :global(.theme-default--page-layout h3 .svp-title-anchor),
   :global(.theme-default--page-layout h4 .svp-title-anchor),
@@ -91,6 +92,7 @@
   :global(.theme-default--page-layout h2 .svp-title-anchor) {
     transform: translate(-100%, calc((-100% + 1rem) / 2));
   }
+  :global(.theme-default--page-layout h1),
   :global(.theme-default--page-layout h2),
   :global(.theme-default--page-layout h3),
   :global(.theme-default--page-layout h4),
@@ -101,12 +103,13 @@
   :global(.theme-default--page-layout h2) {
     --at-apply: 'border-t-solid border-t border-light-7 dark:border-gray-7 pt-4 mt-8 mb-4';
   }
+  :global(.theme-default--page-layout h1:hover .svp-title-anchor),
   :global(.theme-default--page-layout h2:hover .svp-title-anchor),
   :global(.theme-default--page-layout h3:hover .svp-title-anchor),
   :global(.theme-default--page-layout h4:hover .svp-title-anchor),
   :global(.theme-default--page-layout h5:hover .svp-title-anchor),
   :global(.theme-default--page-layout h6:hover .svp-title-anchor) {
-    --at-apply: pointer-events-auto opacity-100;
+    --at-apply: 'pointer-events-auto opacity-100';
   }
   .content {
     --at-apply: 'sm:w-[45vw] mx-auto pb-8 sm:pb-28 w-[90vw]';

diff --git a/packages/theme-default/src/components/Toc.svelte b/packages/theme-default/src/components/Toc.svelte
@@ -10,6 +10,9 @@
   import { afterNavigate } from '$app/navigation'
   import { page } from '$app/stores'
 
+  /**
+   * @type {Array<import('../markdown/anchors').Anchor>}
+   */
   export let anchors = []
 
   let scrollY
@@ -68,10 +71,10 @@
       {#each anchors as an, i}
         {@const active = activeIdx === i}
         <a
-          href={`#${an.slugId}`}
+          href="#${an.slugId}"
           class="item"
           class:active
-          style={`--heading-depth: ${an.depth};`}
+          style="--heading-depth: ${an.depth < 2 ? 2 : an.depth};"
         >
           {an.title}
         </a>

diff --git a/packages/theme-default/src/markdown/anchors.ts b/packages/theme-default/src/markdown/anchors.ts
@@ -1,7 +1,7 @@
 import type { Plugin } from 'unified'
 import { visit } from 'unist-util-visit'
 
-interface Anchor {
+export interface Anchor {
   slugId: string
   title: string
   depth: number