feat: config for anchor link generation of headings

docs/content/4.api/3.configuration.md

@@ -334,3 +334,21 @@ Toggles the document-driven mode.
 | `globals`         | `Object \| Boolean` | A list of globals to be made available globally.               |
 | `layoutFallbacks` |     `string[]`      | A list of `globals` key to use to find a layout fallback.      |
 | `injectPage`      |      `boolean`      | Inject `[...slug].vue` pre-configured page                     |
+
+## `anchorLinks`
+
+- Type: `Boolean | Object`{lang=ts}
+- Default: `{depth: 4, exclude: [1]}`{lang=ts}
+
+Sets if anchor links are generated with the headings.
+
+`false`{lang=ts} will disable link generation.
+
+`true`{lang=ts} will enable link generation for all headings.
+
+### `anchorLinks` options
+
+| Option  |    Type    | Description                                              |
+| ------- | :--------: | :------------------------------------------------------- |
+| depth   |  `number`  | Sets the maximal depth for anchor link generation.       |
+| exclude | `number[]` | A list of which headings to exclude from link generation |

src/module.ts

@@ -186,6 +186,25 @@ export interface ModuleOptions {
     layoutFallbacks?: string[]
     injectPage?: boolean
   },
+  /**
+   * Anchor link generation config
+   *
+   * @default {}
+   */
+  anchorLinks?: boolean | {
+    /**
+     * Sets the maximal depth for anchor link generation.
+     *
+     * @default 4
+     */
+    depth?: number,
+    /**
+     * Excludes headings from link generation when they are in the depth range.
+     *
+     * @default [1]
+     */
+    exclude?: number[]
+  },
   experimental: {
     clientDB: boolean
   }
@@ -234,6 +253,10 @@ export default defineNuxtModule<ModuleOptions>({
       fields: []
     },
     documentDriven: false,
+    anchorLinks: {
+      depth: 4,
+      exclude: [1]
+    },
     experimental: {
       clientDB: false
     }
@@ -505,6 +528,27 @@ export default defineNuxtModule<ModuleOptions>({
       ])
     }
 
+    // Register anchor link generation
+    if (options.anchorLinks === true) {
+      options.anchorLinks = {
+        depth: 6,
+        exclude: []
+      }
+    } else if (options.anchorLinks === false) {
+      options.anchorLinks = {
+        depth: 0,
+        exclude: []
+      }
+    } else {
+      options.anchorLinks = {
+        ...{
+          depth: 4,
+          exclude: [1]
+        },
+        ...options.anchorLinks
+      }
+    }
+
     // @ts-ignore
     await nuxt.callHook('content:context', contentContext)
 
@@ -534,7 +578,9 @@ export default defineNuxtModule<ModuleOptions>({
       highlight: options.highlight as any,
       wsUrl: '',
       // Document-driven configuration
-      documentDriven: options.documentDriven as ModuleOptions['documentDriven']
+      documentDriven: options.documentDriven as ModuleOptions['documentDriven'],
+      // Anchor link generation config
+      anchorLinks: options.anchorLinks as ModuleOptions['anchorLinks']
     })
 
     // Context will use in server

src/runtime/components/Prose/ProseH1.vue

@@ -1,3 +1,15 @@
 <template>
-  <h1><slot /></h1>
+  <h1 :id="id">
+    <a v-if="generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
 </template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+const heading = 1
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>

src/runtime/components/Prose/ProseH2.vue

@@ -1,11 +1,15 @@
 <template>
   <h2 :id="id">
-    <a :href="`#${id}`">
+    <a v-if="generate" :href="`#${id}`">
       <slot />
     </a>
+    <slot v-else />
   </h2>
 </template>
 
 <script setup lang="ts">
 defineProps<{ id: string }>()
+const heading = 2
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
 </script>

src/runtime/components/Prose/ProseH3.vue

@@ -1,11 +1,15 @@
 <template>
   <h3 :id="id">
-    <a :href="`#${id}`">
+    <a v-if="generate" :href="`#${id}`">
       <slot />
     </a>
+    <slot v-else />
   </h3>
 </template>
 
 <script setup lang="ts">
 defineProps<{ id: string }>()
+const heading = 3
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
 </script>

src/runtime/components/Prose/ProseH4.vue

@@ -1,11 +1,15 @@
 <template>
   <h4 :id="id">
-    <a :href="`#${id}`">
+    <a v-if="generate" :href="`#${id}`">
       <slot />
     </a>
+    <slot v-else />
   </h4>
 </template>
 
 <script setup lang="ts">
 defineProps<{ id: string }>()
+const heading = 4
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
 </script>

src/runtime/components/Prose/ProseH5.vue

@@ -1,3 +1,15 @@
 <template>
-  <h5><slot /></h5>
+  <h5 :id="id">
+    <a v-if="generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h5>
 </template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+const heading = 5
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>

src/runtime/components/Prose/ProseH6.vue

@@ -1,3 +1,15 @@
 <template>
-  <h6><slot /></h6>
+  <h6 :id="id">
+    <a v-if="generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h6>
 </template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>()
+const heading = 6
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>