mirror of https://github.com/vuejs/vitepress
feat: offline search (#2110)
Co-authored-by: Christian Georgi <chgeo@users.noreply.github.com>pull/2218/head
Guillaume Chau
1 year ago
committed by
GitHub
parent
6acda7a6b3
commit
6c92675e33
|
After Width: | Height: | Size: 141 KiB |
@ -0,0 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
placeholder: string
|
||||
}>()
|
||||
|
||||
const metaKey = ref(`'Meta'`)
|
||||
|
||||
onMounted(() => {
|
||||
// meta key detect (same logic as in @docsearch/js)
|
||||
metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
|
||||
? `'⌘'`
|
||||
: `'Ctrl'`
|
||||
})
|
||||
</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: 32px;
|
||||
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: v-bind(metaKey);
|
||||
font-size: 12px;
|
||||
letter-spacing: normal;
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,635 @@
|
||||
<script lang="ts" setup>
|
||||
import { markRaw, nextTick, onMounted, ref, shallowRef, watch, type Ref, createApp } from 'vue'
|
||||
import { useRouter } from 'vitepress'
|
||||
import { onKeyStroke, useSessionStorage, debouncedWatch, useLocalStorage, useEventListener, computedAsync } from '@vueuse/core'
|
||||
import MiniSearch, { type SearchResult } from 'minisearch'
|
||||
import offlineSearchIndex from '@offlineSearchIndex'
|
||||
import { useData } from '../composables/data'
|
||||
import { createTranslate } from '../support/translation'
|
||||
import type { ModalTranslations } from '../../../../types/offline-search'
|
||||
import { pathToFile, withBase } from '../../app/utils.js'
|
||||
|
||||
defineProps<{
|
||||
placeholder: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const el = ref<HTMLDivElement>()
|
||||
|
||||
/* Search */
|
||||
|
||||
const searchIndexData = shallowRef(offlineSearchIndex)
|
||||
|
||||
// hmr
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept('/@offlineSearchIndex', (m) => {
|
||||
if (m) {
|
||||
searchIndexData.value = m.default
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
interface Result {
|
||||
title: string
|
||||
titles: string[]
|
||||
text?: string
|
||||
}
|
||||
|
||||
const { localeIndex } = useData()
|
||||
|
||||
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 filterText = useSessionStorage('vitepress:offline-search-filter', '')
|
||||
|
||||
const showDetailedList = useLocalStorage('vitepress:offline-search-detailed-list', false)
|
||||
|
||||
const results: Ref<(SearchResult & Result)[]> = shallowRef([])
|
||||
|
||||
const contents = shallowRef(new Map<string, Map<string, string>>())
|
||||
|
||||
const headingRegex = /<h(\d*).*?>.*?<a.*? href="#(.*?)".*?>.*?<\/a><\/h\1>/gi
|
||||
|
||||
const enableNoResults = ref(false)
|
||||
|
||||
watch(filterText, () => {
|
||||
enableNoResults.value = false
|
||||
})
|
||||
|
||||
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 = () => {}
|
||||
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
|
||||
}
|
||||
results.value = results.value.map(r => {
|
||||
let title = r.title
|
||||
let titles = r.titles
|
||||
let text = ''
|
||||
|
||||
// Highlight in text
|
||||
const [id, anchor] = r.id.split('#')
|
||||
const map = c.get(id)
|
||||
if (map) {
|
||||
text = map.get(anchor) ?? ''
|
||||
}
|
||||
|
||||
for (const term in r.match) {
|
||||
const match = r.match[term]
|
||||
const reg = new RegExp(term, 'gi')
|
||||
if (match.includes('title')) {
|
||||
title = title.replace(reg, `<mark>$&</mark>`)
|
||||
}
|
||||
if (match.includes('titles')) {
|
||||
titles = titles.map(t => t.replace(reg, `<mark>$&</mark>`))
|
||||
}
|
||||
if (showDetailedListValue && match.includes('text')) {
|
||||
text = text.replace(reg, `<mark>$&</mark>`)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...r,
|
||||
title,
|
||||
titles,
|
||||
text,
|
||||
}
|
||||
})
|
||||
contents.value = c
|
||||
|
||||
await nextTick()
|
||||
const excerpts = el.value?.querySelectorAll('.result .excerpt') ?? []
|
||||
for (const excerpt of excerpts) {
|
||||
excerpt.querySelector('mark')?.scrollIntoView({
|
||||
block: 'center',
|
||||
})
|
||||
}
|
||||
}, { debounce: 200, immediate: true })
|
||||
|
||||
async function fetchExcerpt (id: string) {
|
||||
const file = pathToFile(withBase(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 { theme } = useData()
|
||||
|
||||
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',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const $t = createTranslate(theme.value.offlineSearch, defaultTranslations)
|
||||
|
||||
// Back
|
||||
|
||||
onMounted(() => {
|
||||
// Prevents going to previous site
|
||||
window.history.pushState(null, '', null)
|
||||
})
|
||||
|
||||
useEventListener('popstate', event => {
|
||||
event.preventDefault()
|
||||
emit('close')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div ref="el" class="VPOfflineSearchBox" aria-modal="true">
|
||||
<div class="backdrop" @click="$emit('close')" />
|
||||
|
||||
<div class="shell">
|
||||
<div class="search-bar" @pointerup="onSearchBarClick($event)">
|
||||
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24"><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="16" height="16" viewBox="0 0 24 24"><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
|
||||
class="toggle-layout-button"
|
||||
:class="{
|
||||
'detailed-list': showDetailedList,
|
||||
}"
|
||||
:title="$t('modal.displayDetails')"
|
||||
@click="showDetailedList = !showDetailedList"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24"><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="16" height="16" viewBox="0 0 24 24"><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
|
||||
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-title="[...p.titles, p.title].join(' > ')"
|
||||
@mouseenter="!disableMouseOver && (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="16" height="16" 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">
|
||||
<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-title="$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-title="$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-title="$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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
.VPOfflineSearchBox {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
margin: 64px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--vp-c-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 rgba(128, 128, 128, 0.2);
|
||||
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);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.search-actions.before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-actions button {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
transition: none;
|
||||
line-height: 1rem;
|
||||
border: solid 2px rgba(128, 128, 128, 0.05);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.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-c-highlight-bg);
|
||||
color: var(--vp-c-highlight-text);
|
||||
border-radius: 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-c-bg));
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.excerpt-gradient-top {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(var(--vp-c-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,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,274 @@
|
||||
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.js'
|
||||
import { resolveSiteDataByRoute } from '../shared.js'
|
||||
|
||||
const debug = _debug('vitepress:offline-search')
|
||||
|
||||
const OFFLINE_SEARCH_INDEX_ID = '@offlineSearchIndex'
|
||||
const OFFLINE_SEARCH_INDEX_REQUEST_PATH = '/' + OFFLINE_SEARCH_INDEX_ID
|
||||
|
||||
interface IndexObject {
|
||||
id: string
|
||||
text: string
|
||||
title: string
|
||||
titles: string[]
|
||||
}
|
||||
|
||||
export async function offlineSearchPlugin(
|
||||
siteConfig: SiteConfig
|
||||
): Promise<Plugin> {
|
||||
if (
|
||||
siteConfig.userConfig.themeConfig?.algolia ||
|
||||
!siteConfig.userConfig.themeConfig?.offlineSearch
|
||||
) {
|
||||
return {
|
||||
name: 'vitepress:offline-search',
|
||||
resolveId(id) {
|
||||
if (id.startsWith(OFFLINE_SEARCH_INDEX_ID)) {
|
||||
return `/${id}`
|
||||
}
|
||||
},
|
||||
load(id) {
|
||||
if (id.startsWith(OFFLINE_SEARCH_INDEX_REQUEST_PATH)) {
|
||||
return `export default '{}'`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const md = await createMarkdownRenderer(
|
||||
siteConfig.srcDir,
|
||||
siteConfig.userConfig.markdown,
|
||||
siteConfig.userConfig.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 = 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
|
||||
|
||||
async function onIndexUpdated() {
|
||||
if (server) {
|
||||
server.moduleGraph.onFileChange(OFFLINE_SEARCH_INDEX_REQUEST_PATH)
|
||||
// HMR
|
||||
const mod = server.moduleGraph.getModuleById(
|
||||
OFFLINE_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 = path.relative(siteConfig.srcDir, file)
|
||||
relFile = siteConfig.rewrites.map[relFile] || relFile
|
||||
let id = path.join(siteConfig.userConfig.base ?? '', relFile)
|
||||
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(
|
||||
await 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:offline-search',
|
||||
|
||||
configureServer(_server) {
|
||||
server = _server
|
||||
|
||||
server.watcher.on('ready', async () => {
|
||||
const watched = server!.watcher.getWatched()
|
||||
const files = Object.keys(watched).reduce((acc, dir) => {
|
||||
acc.push(
|
||||
...watched[dir]
|
||||
.map((file) => dir + '/' + file)
|
||||
.filter((file) => file.endsWith('.md'))
|
||||
)
|
||||
return acc
|
||||
}, [] as string[])
|
||||
await indexAllFiles(files)
|
||||
onIndexUpdated()
|
||||
})
|
||||
},
|
||||
|
||||
resolveId(id) {
|
||||
if (id.startsWith(OFFLINE_SEARCH_INDEX_ID)) {
|
||||
return `/${id}`
|
||||
}
|
||||
},
|
||||
|
||||
async load(id) {
|
||||
if (id === OFFLINE_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('@offlineSearchIndex${locale}')`
|
||||
)
|
||||
}
|
||||
return `export default {${records.join(',')}}`
|
||||
} else if (id.startsWith(OFFLINE_SEARCH_INDEX_REQUEST_PATH)) {
|
||||
return `export default ${JSON.stringify(
|
||||
JSON.stringify(
|
||||
indexByLocales.get(
|
||||
id.replace(OFFLINE_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(
|
||||
await 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]
|
||||
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,25 @@
|
||||
export interface OfflineSearchTranslations {
|
||||
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
|
||||
}
|
||||
Loading…
Reference in new issue