mirror of https://github.com/vuejs/vitepress
feat: offline search (#2110)
Co-authored-by: Christian Georgi <chgeo@users.noreply.github.com>pull/2218/head
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