feat(theme): add component <VPDocHeader>

theme/src/client/components/VPDocChangelog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VPDocHeader from '@theme/VPDocHeader.vue'
 import VPLink from '@theme/VPLink.vue'
 import { computed } from 'vue'
 import { usePageLang } from 'vuepress/client'
@@ -21,21 +22,14 @@ const list = computed(() => {
 const hasChangelog = computed(() =>
   list.value.length && (frontmatter.value.changelog ?? !!themeData.value.changelog),
 )
-
-const header = computed(() => {
-  const outline = frontmatter.value.outline ?? theme.value.outline
-  const level = Array.isArray(outline) ? outline[0] : outline === 'deep' ? 2 : outline || 2
-  return `h${level}`
-})
 </script>
 
 <template>
   <div v-if="hasChangelog" class="vp-doc-changelog">
-    <component :is="header" id="doc-changelog" tabindex="-1">
-      <a href="#doc-changelog" class="header-anchor">
-        <span>{{ theme.changelogText || 'Changelog' }}</span>
-      </a>
-    </component>
+    <VPDocHeader anchor="doc-changelog">
+      {{ theme.changelogText || 'Changelog' }}
+    </VPDocHeader>
+
     <details class="hint-container details">
       <summary class="changelog-header">
         <span><span class="vpi-changelog" /><span>{{ lastUpdatedText }}:</span> <span>{{ datetime }}</span></span>
@@ -71,10 +65,6 @@ const header = computed(() => {
 </template>
 
 <style scoped>
-.vp-doc .vp-doc-changelog h2 {
-  border-top: 1px solid var(--vp-c-divider);
-}
-
 .vp-doc-changelog .changelog-header {
   display: block;
 }

theme/src/client/components/VPDocContributor.vue

@@ -1,27 +1,20 @@
 <script setup lang="ts">
+import VPDocHeader from '@theme/VPDocHeader.vue'
 import VPLink from '@theme/VPLink.vue'
 import { computed } from 'vue'
 import { useContributors, useData } from '../composables/index.js'
 
-const { theme, frontmatter } = useData()
+const { theme } = useData()
 
 const { contributors, mode } = useContributors()
 const hasContributors = computed(() => Boolean(contributors.value.length) && mode.value === 'block')
-
-const header = computed(() => {
-  const outline = frontmatter.value.outline ?? theme.value.outline
-  const level = Array.isArray(outline) ? outline[0] : outline === 'deep' ? 2 : outline || 2
-  return `h${level}`
-})
 </script>
 
 <template>
   <div v-if="hasContributors" class="vp-doc-contributor">
-    <component :is="header" id="doc-contributors" tabindex="-1">
-      <a href="#doc-contributors" class="header-anchor">
-        <span>{{ theme.contributorsText || 'Contributors' }}</span>
-      </a>
-    </component>
+    <VPDocHeader anchor="doc-contributors">
+      {{ theme.contributorsText || 'Contributors' }}
+    </VPDocHeader>
 
     <ul class="contributor-list">
       <li v-for="contributor in contributors" :key="contributor.name + contributor.email" class="contributor">
@@ -35,10 +28,6 @@ const header = computed(() => {
 </template>
 
 <style scoped>
-.vp-doc .vp-doc-contributor h2 {
-  border-top: 1px solid var(--vp-c-divider);
-}
-
 .vp-doc-contributor .contributor-list {
   display: flex;
   flex-wrap: wrap;

theme/src/client/components/VPDocHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/index.js'
+
+defineProps<{
+  title?: string
+  anchor: string
+}>()
+
+const { theme, frontmatter } = useData()
+
+const header = computed(() => {
+  const outline = frontmatter.value.outline ?? theme.value.outline
+  const level = Array.isArray(outline) ? outline[0] : outline === 'deep' ? 2 : outline || 2
+  return `h${level}`
+})
+</script>
+
+<template>
+  <component :is="header" :id="anchor" tabindex="-1" class="vp-doc-header">
+    <a :href="`#${anchor}`" class="header-anchor">
+      <span><slot>{{ title }}</slot></span>
+    </a>
+  </component>
+</template>
+
+<style scoped>
+.vp-doc h2.vp-doc-header {
+  border-top: 1px solid var(--vp-c-divider);
+}
+</style>