From 779606fdbf86eecb86d9d1a7627089acfccf9d02 Mon Sep 17 00:00:00 2001 From: Jo Franchetti Date: Mon, 4 Aug 2025 15:04:20 +0100 Subject: [PATCH 01/26] orama search --- ORAMA_SETUP.md | 83 ++++++++++ _components/SearchInput.tsx | 34 +++-- _includes/layout.tsx | 1 + deno.json | 3 +- deno.lock | 241 +++++++++++++++++++++++++---- examples/tutorials/vue.md | 2 +- orama.config.example.ts | 38 +++++ search.client.ts | 291 ++++++++++++++++++++++++++++++++++++ 8 files changed, 650 insertions(+), 43 deletions(-) create mode 100644 ORAMA_SETUP.md create mode 100644 orama.config.example.ts create mode 100644 search.client.ts diff --git a/ORAMA_SETUP.md b/ORAMA_SETUP.md new file mode 100644 index 000000000..c1cbca451 --- /dev/null +++ b/ORAMA_SETUP.md @@ -0,0 +1,83 @@ +# Orama Search Configuration + +This file contains the configuration for integrating Orama search into the Deno +docs. + +## Getting Started with Orama + +1. **Sign up for Orama Cloud**: Go to + [https://cloud.oramasearch.com/](https://cloud.oramasearch.com/) and create + an account. + +2. **Create a new index**: + - In the Orama dashboard, create a new index + - Choose your data source (you'll want to crawl your website or upload your + documentation content) + +3. **Get your credentials**: + - In your Orama dashboard, you'll find your **Endpoint URL** and **Public API + Key** + - These are safe to include in frontend applications + +4. **Configure the search**: + - Open `search.client.ts` + - Replace `YOUR_ORAMA_ENDPOINT` with your actual endpoint URL + - Replace `YOUR_ORAMA_API_KEY` with your actual public API key + +## Data Sources + +For the Deno docs, you have several options: + +### Option 1: Web Crawler (Recommended) + +- Use Orama's built-in web crawler to index your documentation site +- Go to Data Sources → Web Crawler in your Orama dashboard +- Add your site URL (e.g., `https://docs.deno.com`) +- Configure crawling rules if needed + +### Option 2: Static Files + +- Export your documentation content as JSON +- Upload it directly to Orama +- This gives you more control over what gets indexed + +### Option 3: API Integration + +- Use Orama's REST API to programmatically add/update content +- Useful if you want to integrate with your build process + +## Configuration Example + +In `search.client.ts`, update the ORAMA_CONFIG object: + +```typescript +const ORAMA_CONFIG = { + endpoint: "https://cloud.orama.com/v1/indexes/your-index-id", + apiKey: "your-public-api-key-here", +}; +``` + +## Customization + +You can customize the search experience by modifying: + +- **Search modes**: Change between "fulltext", "vector", or "hybrid" search +- **Result limit**: Adjust how many results to show +- **UI styling**: Modify the CSS classes in the search components +- **Result formatting**: Change how search results are displayed + +## Building and Testing + +After configuration: + +1. Run `deno task build` to build the site +2. Run `deno task serve` to test locally +3. Try searching to verify the integration works + +## Troubleshooting + +- Check the browser console for any error messages +- Ensure your Orama credentials are correct +- Verify your index has been populated with data +- Make sure the search.client.js file is being loaded (check Network tab in + DevTools) diff --git a/_components/SearchInput.tsx b/_components/SearchInput.tsx index 5ed545e50..b34168444 100644 --- a/_components/SearchInput.tsx +++ b/_components/SearchInput.tsx @@ -1,23 +1,31 @@ export default function SearchInput() { return ( - <> -
+
+
- - - +
+
+
+
+
+ +
+ {/* Results will be populated via JavaScript */} +
+
); } diff --git a/_includes/layout.tsx b/_includes/layout.tsx index 9014747a8..04c2540c8 100644 --- a/_includes/layout.tsx +++ b/_includes/layout.tsx @@ -62,6 +62,7 @@ export default function Layout(data: Lume.Data) { +