feat(site): search (#165)

site/src/components/docs/FrameworkCase.astro

@@ -26,6 +26,6 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
     So, while I debug those... let's do this
   */
 }
-<div class="contents" hidden={!shouldRender}>
+<div class="contents" hidden={!shouldRender} data-pagefind-ignore={shouldRender ? undefined : 'all'}>
   <slot />
 </div>

site/src/components/docs/PreferenceSync.tsx

@@ -0,0 +1,39 @@
+import type { SupportedFramework, SupportedStyle } from '@/types/docs';
+import { useStore } from '@nanostores/react';
+import { useEffect } from 'react';
+import { currentFramework, currentStyle } from '@/stores/preferences';
+import { getPreferenceClient, setPreferenceClient } from '@/utils/docs/preferences';
+
+/**
+ * PreferenceSync keeps the nanostore in sync with cookies.
+ *
+ * On mount: Reads cookies → initializes store
+ * On store change: Writes to cookies
+ *
+ * This component should be loaded with client:load in the base layout
+ * to ensure preferences are available immediately.
+ */
+export function PreferenceSync() {
+  const framework = useStore(currentFramework);
+  const style = useStore(currentStyle);
+
+  // Initialize store from cookies on mount
+  useEffect(() => {
+    const prefs = getPreferenceClient();
+    if (prefs.framework) {
+      currentFramework.set(prefs.framework);
+    }
+    if (prefs.style) {
+      currentStyle.set(prefs.style);
+    }
+  }, []);
+
+  // Sync store changes to cookies
+  useEffect(() => {
+    if (framework && style) {
+      setPreferenceClient(framework as SupportedFramework, style as SupportedStyle<typeof framework>);
+    }
+  }, [framework, style]);
+
+  return <></>;
+}

site/src/components/docs/PreferenceUpdater.tsx

@@ -1,6 +1,6 @@
 import type { SupportedFramework, SupportedStyle } from '@/types/docs';
 import { useEffect } from 'react';
-import { setPreferenceClient } from '@/utils/docs/preferences';
+import { currentFramework as frameworkStore, currentStyle as styleStore } from '@/stores/preferences';
 
 interface PreferenceUpdaterProps<F extends SupportedFramework = SupportedFramework> {
   currentFramework: F;
@@ -8,13 +8,15 @@ interface PreferenceUpdaterProps<F extends SupportedFramework = SupportedFramewo
 }
 
 /**
- * PreferenceUpdater component updates user preferences in cookies.
- * This component is loaded with client:idle directive, making it non-blocking.
- * It renders nothing but updates cookies whenever framework or style changes.
+ * PreferenceUpdater component updates the preference nanostore based on URL params.
+ * This component is loaded with client:idle directive on docs pages, making it non-blocking.
+ * It updates the nanostore whenever framework or style from URL changes.
+ * PreferenceSync handles persisting to cookies.
  */
 export function PreferenceUpdater<F extends SupportedFramework = SupportedFramework>({ currentFramework, currentStyle }: PreferenceUpdaterProps<F>) {
   useEffect(() => {
-    setPreferenceClient(currentFramework, currentStyle);
+    frameworkStore.set(currentFramework);
+    styleStore.set(currentStyle);
   }, [currentFramework, currentStyle]);
 
   return <></>;

site/src/components/docs/StyleCase.astro

@@ -26,6 +26,6 @@ const shouldRender = !styles || styles.includes(style as AnySupportedStyle);
     So, while I debug those... let's do this
   */
 }
-<div class="contents" hidden={!shouldRender}>
+<div class="contents" hidden={!shouldRender} data-pagefind-ignore={shouldRender ? undefined : 'all'}>
   <slot />
 </div>