Finish search

sites/svelte.dev/src/lib/search/Search.svelte

@@ -3,6 +3,8 @@
 	import { searching, query } from './stores.js';
 
 	export let q = '';
+
+	$: console.log($searching);
 </script>
 
 <form class="search-container" action="/search">

sites/svelte.dev/src/lib/search/SearchBox.svelte

@@ -158,7 +158,11 @@
 
 			<div class="results">
 				{#if search?.query}
-					<div class="results-container" on:click={() => ($searching = false)}>
+					<div
+						class="results-container"
+						on:click={() => ($searching = false)}
+						on:keydown={(e) => e.key === ' ' && ($searching = false)}
+					>
 						<SearchResults
 							results={search.results}
 							query={search.query}

sites/svelte.dev/src/lib/search/SearchResultList.svelte

@@ -11,7 +11,7 @@
 
 	/** @param {string} text */
 	function escape(text) {
-		return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+		return text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replaceAll('`', '');
 	}
 
 	/**
@@ -19,6 +19,8 @@
 	 * @param {string} query
 	 */
 	function excerpt(content, query) {
+		if (content === null) return '';
+
 		const index = content.toLowerCase().indexOf(query.toLowerCase());
 		if (index === -1) {
 			return escape(content.slice(0, 100));

sites/svelte.dev/src/lib/search/content.js

@@ -42,7 +42,7 @@ export function content() {
 
 			const { body, metadata } = extract_frontmatter(markdown);
 
-			const sections = body.trim().split(/^## /m);
+			const sections = body.trim().split(/^### /m);
 			const intro = sections.shift().trim();
 			const rank = +metadata.rank || undefined;
 

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 });
+	}
+});

sites/svelte.dev/src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script>
+	import { browser } from '$app/environment';
 	import { navigating, page } from '$app/stores';
 	import PreloadingIndicator from '$lib/components/PreloadingIndicator.svelte';
 	import Search from '$lib/search/Search.svelte';
+	import SearchBox from '$lib/search/SearchBox.svelte';
 	import { Icon, Icons, Nav, NavItem, SkipLink } from '@sveltejs/site-kit';
 	import '@sveltejs/site-kit/styles/index.css';
 </script>
@@ -61,6 +63,10 @@
 	<slot />
 </main>
 
+{#if browser}
+	<SearchBox />
+{/if}
+
 <style>
 	:global(:root) {
 		color-scheme: light dark;

sites/svelte.dev/src/routes/search/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import SearchResults from '$lib/search/SearchResults.svelte';
 
-	/** @type {import('./$types').Data} */
+	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
 
@@ -43,7 +43,7 @@
 		border-radius: var(--sk-border-radius);
 		padding-left: var(--size);
 		border-radius: var(--size);
-		background: no-repeat 1rem 50% / 2rem 2rem url($lib/icons/search.svg);
+		background: no-repeat 1rem 50% / 2rem 2rem url(/icons/search.svg);
 		color: var(--sk-text-1);
 	}
 </style>