mirror of https://github.com/vuejs/vitepress
Eduardo San Martin Morote
4 years ago
committed by
GitHub
parent
897520e95a
commit
5bb4730f7f
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div id="docsearch"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { AlgoliaSearchOptions } from 'algoliasearch'
|
||||||
|
import { useRoute, useRouter } from 'vitepress'
|
||||||
|
import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
|
||||||
|
|
||||||
|
function isSpecialClick(event: MouseEvent) {
|
||||||
|
return (
|
||||||
|
event.button === 1 ||
|
||||||
|
event.altKey ||
|
||||||
|
event.ctrlKey ||
|
||||||
|
event.metaKey ||
|
||||||
|
event.shiftKey
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRelativePath(absoluteUrl: string) {
|
||||||
|
const { pathname, hash } = new URL(absoluteUrl)
|
||||||
|
// const url = pathname.replace(this.$site.base, '/') + hash
|
||||||
|
const url = pathname + hash
|
||||||
|
|
||||||
|
return url
|
||||||
|
}
|
||||||
|
|
||||||
|
const { options } = defineProps<{
|
||||||
|
// Using a regular import breaks at runtime
|
||||||
|
options: AlgoliaSearchOptions
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const vm = getCurrentInstance()
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => options,
|
||||||
|
(newValue) => {
|
||||||
|
update(newValue)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function update(options: any) {
|
||||||
|
if (vm && vm.vnode.el) {
|
||||||
|
vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
|
||||||
|
initialize(options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initialize(userOptions: any) {
|
||||||
|
Promise.all([
|
||||||
|
import('@docsearch/js'),
|
||||||
|
import('@docsearch/css')
|
||||||
|
// import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
|
||||||
|
// Promise.resolve(docsearch),
|
||||||
|
// import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
|
||||||
|
]).then(([docsearch]) => {
|
||||||
|
docsearch = docsearch.default
|
||||||
|
|
||||||
|
docsearch(
|
||||||
|
Object.assign({}, userOptions, {
|
||||||
|
container: '#docsearch',
|
||||||
|
// #697 Make DocSearch work well in i18n mode.
|
||||||
|
searchParameters: Object.assign(
|
||||||
|
{},
|
||||||
|
// lang && {
|
||||||
|
// facetFilters: [`lang:${lang}`].concat(
|
||||||
|
// userOptions.facetFilters || []
|
||||||
|
// )
|
||||||
|
// },
|
||||||
|
userOptions.searchParameters
|
||||||
|
),
|
||||||
|
navigator: {
|
||||||
|
navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
|
||||||
|
const { pathname: hitPathname } = new URL(
|
||||||
|
window.location.origin + suggestionUrl
|
||||||
|
)
|
||||||
|
|
||||||
|
// Vue Router doesn't handle same-page navigation so we use
|
||||||
|
// the native browser location API for anchor navigation.
|
||||||
|
if (route.path === hitPathname) {
|
||||||
|
window.location.assign(window.location.origin + suggestionUrl)
|
||||||
|
} else {
|
||||||
|
router.go(suggestionUrl)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transformItems: (items) => {
|
||||||
|
return items.map((item) => {
|
||||||
|
return Object.assign({}, item, {
|
||||||
|
url: getRelativePath(item.url)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
hitComponent: ({ hit, children }) => {
|
||||||
|
const relativeHit = hit.url.startsWith('http')
|
||||||
|
? getRelativePath(hit.url as string)
|
||||||
|
: hit.url
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'a',
|
||||||
|
ref: undefined,
|
||||||
|
constructor: undefined,
|
||||||
|
key: undefined,
|
||||||
|
props: {
|
||||||
|
href: hit.url,
|
||||||
|
onClick: (event: MouseEvent) => {
|
||||||
|
if (isSpecialClick(event)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// We rely on the native link scrolling when user is
|
||||||
|
// already on the right anchor because Vue Router doesn't
|
||||||
|
// support duplicated history entries.
|
||||||
|
if (route.path === relativeHit) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the hits goes to another page, we prevent the native link behavior
|
||||||
|
// to leverage the Vue Router loading feature.
|
||||||
|
if (route.path !== relativeHit) {
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
router.go(relativeHit)
|
||||||
|
},
|
||||||
|
children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initialize(options)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.DocSearch {
|
||||||
|
--docsearch-primary-color: #42b983;
|
||||||
|
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||||
|
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue