make the search dialog more useful/attractive (#206)

* nest styles

* start tweaking styles

* tweak styles

* tweaks

* tweaks

* prettier

* fix keyboard activation

* various

* fix

* tweak

* more

* fix fallback search results page

Author: Rich-Harris

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

@@ -25,9 +25,7 @@
 	{#snippet top_nav()}
 		<Nav title={data.nav_title} links={data.nav_links}>
 			{#snippet search()}
-				{#if $page.url.pathname !== '/search'}
-					<Search />
-				{/if}
+				<Search />
 			{/snippet}
 
 			{#snippet external_links()}

apps/svelte.dev/src/routes/content.json/+server.ts

@@ -31,6 +31,7 @@ async function content() {
 
 	for (const document of docs) {
 		const { slug, body, metadata } = document;
+		const breadcrumbs = document.breadcrumbs.map((x) => removeMarkdown(x.title));
 
 		const sections = body.trim().split(/^## /m);
 		const intro = sections?.shift()?.trim()!;

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

@@ -9,7 +9,6 @@
 </svelte:head>
 
 <main>
-	<h1>Search</h1>
 	<form>
 		<input
 			name="q"
@@ -26,30 +25,31 @@
 
 <style>
 	main {
-		max-width: 48rem;
+		--padding: 1rem;
+		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
+		font-family: var(--sk-font-ui);
 	}
 
 	form {
-		--size: 4rem;
+		--size: 2rem;
 		position: relative;
 		width: 100%;
-		height: var(--size);
-		margin: 0 0 2em 0;
+		margin: 0 0 2rem 0;
 	}
 
 	input {
 		display: block;
 		width: 100%;
 		height: 100%;
 		font-family: inherit;
-		font-size: inherit;
-		border: 1px solid var(--sk-back-5);
+		font-size: var(--sk-text-xl);
+		border: none;
+		/* border: 1px solid var(--sk-back-5); */
 		border-radius: var(--sk-border-radius);
-		padding-left: var(--size);
-		border-radius: var(--size);
-		background: no-repeat 1rem 50% / 2rem 2rem url(/icons/search.svg);
+		padding: 2rem 2rem 2rem 5rem;
+		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
 		color: var(--sk-text-1);
 	}
 </style>

packages/site-kit/src/lib/actions/focus.ts

@@ -1,7 +1,7 @@
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+			'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])'
 		)
 	);
 
@@ -15,27 +15,29 @@ export function focusable_children(node: HTMLElement) {
 		nodes[i].focus();
 	};
 
-	return {
-		next: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+	function traverse(d: number, selector?: string) {
+		const reordered = [...nodes.slice(index), ...nodes.slice(0, index)];
+
+		let i = (reordered.length + d) % reordered.length;
+		let node;
+
+		while ((node = reordered[i])) {
+			i += d;
 
-			for (let i = 0; i < reordered.length; i += 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (node.matches('details:not([open]) *')) {
+				continue;
 			}
-		},
-		prev: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
 
-			for (let i = reordered.length - 2; i >= 0; i -= 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (!selector || node.matches(selector)) {
+				node.focus();
+				return;
 			}
-		},
+		}
+	}
+
+	return {
+		next: (selector?: string) => traverse(1, selector),
+		prev: (selector?: string) => traverse(-1, selector),
 		update
 	};
 }

packages/site-kit/src/lib/icons/document-dark.svg

@@ -12,9 +12,10 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	<input
 		value={q}
 		oninput={(e) => {
-			$searching = true;
 			$search_query = e.currentTarget.value;
+			$searching = true;
 			e.currentTarget.value = '';
+			e.currentTarget.blur();
 		}}
 		onmousedown={(event) => {
 			event.preventDefault();