Add Orama Search

docs/.env.development

@@ -1,3 +1,3 @@
 export PUBLIC_CROCT_APP_ID=14881fb0-5b23-4a2c-a05d-446654d08189
 export CROCT_API_KEY=afd986ca-49ef-4705-b75c-c9d91bf3d507:ES256
-MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgRxge6XkJ3O9ybjTSat6sPTgyxqYjNNmiGg1P5QWhXTehRANCAATkCdeeySEI58Z7GD5mKlVjW9FS8hbMylVvAW1KMWBpghJ5utZQnm857INWVto3a4m+T96fAU1PUIX/tdROZP22
+

docs/astro.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, envField } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import type { StarlightConfig } from '@astrojs/starlight/types';
 import vercel from '@astrojs/vercel';
@@ -39,6 +39,7 @@ export default defineConfig({
 			lastUpdated: true,
 			editLink: { baseUrl: 'https://github.com/Fryuni/inox-tools/edit/main/docs' },
 			pagination: false,
+			pagefind: true,
 			social: {
 				github: 'https://github.com/Fryuni/inox-tools',
 				discord: 'https://discord.com/channels/830184174198718474/1197638002764152843',
@@ -48,6 +49,7 @@ export default defineConfig({
 				PageTitle: './src/components/PageTitle.astro',
 				Sidebar: './src/components/Sidebar.astro',
 				MarkdownContent: './src/components/MarkdownContent.astro',
+				Search: './src/components/Search.astro',
 			},
 			sidebar: [
 				{
@@ -145,6 +147,21 @@ export default defineConfig({
 			],
 		}),
 	],
+	env: {
+		validateSecrets: true,
+		schema: {
+			ORAMA_CLOUD_ENDPOINT: envField.string({
+				context: 'client',
+				access: 'public',
+				optional: false,
+			}),
+			ORAMA_CLOUD_API_KEY: envField.string({
+				context: 'client',
+				access: 'public',
+				optional: false,
+			}),
+		},
+	},
 	redirects: {
 		'/content-utils/git': '/content-utils',
 		'/content-utils/git-time': '/content-utils',

docs/package.json

@@ -17,6 +17,7 @@
     "@croct/plug": "^0.16.5",
     "@inox-tools/star-warp": "workspace:^",
     "@inox-tools/utils": "workspace:^",
+    "@orama/wc-components": "^0.4.1",
     "@vercel/analytics": "^1.4.1",
     "astro": "catalog:",
     "sharp": "^0.33.5",

docs/src/components/Search.astro

@@ -0,0 +1,72 @@
+---
+// import { Search as ReactSearch } from './Search';
+// import BaseSearch from '@astrojs/starlight/components/Search.astro';
+import '@orama/wc-components/dist/orama-ui/orama-ui.css';
+
+export type { Props } from '@astrojs/starlight/props';
+
+console.log('Redering custom search');
+---
+
+<div class="orama-search-bar">
+  <orama-search-box />
+	<orama-search-button colorScheme="dark" />
+</div>
+
+<script>
+import { defineCustomElements } from '@orama/wc-components/loader';
+import { ORAMA_CLOUD_API_KEY, ORAMA_CLOUD_ENDPOINT } from 'astro:env/client';
+
+document.querySelectorAll<HTMLOramaSearchBoxElement>('.orama-search-bar orama-search-box').forEach((el) => {
+  Object.assign(el, {
+    index: {
+      endpoint: ORAMA_CLOUD_ENDPOINT,
+      api_key: ORAMA_CLOUD_API_KEY,
+    },
+    disableChat: true,
+    sourcesMap: {
+      title: 'title',
+      description: 'content',
+    },
+    resultMap: {
+      title: 'title',
+      description: 'content',
+    },
+    searchPlaceholder: 'Search something...',
+    chatPlaceholder: 'What do you dream of doing with Inox Tools?',
+    suggestions: [
+      'What is Inox Tools?',
+      'How to use Nanostores on the server?',
+      'How to use Portals in Astro?',
+    ],
+  } satisfies Partial<HTMLOramaSearchBoxElement>);
+});
+
+		function updateSearchTheme() {
+			const theme = document.documentElement.dataset.theme || 'dark';
+			document.querySelectorAll('.orama-search-bar').forEach((el) => {
+				const button = el.querySelector('orama-search-button');
+				const box = el.querySelector('orama-search-box');
+		    if (button) button.colorScheme = theme as any;
+        if (box) box.colorScheme = theme as any;
+			});
+		}
+
+		updateSearchTheme();
+
+		const observer = new MutationObserver(updateSearchTheme);
+		observer.observe(document.documentElement, { attributes: true, subtree: false });
+
+  defineCustomElements();
+
+	document.querySelectorAll('.orama-search-bar orama-search-button').forEach((el) => {
+	  el.appendChild(document.createTextNode('Search'))
+	});
+</script>
+
+<style>
+	.orama-search-bar {
+		width: 100%;
+		max-width: 22rem;
+	}
+</style>

docs/src/utils/search.ts

@@ -0,0 +1,50 @@
+import type { OramaClient } from '@oramacloud/client';
+
+export function getOramaUserId(): string | undefined {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return;
+
+  const cookies = document.cookie.split(';');
+  const oid = cookies.find((cookie) => cookie.trim().startsWith('oid='));
+
+  if (oid) {
+    return oid.split('=')[1];
+  }
+
+  return;
+}
+
+export function userSessionRefresh(
+  client: OramaClient,
+  userId: string | undefined,
+  updateCallback: (userId: string | undefined) => void
+) {
+  const currentUserId = getOramaUserId();
+  if (currentUserId !== userId) {
+    console.warn('User ID changed:', currentUserId);
+    client.reset();
+    updateCallback(currentUserId);
+  }
+}
+
+declare global {
+  interface Window {
+    posthog: any;
+  }
+}
+
+export function searchSessionTracking(client: OramaClient, userId: string) {
+  if (!window?.posthog) return;
+  try {
+    if (userId) {
+      // TODO: remove this console.log
+      console.log('Identifying user with Cookie ID:', userId);
+      client.identify(userId);
+    } else {
+      // TODO: remove this console.log
+      console.log('Identifying session with PostHog:', window.posthog.get_distinct_id());
+      client.alias(window.posthog.get_distinct_id());
+    }
+  } catch (error) {
+    console.log(`Error setting identity: ${error}`);
+  }
+}

docs/tsconfig.json

@@ -5,6 +5,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }