Skip to content

Commit 1e939f8

Browse files
thisisjofrankthisisjofrank
committed
update orama search config
1 parent f2bfc30 commit 1e939f8

6 files changed

Lines changed: 538 additions & 165 deletions

File tree

‎ORAMA_SETUP.md‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎README.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,69 @@ this command:
230230
git shortlog -s -n
231231
```
232232

233+
## Orama Search Configuration
234+
235+
1. **Sign up for Orama Cloud**: Go to
236+
[https://cloud.oramasearch.com/](https://cloud.oramasearch.com/) and create
237+
an account.
238+
239+
2. **Create a new index**:
240+
- In the Orama dashboard, create a new index
241+
- Set the data source to docs.deno.com or upload the documentation content
242+
directly
243+
244+
3. **Get your credentials**:
245+
- In your Orama dashboard, you'll find your **Endpoint URL** and **Public API
246+
Key**
247+
- These are safe to include in frontend applications
248+
249+
4. **Configure the search**:
250+
- Open `search.client.ts`
251+
- Replace `YOUR_ORAMA_ENDPOINT` with your actual endpoint URL
252+
- Replace `YOUR_ORAMA_API_KEY` with your actual public API key
253+
254+
### Data Sources
255+
256+
For the Deno docs, we have several options:
257+
258+
#### Option 1: Web Crawler (Recommended)
259+
260+
- Use Orama's built-in web crawler to index your documentation site
261+
- Go to Data Sources → Web Crawler in your Orama dashboard
262+
- Add your site URL (e.g., `https://docs.deno.com`)
263+
- Configure crawling rules if needed
264+
265+
#### Option 2: Static Files
266+
267+
- Export your documentation content as JSON
268+
- Upload it directly to Orama
269+
- This gives you more control over what gets indexed
270+
271+
#### Option 3: API Integration
272+
273+
- Use Orama's REST API to programmatically add/update content
274+
- Useful to integrate with our build process
275+
276+
### Configuration Example
277+
278+
In `search.client.ts`, update the ORAMA_CONFIG object:
279+
280+
```typescript
281+
const ORAMA_CONFIG = {
282+
endpoint: "https://cloud.orama.com/v1/indexes/your-index-id",
283+
apiKey: "your-public-api-key-here",
284+
};
285+
```
286+
287+
### Customization
288+
289+
We can customize the search experience by modifying:
290+
291+
- **Search modes**: Change between "fulltext", "vector", or "hybrid" search
292+
- **Result limit**: Adjust how many results to show
293+
- **UI styling**: Modify the CSS classes in the search components
294+
- **Result formatting**: Change how search results are displayed
295+
233296
## Deployment
234297

235298
The `docs.deno.com` site is updated with every push to the `main` branch, which

‎_components/SearchInput.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,42 @@ export default function SearchInput() {
2020
</div>
2121
</div>
2222

23+
{/* Enhanced Popover for Search Results */}
2324
<div
2425
id="orama-search-results"
25-
className="absolute top-full left-0 right-0 mt-1 bg-background-raw border border-foreground-tertiary rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto hidden"
26+
className="absolute top-full left-0 right-0 mt-2 bg-background-raw border border-foreground-tertiary rounded-xl shadow-2xl z-50 max-h-[32rem] overflow-hidden hidden
27+
min-w-[480px] max-w-2xl lg:left-auto lg:right-0"
2628
>
27-
{/* Results will be populated via JavaScript */}
29+
<div
30+
id="orama-search-results-content"
31+
className="overflow-y-auto max-h-[28rem]"
32+
>
33+
{/* Results will be populated via JavaScript */}
34+
</div>
35+
36+
{/* Footer with search tips */}
37+
<div className="border-t border-foreground-tertiary bg-background-secondary px-4 py-2">
38+
<div className="flex items-center justify-between text-xs text-foreground-tertiary">
39+
<span>
40+
<kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-tertiary border border-foreground-tertiary rounded mr-1">
41+
↑↓
42+
</kbd>
43+
to navigate
44+
</span>
45+
<span>
46+
<kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-tertiary border border-foreground-tertiary rounded mr-1">
47+
↵
48+
</kbd>
49+
to select
50+
</span>
51+
<span>
52+
<kbd className="px-1.5 py-0.5 text-xs font-semibold text-foreground-secondary bg-background-tertiary border border-foreground-tertiary rounded">
53+
ESC
54+
</kbd>
55+
to close
56+
</span>
57+
</div>
58+
</div>
2859
</div>
2960
</div>
3061
);

