From a8f3df3619060735fc673cc46c9f78fb4f657c72 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 9 Nov 2024 00:32:52 +0800
Subject: [PATCH] feat(theme): add component `<VPDocHeader>`

---
 .../src/client/components/VPDocChangelog.vue  | 20 +++---------
 .../client/components/VPDocContributor.vue    | 21 +++----------
 theme/src/client/components/VPDocHeader.vue   | 31 +++++++++++++++++++
 3 files changed, 41 insertions(+), 31 deletions(-)
 create mode 100644 theme/src/client/components/VPDocHeader.vue

diff --git a/theme/src/client/components/VPDocChangelog.vue b/theme/src/client/components/VPDocChangelog.vue
index a4901d119..d840e7cbc 100644
--- a/theme/src/client/components/VPDocChangelog.vue
+++ b/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;
 }
diff --git a/theme/src/client/components/VPDocContributor.vue b/theme/src/client/components/VPDocContributor.vue
index 926edc6a9..bc75daef7 100644
--- a/theme/src/client/components/VPDocContributor.vue
+++ b/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;
diff --git a/theme/src/client/components/VPDocHeader.vue b/theme/src/client/components/VPDocHeader.vue
new file mode 100644
index 000000000..70c7f7873
--- /dev/null
+++ b/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>