Added search to docs (#102)

* Added search

* fix?

* output

* Test with vercel config

* done?

* test with vercel.json

* stuff

* Overhaul, modal stuffs

* search

* Removed debounce for shits and giggles

* Better init

* Use `focus-trap` for correctly managing focus

* Moved drawer to global dialog system with types

* Fixed broken search

* Updated plugin dep

* Updated vite-plugin-pagefind

* Dep update

* Fixed pnpm check issue, updated vite-plugin-svelte

* update deps

* fixed portal

* Updated styles for SearchDialog.

Author: Hugos68

.eslintignore

@@ -8,8 +8,10 @@ node_modules
 .env.*
 !.env.example
 /coverage
+**/pagefind
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+

.gitignore

@@ -10,3 +10,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /coverage
+**/pagefind

.prettierignore

@@ -5,3 +5,4 @@ yarn.lock
 /coverage
 **/*.mdx
 **/*.md
+**/pagefind

package.json

@@ -6,7 +6,7 @@
 		"dev": "vite dev",
 		"preview": "vite preview",
 		"build": "pnpm build:docs && pnpm build:package",
-		"build:docs": "svelte-kit sync && vite build",
+		"build:docs": "svelte-kit sync && vite build && pagefind",
 		"build:package": "svelte-kit sync && svelte-package && publint",
 		"ci:publish": "pnpm build:package && changeset publish",
 		"test": "vitest run --coverage",
@@ -39,7 +39,7 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "4.0.0-next.1",
+		"@sveltejs/vite-plugin-svelte": "4.0.0-next.2",
 		"@testing-library/jest-dom": "^6.4.2",
 		"@testing-library/svelte": "^5.1.0",
 		"@types/eslint": "^8.56.0",
@@ -51,8 +51,10 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0-next.4",
+		"focus-trap": "^7.5.4",
 		"jsdom": "^24.0.0",
 		"lucide-svelte": "^0.373.0",
+		"pagefind": "^1.1.0",
 		"postcss": "^8.4.32",
 		"postcss-load-config": "^5.0.2",
 		"prettier": "^3.1.1",
@@ -65,6 +67,7 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11",
+		"vite-plugin-pagefind": "^0.2.8",
 		"vitest": "^1.2.0"
 	},
 	"svelte": "./dist/index.js",

pagefind.json

@@ -0,0 +1,9 @@
+{
+	"site": "build",
+	"exclude_selectors": [".expressive-code"],
+	"vite_plugin_pagefind": {
+		"assets_dir": "static",
+		"build_command": "pnpm build:docs",
+		"dev_strategy": "lazy"
+	}
+}

pnpm-lock.yaml