‎orama.config.example.ts‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎orama.config.ts‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* Orama Search Configuration for Deno Docs
3+
*
4+
* This file contains configuration examples and documentation for setting up
5+
* Orama search. The actual indexing configuration is done in the Orama Cloud dashboard.
6+
*
7+
* Setup Process:
8+
* 1. Sign up at https://cloud.oramasearch.com/
9+
* 2. Create a new index
10+
* 3. Configure your data source using the examples below
11+
* 4. Copy your endpoint and API key to search.client.ts
12+
*/
13+
14+
// These are the credentials you need to add to search.client.ts
15+
const ORAMA_CREDENTIALS = {
16+
endpoint: "https://cloud.orama.run/v1/indexes/your-index-id-here",
17+
apiKey: "your-public-api-key-here",
18+
};
19+
20+
// Recommended Web Crawler Configuration for Orama Cloud Dashboard
21+
// Copy these settings into your Orama Cloud index configuration:
22+
23+
const RECOMMENDED_CRAWLER_CONFIG = {
24+
// Base URL to crawl
25+
startUrl: "https://docs.deno.com",
26+
27+
// URLs to include (use these patterns in the Orama dashboard)
28+
includePatterns: [
29+
"https://docs.deno.com/runtime/**",
30+
"https://docs.deno.com/deploy/**",
31+
"https://docs.deno.com/examples/**",
32+
"https://docs.deno.com/api/**",
33+
],
34+
35+
// URLs to exclude (use these patterns in the Orama dashboard)
36+
excludePatterns: [
37+
"https://docs.deno.com/_site/**",
38+
"https://docs.deno.com/img/**",
39+
"https://docs.deno.com/fonts/**",
40+
"https://docs.deno.com/js/**",
41+
],
42+
43+
// CSS selectors to INCLUDE (main content areas only)
44+
// Add these in the "Content Selectors" section of Orama dashboard
45+
includeSelectors: [
46+
"main", // Main content area
47+
"article", // Article content
48+
".content", // Content containers
49+
".documentation", // Documentation sections
50+
"[role='main']", // ARIA main content
51+
".markdown-body", // If using markdown rendering
52+
],
53+
54+
// CSS selectors to EXCLUDE (navigation and UI elements)
55+
// Add these in the "Exclude Selectors" section of Orama dashboard
56+
excludeSelectors: [
57+
"nav", // Navigation elements
58+
".navigation", // Navigation classes
59+
".nav", // Nav classes
60+
".navbar", // Navbar
61+
".sidebar", // Sidebar navigation
62+
".breadcrumb", // Breadcrumbs
63+
".breadcrumbs", // Breadcrumbs
64+
".header", // Page headers
65+
".footer", // Page footers
66+
".menu", // Menu elements
67+
".toc", // Table of contents
68+
".table-of-contents", // Table of contents
69+
"[role='navigation']", // ARIA navigation
70+
"[role='banner']", // ARIA banner (header)
71+
"[role='contentinfo']", // ARIA contentinfo (footer)
72+
".search", // Search components
73+
".search-input", // Search inputs
74+
".tabs", // Tab navigation
75+
".tab-nav", // Tab navigation
76+
".pagination", // Pagination
77+
".social-links", // Social media links
78+
".edit-page", // Edit page links
79+
".github-link", // GitHub links
80+
],
81+
82+
// Content filtering settings
83+
minContentLength: 50, // Skip content shorter than 50 characters
84+
maxContentLength: 10000, // Limit very long content
85+
};
86+
87+
// Field mapping for your documents (configure in Orama dashboard)
88+
const FIELD_MAPPING = {
89+
// These fields will be created in your Orama index
90+
title: "string", // Page title
91+
content: "string", // Main content
92+
url: "string", // Page URL/path
93+
category: "string", // Content category (runtime, deploy, etc.)
94+
section: "string", // Section within category
95+
tags: "string[]", // Tags array
96+
};
97+
98+
// How to configure this in Orama Cloud Dashboard:
99+
const SETUP_INSTRUCTIONS = `
100+
1. Go to https://cloud.oramasearch.com/
101+
2. Create a new index
102+
3. Choose "Web Crawler" as data source
103+
4. Configure the crawler with these settings:
104+
105+
Base URL: https://docs.deno.com
106+
107+
Include Patterns (one per line):
108+
https://docs.deno.com/runtime/**
109+
https://docs.deno.com/deploy/**
110+
https://docs.deno.com/examples/**
111+
https://docs.deno.com/api/**
112+
113+
Exclude Patterns (one per line):
114+
https://docs.deno.com/_site/**
115+
https://docs.deno.com/img/**
116+
https://docs.deno.com/fonts/**
117+
https://docs.deno.com/js/**
118+
119+
Content Selectors (Include - one per line):
120+
main
121+
article
122+
.content
123+
.documentation
124+
[role="main"]
125+
126+
Exclude Selectors (one per line):
127+
nav
128+
.navigation
129+
.sidebar
130+
.breadcrumb
131+
.header
132+
.footer
133+
.menu
134+
[role="navigation"]
135+
136+
Content Filtering:
137+
Minimum content length: 50
138+
139+
5. Run the crawler
140+
6. Copy your endpoint and API key to search.client.ts
141+
`;
142+
143+
export {
144+
FIELD_MAPPING,
145+
ORAMA_CREDENTIALS,
146+
RECOMMENDED_CRAWLER_CONFIG,
147+
SETUP_INSTRUCTIONS,
148+
};

0 commit comments

Comments
 (0)