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