fix(website): scope docs search by locale and channel

2 files changed, 61 insertions, 0 deletions

diff --git a/website/src/components/Head.astro b/website/src/components/Head.astro
new file mode 100644
index 00000000..b1214cb1
--- /dev/null
+++ b/website/src/components/Head.astro
@@ -0,0 +1,9 @@
+---
+import { docsChannel } from '../docs-path';
+
+const { head } = Astro.locals.starlightRoute;
+const channel = docsChannel(Astro.url.pathname);
+---
+
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
+<meta data-pagefind-filter="channel[content]" content={channel} />
diff --git a/website/src/components/Search.astro b/website/src/components/Search.astro
new file mode 100644
index 00000000..2a31ea24
--- /dev/null
+++ b/website/src/components/Search.astro
@@ -0,0 +1,52 @@
+---
+import StarlightSearch from '@astrojs/starlight/components/Search.astro';
+import { docsChannel } from '../docs-path';
+
+const channel = docsChannel(Astro.url.pathname);
+---
+
+<channel-search data-channel={channel}>
+  <StarlightSearch />
+</channel-search>
+
+<script>
+  class ChannelSearch extends HTMLElement {
+    observer?: MutationObserver;
+
+    connectedCallback() {
+      const channel = this.dataset.channel;
+      if (!channel) return;
+
+      const selectChannel = () => {
+        const checkbox = this.querySelector<HTMLInputElement>(
+          `.pagefind-ui__filter-checkbox[name="channel"][value="${channel}"]`,
+        );
+        if (!checkbox) return false;
+        if (!checkbox.checked) checkbox.click();
+        this.observer?.disconnect();
+        return true;
+      };
+
+      if (selectChannel()) return;
+      // Starlight does not expose its PagefindUI instance, so wait for Pagefind's filter control.
+      this.observer = new MutationObserver(selectChannel);
+      this.observer.observe(this, { childList: true, subtree: true });
+    }
+
+    disconnectedCallback() {
+      this.observer?.disconnect();
+    }
+  }
+
+  customElements.define('channel-search', ChannelSearch);
+</script>
+
+<style>
+  channel-search {
+    display: contents;
+  }
+
+  channel-search :global(.pagefind-ui__filter-panel) {
+    display: none;
+  }
+</style>