cocowiki 0.2.2

package/src/theme/Layout.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, inject, onMounted, onUnmounted, ref } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import config from 'virtual:cocowiki-config'
+import DefaultSiteHeader from './components/SiteHeader.vue'
+import DefaultHomeView from './components/HomeView.vue'
+import DefaultPageMeta from './components/PageMeta.vue'
+import DefaultPageOutline from './components/PageOutline.vue'
+import DefaultContentSidebar from './components/ContentSidebar.vue'
+import DefaultPageNavigation from './components/PageNavigation.vue'
+import DefaultPageFooter from './components/PageFooter.vue'
+import DefaultLoadingView from './components/LoadingView.vue'
+import DefaultNotFoundView from './components/NotFoundView.vue'
+import { cocoWikiThemeComponentsKey } from './customization'
+
+const DefaultSearchView = defineAsyncComponent(() => import('./components/SearchView.vue'))
+const DefaultArchiveView = defineAsyncComponent(() => import('./components/ArchiveView.vue'))
+const DefaultContributorsView = defineAsyncComponent(() => import('./components/ContributorsView.vue'))
+const DefaultSearchOverlay = defineAsyncComponent(() => import('./components/SearchOverlay.vue'))
+
+const overrides = inject(cocoWikiThemeComponentsKey, {})
+const SiteHeader = overrides.Header || DefaultSiteHeader
+const HomeView = overrides.Home || DefaultHomeView
+const SearchView = overrides.Search || DefaultSearchView
+const ArchiveView = overrides.Archive || DefaultArchiveView
+const ContributorsView = overrides.Contributors || DefaultContributorsView
+const PageMeta = overrides.PageMeta || DefaultPageMeta
+const PageOutline = overrides.PageOutline || DefaultPageOutline
+const ContentSidebar = overrides.ContentSidebar || DefaultContentSidebar
+const PageNavigation = overrides.PageNavigation || DefaultPageNavigation
+const PageFooter = overrides.PageFooter || DefaultPageFooter
+const SearchOverlay = overrides.SearchOverlay || DefaultSearchOverlay
+const LoadingView = overrides.Loading || DefaultLoadingView
+const NotFoundView = overrides.NotFound || DefaultNotFoundView
+
+const { frontmatter, page, site } = useData()
+const route = useRoute()
+const searchOpen = ref(false)
+const layout = computed(() => frontmatter.value.layout || 'doc')
+const sidebar = computed(() => {
+  const legacy = frontmatter.value.sidebar || config.content?.sidebar
+  const outline = frontmatter.value.outline ?? config.content?.outline
+  if (outline === false) return legacy === 'light' ? 'light' : 'none'
+  if (outline === true) return 'outline'
+  return legacy || 'outline'
+})
+const showPrevNext = computed(() => frontmatter.value.showPrevNext ?? config.content?.showPrevNext ?? false)
+const showLastUpdated = computed(() => frontmatter.value.showLastUpdated ?? config.content?.showLastUpdated ?? true)
+
+function handleKeydown(event: KeyboardEvent) {
+  if ((event.key === '/' && !['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement)?.tagName)) ||
+      ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k')) {
+    if (config.search?.enabled !== false) {
+      event.preventDefault()
+      searchOpen.value = true
+    }
+  }
+}
+
+async function handleClick(event: MouseEvent) {
+  const spoiler = (event.target as HTMLElement).closest<HTMLButtonElement>('.cw-spoiler')
+  if (spoiler) {
+    const revealed = spoiler.classList.toggle('is-revealed')
+    spoiler.setAttribute('aria-expanded', String(revealed))
+    spoiler.setAttribute('aria-label', revealed ? '剧透内容，点击隐藏' : '剧透内容，点击显示')
+    return
+  }
+  const button = (event.target as HTMLElement).closest<HTMLButtonElement>('button.copy')
+  if (!button) return
+  const code = button.parentElement?.querySelector('pre code')?.textContent
+  if (!code) return
+  await navigator.clipboard.writeText(code)
+  button.classList.add('copied')
+  window.setTimeout(() => button.classList.remove('copied'), 1800)
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+  document.addEventListener('click', handleClick)
+})
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+  document.removeEventListener('click', handleClick)
+})
+</script>
+
+<template>
+  <div class="cw-site">
+    <SiteHeader @open-search="searchOpen = true" />
+    <main :key="route.path" class="cw-main">
+      <Suspense :timeout="0">
+        <template #default>
+          <div class="cw-route-view">
+            <NotFoundView v-if="page.isNotFound" />
+            <HomeView v-else-if="layout === 'home'" />
+            <SearchView v-else-if="layout === 'search'" />
+            <ArchiveView v-else-if="layout === 'archive'" />
+            <ContributorsView v-else-if="layout === 'contributors'" />
+            <component :is="route.component" v-else-if="layout === 'special'" class="cw-special-content" v-bind="site.contentProps" />
+            <div v-else :class="['cw-doc-shell', `is-${sidebar}`]">
+              <ContentSidebar v-if="sidebar === 'light'" />
+              <article class="cw-doc">
+                <PageMeta />
+                <component :is="route.component" class="cw-prose" v-bind="site.contentProps" />
+                <PageNavigation v-if="showPrevNext" />
+                <PageFooter :show-last-updated="showLastUpdated" />
+              </article>
+              <PageOutline v-if="sidebar === 'outline'" :headers="page.headers" />
+            </div>
+          </div>
+        </template>
+        <template #fallback>
+          <LoadingView />
+        </template>
+      </Suspense>
+    </main>
+    <SearchOverlay v-if="searchOpen" @close="searchOpen = false" />
+  </div>
+</template>

