-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.astro
99 lines (89 loc) · 2.28 KB
/
index.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
---
import { db, sql } from 'astro:db';
import { Markdown } from 'astro-remote';
const t0 = performance.now();
const query = Astro.url.searchParams.get('search');
let res: Awaited<ReturnType<typeof db.run>> | Array<[string, string]> = [];
let rows = [];
let error: Error;
if (query) {
const sanitizedQuery = '"' + query.replaceAll('"', '""') + '"';
try {
res = await db.run(sql`
SELECT
title,
highlight(UDHRArticles, 1, '<mark>', '</mark>') as content
FROM UDHRArticles
WHERE UDHRArticles MATCH ${sanitizedQuery}
ORDER BY rank
`);
} catch (e) {
error = e;
}
}
const timeFormatter = new Intl.NumberFormat('en', { style: 'unit', unit: 'millisecond' });
const elapsed = timeFormatter.format(performance.now() - t0);
if (Array.isArray(res)) {
rows = res.map(([title, content]) => ({ title, content }));
} else {
({ rows } = res);
}
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro DB Full Text Search</title>
<meta
name="description"
content="Example of full text search powered by Astro DB, libSQL and FTS5."
/>
</head>
<body>
<h1>Full-text search example</h1>
<p>This page shows search results via look-up from an FTS5 table in the SQLite database.</p>
<form>
<label>
Search Query
<input type="search" name="search" required value={query} />
</label>
<button>Submit</button>
<p>
Example queries:
<a href="/?search=everyone">everyone</a>
<a href="/?search=no+one">no one</a>
<a href="/?search=liberty">liberty</a>
<a href="/?search=leisure">leisure</a>
</p>
</form>
{
error ? (
<>
<h2>Error</h2>
<pre>{error}</pre>
</>
) : (
query && (
<>
<h2>
{rows.length} result{rows.length === 1 ? '' : 's'} for <code>{query}</code>
</h2>
<p>Search completed in {elapsed}</p>
{rows.map(({ title, content }) => (
<article>
<h3>{title}</h3>
<Markdown {content} />
</article>
))}
</>
)
)
}
<hr />
<footer>
<a href="https://github.com/delucis/astro-db-fts">Source code on GitHub</a>
</footer>
</body>
</html>