cocowiki 0.2.2

package/src/theme/components/SearchOverlay.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
+import { useRouter, withBase } from 'vitepress'
+import type { SearchRecord } from '../../node/content'
+import { loadSearchContent } from '../content'
+import { createSearch } from '../search'
+
+const emit = defineEmits<{ close: [] }>()
+const query = ref('')
+const router = useRouter()
+const searchable = shallowRef<SearchRecord[]>([])
+const miniSearch = shallowRef<ReturnType<typeof createSearch>>()
+const results = computed(() => {
+  if (!query.value.trim()) return searchable.value.slice(0, 5)
+  return miniSearch.value?.search(query.value, { combineWith: 'AND' }).slice(0, 6) || []
+})
+function go(route: string) { emit('close'); router.go(withBase(route)) }
+function keydown(event: KeyboardEvent) { if (event.key === 'Escape') emit('close') }
+onMounted(async () => {
+  window.addEventListener('keydown', keydown)
+  const content = await loadSearchContent()
+  searchable.value = content.records
+  miniSearch.value = content.index
+})
+onUnmounted(() => window.removeEventListener('keydown', keydown))
+</script>
+
+<template>
+  <div class="cw-search-overlay" role="dialog" aria-modal="true" aria-label="搜索资料库" @click.self="$emit('close')">
+    <div class="cw-search-dialog">
+      <div class="cw-search-dialog__input"><span>⌕</span><input v-model="query" autofocus type="search" placeholder="搜索人物、物品、概念……"><kbd>ESC</kbd></div>
+      <div class="cw-search-dialog__results">
+        <button v-for="item in results" :key="item.route" @click="go(item.route)"><span>{{ item.category || item.type }}</span><strong>{{ item.title }}</strong><small>{{ item.description }}</small></button>
+        <p v-if="!results.length">没有找到相关记录</p>
+      </div>
+      <button class="cw-search-dialog__all" @click="go(`/search?q=${encodeURIComponent(query)}`)">查看全部搜索结果 <span>→</span></button>
+    </div>
+  </div>
+</template>

package/src/theme/components/SearchView.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, shallowRef } from 'vue'
+import { withBase } from 'vitepress'
+import type { SearchRecord } from '../../node/content'
+import { loadSearchContent } from '../content'
+import { createSearch } from '../search'
+
+type SearchResultRecord = SearchRecord & { contributorNames?: string[] }
+
+const query = ref('')
+const type = ref('all')
+const searchable = shallowRef<SearchRecord[]>([])
+const miniSearch = shallowRef<ReturnType<typeof createSearch>>()
+
+const types = computed(() => [...new Set(searchable.value.map((item) => item.category || item.type).filter((value): value is string => Boolean(value)))])
+const results = computed(() => {
+  const found = query.value.trim()
+    ? miniSearch.value?.search(query.value, { combineWith: 'AND' }) || []
+    : searchable.value.map((item) => ({ ...item, id: item.route, score: 0 }))
+  return found.filter((item) => type.value === 'all' || item.category === type.value || item.type === type.value)
+})
+
+function snippet(content = '', needle = '') {
+  const plain = content.replace(/\s+/g, ' ')
+  const index = plain.toLocaleLowerCase().indexOf(needle.toLocaleLowerCase())
+  if (index < 0) return plain.slice(0, 110)
+  return `${index > 35 ? '…' : ''}${plain.slice(Math.max(0, index - 35), index + needle.length + 65)}${index + needle.length + 65 < plain.length ? '…' : ''}`
+}
+
+function matchSnippet(item: SearchResultRecord, needle: string) {
+  const names = item.contributorNames || item.contributors || []
+  const contributorMatch = names.some((name) => name.toLocaleLowerCase().includes(needle.toLocaleLowerCase()))
+  return contributorMatch ? `贡献者：${names.join('、')}` : snippet(item.content, needle)
+}
+
+onMounted(async () => {
+  query.value = new URLSearchParams(location.search).get('q') || ''
+  const content = await loadSearchContent()
+  searchable.value = content.records
+  miniSearch.value = content.index
+})
+</script>
+
+<template>
+  <div class="cw-explorer">
+    <header class="cw-explorer__header">
+      <p class="cw-kicker">GLOBAL SEARCH · 全文检索</p>
+      <h1>从一个名字开始。</h1>
+      <div class="cw-explorer__search"><span>⌕</span><input v-model="query" autofocus type="search" placeholder="搜索标题、别名、标签与正文"></div>
+    </header>
+    <div class="cw-explorer__body">
+      <aside class="cw-filter-panel">
+        <p>筛选范围</p>
+        <button :class="{ active: type === 'all' }" @click="type = 'all'"><span>全部资料</span><b>{{ searchable.length }}</b></button>
+        <button v-for="name in types" :key="name" :class="{ active: type === name }" @click="type = name"><span>{{ name }}</span></button>
+      </aside>
+      <section class="cw-results">
+        <div class="cw-results__summary"><strong>{{ results.length }}</strong> 条结果 <span v-if="query">关于“{{ query }}”</span></div>
+        <a v-for="item in results" :key="item.id" class="cw-result" :href="withBase(item.route as string)">
+          <div class="cw-result__meta"><span>{{ item.category || item.type || '资料' }}</span><small>{{ item.route }}</small></div>
+          <h2>{{ item.title }}</h2>
+          <p>{{ item.description }}</p>
+          <blockquote v-if="query">命中：{{ matchSnippet(item as SearchResultRecord, query) }}</blockquote>
+        </a>
+        <div v-if="!results.length" class="cw-empty"><strong>没有找到相关记录</strong><p>换一个名字、别名或更短的关键词试试。</p></div>
+      </section>
+    </div>
+  </div>
+</template>

