[search] Override Algolia DocSearch config with lang facetFilters

Author: moonclavedev

astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig, envField } from "astro/config";
 import starlight from "@astrojs/starlight";
 import tailwindcss from "@tailwindcss/vite";
 import starlightOpenAPI, { openAPISidebarGroups } from "starlight-openapi";
@@ -71,9 +71,7 @@ export default defineConfig({
         ...(hasAlgoliaConfig
           ? [
               starlightDocSearch({
-                appId: ALGOLIA_APP_ID,
-                apiKey: ALGOLIA_SEARCH_API_KEY,
-                indexName: ALGOLIA_INDEX_NAME,
+                clientOptionsModule: "./src/config/docsearch.ts",
               }),
             ]
           : []),
@@ -128,4 +126,14 @@ export default defineConfig({
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeKatex],
   },
+  env: {
+    schema: {
+      ALGOLIA_APP_ID: envField.string({ context: "client", access: "public" }),
+      ALGOLIA_SEARCH_API_KEY: envField.string({
+        context: "client",
+        access: "public",
+      }),
+      ALGOLIA_INDEX_NAME: envField.string({ context: "client", access: "public" }),
+    },
+  },
 });

src/config/docsearch.ts

@@ -0,0 +1,23 @@
+import type { DocSearchClientOptions } from "@astrojs/starlight-docsearch";
+import { ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY, ALGOLIA_INDEX_NAME } from "astro:env/client";
+
+const getFacetFilters = (): string[] =>
+  typeof document !== "undefined" ? [`lang:${document.documentElement.lang}`] : [];
+
+const getEnvVar = (key: string, value: string | undefined): string => {
+  if (!value) {
+    throw new Error(`Missing environment variable: ${key}`);
+  }
+  return value;
+};
+
+export default Object.freeze({
+  appId: getEnvVar("ALGOLIA_APP_ID", ALGOLIA_APP_ID as string | undefined),
+  apiKey: getEnvVar("ALGOLIA_SEARCH_API_KEY", ALGOLIA_SEARCH_API_KEY as string | undefined),
+  indexName: getEnvVar("ALGOLIA_INDEX_NAME", ALGOLIA_INDEX_NAME as string | undefined),
+  searchParameters: {
+    get facetFilters() {
+      return getFacetFilters();
+    },
+  },
+} satisfies DocSearchClientOptions);

src/starlight-overrides/Head.astro

@@ -4,6 +4,7 @@ import Default from "@astrojs/starlight/components/Head.astro";
 import AnalyticsComponent from "@vercel/analytics/astro";
 import type { AnalyticsProps } from "@vercel/analytics";
 import type { JSX } from "astro/jsx-runtime";
+const { lang } = Astro.props;
 
 // This is workaround for wrongly typed Analytics component from @vercel/analytics/astro
 const Analytics = AnalyticsComponent as unknown as (
@@ -13,3 +14,5 @@ const Analytics = AnalyticsComponent as unknown as (
 
 <Default {...Astro.props}><slot /></Default>
 <Analytics />
+<!-- Algolia docsearch language facet -->
+<meta name="docsearch:language" content={lang} />