@@ -6,6 +6,7 @@ declare global {
 		// interface Locals {}
 		interface PageData {
 			highlighter: import('shiki').Highlighter;
+			pagefind: import('vite-plugin-pagefind/types').Pagefind;
 		}
 		// interface PageState {}
 		// interface Platform {}

src/app.d.ts

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import { createFocusTrap } from 'focus-trap';
+	import Portal from '../Portal/Portal.svelte';
+	import { fade, fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import { beforeNavigate } from '$app/navigation';
+
+	interface Props {
+		children: Snippet;
+		type?: 'modal' | 'drawer';
+		open?: boolean;
+	}
+
+	let { children, type = 'modal', open = $bindable(false) }: Props = $props();
+
+	$effect(() => {
+		if (open) {
+			document.body.style.overflow = 'hidden';
+		} else {
+			document.body.style.overflow = '';
+		}
+
+		return () => {
+			document.body.style.overflow = '';
+		};
+	});
+
+	function focus_trap(node: HTMLElement) {
+		const trap = createFocusTrap(node, {
+			returnFocusOnDeactivate: true,
+			preventScroll: true,
+			escapeDeactivates: () => {
+				open = false;
+				return true;
+			},
+			allowOutsideClick: () => {
+				open = false;
+				return true;
+			},
+		});
+		trap.activate();
+		return {
+			destroy() {
+				trap.deactivate();
+			},
+		};
+	}
+
+	beforeNavigate(() => {
+		open = false;
+	});
+
+	const commonClasses = 'fixed z-50';
+
+	const classes = $derived(
+		{
+			drawer: `${commonClasses} top-0 left-0 right-0 bottom-0 h-screen w-fit max-w-[500px]`,
+			modal: `${commonClasses} top-4 md:top-[15%] left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-[500px] rounded-md bg-surface-700 max-h-[75vh] max-w-[800px] overflow-auto`,
+		}[type],
+	);
+
+	const flyParams = $derived(
+		{
+			drawer: { x: -500, easing: cubicOut, duration: 250 },
+			modal: { y: 50, easing: cubicOut, duration: 250 },
+		}[type],
+	);
+</script>
+
+<Portal>
+	{#if open}
+		<div in:fade={{ duration: 250 }} class="fixed inset-0 z-50 bg-black bg-opacity-50"></div>
+		<div in:fly={flyParams} class={classes} role="dialog" aria-modal="true" use:focus_trap>
+			{@render children()}
+		</div>
+	{/if}
+</Portal>

src/docs/components/Dialog/Dialog.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import Dialog from './Dialog.svelte';
+	import SearchIcon from 'lucide-svelte/icons/search';
+	import LoaderIcon from 'lucide-svelte/icons/loader';
+	import { page } from '$app/stores';
+
+	let open = $state(false);
+	let query = $state('');
+
+	const searchPromise = $derived.by(async () => {
+		if (query === '') {
+			return [];
+		}
+
+		// FIXME: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
+		// eslint-disable-next-line svelte/valid-compile
+		const result = await $page.data.pagefind.debouncedSearch(query, {}, 250);
+
+		if (result === null) {
+			return [];
+		}
+
+		return await Promise.all(result.results.map((result) => result.data()));
+	});
+
+	$effect(() => {
+		function onKeydown(event: KeyboardEvent) {
+			if (event.key === 'k' && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault();
+				open = true;
+			}
+		}
+
+		document.addEventListener('keydown', onKeydown);
+
+		return () => {
+			document.removeEventListener('keydown', onKeydown);
+		};
+	});
+</script>
+
+<button
+	class="flex gap-4 items-center border border-surface-600 px-4 py-1 rounded-md"
+	onclick={() => (open = true)}
+>
+	<p class="hidden md:block text-lg">Search</p>
+	<SearchIcon size={20} />
+</button>
+
+<Dialog bind:open>
+	<div class="divide-y-4 divide-surface-600">
+		<div class="relative p-4">
+			<input
+				class="bg-transparent text-2xl outline-none pl-10 w-full"
+				placeholder="Search the docs..."
+				bind:value={query}
+			/>
+			<SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
+		</div>
+		<div class="flex flex-col gap-1 p-4" tabindex="-1">
+			{#if query === ''}
+				<p class="text-lg text-center py-16">What can we help you find?</p>
+			{:else}
+				{#await searchPromise}
+					<p class="text-lg text-center py-16">
+						<LoaderIcon class="inline animate-spin" size={16} />
+					</p>
+				{:then results}
+					{#if results.length > 0}
+						<nav>
+							<ul class="space-y-4">
+								{#each results as result}
+									<li>
+										<a
+											href={result.url.replace('.html', '')}
+											class="block text-xl font-semibold hover:bg-surface-500 focus:bg-surface-500 transition p-1 rounded-md"
+										>
+											{result.meta.title}
+
+											<!-- eslint-disable-next-line svelte/no-at-html-tags-->
+											<p class="text-sm line-clamp-2">{@html result.excerpt}</p>
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</nav>
+					{:else if query !== ''}
+						<p class="text-lg text-center py-16">No results found for "{query}"</p>
+					{/if}
+				{/await}
+			{/if}
+		</div>
+	</div>
+</Dialog>
+
+<style lang="postcss">
+	:global(mark) {
+		@apply bg-rose-400 rounded-md px-0.5;
+	}
+</style>

src/docs/components/Dialog/SearchDialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { drawer } from '$docs/stores.svelte';
+	import { getDrawer } from '$docs/stores.svelte';
 	// Icons (Docs)
 	import IconGetStarted from 'lucide-svelte/icons/rocket';
 	// Icons (Examples)
@@ -53,9 +53,19 @@
 		},
 	];
 
+	const drawer = getDrawer();
+
 	// FIXME: Remove when Svelte 5 supports $page, see: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
 	// eslint-disable-next-line svelte/valid-compile
 	const navActive = (href: string) => $page.route.id?.replace('/(inner)', '') == href;
+
+	$effect(() => {
+		const close = () => (drawer.open = false);
+		window.addEventListener('resize', close);
+		return () => {
+			window.removeEventListener('resize', close);
+		};
+	});
 </script>
 
 <div
@@ -81,7 +91,7 @@
 								href={link.href}
 								class="grid grid-cols-[24px_1fr] items-center gap-4 rounded-tr-xl rounded-br-xl px-4 py-3 text-left hover:bg-surface-500/20"
 								class:nav-active={navActive(link.href)}
-								onclick={() => drawer.close()}
+								onclick={() => (drawer.open = false)}
 							>
 								<svelte:component this={link.icon} size={24} />
 								<span>{link.label}</span>

src/docs/components/Navigation/Navigation.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<div data-portal-target></div>
+
+<div data-body>
+	{@render children()}
+</div>

src/docs/components/Overlay/Overlay.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
 	import { version } from '$app/environment';
-	import { drawer } from '$docs/stores.svelte';
 
 	// Icons
 	import IconMenu from 'lucide-svelte/icons/menu';
+	import SearchDialog from '../Dialog/SearchDialog.svelte';
+	import { getDrawer } from '$docs/stores.svelte.js';
+
+	const drawer = getDrawer();
 </script>
 
 <header
 	class="sticky top-0 z-10 bg-surface-200/75 dark:bg-surface-800/75 backdrop-blur border-b border-surface-500/20"
 >
 	<div class="container mx-auto flex justify-between gap-4 p-4 lg:px-32">
 		<div class="flex items-center gap-4">
-			<button type="button" class="inline-block lg:hidden" onclick={() => drawer.toggle()}>
+			<button
+				type="button"
+				class="inline-block lg:hidden"
+				onclick={() => (drawer.open = !drawer.open)}
+			>
 				<IconMenu />
 			</button>
 			<a href="/" class="font-bold">Floating UI Svelte</a>
 		</div>
+		<SearchDialog />
 		<div class="flex items-center gap-4">
 			<a
 				href="https://github.com/skeletonlabs/floating-ui-svelte"

src/docs/components/PageHeader/PageHeader.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let element: HTMLElement | null = $state(null);
+
+	$effect.pre(() => {
+		const target = document.querySelector('[data-portal-target]');
+		if (element === null || target === null) {
+			return;
+		}
+
+		target.appendChild(element);
+
+		return () => {
+			if (element === null) {
+				return;
+			}
+			element.remove();
+		};
+	});
+</script>
+
+<div class="contents" bind:this={element}>
+	{@render children()}
+</div>

src/docs/components/Portal/Portal.svelte

@@ -1,16 +1,11 @@
+import { getContext, setContext } from 'svelte';
+
 // Reusable State Stores
 
 // Navigation Drawer ---
+type Drawer = { open: boolean };
 
-function createDrawer() {
-	let value = $state(false);
-	return {
-		get value() {
-			return value;
-		},
-		toggle: () => (value = !value),
-		close: () => (value = false),
-	};
-}
+const drawerKey = Symbol('drawer');
 
-export const drawer = createDrawer();
+export const getDrawer = () => getContext<Drawer>(drawerKey);
+export const setDrawer = (drawer: Drawer) => setContext(drawerKey, drawer);