mirror of https://github.com/vuejs/vitepress
Xavi Lee
3 years ago
commit
63ec5aef99
@ -0,0 +1 @@
|
||||
# Bar
|
||||
|
After Width: | Height: | Size: 141 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,860 @@
|
||||
<script lang="ts" setup>
|
||||
import localSearchIndex from '@localSearchIndex'
|
||||
import {
|
||||
computedAsync,
|
||||
debouncedWatch,
|
||||
onKeyStroke,
|
||||
useEventListener,
|
||||
useLocalStorage,
|
||||
useScrollLock,
|
||||
useSessionStorage
|
||||
} from '@vueuse/core'
|
||||
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
|
||||
import Mark from 'mark.js/src/vanilla.js'
|
||||
import MiniSearch, { type SearchResult } from 'minisearch'
|
||||
import { useRouter } from 'vitepress'
|
||||
import {
|
||||
computed,
|
||||
createApp,
|
||||
markRaw,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
shallowRef,
|
||||
watch,
|
||||
watchEffect,
|
||||
type Ref
|
||||
} from 'vue'
|
||||
import type { ModalTranslations } from '../../../../types/local-search'
|
||||
import { dataSymbol } from '../../app/data'
|
||||
import { pathToFile } from '../../app/utils'
|
||||
import { useData } from '../composables/data'
|
||||
import { createTranslate } from '../support/translation'
|
||||
|
||||
defineProps<{
|
||||
placeholder: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const el = shallowRef<HTMLElement>()
|
||||
const resultsEl = shallowRef<HTMLElement>()
|
||||
const body = shallowRef<HTMLElement>()
|
||||
|
||||
/* Search */
|
||||
|
||||
const searchIndexData = shallowRef(localSearchIndex)
|
||||
|
||||
// hmr
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept('/@localSearchIndex', (m) => {
|
||||
if (m) {
|
||||
searchIndexData.value = m.default
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
interface Result {
|
||||
title: string
|
||||
titles: string[]
|
||||
text?: string
|
||||
}
|
||||
|
||||
const vitePressData = useData()
|
||||
const { activate } = useFocusTrap(el, {
|
||||
immediate: true,
|
||||
allowOutsideClick: true,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: true
|
||||
})
|
||||
const { localeIndex, theme } = vitePressData
|
||||
const searchIndex = computedAsync(async () =>
|
||||
markRaw(
|
||||
MiniSearch.loadJSON<Result>(
|
||||
(await searchIndexData.value[localeIndex.value]?.())?.default,
|
||||
{
|
||||
fields: ['title', 'titles', 'text'],
|
||||
storeFields: ['title', 'titles'],
|
||||
searchOptions: {
|
||||
fuzzy: 0.2,
|
||||
prefix: true,
|
||||
boost: { title: 4, text: 2, titles: 1 }
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
const disableQueryPersistence = computed(() => {
|
||||
return (
|
||||
theme.value.search?.provider === 'local' &&
|
||||
theme.value.search.options?.disableQueryPersistence === true
|
||||
)
|
||||
})
|
||||
|
||||
const filterText = disableQueryPersistence.value
|
||||
? ref('')
|
||||
: useSessionStorage('vitepress:local-search-filter', '')
|
||||
|
||||
const showDetailedList = useLocalStorage(
|
||||
'vitepress:local-search-detailed-list',
|
||||
false
|
||||
)
|
||||
|
||||
const disableDetailedView = computed(() => {
|
||||
return (
|
||||
theme.value.search?.provider === 'local' &&
|
||||
theme.value.search.options?.disableDetailedView === true
|
||||
)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (disableDetailedView.value) {
|
||||
showDetailedList.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const results: Ref<(SearchResult & Result)[]> = shallowRef([])
|
||||
|
||||
const headingRegex = /<h(\d*).*?>.*?<a.*? href="#(.*?)".*?>.*?<\/a><\/h\1>/gi
|
||||
|
||||
const enableNoResults = ref(false)
|
||||
|
||||
watch(filterText, () => {
|
||||
enableNoResults.value = false
|
||||
})
|
||||
|
||||
const mark = computedAsync(async () => {
|
||||
if (!resultsEl.value) return
|
||||
return markRaw(new Mark(resultsEl.value))
|
||||
}, null)
|
||||
|
||||
debouncedWatch(
|
||||
() => [searchIndex.value, filterText.value, showDetailedList.value] as const,
|
||||
async ([index, filterTextValue, showDetailedListValue], old, onCleanup) => {
|
||||
let canceled = false
|
||||
onCleanup(() => {
|
||||
canceled = true
|
||||
})
|
||||
|
||||
if (!index) return
|
||||
|
||||
// Search
|
||||
results.value = index
|
||||
.search(filterTextValue)
|
||||
.slice(0, 16) as (SearchResult & Result)[]
|
||||
enableNoResults.value = true
|
||||
|
||||
// Highlighting
|
||||
const mods = showDetailedListValue
|
||||
? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
|
||||
: []
|
||||
if (canceled) return
|
||||
const c = new Map<string, Map<string, string>>()
|
||||
for (const { id, mod } of mods) {
|
||||
const comp = mod.default ?? mod
|
||||
if (comp?.render) {
|
||||
const app = createApp(comp)
|
||||
// Silence warnings about missing components
|
||||
app.config.warnHandler = () => {}
|
||||
app.provide(dataSymbol, vitePressData)
|
||||
const div = document.createElement('div')
|
||||
app.mount(div)
|
||||
const sections = div.innerHTML.split(headingRegex)
|
||||
app.unmount()
|
||||
sections.shift()
|
||||
const mapId = id.slice(0, id.indexOf('#'))
|
||||
let map = c.get(mapId)
|
||||
if (!map) {
|
||||
map = new Map()
|
||||
c.set(mapId, map)
|
||||
}
|
||||
for (let i = 0; i < sections.length; i += 3) {
|
||||
const anchor = sections[i + 1]
|
||||
const html = sections[i + 2]
|
||||
map.set(anchor, html)
|
||||
}
|
||||
}
|
||||
if (canceled) return
|
||||
}
|
||||
|
||||
const terms = new Set<string>()
|
||||
|
||||
results.value = results.value.map((r) => {
|
||||
const [id, anchor] = r.id.split('#')
|
||||
const map = c.get(id)
|
||||
const text = map?.get(anchor) ?? ''
|
||||
for (const term in r.match) {
|
||||
terms.add(term)
|
||||
}
|
||||
return { ...r, text }
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
if (canceled) return
|
||||
|
||||
await new Promise((r) => {
|
||||
mark.value?.unmark({
|
||||
done: () => {
|
||||
mark.value?.markRegExp(formMarkRegex(terms), { done: r })
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
|
||||
for (const excerpt of excerpts) {
|
||||
excerpt
|
||||
.querySelector('mark[data-markjs="true"]')
|
||||
?.scrollIntoView({ block: 'center' })
|
||||
}
|
||||
// FIXME: without this whole page scrolls to the bottom
|
||||
resultsEl.value?.firstElementChild?.scrollIntoView({ block: 'start' })
|
||||
},
|
||||
{ debounce: 200, immediate: true }
|
||||
)
|
||||
|
||||
async function fetchExcerpt(id: string) {
|
||||
const file = pathToFile(id.slice(0, id.indexOf('#')))
|
||||
try {
|
||||
return { id, mod: await import(/*@vite-ignore*/ file) }
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
return { id, mod: {} }
|
||||
}
|
||||
}
|
||||
|
||||
/* Search input focus */
|
||||
|
||||
const searchInput = ref<HTMLInputElement>()
|
||||
|
||||
function focusSearchInput() {
|
||||
searchInput.value?.focus()
|
||||
searchInput.value?.select()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
focusSearchInput()
|
||||
})
|
||||
|
||||
function onSearchBarClick(event: PointerEvent) {
|
||||
if (event.pointerType === 'mouse') {
|
||||
focusSearchInput()
|
||||
}
|
||||
}
|
||||
|
||||
/* Search keyboard selection */
|
||||
|
||||
const selectedIndex = ref(0)
|
||||
const disableMouseOver = ref(false)
|
||||
|
||||
watch(results, () => {
|
||||
selectedIndex.value = 0
|
||||
scrollToSelectedResult()
|
||||
})
|
||||
|
||||
function scrollToSelectedResult() {
|
||||
nextTick(() => {
|
||||
const selectedEl = document.querySelector('.result.selected')
|
||||
if (selectedEl) {
|
||||
selectedEl.scrollIntoView({
|
||||
block: 'nearest'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onKeyStroke('ArrowUp', (event) => {
|
||||
event.preventDefault()
|
||||
selectedIndex.value--
|
||||
if (selectedIndex.value < 0) {
|
||||
selectedIndex.value = results.value.length - 1
|
||||
}
|
||||
disableMouseOver.value = true
|
||||
scrollToSelectedResult()
|
||||
})
|
||||
|
||||
onKeyStroke('ArrowDown', (event) => {
|
||||
event.preventDefault()
|
||||
selectedIndex.value++
|
||||
if (selectedIndex.value >= results.value.length) {
|
||||
selectedIndex.value = 0
|
||||
}
|
||||
disableMouseOver.value = true
|
||||
scrollToSelectedResult()
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
onKeyStroke('Enter', () => {
|
||||
const selectedPackage = results.value[selectedIndex.value]
|
||||
if (selectedPackage) {
|
||||
router.go(selectedPackage.id)
|
||||
emit('close')
|
||||
}
|
||||
})
|
||||
|
||||
onKeyStroke('Escape', () => {
|
||||
emit('close')
|
||||
})
|
||||
|
||||
// Translations
|
||||
const defaultTranslations: { modal: ModalTranslations } = {
|
||||
modal: {
|
||||
displayDetails: 'Display detailed list',
|
||||
resetButtonTitle: 'Reset search',
|
||||
backButtonTitle: 'Close search',
|
||||
noResultsText: 'No results for',
|
||||
footer: {
|
||||
selectText: 'to select',
|
||||
selectKeyAriaLabel: 'enter',
|
||||
navigateText: 'to navigate',
|
||||
navigateUpKeyAriaLabel: 'up arrow',
|
||||
navigateDownKeyAriaLabel: 'down arrow',
|
||||
closeText: 'to close',
|
||||
closeKeyAriaLabel: 'escape'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const $t = createTranslate(theme.value.search?.options, defaultTranslations)
|
||||
|
||||
// Back
|
||||
|
||||
onMounted(() => {
|
||||
// Prevents going to previous site
|
||||
window.history.pushState(null, '', null)
|
||||
})
|
||||
|
||||
useEventListener('popstate', (event) => {
|
||||
event.preventDefault()
|
||||
emit('close')
|
||||
})
|
||||
|
||||
/** Lock body */
|
||||
const isLocked = useScrollLock(body)
|
||||
|
||||
onMounted(() => {
|
||||
body.value = document.body
|
||||
nextTick(() => {
|
||||
isLocked.value = true
|
||||
nextTick().then(() => activate())
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
isLocked.value = false
|
||||
})
|
||||
|
||||
function formMarkRegex(terms: Set<string>) {
|
||||
return new RegExp(
|
||||
[...terms]
|
||||
.sort((a, b) => b.length - a.length)
|
||||
.map((term) => {
|
||||
return `(${term
|
||||
.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
|
||||
.replace(/-/g, '\\x2d')})`
|
||||
})
|
||||
.join('|'),
|
||||
'gi'
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div ref="el" class="VPLocalSearchBox" aria-modal="true">
|
||||
<div class="backdrop" @click="$emit('close')" />
|
||||
|
||||
<div class="shell">
|
||||
<div class="search-bar" @pointerup="onSearchBarClick($event)">
|
||||
<svg
|
||||
class="search-icon"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21l-4.35-4.35" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="search-actions before">
|
||||
<button
|
||||
class="back-button"
|
||||
:title="$t('modal.backButtonTitle')"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 12H5m7 7l-7-7l7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="filterText"
|
||||
:placeholder="placeholder"
|
||||
class="search-input"
|
||||
/>
|
||||
<div class="search-actions">
|
||||
<button
|
||||
v-if="!disableDetailedView"
|
||||
class="toggle-layout-button"
|
||||
:class="{ 'detailed-list': showDetailedList }"
|
||||
:title="$t('modal.displayDetails')"
|
||||
@click="showDetailedList = !showDetailedList"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="clear-button"
|
||||
:title="$t('modal.resetButtonTitle')"
|
||||
@click="filterText = ''"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="resultsEl"
|
||||
class="results"
|
||||
@mousemove="disableMouseOver = false"
|
||||
>
|
||||
<a
|
||||
v-for="(p, index) in results"
|
||||
:key="p.id"
|
||||
:href="p.id"
|
||||
class="result"
|
||||
:class="{
|
||||
selected: selectedIndex === index
|
||||
}"
|
||||
:aria-label="[...p.titles, p.title].join(' > ')"
|
||||
@mouseenter="!disableMouseOver && (selectedIndex = index)"
|
||||
@focusin="selectedIndex = index"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<div>
|
||||
<div class="titles">
|
||||
<span class="title-icon">#</span>
|
||||
<span v-for="(t, index) in p.titles" :key="index" class="title">
|
||||
<span class="text" v-html="t" />
|
||||
<svg width="18" height="18" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m9 18l6-6l-6-6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="title main">
|
||||
<span class="text" v-html="p.title" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="showDetailedList" class="excerpt-wrapper">
|
||||
<div v-if="p.text" class="excerpt" inert>
|
||||
<div class="vp-doc" v-html="p.text" />
|
||||
</div>
|
||||
<div class="excerpt-gradient-bottom" />
|
||||
<div class="excerpt-gradient-top" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-if="filterText && !results.length && enableNoResults"
|
||||
class="no-results"
|
||||
>
|
||||
{{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
|
||||
>"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-keyboard-shortcuts">
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 19V5m-7 7l7-7l7 7"
|
||||
/>
|
||||
</svg>
|
||||
</kbd>
|
||||
<kbd :aria-label="$t('modal.footer.navigateDownKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 5v14m7-7l-7 7l-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</kbd>
|
||||
{{ $t('modal.footer.navigateText') }}
|
||||
</span>
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.selectKeyAriaLabel')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24">
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentcolor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="m9 10l-5 5l5 5" />
|
||||
<path d="M20 4v7a4 4 0 0 1-4 4H4" />
|
||||
</g>
|
||||
</svg>
|
||||
</kbd>
|
||||
{{ $t('modal.footer.selectText') }}
|
||||
</span>
|
||||
<span>
|
||||
<kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
|
||||
{{ $t('modal.footer.closeText') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPLocalSearchBox {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--vp-backdrop-bg-color);
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
margin: 64px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--vp-local-search-bg);
|
||||
width: min(100vw - 60px, 900px);
|
||||
height: min-content;
|
||||
max-height: min(100vh - 128px, 900px);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shell {
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-bar {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 6px 12px;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-input {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@media (any-pointer: coarse) {
|
||||
.search-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.search-actions.before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-actions button {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.search-actions button:hover,
|
||||
.toggle-layout-button.detailed-list {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.search-keyboard-shortcuts {
|
||||
font-size: 0.8rem;
|
||||
opacity: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.search-keyboard-shortcuts span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-keyboard-shortcuts {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-keyboard-shortcuts kbd {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
min-width: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
transition: none;
|
||||
line-height: 1rem;
|
||||
border: solid 2px var(--vp-local-search-result-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.result > div {
|
||||
margin: 12px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.result > div {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.titles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.title.main {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
opacity: 0.5;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.title svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.result.selected {
|
||||
--vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
|
||||
border-color: var(--vp-local-search-result-selected-border);
|
||||
}
|
||||
|
||||
.excerpt-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
opacity: 75%;
|
||||
pointer-events: none;
|
||||
max-height: 140px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.result.selected .excerpt {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.excerpt :deep(*) {
|
||||
font-size: 0.8rem !important;
|
||||
line-height: 130% !important;
|
||||
}
|
||||
|
||||
.titles :deep(mark),
|
||||
.excerpt :deep(mark) {
|
||||
background-color: var(--vp-local-search-highlight-bg);
|
||||
color: var(--vp-local-search-highlight-text);
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.excerpt :deep(.vp-code-group) .tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.excerpt :deep(.vp-code-group) div[class*='language-'] {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.excerpt-gradient-bottom {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(transparent, var(--vp-local-search-result-bg));
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.excerpt-gradient-top {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(var(--vp-local-search-result-bg), transparent);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.result.selected .titles,
|
||||
.result.selected .title-icon {
|
||||
color: var(--vp-c-brand) !important;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,207 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
placeholder: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button type="button" class="DocSearch DocSearch-Button" aria-label="Search">
|
||||
<span class="DocSearch-Button-Container">
|
||||
<svg
|
||||
class="DocSearch-Search-Icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
aria-label="search icon"
|
||||
>
|
||||
<path
|
||||
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="DocSearch-Button-Placeholder">{{ placeholder }}</span>
|
||||
</span>
|
||||
<span class="DocSearch-Button-Keys">
|
||||
<kbd class="DocSearch-Button-Key"></kbd>
|
||||
<kbd class="DocSearch-Button-Key">K</kbd>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand);
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-text-color: var(--vp-c-text-1);
|
||||
--docsearch-muted-color: var(--vp-c-text-2);
|
||||
--docsearch-searchbox-shadow: none;
|
||||
--docsearch-searchbox-focus-background: transparent;
|
||||
--docsearch-key-gradient: transparent;
|
||||
--docsearch-key-shadow: none;
|
||||
--docsearch-modal-background: var(--vp-c-bg-soft);
|
||||
--docsearch-footer-background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.dark .DocSearch {
|
||||
--docsearch-modal-shadow: none;
|
||||
--docsearch-footer-shadow: none;
|
||||
--docsearch-logo-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-background: var(--vp-c-bg-soft-mute);
|
||||
--docsearch-hit-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 48px;
|
||||
height: 55px;
|
||||
background: transparent;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0 10px 0 12px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentColor;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Search-Icon {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
padding: 0 16px 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
margin: 2px 0 0 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding-left: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: color 0.5s, border-color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding-left: 2px;
|
||||
padding-right: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 1px;
|
||||
letter-spacing: -12px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
||||
content: var(--vp-meta-key);
|
||||
font-size: 12px;
|
||||
letter-spacing: normal;
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +0,0 @@
|
||||
#nprogress .bar {
|
||||
background: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
border-top-color: var(--vp-c-brand);
|
||||
border-left-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
#nprogress .peg {
|
||||
box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
import { useData } from '../composables/data'
|
||||
|
||||
/**
|
||||
* @param themeObject Can be an object with `translations` and `locales` properties
|
||||
*/
|
||||
export function createTranslate(
|
||||
themeObject: any,
|
||||
defaultTranslations: Record<string, any>
|
||||
): (key: string) => string {
|
||||
const { localeIndex } = useData()
|
||||
|
||||
function translate(key: string): string {
|
||||
const keyPath = key.split('.')
|
||||
|
||||
const isObject = themeObject && typeof themeObject === 'object'
|
||||
const locales =
|
||||
(isObject && themeObject.locales?.[localeIndex.value]?.translations) ||
|
||||
null
|
||||
const translations = (isObject && themeObject.translations) || null
|
||||
|
||||
let localeResult: Record<string, any> | null = locales
|
||||
let translationResult: Record<string, any> | null = translations
|
||||
let defaultResult: Record<string, any> | null = defaultTranslations
|
||||
|
||||
const lastKey = keyPath.pop()!
|
||||
for (const k of keyPath) {
|
||||
let fallbackResult: Record<string, any> | null = null
|
||||
const foundInFallback: any = defaultResult?.[k]
|
||||
if (foundInFallback) {
|
||||
fallbackResult = defaultResult = foundInFallback
|
||||
}
|
||||
const foundInTranslation: any = translationResult?.[k]
|
||||
if (foundInTranslation) {
|
||||
fallbackResult = translationResult = foundInTranslation
|
||||
}
|
||||
const foundInLocale: any = localeResult?.[k]
|
||||
if (foundInLocale) {
|
||||
fallbackResult = localeResult = foundInLocale
|
||||
}
|
||||
// Put fallback into unresolved results
|
||||
if (!foundInFallback) {
|
||||
defaultResult = fallbackResult
|
||||
}
|
||||
if (!foundInTranslation) {
|
||||
translationResult = fallbackResult
|
||||
}
|
||||
if (!foundInLocale) {
|
||||
localeResult = fallbackResult
|
||||
}
|
||||
}
|
||||
return (
|
||||
localeResult?.[lastKey] ??
|
||||
translationResult?.[lastKey] ??
|
||||
defaultResult?.[lastKey] ??
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
return translate
|
||||
}
|
||||
@ -0,0 +1,260 @@
|
||||
import path from 'node:path'
|
||||
import type { Plugin, ViteDevServer } from 'vite'
|
||||
import MiniSearch from 'minisearch'
|
||||
import fs from 'fs-extra'
|
||||
import _debug from 'debug'
|
||||
import type { SiteConfig } from '../config'
|
||||
import { createMarkdownRenderer } from '../markdown/markdown'
|
||||
import { resolveSiteDataByRoute, slash } from '../shared'
|
||||
|
||||
const debug = _debug('vitepress:local-search')
|
||||
|
||||
const LOCAL_SEARCH_INDEX_ID = '@localSearchIndex'
|
||||
const LOCAL_SEARCH_INDEX_REQUEST_PATH = '/' + LOCAL_SEARCH_INDEX_ID
|
||||
|
||||
interface IndexObject {
|
||||
id: string
|
||||
text: string
|
||||
title: string
|
||||
titles: string[]
|
||||
}
|
||||
|
||||
export async function localSearchPlugin(
|
||||
siteConfig: SiteConfig
|
||||
): Promise<Plugin> {
|
||||
if (siteConfig.site.themeConfig?.search?.provider !== 'local') {
|
||||
return {
|
||||
name: 'vitepress:local-search',
|
||||
resolveId(id) {
|
||||
if (id.startsWith(LOCAL_SEARCH_INDEX_ID)) {
|
||||
return `/${id}`
|
||||
}
|
||||
},
|
||||
load(id) {
|
||||
if (id.startsWith(LOCAL_SEARCH_INDEX_REQUEST_PATH)) {
|
||||
return `export default '{}'`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const md = await createMarkdownRenderer(
|
||||
siteConfig.srcDir,
|
||||
siteConfig.markdown,
|
||||
siteConfig.site.base,
|
||||
siteConfig.logger
|
||||
)
|
||||
|
||||
const indexByLocales = new Map<string, MiniSearch<IndexObject>>()
|
||||
|
||||
function getIndexByLocale(locale: string) {
|
||||
let index = indexByLocales.get(locale)
|
||||
if (!index) {
|
||||
index = new MiniSearch<IndexObject>({
|
||||
fields: ['title', 'titles', 'text'],
|
||||
storeFields: ['title', 'titles']
|
||||
})
|
||||
indexByLocales.set(locale, index)
|
||||
}
|
||||
return index
|
||||
}
|
||||
|
||||
function getLocaleForPath(file: string) {
|
||||
const relativePath = slash(path.relative(siteConfig.srcDir, file))
|
||||
const siteData = resolveSiteDataByRoute(siteConfig.site, relativePath)
|
||||
return siteData?.localeIndex ?? 'root'
|
||||
}
|
||||
|
||||
function getIndexForPath(file: string) {
|
||||
const locale = getLocaleForPath(file)
|
||||
return getIndexByLocale(locale)
|
||||
}
|
||||
|
||||
let server: ViteDevServer | undefined
|
||||
|
||||
function onIndexUpdated() {
|
||||
if (server) {
|
||||
server.moduleGraph.onFileChange(LOCAL_SEARCH_INDEX_REQUEST_PATH)
|
||||
// HMR
|
||||
const mod = server.moduleGraph.getModuleById(
|
||||
LOCAL_SEARCH_INDEX_REQUEST_PATH
|
||||
)
|
||||
if (!mod) return
|
||||
server.ws.send({
|
||||
type: 'update',
|
||||
updates: [
|
||||
{
|
||||
acceptedPath: mod.url,
|
||||
path: mod.url,
|
||||
timestamp: Date.now(),
|
||||
type: 'js-update'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getDocId(file: string) {
|
||||
let relFile = slash(path.relative(siteConfig.srcDir, file))
|
||||
relFile = siteConfig.rewrites.map[relFile] || relFile
|
||||
let id = slash(path.join(siteConfig.site.base, relFile))
|
||||
id = id.replace(/\/index\.md$/, '/')
|
||||
id = id.replace(/\.md$/, siteConfig.cleanUrls ? '' : '.html')
|
||||
return id
|
||||
}
|
||||
|
||||
async function indexAllFiles(files: string[]) {
|
||||
const documentsByLocale = new Map<string, IndexObject[]>()
|
||||
await Promise.all(
|
||||
files
|
||||
.filter((file) => fs.existsSync(file))
|
||||
.map(async (file) => {
|
||||
const fileId = getDocId(file)
|
||||
const sections = splitPageIntoSections(
|
||||
md.render(await fs.readFile(file, 'utf-8'))
|
||||
)
|
||||
const locale = getLocaleForPath(file)
|
||||
let documents = documentsByLocale.get(locale)
|
||||
if (!documents) {
|
||||
documents = []
|
||||
documentsByLocale.set(locale, documents)
|
||||
}
|
||||
documents.push(
|
||||
...sections.map((section) => ({
|
||||
id: `${fileId}#${section.anchor}`,
|
||||
text: section.text,
|
||||
title: section.titles.at(-1)!,
|
||||
titles: section.titles.slice(0, -1)
|
||||
}))
|
||||
)
|
||||
})
|
||||
)
|
||||
for (const [locale, documents] of documentsByLocale) {
|
||||
const index = getIndexByLocale(locale)
|
||||
index.removeAll()
|
||||
await index.addAllAsync(documents)
|
||||
}
|
||||
debug(`🔍️ Indexed ${files.length} files`)
|
||||
}
|
||||
|
||||
async function scanForBuild() {
|
||||
await indexAllFiles(
|
||||
siteConfig.pages.map((f) => path.join(siteConfig.srcDir, f))
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'vitepress:local-search',
|
||||
|
||||
async configureServer(_server) {
|
||||
server = _server
|
||||
await scanForBuild()
|
||||
onIndexUpdated()
|
||||
},
|
||||
|
||||
resolveId(id) {
|
||||
if (id.startsWith(LOCAL_SEARCH_INDEX_ID)) {
|
||||
return `/${id}`
|
||||
}
|
||||
},
|
||||
|
||||
async load(id) {
|
||||
if (id === LOCAL_SEARCH_INDEX_REQUEST_PATH) {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
await scanForBuild()
|
||||
}
|
||||
let records: string[] = []
|
||||
for (const [locale] of indexByLocales) {
|
||||
records.push(
|
||||
`${JSON.stringify(
|
||||
locale
|
||||
)}: () => import('@localSearchIndex${locale}')`
|
||||
)
|
||||
}
|
||||
return `export default {${records.join(',')}}`
|
||||
} else if (id.startsWith(LOCAL_SEARCH_INDEX_REQUEST_PATH)) {
|
||||
return `export default ${JSON.stringify(
|
||||
JSON.stringify(
|
||||
indexByLocales.get(
|
||||
id.replace(LOCAL_SEARCH_INDEX_REQUEST_PATH, '')
|
||||
) ?? {}
|
||||
)
|
||||
)}`
|
||||
}
|
||||
},
|
||||
|
||||
async handleHotUpdate(ctx) {
|
||||
if (ctx.file.endsWith('.md')) {
|
||||
const fileId = getDocId(ctx.file)
|
||||
if (!fs.existsSync(ctx.file)) {
|
||||
return
|
||||
}
|
||||
const index = getIndexForPath(ctx.file)
|
||||
const sections = splitPageIntoSections(
|
||||
md.render(await fs.readFile(ctx.file, 'utf-8'))
|
||||
)
|
||||
for (const section of sections) {
|
||||
const id = `${fileId}#${section.anchor}`
|
||||
if (index.has(id)) {
|
||||
index.discard(id)
|
||||
}
|
||||
index.add({
|
||||
id,
|
||||
text: section.text,
|
||||
title: section.titles.at(-1)!,
|
||||
titles: section.titles.slice(0, -1)
|
||||
})
|
||||
}
|
||||
debug('🔍️ Updated', ctx.file)
|
||||
|
||||
onIndexUpdated()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const headingRegex = /<h(\d*).*?>(.*?<a.*? href="#.*?".*?>.*?<\/a>)<\/h\1>/gi
|
||||
const headingContentRegex = /(.*?)<a.*? href="#(.*?)".*?>.*?<\/a>/i
|
||||
|
||||
interface PageSection {
|
||||
anchor: string
|
||||
titles: string[]
|
||||
text: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits HTML into sections based on headings
|
||||
*/
|
||||
function splitPageIntoSections(html: string) {
|
||||
const result = html.split(headingRegex)
|
||||
result.shift()
|
||||
let parentTitles: string[] = []
|
||||
const sections: PageSection[] = []
|
||||
for (let i = 0; i < result.length; i += 3) {
|
||||
const level = parseInt(result[i]) - 1
|
||||
const heading = result[i + 1]
|
||||
const headingResult = headingContentRegex.exec(heading)
|
||||
const title = clearHtmlTags(headingResult?.[1] ?? '').trim()
|
||||
const anchor = headingResult?.[2] ?? ''
|
||||
const content = result[i + 2]
|
||||
if (!title || !content) continue
|
||||
const titles = parentTitles.slice(0, level)
|
||||
titles[level] = title
|
||||
sections.push({ anchor, titles, text: getSearchableText(content) })
|
||||
if (level === 0) {
|
||||
parentTitles = [title]
|
||||
} else {
|
||||
parentTitles[level] = title
|
||||
}
|
||||
}
|
||||
return sections
|
||||
}
|
||||
|
||||
function getSearchableText(content: string) {
|
||||
content = clearHtmlTags(content)
|
||||
return content
|
||||
}
|
||||
|
||||
function clearHtmlTags(str: string) {
|
||||
return str.replace(/<[^>]*>/g, '')
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
import colors from 'picocolors'
|
||||
import type { ViteDevServer } from 'vite'
|
||||
|
||||
export type CLIShortcut = {
|
||||
key: string
|
||||
description: string
|
||||
action(server: ViteDevServer): void | Promise<void>
|
||||
}
|
||||
|
||||
export function bindShortcuts(server: ViteDevServer): void {
|
||||
if (!server.httpServer || !process.stdin.isTTY || process.env.CI) {
|
||||
return
|
||||
}
|
||||
|
||||
server.config.logger.info(
|
||||
colors.dim(colors.green(' ➜')) +
|
||||
colors.dim(' press ') +
|
||||
colors.bold('h') +
|
||||
colors.dim(' to show help')
|
||||
)
|
||||
|
||||
let actionRunning = false
|
||||
|
||||
const onInput = async (input: string) => {
|
||||
// ctrl+c or ctrl+d
|
||||
if (input === '\x03' || input === '\x04') {
|
||||
await server.close().finally(() => process.exit(1))
|
||||
return
|
||||
}
|
||||
|
||||
if (actionRunning) return
|
||||
|
||||
if (input === 'h') {
|
||||
server.config.logger.info(
|
||||
[
|
||||
'',
|
||||
colors.bold(' Shortcuts'),
|
||||
...SHORTCUTS.map(
|
||||
(shortcut) =>
|
||||
colors.dim(' press ') +
|
||||
colors.bold(shortcut.key) +
|
||||
colors.dim(` to ${shortcut.description}`)
|
||||
)
|
||||
].join('\n')
|
||||
)
|
||||
}
|
||||
|
||||
const shortcut = SHORTCUTS.find((shortcut) => shortcut.key === input)
|
||||
if (!shortcut) return
|
||||
|
||||
actionRunning = true
|
||||
await shortcut.action(server)
|
||||
actionRunning = false
|
||||
}
|
||||
|
||||
process.stdin.setRawMode(true)
|
||||
|
||||
process.stdin.on('data', onInput).setEncoding('utf8').resume()
|
||||
|
||||
server.httpServer.on('close', () => {
|
||||
process.stdin.off('data', onInput).pause()
|
||||
})
|
||||
}
|
||||
|
||||
const SHORTCUTS: CLIShortcut[] = [
|
||||
{
|
||||
key: 'u',
|
||||
description: 'show server url',
|
||||
action(server) {
|
||||
server.config.logger.info('')
|
||||
server.printUrls()
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'o',
|
||||
description: 'open in browser',
|
||||
action(server) {
|
||||
server.openBrowser()
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'c',
|
||||
description: 'clear console',
|
||||
action(server) {
|
||||
server.config.logger.clearScreen('error')
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'q',
|
||||
description: 'quit',
|
||||
async action(server) {
|
||||
await server.close().finally(() => process.exit())
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,208 @@
|
||||
import {
|
||||
type Awaitable,
|
||||
type HeadConfig,
|
||||
type LocaleConfig,
|
||||
type LocaleSpecificConfig,
|
||||
type PageData,
|
||||
type SiteData,
|
||||
type SSGContext
|
||||
} from './shared'
|
||||
import type { MarkdownOptions } from './markdown/markdown'
|
||||
import type { Options as VuePluginOptions } from '@vitejs/plugin-vue'
|
||||
import { type Logger, type UserConfig as ViteConfig } from 'vite'
|
||||
|
||||
export type RawConfigExports<ThemeConfig = any> =
|
||||
| Awaitable<UserConfig<ThemeConfig>>
|
||||
| (() => Awaitable<UserConfig<ThemeConfig>>)
|
||||
|
||||
export interface TransformContext {
|
||||
page: string
|
||||
siteConfig: SiteConfig
|
||||
siteData: SiteData
|
||||
pageData: PageData
|
||||
title: string
|
||||
description: string
|
||||
head: HeadConfig[]
|
||||
content: string
|
||||
assets: string[]
|
||||
}
|
||||
|
||||
interface UserRouteConfig {
|
||||
params: Record<string, string>
|
||||
content?: string
|
||||
}
|
||||
|
||||
export type ResolvedRouteConfig = UserRouteConfig & {
|
||||
/**
|
||||
* the raw route (relative to src root), e.g. foo/[bar].md
|
||||
*/
|
||||
route: string
|
||||
/**
|
||||
* the actual path with params resolved (relative to src root), e.g. foo/1.md
|
||||
*/
|
||||
path: string
|
||||
/**
|
||||
* absolute fs path
|
||||
*/
|
||||
fullPath: string
|
||||
}
|
||||
|
||||
export interface TransformPageContext {
|
||||
siteConfig: SiteConfig
|
||||
}
|
||||
|
||||
export interface UserConfig<ThemeConfig = any>
|
||||
extends LocaleSpecificConfig<ThemeConfig> {
|
||||
extends?: RawConfigExports<ThemeConfig>
|
||||
|
||||
base?: string
|
||||
srcDir?: string
|
||||
srcExclude?: string[]
|
||||
outDir?: string
|
||||
cacheDir?: string
|
||||
|
||||
shouldPreload?: (link: string, page: string) => boolean
|
||||
|
||||
locales?: LocaleConfig<ThemeConfig>
|
||||
|
||||
appearance?: boolean | 'dark'
|
||||
lastUpdated?: boolean
|
||||
|
||||
/**
|
||||
* MarkdownIt options
|
||||
*/
|
||||
markdown?: MarkdownOptions
|
||||
/**
|
||||
* Options to pass on to `@vitejs/plugin-vue`
|
||||
*/
|
||||
vue?: VuePluginOptions
|
||||
/**
|
||||
* Vite config
|
||||
*/
|
||||
vite?: ViteConfig
|
||||
|
||||
/**
|
||||
* Configure the scroll offset when the theme has a sticky header.
|
||||
* Can be a number or a selector element to get the offset from.
|
||||
* Can also be an array of selectors in case some elements will be
|
||||
* invisible due to responsive layout. VitePress will fallback to the next
|
||||
* selector if a selector fails to match, or the matched element is not
|
||||
* currently visible in viewport.
|
||||
*/
|
||||
scrollOffset?: number | string | string[]
|
||||
|
||||
/**
|
||||
* Enable MPA / zero-JS mode.
|
||||
* @experimental
|
||||
*/
|
||||
mpa?: boolean
|
||||
|
||||
/**
|
||||
* Don't fail builds due to dead links.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
ignoreDeadLinks?:
|
||||
| boolean
|
||||
| 'localhostLinks'
|
||||
| (string | RegExp | ((link: string) => boolean))[]
|
||||
|
||||
/**
|
||||
* Don't force `.html` on URLs.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
cleanUrls?: boolean
|
||||
|
||||
/**
|
||||
* Use web fonts instead of emitting font files to dist.
|
||||
* The used theme should import a file named `fonts.(s)css` for this to work.
|
||||
* If you are a theme author, to support this, place your web font import
|
||||
* between `webfont-marker-begin` and `webfont-marker-end` comments.
|
||||
*
|
||||
* @default true in webcontainers, else false
|
||||
*/
|
||||
useWebFonts?: boolean
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*
|
||||
* source -> destination
|
||||
*/
|
||||
rewrites?: Record<string, string>
|
||||
|
||||
/**
|
||||
* Build end hook: called when SSG finish.
|
||||
* @param siteConfig The resolved configuration.
|
||||
*/
|
||||
buildEnd?: (siteConfig: SiteConfig) => Awaitable<void>
|
||||
|
||||
/**
|
||||
* Render end hook: called when SSR rendering is done.
|
||||
*/
|
||||
postRender?: (context: SSGContext) => Awaitable<SSGContext | void>
|
||||
|
||||
/**
|
||||
* Head transform hook: runs before writing HTML to dist.
|
||||
*
|
||||
* This build hook will allow you to modify the head adding new entries that cannot be statically added.
|
||||
*/
|
||||
transformHead?: (context: TransformContext) => Awaitable<HeadConfig[] | void>
|
||||
|
||||
/**
|
||||
* HTML transform hook: runs before writing HTML to dist.
|
||||
*/
|
||||
transformHtml?: (
|
||||
code: string,
|
||||
id: string,
|
||||
ctx: TransformContext
|
||||
) => Awaitable<string | void>
|
||||
|
||||
/**
|
||||
* PageData transform hook: runs when rendering markdown to vue
|
||||
*/
|
||||
transformPageData?: (
|
||||
pageData: PageData,
|
||||
ctx: TransformPageContext
|
||||
) => Awaitable<Partial<PageData> | { [key: string]: any } | void>
|
||||
}
|
||||
|
||||
export interface SiteConfig<ThemeConfig = any>
|
||||
extends Pick<
|
||||
UserConfig,
|
||||
| 'markdown'
|
||||
| 'vue'
|
||||
| 'vite'
|
||||
| 'shouldPreload'
|
||||
| 'mpa'
|
||||
| 'lastUpdated'
|
||||
| 'ignoreDeadLinks'
|
||||
| 'cleanUrls'
|
||||
| 'useWebFonts'
|
||||
| 'postRender'
|
||||
| 'buildEnd'
|
||||
| 'transformHead'
|
||||
| 'transformHtml'
|
||||
| 'transformPageData'
|
||||
> {
|
||||
root: string
|
||||
srcDir: string
|
||||
site: SiteData<ThemeConfig>
|
||||
configPath: string | undefined
|
||||
configDeps: string[]
|
||||
themeDir: string
|
||||
outDir: string
|
||||
cacheDir: string
|
||||
tempDir: string
|
||||
pages: string[]
|
||||
dynamicRoutes: {
|
||||
routes: ResolvedRouteConfig[]
|
||||
fileToModulesMap: Record<string, Set<string>>
|
||||
}
|
||||
rewrites: {
|
||||
map: Record<string, string | undefined>
|
||||
inv: Record<string, string | undefined>
|
||||
}
|
||||
logger: Logger
|
||||
userConfig: UserConfig
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export function slash(p: string): string {
|
||||
return p.replace(/\\/g, '/')
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
export interface LocalSearchTranslations {
|
||||
button?: ButtonTranslations
|
||||
modal?: ModalTranslations
|
||||
}
|
||||
|
||||
interface ButtonTranslations {
|
||||
buttonText?: string
|
||||
buttonAriaLabel?: string
|
||||
}
|
||||
|
||||
interface ModalTranslations {
|
||||
displayDetails?: string
|
||||
resetButtonTitle?: string
|
||||
backButtonTitle?: string
|
||||
noResultsText?: string
|
||||
footer?: FooterTranslations
|
||||
}
|
||||
|
||||
interface FooterTranslations {
|
||||
selectText?: string
|
||||
selectKeyAriaLabel?: string
|
||||
navigateText?: string
|
||||
navigateUpKeyAriaLabel?: string
|
||||
navigateDownKeyAriaLabel?: string
|
||||
closeText?: string
|
||||
closeKeyAriaLabel?: string
|
||||
}
|
||||
Loading…
Reference in new issue