package/src/theme/components/SiteHeader.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useData, withBase } from 'vitepress'
+import config from 'virtual:cocowiki-config'
+
+defineEmits<{ openSearch: [] }>()
+const { isDark } = useData()
+const menuOpen = ref(false)
+const openDropdown = ref<string>()
+const theme = ref<'light' | 'dark' | 'system'>('system')
+let systemTheme: MediaQueryList | undefined
+
+function applyTheme(value: typeof theme.value) {
+  theme.value = value
+  localStorage.setItem('cw-theme', value)
+  isDark.value = value === 'dark' || (value === 'system' && (systemTheme?.matches ?? false))
+}
+
+function handleSystemTheme(event: MediaQueryListEvent) {
+  if (theme.value === 'system') isDark.value = event.matches
+}
+
+function cycleTheme() {
+  const order = ['system', 'light', 'dark'] as const
+  applyTheme(order[(order.indexOf(theme.value) + 1) % order.length])
+}
+
+function closeNavigation() {
+  menuOpen.value = false
+  openDropdown.value = undefined
+}
+
+onMounted(() => {
+  systemTheme = matchMedia('(prefers-color-scheme: dark)')
+  systemTheme.addEventListener('change', handleSystemTheme)
+  const saved = localStorage.getItem('cw-theme')
+  applyTheme(saved === 'light' || saved === 'dark' || saved === 'system' ? saved : 'system')
+})
+onUnmounted(() => systemTheme?.removeEventListener('change', handleSystemTheme))
+</script>
+
+<template>
+  <header class="cw-header">
+    <div class="cw-header__inner">
+      <a class="cw-brand" :href="withBase('/')" aria-label="返回首页">
+        <img v-if="config.logo" class="cw-brand__logo" :src="withBase(config.logo)" alt="">
+        <span v-else class="cw-brand__mark"><i></i><b>C</b></span>
+        <span>
+          <strong>{{ config.title }}</strong>
+          <small>KNOWLEDGE BASE</small>
+        </span>
+      </a>
+      <nav :class="['cw-nav', { 'is-open': menuOpen }]" aria-label="主导航">
+        <div
+          v-for="item in config.navigation"
+          :key="item.text"
+          :class="['cw-nav-item', { 'has-children': item.items?.length, 'is-open': openDropdown === item.text }]"
+        >
+          <a v-if="!item.items?.length && item.link" :href="withBase(item.link)" @click="closeNavigation">{{ item.text }}</a>
+          <button
+            v-else
+            type="button"
+            :aria-expanded="openDropdown === item.text"
+            @click="openDropdown = openDropdown === item.text ? undefined : item.text"
+          >
+            {{ item.text }}
+            <svg aria-hidden="true" viewBox="0 0 12 12"><path d="m3 4.5 3 3 3-3" /></svg>
+          </button>
+          <div v-if="item.items?.length" class="cw-nav-dropdown">
+            <a v-if="item.link" :href="withBase(item.link)" @click="closeNavigation">查看全部</a>
+            <a v-for="child in item.items" :key="child.text" :href="child.link ? withBase(child.link) : undefined" @click="closeNavigation">
+              <span>{{ child.text }}</span>
+            </a>
+          </div>
+        </div>
+      </nav>
+      <div class="cw-header__actions">
+        <button v-if="config.search?.enabled !== false" class="cw-search-trigger" type="button" @click="$emit('openSearch')">
+          <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4"/></svg>
+          <span>搜索</span><kbd>⌘ K</kbd>
+        </button>
+        <button class="cw-icon-button" type="button" :aria-label="`主题：${theme}`" @click="cycleTheme">
+          <svg v-if="theme === 'system'" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><path d="M12 5v14"/></svg>
+          <svg v-else-if="theme === 'dark'" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 15.2A7.5 7.5 0 0 1 8.8 5 7.5 7.5 0 1 0 19 15.2Z"/></svg>
+          <svg v-else aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+        </button>
+        <button class="cw-menu-button" type="button" :aria-expanded="menuOpen" aria-label="展开导航" @click="menuOpen = !menuOpen">
+          <span></span><span></span>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>

package/src/theme/components/index.ts

@@ -0,0 +1,14 @@
+export { default as ArchiveView } from './ArchiveView.vue'
+export { default as ContentSidebar } from './ContentSidebar.vue'
+export { default as ContributorList } from './ContributorList.vue'
+export { default as ContributorsView } from './ContributorsView.vue'
+export { default as HomeView } from './HomeView.vue'
+export { default as LoadingView } from './LoadingView.vue'
+export { default as NotFoundView } from './NotFoundView.vue'
+export { default as PageFooter } from './PageFooter.vue'
+export { default as PageMeta } from './PageMeta.vue'
+export { default as PageNavigation } from './PageNavigation.vue'
+export { default as PageOutline } from './PageOutline.vue'
+export { default as SearchOverlay } from './SearchOverlay.vue'
+export { default as SearchView } from './SearchView.vue'
+export { default as SiteHeader } from './SiteHeader.vue'

package/src/theme/content.ts

@@ -0,0 +1,41 @@
+import { withBase } from 'vitepress'
+import type { SearchRecord } from '../node/content'
+import { createSearch } from './search'
+
+let recordsPromise: Promise<SearchRecord[]> | undefined
+let searchPromise: Promise<{ records: SearchRecord[]; index: ReturnType<typeof createSearch> }> | undefined
+
+function resetContentCache() {
+  recordsPromise = undefined
+  searchPromise = undefined
+}
+
+if (import.meta.hot) import.meta.hot.on('cocowiki:content-updated', resetContentCache)
+
+export function loadContentRecords() {
+  if (!recordsPromise) {
+    recordsPromise = fetch(withBase('/search-index.json'), { cache: 'no-store' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`无法加载搜索索引：${response.status}`)
+        return response.json() as Promise<SearchRecord[]>
+      })
+      .catch((error) => {
+        recordsPromise = undefined
+        throw error
+      })
+  }
+  return recordsPromise
+}
+
+export function loadSearchContent() {
+  if (!searchPromise) {
+    searchPromise = loadContentRecords().then((allRecords) => {
+      const records = allRecords.filter((record) => record.search !== false && !['/', '/search', '/archive'].includes(record.route))
+      return { records, index: createSearch(records) }
+    }).catch((error) => {
+      searchPromise = undefined
+      throw error
+    })
+  }
+  return searchPromise
+}

package/src/theme/contributors.ts

@@ -0,0 +1,21 @@
+import { reactive, readonly } from 'vue'
+
+export type ContributorContributionInput = string[] | Record<string, number>
+
+const sources = reactive(new Map<string, Record<string, number>>())
+
+export function registerContributorContributions(sourceId: string, input: ContributorContributionInput) {
+  const counts = Array.isArray(input)
+    ? input.reduce<Record<string, number>>((result, name) => {
+        result[name] = (result[name] || 0) + 1
+        return result
+      }, {})
+    : { ...input }
+
+  sources.set(sourceId, counts)
+  return () => sources.delete(sourceId)
+}
+
+export function useContributorContributionSources() {
+  return readonly(sources)
+}

package/src/theme/customization.ts

@@ -0,0 +1,19 @@
+import type { Component, InjectionKey } from 'vue'
+
+export interface CocoWikiThemeComponentOverrides {
+  Header?: Component
+  Home?: Component
+  Search?: Component
+  Archive?: Component
+  Contributors?: Component
+  PageMeta?: Component
+  PageOutline?: Component
+  ContentSidebar?: Component
+  PageNavigation?: Component
+  PageFooter?: Component
+  SearchOverlay?: Component
+  Loading?: Component
+  NotFound?: Component
+}
+
+export const cocoWikiThemeComponentsKey: InjectionKey<CocoWikiThemeComponentOverrides> = Symbol('cocowiki-theme-components')

package/src/theme/index.ts

@@ -0,0 +1,15 @@
+import type { Theme } from 'vitepress'
+import Layout from './Layout.vue'
+import ContributorList from './components/ContributorList.vue'
+import './styles.css'
+
+export { registerContributorContributions, useContributorContributionSources } from './contributors'
+export { cocoWikiThemeComponentsKey, type CocoWikiThemeComponentOverrides } from './customization'
+export { default as CocoWikiLayout } from './Layout.vue'
+
+export default {
+  Layout,
+  enhanceApp({ app }) {
+    app.component('ContributorList', ContributorList)
+  }
+} satisfies Theme

package/src/theme/search.ts

@@ -0,0 +1,33 @@
+import MiniSearch from 'minisearch'
+import type { SearchRecord } from '../node/content'
+
+export function tokenize(text: string) {
+  const normalized = text.toLocaleLowerCase().trim()
+  const words = normalized.match(/[a-z0-9]+|[\u3400-\u9fff]/g) || []
+  const chinese = [...normalized.replace(/[^\u3400-\u9fff]/g, '')]
+  const pairs = chinese.slice(0, -1).map((char, index) => char + chinese[index + 1])
+  return [...new Set([...words, ...pairs])]
+}
+
+export function createSearch(records: SearchRecord[]) {
+  const search = new MiniSearch({
+    fields: ['title', 'aliases', 'tags', 'contributors', 'description', 'content'],
+    storeFields: ['route', 'title', 'type', 'category', 'description', 'content', 'aliases', 'contributorNames'],
+    searchOptions: {
+      boost: { title: 4, aliases: 3, contributors: 2.5, tags: 2, description: 1.5 },
+      prefix: true,
+      fuzzy: 0.16
+    },
+    tokenize
+  })
+
+  search.addAll(records.map((record) => ({
+    ...record,
+    aliases: record.aliases?.join(' '),
+    tags: record.tags?.join(' '),
+    contributorNames: record.contributors,
+    contributors: record.contributors?.join(' ')
+  })))
+
+  return search
+}