From 7e1f265eb8fcee3557b24a3c5a85bcbd7b3fec91 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 8 Apr 2021 17:33:08 +0200 Subject: [PATCH 1/9] fix: correctly set the lang --- src/shared/config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/config.ts b/src/shared/config.ts index 281ce539ebf5..b5f152abda16 100644 --- a/src/shared/config.ts +++ b/src/shared/config.ts @@ -47,6 +47,7 @@ export function resolveSiteDataByRoute(siteData: SiteData, route: string) { // clean the locales to reduce the bundle size locales: {} }, + lang: localeThemeConfig.lang || siteData.lang, locales: {} } } From 143002a4acd6eabd4ab1cac1eecfe0e20525d54b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 8 Apr 2021 17:58:08 +0200 Subject: [PATCH 2/9] fix(search): pass the language to algolia --- .../theme-default/components/AlgoliaSearchBox.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index 638149a11a68..70f375d3fa65 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -9,6 +9,9 @@ import { defineProps, getCurrentInstance, onMounted, watch } from 'vue' import docsearch from '@docsearch/js' import type { DefaultTheme } from '../config' import type { DocSearchHit } from '@docsearch/react/dist/esm/types' +import { useSiteDataByRoute } from 'vitepress' + +const siteData = useSiteDataByRoute() const props = defineProps<{ options: DefaultTheme.AlgoliaSearchOptions @@ -58,7 +61,13 @@ function initialize(userOptions: any) { Object.assign({}, userOptions, { container: '#docsearch', - searchParameters: Object.assign({}, userOptions.searchParameters), + searchParameters: Object.assign({}, userOptions.searchParameters, { + // pass a custom lang facetFilter to allow multiple language search + // https://github.com/algolia/docsearch-configs/pull/3942 + facetFilters: ['language:' + siteData.value.lang].concat( + userOptions.facetFilters || [] + ) + }), navigator: { navigate: ({ suggestionUrl }: { suggestionUrl: string }) => { From 2d5c5ca620e5b4d319c06a6a27bf2035e331aea0 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 15 Apr 2021 10:31:08 +0200 Subject: [PATCH 3/9] fix: recreate algolia search when changing lang --- src/client/theme-default/Layout.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue index e16c5ee0f9ed..5eacf80e7981 100644 --- a/src/client/theme-default/Layout.vue +++ b/src/client/theme-default/Layout.vue @@ -3,7 +3,7 @@ From 35d5718ae9cd3cec4960839de7dbd324c198bbe9 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 15 Apr 2021 11:24:01 +0200 Subject: [PATCH 4/9] fix: use language facetfilter with locales only --- src/client/theme-default/Layout.vue | 7 ++++++- src/client/theme-default/components/AlgoliaSearchBox.vue | 9 +++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue index 5eacf80e7981..5058651ea511 100644 --- a/src/client/theme-default/Layout.vue +++ b/src/client/theme-default/Layout.vue @@ -3,7 +3,12 @@ diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index 70f375d3fa65..02cef4809d31 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -14,7 +14,8 @@ import { useSiteDataByRoute } from 'vitepress' const siteData = useSiteDataByRoute() const props = defineProps<{ - options: DefaultTheme.AlgoliaSearchOptions + options: DefaultTheme.AlgoliaSearchOptions, + multilang?: boolean }>() const vm = getCurrentInstance() @@ -57,6 +58,10 @@ function update(options: any) { } function initialize(userOptions: any) { + // if the user has multiple locales, the search results should be filtered + // based on the language + const facetFilters = props.multilang ? ['language:' + siteData.value.lang] : [] + docsearch( Object.assign({}, userOptions, { container: '#docsearch', @@ -64,7 +69,7 @@ function initialize(userOptions: any) { searchParameters: Object.assign({}, userOptions.searchParameters, { // pass a custom lang facetFilter to allow multiple language search // https://github.com/algolia/docsearch-configs/pull/3942 - facetFilters: ['language:' + siteData.value.lang].concat( + facetFilters: facetFilters.concat( userOptions.facetFilters || [] ) }), From bb1d992d013df763393753175a53732d60d26502 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 15 Apr 2021 13:39:35 +0200 Subject: [PATCH 5/9] fix: correct position for facetFilters --- src/client/theme-default/components/AlgoliaSearchBox.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index 02cef4809d31..c29525848c12 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -70,7 +70,7 @@ function initialize(userOptions: any) { // pass a custom lang facetFilter to allow multiple language search // https://github.com/algolia/docsearch-configs/pull/3942 facetFilters: facetFilters.concat( - userOptions.facetFilters || [] + (userOptions.searchParameters || {}).facetFilters || [] ) }), From aa5d9432c72adcb5eaae0a0f9c58b59826b0daeb Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 15 Apr 2021 13:39:48 +0200 Subject: [PATCH 6/9] docs: document search i18n --- docs/config/algolia-search.md | 73 ++++++++++++++++++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) diff --git a/docs/config/algolia-search.md b/docs/config/algolia-search.md index 0076bcaa011d..55ae39e2d1e7 100644 --- a/docs/config/algolia-search.md +++ b/docs/config/algolia-search.md @@ -13,4 +13,75 @@ module.exports = { } ``` -For more options, check out [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options). +For more options, check out [Algolia DocSearch's documentation](https://docsearch.algolia.com/docs/behavior). You can pass any extra option alongside other options, e.g. passing `searchParameters`: + +```js +module.exports = { + themeConfig: { + algolia: { + apiKey: 'your_api_key', + indexName: 'index_name', + searchParameters: { + facetFilters: ['tags:guide,api'] + } + } + } +} +``` + +## Internationalization (i18n) + +If you have multiple locales in your documentation and you have defined a `locales` object in your `themeConfig`: + +```js +module.exports = { + themeConfig: { + locales: { + // ... + }, + algolia: { + apiKey: 'your_api_key', + indexName: 'index_name' + } + } +} +``` + +VitePress will automatically add a `language` _facetFilter_ to the `searchParams.facetFilter` array. **Make sure to properly configure your DocSearch config as well** by adding `language` as a _custom attribute for faceting_ and by setting it based on the `lang` attribute of the `` element. Here is a short example of DocSearch config: + +```json +{ + "index_name": "", + "start_urls": [ + { + "url": "" + } + ], + "stop_urls": ["(?:(? .sidebar-links > .sidebar-link .sidebar-link-item.active", + "global": true, + "default_value": "Documentation" + }, + "lvl1": ".content h1", + "lvl2": ".content h2", + "lvl3": ".content h3", + "lvl4": ".content h4", + "lvl5": ".content h5", + "lvl6": ".content p, .content li", + "text": ".content [class^=language-]", + "language": { + "selector": "/html/@lang", + "type": "xpath", + "global": true, + "default_value": "en-US" + } + }, + "custom_settings": { + "attributesForFaceting": ["language"] + } +} +``` + +You can take a look at the [DocSearch config used by Vue Router](https://github.com/algolia/docsearch-configs/blob/master/configs/next_router_vuejs.json) for a complete example. From 3bed6c842cfb3aaa4fdb7edd4693e61611794b07 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 15 Apr 2021 13:44:35 +0200 Subject: [PATCH 7/9] docs: extra hint algolia search [skip ci] --- docs/config/algolia-search.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/algolia-search.md b/docs/config/algolia-search.md index 55ae39e2d1e7..a4e7bb45b480 100644 --- a/docs/config/algolia-search.md +++ b/docs/config/algolia-search.md @@ -47,7 +47,7 @@ module.exports = { } ``` -VitePress will automatically add a `language` _facetFilter_ to the `searchParams.facetFilter` array. **Make sure to properly configure your DocSearch config as well** by adding `language` as a _custom attribute for faceting_ and by setting it based on the `lang` attribute of the `` element. Here is a short example of DocSearch config: +VitePress will automatically add a `language` _facetFilter_ to the `searchParams.facetFilter` array with the correct language value. **Make sure to properly configure your DocSearch config as well** by adding `language` as a _custom attribute for faceting_ and by setting it based on the `lang` attribute of the `` element. Here is a short example of DocSearch config: ```json { From e5a363787e52905e112e5c65d4bbfa9fcc5588fd Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 16 Apr 2021 11:58:18 +0200 Subject: [PATCH 8/9] refactor: use chaining operator --- src/client/theme-default/components/AlgoliaSearchBox.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index c29525848c12..e60596242f3f 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -70,7 +70,7 @@ function initialize(userOptions: any) { // pass a custom lang facetFilter to allow multiple language search // https://github.com/algolia/docsearch-configs/pull/3942 facetFilters: facetFilters.concat( - (userOptions.searchParameters || {}).facetFilters || [] + userOptions.searchParameters?.facetFilters || [] ) }), From dbdd08207c2cedb73a577e7c673b08522a4a3b5c Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 16 Apr 2021 12:55:01 +0200 Subject: [PATCH 9/9] style: format --- src/client/theme-default/components/AlgoliaSearchBox.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue index e60596242f3f..8b7af040caeb 100644 --- a/src/client/theme-default/components/AlgoliaSearchBox.vue +++ b/src/client/theme-default/components/AlgoliaSearchBox.vue @@ -14,7 +14,7 @@ import { useSiteDataByRoute } from 'vitepress' const siteData = useSiteDataByRoute() const props = defineProps<{ - options: DefaultTheme.AlgoliaSearchOptions, + options: DefaultTheme.AlgoliaSearchOptions multilang?: boolean }>() @@ -60,7 +60,9 @@ function update(options: any) { function initialize(userOptions: any) { // if the user has multiple locales, the search results should be filtered // based on the language - const facetFilters = props.multilang ? ['language:' + siteData.value.lang] : [] + const facetFilters = props.multilang + ? ['language:' + siteData.value.lang] + : [] docsearch( Object.assign({}, userOptions, {