From 3602715194ec27dfd55529c43c3dfc9e907309d2 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Thu, 17 Mar 2022 10:56:04 +0800 Subject: [PATCH] wip: searchPgae --- .../components/DcloudSearchPage/index.vue | 242 ++++++++++++++++++ .../DcloudSearchPage/searchClient.js | 96 +++++++ docs/.vuepress/theme/components/Navbar.vue | 28 +- .../.vuepress/theme/components/NavbarLogo.vue | 24 ++ docs/.vuepress/theme/layouts/Layout.vue | 9 +- docs/.vuepress/theme/util/index.js | 2 + docs/.vuepress/theme/util/searchUtils.js | 39 +++ 7 files changed, 415 insertions(+), 25 deletions(-) create mode 100644 docs/.vuepress/theme/components/DcloudSearchPage/index.vue create mode 100644 docs/.vuepress/theme/components/DcloudSearchPage/searchClient.js create mode 100644 docs/.vuepress/theme/components/NavbarLogo.vue create mode 100644 docs/.vuepress/theme/util/searchUtils.js diff --git a/docs/.vuepress/theme/components/DcloudSearchPage/index.vue b/docs/.vuepress/theme/components/DcloudSearchPage/index.vue new file mode 100644 index 000000000..1d7788806 --- /dev/null +++ b/docs/.vuepress/theme/components/DcloudSearchPage/index.vue @@ -0,0 +1,242 @@ + + + + + diff --git a/docs/.vuepress/theme/components/DcloudSearchPage/searchClient.js b/docs/.vuepress/theme/components/DcloudSearchPage/searchClient.js new file mode 100644 index 000000000..7c117c868 --- /dev/null +++ b/docs/.vuepress/theme/components/DcloudSearchPage/searchClient.js @@ -0,0 +1,96 @@ +import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser'; +import { removeHighlightTags, groupBy } from '../../util' + +let searchClient +function createSearchClient(appId, apiKey) { + if (searchClient) return searchClient + searchClient = algoliasearch(appId, apiKey); + searchClient.addAlgoliaAgent('dcloudsearch', '1.0.0'); + + return searchClient +} + +export function search({ query, indexName, appId, apiKey, searchParameters = {}, snippetLength = 0, transformItems = () => { }, ...args }) { + return createSearchClient(appId, apiKey) + .search([ + { + query, + indexName, + params: { + attributesToRetrieve: [ + 'hierarchy.lvl0', + 'hierarchy.lvl1', + 'hierarchy.lvl2', + 'hierarchy.lvl3', + 'hierarchy.lvl4', + 'hierarchy.lvl5', + 'hierarchy.lvl6', + 'content', + 'type', + 'url', + ], + attributesToSnippet: [ + `hierarchy.lvl1:${snippetLength}`, + `hierarchy.lvl2:${snippetLength}`, + `hierarchy.lvl3:${snippetLength}`, + `hierarchy.lvl4:${snippetLength}`, + `hierarchy.lvl5:${snippetLength}`, + `hierarchy.lvl6:${snippetLength}`, + `content:${snippetLength}`, + ], + snippetEllipsisText: '…', + highlightPreTag: '', + highlightPostTag: '', + hitsPerPage: 20, + ...args, + ...searchParameters, + }, + }, + ]) + .catch((error) => { + throw error; + }) + .then(({ results }) => { + const { hits, nbHits } = results[0]; + const sources = groupBy(hits, (hit) => removeHighlightTags(hit)); + + return Object.values(sources).map( + (items, index) => { + return { + sourceId: `hits${index}`, + onSelect({ item, event }) { + // saveRecentSearch(item); + + // if (!event.shiftKey && !event.ctrlKey && !event.metaKey) { + // onClose(); + // } + }, + getItemUrl({ item }) { + return item.url; + }, + getItems() { + return Object.values( + groupBy(items, (item) => item.hierarchy.lvl1) + ) + .map(transformItems) + .map((groupedHits) => + groupedHits.map((item) => { + return { + ...item, + __docsearch_parent: + item.type !== 'lvl1' && + groupedHits.find( + (siblingItem) => + siblingItem.type === 'lvl1' && + siblingItem.hierarchy.lvl1 === + item.hierarchy.lvl1 + ), + }; + }) + ).flat(); + }, + }; + } + ); + }); +} \ No newline at end of file diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue index 985bb46f3..1d1228992 100644 --- a/docs/.vuepress/theme/components/Navbar.vue +++ b/docs/.vuepress/theme/components/Navbar.vue @@ -3,29 +3,7 @@
- - - - {{ $siteTitle }} - +
+ +
@@ -52,6 +54,7 @@ import Page from '@theme/components/Page.vue' import Sidebar from '@theme/components/Sidebar.vue' import Footer from '@theme/components/Footer.vue'; import SiderBarBottom from '../components/SiderBarBottom.vue'; +import DcloudSearchPage from '../components/DcloudSearchPage'; import { resolveSidebarItems, forbidScroll, BaiduStat } from '../util' import navProvider from '../mixin/navProvider'; @@ -64,7 +67,8 @@ export default { Sidebar, Navbar, Footer, - SiderBarBottom + SiderBarBottom, + DcloudSearchPage }, data () { return { @@ -114,6 +118,9 @@ export default { }, userPageClass ] + }, + algolia () { + return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {} } }, mounted () { diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js index 8aad5a519..e331b74ea 100644 --- a/docs/.vuepress/theme/util/index.js +++ b/docs/.vuepress/theme/util/index.js @@ -1,5 +1,7 @@ import Vue from 'vue'; +export * from './searchUtils'; + export const isServer = Vue.prototype.$isServer export const hashRE = /#.*$/ export const extRE = /\.(md|html)$/ diff --git a/docs/.vuepress/theme/util/searchUtils.js b/docs/.vuepress/theme/util/searchUtils.js new file mode 100644 index 000000000..134dfa926 --- /dev/null +++ b/docs/.vuepress/theme/util/searchUtils.js @@ -0,0 +1,39 @@ +export function groupBy(values, predicate) { + return values.reduce((acc, item) => { + const key = predicate(item); + + if (!acc.hasOwnProperty(key)) { + acc[key] = []; + } + + // We limit each section to show 5 hits maximum. + // This acts as a frontend alternative to `distinct`. + if (acc[key].length < 5) { + acc[key].push(item); + } + + return acc; + }, {}); +} + + +const regexHighlightTags = /(|<\/mark>)/g; +const regexHasHighlightTags = RegExp(regexHighlightTags.source); + +export function removeHighlightTags(hit) { + const internalDocSearchHit = hit + + if (!internalDocSearchHit.__docsearch_parent && !hit._highlightResult) { + return hit.hierarchy.lvl0; + } + + const { value } = + (internalDocSearchHit.__docsearch_parent + ? internalDocSearchHit.__docsearch_parent?._highlightResult?.hierarchy + ?.lvl0 + : hit._highlightResult?.hierarchy?.lvl0) || {}; + + return value && regexHasHighlightTags.test(value) + ? value.replace(regexHighlightTags, '') + : value; +} -- GitLab