fix(locales): use correct lang (#283)

vuejs · Apr 17, 2021 · de89c1e · de89c1e
1 parent 77f144a
commit de89c1e
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 3 deletions.
diff --git 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 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 `<html>` element. Here is a short example of DocSearch config:
+
+```json
+{
+ "index_name": "<the name of your library>",
+ "start_urls": [
+ {
+ "url": "<your deployed url>"
+ }
+ ],
+ "stop_urls": ["(?:(?<!\\.html)(?<!/))$"],
+ "selectors": {
+ "lvl0": {
+ "selector": ".sidebar > .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.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -3,7 +3,12 @@
  <NavBar v-if="showNavbar" @toggle="toggleSidebar">
  <template #search>
  <slot name="navbar-search">
- <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" />
+ <AlgoliaSearchBox
+ v-if="theme.algolia"
+ :options="theme.algolia"
+ :multilang="theme.locales"
+ :key="siteRouteData.lang"
+ />
  </slot>
  </template>
  </NavBar>

diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
@@ -9,9 +9,13 @@ 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
+ multilang?: boolean
 }>()
 
 const vm = getCurrentInstance()
@@ -54,11 +58,23 @@ 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',
 
- 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: facetFilters.concat(
+ userOptions.searchParameters?.facetFilters || []
+ )
+ }),
 
  navigator: {
  navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {

diff --git 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: {}
  }
 }