-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
close #40
- Loading branch information
Showing
6 changed files
with
337 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
src/client/theme-default/components/AlgoliaSearchBox.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.