package/src/theme/code.css

@@ -0,0 +1,123 @@
+.cw-prose :not(pre) > code {
+  margin: 0 .08em;
+  padding: .18em .42em;
+  color: #4f46b8;
+  border: 1px solid #e8e7f4;
+  border-radius: 6px;
+  background: #f7f7fc;
+  font-family: var(--cw-mono);
+  font-size: .86em;
+  font-weight: 520;
+}
+
+.dark .cw-prose :not(pre) > code {
+  color: #c4bfff;
+  border-color: #30303d;
+  background: #202028;
+}
+
+.cw-prose div[class*='language-'] {
+  position: relative;
+  margin: 1.65em 0;
+  overflow: hidden;
+  border: 1px solid #e4e7ec;
+  border-radius: 12px;
+  background: #f7f8fa;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
+}
+
+.cw-prose div[class*='language-']::before {
+  display: block;
+  height: 38px;
+  border-bottom: 1px solid #e8eaee;
+  background: #fbfbfc;
+  content: '';
+}
+
+.dark .cw-prose div[class*='language-'] {
+  border-color: #292b31;
+  background: #17181c;
+  box-shadow: none;
+}
+
+.dark .cw-prose div[class*='language-']::before {
+  border-color: #292b31;
+  background: #1c1d22;
+}
+
+.cw-prose div[class*='language-'] .lang {
+  position: absolute;
+  top: 0;
+  left: 15px;
+  z-index: 2;
+  color: #7d8590;
+  font-family: var(--cw-mono);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 38px;
+  text-transform: uppercase;
+}
+
+.cw-prose div[class*='language-'] .lang::before {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background: #7c6ee6;
+  content: '';
+}
+
+.cw-prose div[class*='language-'] button.copy {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  z-index: 3;
+  min-width: 48px;
+  height: 25px;
+  padding: 0 8px;
+  color: #69707c;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.cw-prose div[class*='language-'] button.copy::after { content: '复制'; }
+.cw-prose div[class*='language-'] button.copy:hover { color: #353b45; background: #eff0f3; }
+.cw-prose div[class*='language-'] button.copy.copied { color: #16835f; }
+.cw-prose div[class*='language-'] button.copy.copied::after { content: '已复制'; }
+.dark .cw-prose div[class*='language-'] button.copy { color: #9297a3; }
+.dark .cw-prose div[class*='language-'] button.copy:hover { color: #fff; background: #292b31; }
+
+.cw-prose div[class*='language-'] pre {
+  margin: 0;
+  overflow-x: auto;
+  padding: 18px 20px 20px;
+  background: transparent !important;
+  font-family: var(--cw-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  tab-size: 2;
+}
+
+.cw-prose div[class*='language-'] code {
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+  color: #24292f;
+  font-family: inherit;
+}
+
+.cw-prose .vp-code span { color: var(--shiki-light); font-style: var(--shiki-light-font-style); font-weight: var(--shiki-light-font-weight); text-decoration: var(--shiki-light-text-decoration); }
+.dark .cw-prose .vp-code span { color: var(--shiki-dark); font-style: var(--shiki-dark-font-style); font-weight: var(--shiki-dark-font-weight); text-decoration: var(--shiki-dark-text-decoration); }
+.dark .cw-prose div[class*='language-'] code { color: #e6edf3; }
+.cw-prose .line { display: inline-block; width: 100%; min-height: 1.7em; }
+.cw-prose .line.highlighted { margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px); background: rgba(91, 91, 214, .08); }
+.cw-prose .line-numbers-wrapper { display: none; }
+
+@media (max-width: 640px) {
+  .cw-prose div[class*='language-'] { margin-right: -4px; margin-left: -4px; border-radius: 10px; }
+  .cw-prose div[class*='language-'] pre { padding: 16px; font-size: 12.5px; }
+}

package/src/theme/components/ArchiveView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, shallowRef } from 'vue'
+import { withBase } from 'vitepress'
+import type { SearchRecord } from '../../node/content'
+import { loadContentRecords } from '../content'
+
+const query = ref('')
+const records = shallowRef<SearchRecord[]>([])
+const archive = computed(() => records.value.filter((record) => {
+  if (record.archive === false) return false
+  return !['home', 'search', 'archive'].includes(record.layout || '')
+}))
+const groups = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  const filtered = archive.value.filter((item) => !needle || [item.title, item.description, item.content, item.type, item.category, ...(item.aliases || []), ...(item.tags || [])].join(' ').toLocaleLowerCase().includes(needle))
+  const grouped = filtered.reduce<Record<string, typeof filtered>>((result, item) => {
+    const name = item.category || item.type || '未分类'
+    ;(result[name] ||= []).push(item)
+    return result
+  }, {})
+  return Object.entries(grouped)
+    .sort(([a], [b]) => a.localeCompare(b, 'zh-CN'))
+})
+
+onMounted(async () => { records.value = await loadContentRecords() })
+</script>
+
+<template>
+  <div class="cw-archive">
+    <header>
+      <div><p class="cw-kicker">ARCHIVE INDEX · 全部词条</p><h1>归档索引</h1><p>按分类浏览 {{ archive.length }} 份记录，或直接输入名称。</p></div>
+      <label><span>⌕</span><input v-model="query" type="search" placeholder="在归档中筛选"></label>
+    </header>
+    <section v-for="([name, items], groupIndex) in groups" :key="name" class="cw-archive-group">
+      <div class="cw-archive-group__title"><span>0{{ groupIndex + 1 }}</span><h2>{{ name }}</h2><small>{{ items?.length }} ENTRIES</small></div>
+      <div class="cw-archive-list">
+        <a v-for="item in items" :key="item.route" :href="withBase(item.route)">
+          <div><strong>{{ item.title }}</strong><span v-if="item.aliases?.length">又名 {{ item.aliases.join('、') }}</span></div>
+          <p>{{ item.description }}</p><b>↗</b>
+        </a>
+      </div>
+    </section>
+    <div v-if="!groups.length" class="cw-empty"><strong>没有匹配的词条</strong><p>清除筛选后查看全部归档。</p></div>
+  </div>
+</template>

package/src/theme/components/ContentSidebar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRoute, withBase } from 'vitepress'
+import config from 'virtual:cocowiki-config'
+
+const route = useRoute()
+</script>
+
+<template>
+  <aside class="cw-content-sidebar" aria-label="内容导航">
+    <p>站点导航</p>
+    <a
+      v-for="item in config.navigation"
+      v-show="item.link"
+      :key="item.text"
+      :class="{ active: item.link && (route.path === item.link || (item.link !== '/' && route.path.startsWith(item.link))) }"
+      :href="item.link ? withBase(item.link) : undefined"
+    >{{ item.text }}</a>
+  </aside>
+</template>

package/src/theme/components/ContributorList.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+import contributors from 'virtual:cocowiki-contributors'
+
+interface Contributor {
+  name: string
+  initials?: string
+  role?: string
+  avatar?: string
+  url?: string
+  github?: string
+}
+
+const props = withDefaults(defineProps<{
+  names?: string[]
+  compact?: boolean
+  label?: string
+}>(), {
+  names: undefined,
+  compact: false,
+  label: '本页记录者'
+})
+
+const { frontmatter } = useData()
+const contributorMap = contributors as Record<string, Omit<Contributor, 'name'> & { name?: string }>
+const selected = computed<Contributor[]>(() => (props.names || frontmatter.value.contributors || []).map((key: string) => ({
+  ...(contributorMap[key] || {}),
+  name: contributorMap[key]?.name || key,
+  initials: contributorMap[key]?.initials || key.slice(0, 2).toUpperCase()
+})))
+
+function profileUrl(person: Contributor) {
+  if (person.url) return person.url
+  if (!person.github) return undefined
+  return person.github.startsWith('http') ? person.github : `https://github.com/${person.github}`
+}
+</script>
+
+<template>
+  <div v-if="selected.length" :class="['cw-contributors', { compact }]">
+    <span v-if="!compact" class="cw-contributors__label">{{ label }}</span>
+    <component
+      :is="profileUrl(person) ? 'a' : 'span'"
+      v-for="person in selected"
+      :key="person.name"
+      class="cw-contributor"
+      :href="profileUrl(person)"
+      :target="profileUrl(person) ? '_blank' : undefined"
+      :rel="profileUrl(person) ? 'noreferrer' : undefined"
+    >
+      <img v-if="person.avatar" class="cw-contributor-avatar" :src="withBase(person.avatar)" alt="">
+      <span v-else class="cw-contributor-avatar cw-contributor-avatar--fallback">{{ person.initials }}</span>
+      <span><strong>{{ person.name }}</strong><small v-if="!compact && person.role">{{ person.role }}</small></span>
+    </component>
+  </div>
+</template>
+
+<style scoped>
+.cw-contributors { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
+.cw-contributors__label { width: 100%; color: var(--cw-muted); font-size: .68rem; font-weight: 750; letter-spacing: .1em; }
+.cw-contributor { display: flex; align-items: center; gap: 9px; padding: 7px 11px 7px 7px; color: inherit; border: 1px solid var(--cw-border); border-radius: 999px; text-decoration: none; }
+a.cw-contributor:hover { border-color: var(--cw-accent); }
+.cw-contributor-avatar { width: 29px; height: 29px; object-fit: cover; border-radius: 50%; }
+.cw-contributor-avatar--fallback { display: grid; place-items: center; color: white; background: var(--cw-accent); font-size: .62rem; font-weight: 800; }
+strong, small { display: block; line-height: 1.25; }
+strong { font-size: .76rem; }
+small { color: var(--cw-muted); font-size: .62rem; }
+.compact { display: inline-flex; margin-top: 22px; }
+.compact .cw-contributor { padding: 3px 8px 3px 3px; border: 0; background: var(--cw-surface-soft); }
+.compact .cw-contributor-avatar { width: 23px; height: 23px; }
+</style>

package/src/theme/components/ContributorsView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, onMounted, shallowRef } from 'vue'
+import { withBase } from 'vitepress'
+import contributors from 'virtual:cocowiki-contributors'
+import type { SearchRecord } from '../../node/content'
+import { loadContentRecords } from '../content'
+import { useContributorContributionSources } from '../contributors'
+
+interface ContributorProfile {
+  name?: string
+  initials?: string
+  role?: string
+  avatar?: string
+  url?: string
+  github?: string
+}
+
+const records = shallowRef<SearchRecord[]>([])
+const sources = useContributorContributionSources()
+const profiles = contributors as Record<string, ContributorProfile>
+
+const entries = computed(() => {
+  const counts: Record<string, number> = {}
+  for (const record of records.value) {
+    for (const name of new Set(record.contributors || [])) counts[name] = (counts[name] || 0) + 1
+  }
+  for (const source of sources.values()) {
+    for (const [name, count] of Object.entries(source)) counts[name] = (counts[name] || 0) + count
+  }
+
+  return [...new Set([...Object.keys(profiles), ...Object.keys(counts)])]
+    .map((key) => ({ key, count: counts[key] || 0, ...profiles[key], name: profiles[key]?.name || key }))
+    .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name, 'zh-CN'))
+})
+
+const total = computed(() => entries.value.reduce((sum, person) => sum + person.count, 0))
+
+function profileUrl(person: ContributorProfile) {
+  if (person.url) return person.url
+  if (!person.github) return undefined
+  return person.github.startsWith('http') ? person.github : `https://github.com/${person.github}`
+}
+
+onMounted(async () => { records.value = await loadContentRecords() })
+</script>
+
+<template>
+  <div class="cw-contributor-page">
+    <header>
+      <div><p class="cw-kicker">CONTRIBUTORS · 共建者</p><h1>贡献者</h1><p>每次在页面 Frontmatter 中署名，都会计入一次贡献。</p></div>
+      <strong>{{ total }} <small>次贡献</small></strong>
+    </header>
+    <section class="cw-contributor-grid">
+      <component
+        :is="profileUrl(person) ? 'a' : 'article'"
+        v-for="person in entries"
+        :key="person.key"
+        class="cw-contributor-card"
+        :href="profileUrl(person)"
+        :target="profileUrl(person) ? '_blank' : undefined"
+        :rel="profileUrl(person) ? 'noreferrer' : undefined"
+      >
+        <img v-if="person.avatar" :src="withBase(person.avatar)" alt="">
+        <span v-else>{{ person.initials || person.name.slice(0, 2).toUpperCase() }}</span>
+        <div><h2>{{ person.name }}</h2><p>{{ person.role || '贡献者' }}</p></div>
+        <b>{{ person.count }}<small>次</small></b>
+      </component>
+    </section>
+  </div>
+</template>

