From c9c51e612fa017cf5ce6f27460e5c3b730b772ed Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 15 Feb 2023 22:59:58 +0530
Subject: [PATCH] Finish search

---
 sites/svelte.dev/src/lib/search/Search.svelte |  2 ++
 .../src/lib/search/SearchBox.svelte           |  6 ++++-
 .../src/lib/search/SearchResultList.svelte    |  4 ++-
 sites/svelte.dev/src/lib/search/content.js    |  2 +-
 sites/svelte.dev/src/lib/workers/search.js    | 26 +++++++++++++++++++
 sites/svelte.dev/src/routes/+layout.svelte    |  6 +++++
 .../svelte.dev/src/routes/search/+page.svelte |  4 +--
 7 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 sites/svelte.dev/src/lib/workers/search.js

diff --git a/sites/svelte.dev/src/lib/search/Search.svelte b/sites/svelte.dev/src/lib/search/Search.svelte
index b501a6f441..efd2cb89c3 100644
--- a/sites/svelte.dev/src/lib/search/Search.svelte
+++ b/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">
diff --git a/sites/svelte.dev/src/lib/search/SearchBox.svelte b/sites/svelte.dev/src/lib/search/SearchBox.svelte
index 38abb3f6b1..3f37c6917e 100644
--- a/sites/svelte.dev/src/lib/search/SearchBox.svelte
+++ b/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}
diff --git a/sites/svelte.dev/src/lib/search/SearchResultList.svelte b/sites/svelte.dev/src/lib/search/SearchResultList.svelte
index 2fd143429c..7bf64e8542 100644
--- a/sites/svelte.dev/src/lib/search/SearchResultList.svelte
+++ b/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));
diff --git a/sites/svelte.dev/src/lib/search/content.js b/sites/svelte.dev/src/lib/search/content.js
index a45c2f4bc1..d9c229588b 100644
--- a/sites/svelte.dev/src/lib/search/content.js
+++ b/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;
 
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 0000000000..2cb5227745
--- /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 f558fac931..c044d53184 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/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;
diff --git a/sites/svelte.dev/src/routes/search/+page.svelte b/sites/svelte.dev/src/routes/search/+page.svelte
index f494432c92..369f8fcc0f 100644
--- a/sites/svelte.dev/src/routes/search/+page.svelte
+++ b/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>