e.key === ' ' && close()} />
+
+
{
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+ e.preventDefault();
+ const group = focusable_children(e.currentTarget);
+
+ // when using arrow keys (as opposed to tab), don't focus buttons
+ const selector = 'a, input';
+
+ if (e.key === 'ArrowDown') {
+ group.next(selector);
+ } else {
+ group.prev(selector);
+ }
+ }
+ }}
+ use:trap
+ >
+
+
+
{
+ if (e.key === 'Enter') {
+ modal.querySelector('a[data-has-node]')?.click();
+ }
+ }}
+ on:input={(e) => ($query = e.currentTarget.value)}
+ value={$query}
+ placeholder="Search"
+ aria-describedby="search-description"
+ aria-label="Search"
+ spellcheck="false"
+ />
+
+
+
+
Results will update as you type
+
+
+ {#if search?.query}
+
($searching = false)}
+ on:keydown={(e) => e.key === ' ' && ($searching = false)}
+ >
+ {
+ navigate(e.detail.href);
+ }}
+ />
+
+ {:else}
+
+ {recent_searches.length ? 'Recent searches' : 'No recent searches'}
+
+ {#if recent_searches.length}
+
+ {/if}
+ {/if}
+
+
+
+{/if}
+
+
+ {#if $searching && search?.results.length === 0}
+
No results
+ {/if}
+
+
+
diff --git a/sites/svelte.dev/src/lib/search/SearchResultList.svelte b/sites/svelte.dev/src/lib/search/SearchResultList.svelte
new file mode 100644
index 000000000000..7bf64e8542e8
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/SearchResultList.svelte
@@ -0,0 +1,163 @@
+
+
+
+
+
diff --git a/sites/svelte.dev/src/lib/search/SearchResults.svelte b/sites/svelte.dev/src/lib/search/SearchResults.svelte
new file mode 100644
index 000000000000..43b270e97e56
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/SearchResults.svelte
@@ -0,0 +1,28 @@
+
+
+{#if results.length > 0}
+
+{:else if query}
+
No results
+{/if}
+
+
diff --git a/sites/svelte.dev/src/lib/search/content.js b/sites/svelte.dev/src/lib/search/content.js
new file mode 100644
index 000000000000..2de86eac7fa3
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/content.js
@@ -0,0 +1,133 @@
+import { normalizeSlugify, removeMarkdown } from '$lib/server/docs';
+import { extract_frontmatter, transform } from '$lib/server/markdown';
+import fs from 'node:fs';
+import path from 'node:path';
+import glob from 'tiny-glob/sync.js';
+
+const base = '../../site/content/';
+
+const categories = [
+ {
+ slug: 'docs',
+ label: null,
+ /** @param {string[]} parts */
+ href: (parts) =>
+ parts.length > 1 ? `/docs/${parts[0]}#${parts.slice(1).join('-')}` : `/docs/${parts[0]}`,
+ },
+ {
+ slug: 'faq',
+ label: 'FAQ',
+ /** @param {string[]} parts */
+ href: (parts) => `/faq#${parts.join('-')}`,
+ },
+];
+
+export function content() {
+ /** @type {import('./types').Block[]} */
+ const blocks = [];
+
+ for (const category of categories) {
+ const breadcrumbs = category.label ? [category.label] : [];
+
+ for (const file of glob('**/*.md', { cwd: `${base}/${category.slug}` })) {
+ const basename = path.basename(file);
+ const match = /\d{2}-(.+)\.md/.exec(basename);
+ if (!match) continue;
+
+ const slug = match[1];
+
+ const filepath = `${base}/${category.slug}/${file}`;
+ // const markdown = replace_placeholders(fs.readFileSync(filepath, 'utf-8'));
+ const markdown = fs.readFileSync(filepath, 'utf-8');
+
+ const { body, metadata } = extract_frontmatter(markdown);
+
+ const sections = body.trim().split(/^### /m);
+ const intro = sections.shift().trim();
+ const rank = +metadata.rank || undefined;
+
+ blocks.push({
+ breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')],
+ href: category.href([slug]),
+ content: plaintext(intro),
+ rank,
+ });
+
+ for (const section of sections) {
+ const lines = section.split('\n');
+ const h3 = lines.shift();
+ const content = lines.join('\n');
+
+ const subsections = content.trim().split('### ');
+
+ const intro = subsections.shift().trim();
+
+ blocks.push({
+ breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title), removeMarkdown(h3)],
+ href: category.href([slug, normalizeSlugify(h3)]),
+ content: plaintext(intro),
+ rank,
+ });
+
+ for (const subsection of subsections) {
+ const lines = subsection.split('\n');
+ const h4 = lines.shift();
+
+ blocks.push({
+ breadcrumbs: [
+ ...breadcrumbs,
+ removeMarkdown(metadata.title),
+ removeMarkdown(h3),
+ removeMarkdown(h4),
+ ],
+ href: category.href([slug, normalizeSlugify(h3), normalizeSlugify(h4)]),
+ content: plaintext(lines.join('\n').trim()),
+ rank,
+ });
+ }
+ }
+ }
+ }
+
+ return blocks;
+}
+
+/** @param {string} markdown */
+function plaintext(markdown) {
+ /** @param {unknown} text */
+ const block = (text) => `${text}\n`;
+
+ /** @param {string} text */
+ const inline = (text) => text;
+
+ return transform(markdown, {
+ code: (source) => source.split('// ---cut---\n').pop(),
+ blockquote: block,
+ html: () => '\n',
+ heading: (text) => `${text}\n`,
+ hr: () => '',
+ list: block,
+ listitem: block,
+ checkbox: block,
+ paragraph: (text) => `${text}\n\n`,
+ table: block,
+ tablerow: block,
+ tablecell: (text, opts) => {
+ return text + ' ';
+ },
+ strong: inline,
+ em: inline,
+ codespan: inline,
+ br: () => '',
+ del: inline,
+ link: (href, title, text) => text,
+ image: (href, title, text) => text,
+ text: inline,
+ })
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/&#(\d+);/g, (match, code) => {
+ return String.fromCharCode(code);
+ })
+ .trim();
+}
diff --git a/sites/svelte.dev/src/lib/search/search.js b/sites/svelte.dev/src/lib/search/search.js
new file mode 100644
index 000000000000..590f82a59c34
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/search.js
@@ -0,0 +1,107 @@
+import flexsearch from 'flexsearch';
+
+// @ts-expect-error
+const Index = /** @type {import('flexsearch').Index} */ (flexsearch.Index ?? flexsearch);
+
+export let inited = false;
+
+/** @type {import('flexsearch').Index[]} */
+let indexes;
+
+/** @type {Map
} */
+const map = new Map();
+
+/** @type {Map} */
+const hrefs = new Map();
+
+/** @param {import('./types').Block[]} blocks */
+export function init(blocks) {
+ if (inited) return;
+
+ // we have multiple indexes, so we can rank sections (migration guide comes last)
+ const max_rank = Math.max(...blocks.map((block) => block.rank ?? 0));
+
+ indexes = Array.from({ length: max_rank + 1 }, () => new Index({ tokenize: 'forward' }));
+
+ for (const block of blocks) {
+ const title = block.breadcrumbs.at(-1);
+ map.set(block.href, block);
+ // NOTE: we're not using a number as the ID here, but it is recommended:
+ // https://github.com/nextapps-de/flexsearch#use-numeric-ids
+ // If we were to switch to a number we would need a second map from ID to block
+ // We need to keep the existing one to allow looking up recent searches by URL even if docs change
+ // It's unclear how much browsers do string interning and how this might affect memory
+ // We'd probably want to test both implementations across browsers if memory usage becomes an issue
+ // TODO: fix the type by updating flexsearch after
+ // https://github.com/nextapps-de/flexsearch/pull/364 is merged and released
+ indexes[block.rank ?? 0].add(block.href, `${title} ${block.content}`);
+
+ hrefs.set(block.breadcrumbs.join('::'), block.href);
+ }
+
+ inited = true;
+}
+
+/**
+ * @param {string} query
+ * @returns {import('./types').Block[]}
+ */
+export function search(query) {
+ const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+ const regex = new RegExp(`(^|\\b)${escaped}`, 'i');
+
+ const blocks = indexes
+ .map((index) => index.search(query))
+ .flat()
+ .map(lookup)
+ .map((block, rank) => ({ block, rank }))
+ .sort((a, b) => {
+ const a_title_matches = regex.test(a.block.breadcrumbs.at(-1));
+ const b_title_matches = regex.test(b.block.breadcrumbs.at(-1));
+
+ // massage the order a bit, so that title matches
+ // are given higher priority
+ if (a_title_matches !== b_title_matches) {
+ return a_title_matches ? -1 : 1;
+ }
+
+ return a.block.breadcrumbs.length - b.block.breadcrumbs.length || a.rank - b.rank;
+ })
+ .map(({ block }) => block);
+
+ const results = tree([], blocks).children;
+
+ return results;
+}
+
+/** @param {string} href */
+export function lookup(href) {
+ return map.get(href);
+}
+
+/**
+ * @param {string[]} breadcrumbs
+ * @param {import('./types').Block[]} blocks
+ */
+function tree(breadcrumbs, blocks) {
+ const depth = breadcrumbs.length;
+
+ const node = blocks.find((block) => {
+ if (block.breadcrumbs.length !== depth) return false;
+ return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
+ });
+
+ const descendants = blocks.filter((block) => {
+ if (block.breadcrumbs.length <= depth) return false;
+ return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
+ });
+
+ const child_parts = Array.from(new Set(descendants.map((block) => block.breadcrumbs[depth])));
+
+ return {
+ breadcrumbs,
+ href: hrefs.get(breadcrumbs.join('::')),
+ node,
+ children: child_parts.map((part) => tree([...breadcrumbs, part], descendants)),
+ };
+}
diff --git a/sites/svelte.dev/src/lib/search/stores.js b/sites/svelte.dev/src/lib/search/stores.js
new file mode 100644
index 000000000000..2f306d027053
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/stores.js
@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+import { persisted } from 'svelte-local-storage-store';
+
+export const searching = writable(false);
+export const query = writable('');
+
+/** @type {import('svelte/store').Writable} */
+export const recent = persisted('recent_searches', []);
diff --git a/sites/svelte.dev/src/lib/search/types.d.ts b/sites/svelte.dev/src/lib/search/types.d.ts
new file mode 100644
index 000000000000..fbbbdba23fc5
--- /dev/null
+++ b/sites/svelte.dev/src/lib/search/types.d.ts
@@ -0,0 +1,13 @@
+export interface Block {
+ breadcrumbs: string[];
+ href: string;
+ content: string;
+ rank: number;
+}
+
+export interface Tree {
+ breadcrumbs: string[];
+ href: string;
+ node: Block;
+ children: Tree[];
+}
diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index e408d9d6c8bb..5f95a4954b81 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/sites/svelte.dev/src/lib/server/docs/index.js
@@ -14,6 +14,42 @@ import MagicString from 'magic-string';
import { fileURLToPath } from 'url';
import { createHash } from 'crypto';
+/** @param {string} title */
+export function slugify(title) {
+ return title
+ .toLowerCase()
+ .replace(/'/g, '')
+ .replace(/</g, '')
+ .replace(/>/g, '')
+ .replace(/[^a-z0-9-$]/g, '-')
+ .replace(/-{2,}/g, '-')
+ .replace(/^-/, '')
+ .replace(/-$/, '');
+}
+
+/** @param {string} markdown */
+export function removeMarkdown(markdown) {
+ return markdown
+ .replace(/\*\*(.+?)\*\*/g, '$1')
+ .replace(/\*(.+?)\*/g, '$1')
+ .replace(/`(.+?)`/g, '$1')
+ .replace(/~~(.+?)~~/g, '$1')
+ .replace(/\[(.+?)\]\(.+?\)/g, '$1')
+ .replace(/\n/g, ' ')
+ .replace(/ {2,}/g, ' ')
+ .trim();
+}
+
+/** @param {string} html */
+export function removeHTMLEntities(html) {
+ return html.replace(/&.+?;/g, '');
+}
+
+/** @param {string} str */
+export const normalizeSlugify = (str) => {
+ return slugify(removeHTMLEntities(removeMarkdown(str))).replace(/(<([^>]+)>)/gi, '');
+};
+
const base = '../../site/content/docs/';
const languages = {
@@ -286,18 +322,6 @@ export async function read_file(file) {
};
}
-/** @param {string} title */
-export function slugify(title) {
- return title
- .toLowerCase()
- .replace(/</g, '')
- .replace(/>/g, '')
- .replace(/[^a-z0-9-$]/g, '-')
- .replace(/-{2,}/g, '-')
- .replace(/^-/, '')
- .replace(/-$/, '');
-}
-
/**
* @param {{
* file: string;
@@ -325,7 +349,7 @@ function parse({ file, body, code, codespan }) {
* @param {string} html
* @param {number} level
*/
- heading(html, level) {
+ heading(html, level, raw) {
const title = html
.replace(/<\/?code>/g, '')
.replace(/"/g, '"')
@@ -334,7 +358,7 @@ function parse({ file, body, code, codespan }) {
current = title;
- const normalized = slugify(title);
+ const normalized = normalizeSlugify(raw);
headings[level - 1] = normalized;
headings.length = level;
diff --git a/sites/svelte.dev/src/lib/workers/search.js b/sites/svelte.dev/src/lib/workers/search.js
new file mode 100644
index 000000000000..2cb5227745f0
--- /dev/null
+++ b/sites/svelte.dev/src/lib/workers/search.js
@@ -0,0 +1,26 @@
+import { init, search, lookup } from '../search/search.js';
+
+addEventListener('message', async (event) => {
+ const { type, payload } = event.data;
+
+ if (type === 'init') {
+ const res = await fetch(`${payload.origin}/content.json`);
+ const { blocks } = await res.json();
+ init(blocks);
+
+ postMessage({ type: 'ready' });
+ }
+
+ if (type === 'query') {
+ const query = payload;
+ const results = search(query);
+
+ postMessage({ type: 'results', payload: { results, query } });
+ }
+
+ if (type === 'recents') {
+ const results = payload.map(lookup).filter(Boolean);
+
+ postMessage({ type: 'recents', payload: results });
+ }
+});
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index c9f47cbd4057..c75a0885ea3e 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -1,6 +1,9 @@
@@ -15,15 +18,24 @@