package/src/theme/components/HomeView.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useData, useRouter, withBase } from 'vitepress'
+import config from 'virtual:cocowiki-config'
+
+interface HomeAction {
+  text: string
+  link: string
+  theme?: 'brand' | 'alt'
+}
+
+const { frontmatter } = useData()
+const router = useRouter()
+const query = ref('')
+const hero = computed(() => ({ ...(config.home || {}), ...(frontmatter.value.hero || {}) }))
+const actions = computed<HomeAction[]>(() => hero.value.actions || [])
+const visualImage = computed(() => hero.value.visual?.image || config.logo)
+const visualLabels = computed<string[]>(() => hero.value.visual?.labels || ['Markdown', 'Vue', 'Search'])
+
+function search() {
+  const value = query.value.trim()
+  if (value) router.go(withBase(`/search?q=${encodeURIComponent(value)}`))
+}
+</script>
+
+<template>
+  <div class="cw-home">
+    <section class="cw-hero">
+      <div class="cw-hero__content">
+        <p v-if="hero.eyebrow" class="cw-hero__eyebrow">
+          <span></span>{{ hero.eyebrow }}
+        </p>
+        <h1>
+          <span class="cw-hero__name">{{ hero.name || config.title }}</span>
+          <span>{{ hero.text || config.description }}</span>
+        </h1>
+        <p v-if="hero.tagline" class="cw-hero__tagline">{{ hero.tagline }}</p>
+
+        <form v-if="config.search?.enabled !== false" class="cw-home-search" @submit.prevent="search">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4"/></svg>
+          <label class="cw-sr-only" for="home-search">搜索整个资料库</label>
+          <input id="home-search" v-model="query" type="search" :placeholder="hero.search?.placeholder || '搜索整个资料库…'" autocomplete="off">
+          <kbd>/</kbd>
+          <button type="submit">搜索</button>
+        </form>
+
+        <div v-if="actions.length" class="cw-hero__actions">
+          <a v-for="action in actions" :key="action.link" :class="`is-${action.theme || 'alt'}`" :href="withBase(action.link)">
+            {{ action.text }}
+            <svg v-if="action.theme === 'brand'" aria-hidden="true" viewBox="0 0 20 20"><path d="m7 4 6 6-6 6"/></svg>
+          </a>
+        </div>
+      </div>
+
+      <div class="cw-hero__visual" aria-hidden="true">
+        <div class="cw-orbit cw-orbit--outer"></div>
+        <div class="cw-orbit cw-orbit--inner"></div>
+        <div class="cw-hero__core">
+          <img v-if="visualImage" :src="withBase(visualImage)" alt="">
+          <template v-else><span>C</span><small>WIKI</small></template>
+        </div>
+        <span v-for="(label, index) in visualLabels.slice(0, 6)" :key="`${label}-${index}`" :class="['cw-node', `cw-node--${index + 1}`]">{{ label }}</span>
+        <i class="cw-dot cw-dot--one"></i>
+        <i class="cw-dot cw-dot--two"></i>
+      </div>
+    </section>
+
+    <footer v-if="hero.note" class="cw-home-note">
+      <span></span><p>{{ hero.note }}</p>
+    </footer>
+  </div>
+</template>

package/src/theme/components/LoadingView.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="cw-route-loading" role="status" aria-live="polite">
+    <span aria-hidden="true"></span>
+    <p>正在载入页面</p>
+  </div>
+</template>

package/src/theme/components/NotFoundView.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+</script>
+
+<template>
+  <section class="cw-not-found">
+    <div class="cw-not-found__number" aria-hidden="true">404</div>
+    <p class="cw-kicker">LOST PAGE</p>
+    <h1>这一页没有留下来。</h1>
+    <p>也许它被风吹散了，也许从未写下。</p>
+    <nav aria-label="离开未找到页面">
+      <a class="is-primary" :href="withBase('/')">返回首页</a>
+      <a :href="withBase('/archive')">浏览归档</a>
+    </nav>
+  </section>
+</template>

package/src/theme/components/PageFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useData, withBase } from 'vitepress'
+import config from 'virtual:cocowiki-config'
+
+defineProps<{ showLastUpdated?: boolean }>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <footer class="cw-doc-footer">
+    <a v-if="config.search?.enabled !== false" :href="withBase('/search')">返回搜索</a>
+    <a :href="withBase('/archive')">浏览归档</a>
+    <span v-if="showLastUpdated && page.lastUpdated">最后更新：{{ new Date(page.lastUpdated).toLocaleDateString('zh-CN') }}</span>
+  </footer>
+</template>

package/src/theme/components/PageMeta.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import ContributorList from './ContributorList.vue'
+
+const { frontmatter } = useData()
+const typeLabel = computed(() => [frontmatter.value.category, frontmatter.value.type].filter(Boolean).join(' · '))
+</script>
+
+<template>
+  <header class="cw-page-meta">
+    <div v-if="typeLabel" class="cw-eyebrow"><span></span>{{ typeLabel }}</div>
+    <h1>{{ frontmatter.title }}</h1>
+    <p v-if="frontmatter.description" class="cw-page-description">{{ frontmatter.description }}</p>
+    <div v-if="frontmatter.tags?.length" class="cw-tags">
+      <span v-for="tag in frontmatter.tags" :key="tag">{{ tag }}</span>
+    </div>
+    <div v-if="frontmatter.contributors?.length" class="cw-meta-contributors">
+      <span>贡献者</span>
+      <ContributorList :names="frontmatter.contributors" compact />
+    </div>
+  </header>
+</template>

package/src/theme/components/PageNavigation.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, onMounted, shallowRef } from 'vue'
+import { useRoute, withBase } from 'vitepress'
+import type { SearchRecord } from '../../node/content'
+import { loadContentRecords } from '../content'
+
+const route = useRoute()
+const records = shallowRef<SearchRecord[]>([])
+const currentIndex = computed(() => records.value.findIndex((record) => record.route === route.path.replace(/\.html$/, '').replace(/\/$/, '') || (route.path === '/' && record.route === '/')))
+const previous = computed(() => currentIndex.value > 0 ? records.value[currentIndex.value - 1] : undefined)
+const next = computed(() => currentIndex.value >= 0 && currentIndex.value < records.value.length - 1 ? records.value[currentIndex.value + 1] : undefined)
+
+onMounted(async () => {
+  records.value = (await loadContentRecords()).filter((record) =>
+    record.search !== false && !['home', 'search', 'archive', 'contributors'].includes(record.layout || '')
+  )
+})
+</script>
+
+<template>
+  <nav v-if="previous || next" class="cw-page-navigation" aria-label="相邻页面">
+    <a v-if="previous" :href="withBase(previous.route)"><small>上一篇</small><strong>← {{ previous.title }}</strong></a>
+    <span v-else></span>
+    <a v-if="next" :href="withBase(next.route)"><small>下一篇</small><strong>{{ next.title }} →</strong></a>
+  </nav>
+</template>

package/src/theme/components/PageOutline.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+
+interface OutlineHeading {
+  level: number
+  title: string
+  slug: string
+}
+
+const props = defineProps<{ headers?: OutlineHeading[] }>()
+const headings = ref<OutlineHeading[]>(props.headers || [])
+
+onMounted(async () => {
+  await nextTick()
+  headings.value = Array.from(document.querySelectorAll<HTMLElement>('.cw-prose h2[id], .cw-prose h3[id]')).map((heading) => {
+    const title = heading.cloneNode(true) as HTMLElement
+    title.querySelector('.header-anchor')?.remove()
+    return {
+      level: Number(heading.tagName.slice(1)),
+      title: title.textContent?.trim() || heading.id,
+      slug: heading.id
+    }
+  })
+})
+</script>
+
+<template>
+  <aside v-if="headings.length" class="cw-outline" aria-label="本页目录">
+    <p>本页目录</p>
+    <a v-for="heading in headings" :key="heading.slug" :class="`level-${heading.level}`" :href="`#${heading.slug}`">
+      {{ heading.title }}
+    </a>
+  </aside>
+</template>