Merge #151: remove dropdown when clicked away from

200eadb remove dropdown when clicked away from (Graeme Byrne)

Pull request description:

  * When the user clicks out of the input box in `SearchBar.svelte`, the dropdown disappears. This change brings the `SearchBar.svelte` here in line with how it is implemented in https://github.com/nautilus-cyberneering/nautilus-website
      * From the issue nautilus-cyberneering/nautilus-website#38

ACKs for top commit:
  josecelano:
    ACK 200eadb

Tree-SHA512: 4e77eb38807cbfb8b8e9dc1a5b103a0259afa7b4b89eab6742414a0976f91601b2bfb9ec37ff69d2230548814dd5d3a312b2aae5df95705b235146f3aacb571b

Author: josecelano

src/lib/components/singletons/SearchBar.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { BlogPost } from '$lib/utils/types';
-	import { onMount } from 'svelte';
 	import { createPostsIndex, searchPostsIndex } from '$lib/utils/search';
 	import Icon from '@iconify/svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { tick } from 'svelte';
 
 	export let searchTerm = '';
 	export let blogPosts: BlogPost[] = [];
 
-	const dispatch = createEventDispatcher();
 	let showInput = true;
-	let searchInput: HTMLInputElement;
+	let searchInput: HTMLInputElement | null = null;
+	let dropdownOpen = false;
 
 	interface SearchResult {
 		slug: string;
@@ -25,27 +25,54 @@
 	function handleInput(event: Event) {
 		const input = event.target as HTMLInputElement;
 		searchTerm = input.value;
-		dispatch('search', searchTerm);
+		dropdownOpen = searchTerm.length > 0;
 	}
 
 	function clearSearch() {
 		searchTerm = '';
+		dropdownOpen = false;
 		showInput = false;
 	}
 
+	function handleClickOutside(event: MouseEvent) {
+		if (searchInput && !searchInput.contains(event.target as Node)) {
+			dropdownOpen = false;
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dropdownOpen = false;
+		}
+	}
+
 	onMount(async () => {
 		createPostsIndex(blogPosts);
 		search = 'ready';
+		if (typeof window !== 'undefined') {
+			window.addEventListener('click', handleClickOutside);
+			window.addEventListener('keydown', handleKeyDown);
+		}
+	});
+
+	onDestroy(() => {
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('click', handleClickOutside);
+			window.removeEventListener('keydown', handleKeyDown);
+		}
 	});
 
 	$: {
 		if (showInput && searchInput) {
-			searchInput.focus();
+			tick().then(() => {
+				searchInput?.focus();
+			});
 		}
 	}
 
 	$: if (search === 'ready') {
 		results = searchPostsIndex(searchTerm);
+		dropdownOpen = results.length > 0;
 	}
 </script>
 
@@ -72,7 +99,7 @@
 		</div>
 	{/if}
 
-	{#if search === 'ready' && searchTerm}
+	{#if search === 'ready' && dropdownOpen}
 		<div class="dropdown">
 			{#if results.length > 0}
 				<ul>
@@ -81,22 +108,19 @@
 							<a href="/blog/{result.slug}" on:click={clearSearch}>
 								<div>
 									<div>
-										<!-- Displaying result title -->
 										<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 										{@html result.title}
 									</div>
 									<div>
-										<!-- Displaying result content snippet -->
 										<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 										<p>{@html result.content}</p>
 									</div>
 								</div>
 								<div class="tag-container">
 									{#each result.tags as tag}
-										<!-- Highlight matching tags -->
 										{#if tag.toLowerCase().includes(searchTerm.toLowerCase())}
 											<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-											<p class="tag" style="color: black;">{@html tag}</p>
+											<p class="tag">{@html tag}</p>
 										{/if}
 									{/each}
 								</div>

static/blogMetadata.json

@@ -1,4 +1,31 @@
 [
+  {
+    "title": "Benchmarking the Torrust BitTorrent Tracker",
+    "slug": "benchmarking-the-torrust-bittorrent-tracker",
+    "contributor": "Jose Celano",
+    "contributorSlug": "jose-celano",
+    "date": "2024-03-19T00:00:00.000Z",
+    "coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
+    "excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
+    "tags": [
+      "Performance",
+      "Benchmarking"
+    ]
+  },
+  {
+    "title": "Contributor Path",
+    "slug": "contributor-path",
+    "contributor": "Jose Celano",
+    "contributorSlug": "jose-celano",
+    "date": "2024-10-29T09:20:51.608Z",
+    "coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
+    "excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
+    "tags": [
+      "Community",
+      "Onboarding",
+      "Contributors"
+    ]
+  },
   {
     "title": "Containerizing Rust Applications",
     "slug": "containerizing-rust-applications-best-practices",
@@ -44,34 +71,6 @@
       "Sample"
     ]
   },
-  {
-    "title": "Deploying Torrust To Production",
-    "slug": "deploying-torrust-to-production",
-    "contributor": "Jose Celano",
-    "contributorSlug": "jose-celano",
-    "date": "2023-12-20T00:00:00.000Z",
-    "coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
-    "excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
-    "tags": [
-      "Tutorial",
-      "Deployment",
-      "Production"
-    ]
-  },
-  {
-    "title": "Contributor Path",
-    "slug": "contributor-path",
-    "contributor": "Jose Celano",
-    "contributorSlug": "jose-celano",
-    "date": "2024-10-29T09:20:51.608Z",
-    "coverImage": "/images/posts/contributor-path/rust-crab-going-safe-into-water.webp",
-    "excerpt": "Ready to contribute to Torrust? Here's your guide to get started and make meaningful contributions, from small fixes to full-fledged features.",
-    "tags": [
-      "Community",
-      "Onboarding",
-      "Contributors"
-    ]
-  },
   {
     "title": "Help Shape the Torrust 2025 Roadmap!",
     "slug": "help-shape-the-torrust-2025-roadmap",
@@ -86,16 +85,17 @@
     ]
   },
   {
-    "title": "Benchmarking the Torrust BitTorrent Tracker",
-    "slug": "benchmarking-the-torrust-bittorrent-tracker",
+    "title": "Deploying Torrust To Production",
+    "slug": "deploying-torrust-to-production",
     "contributor": "Jose Celano",
     "contributorSlug": "jose-celano",
-    "date": "2024-03-19T00:00:00.000Z",
-    "coverImage": "/images/posts/benchmarking-the-torrust-bittorrent-tracker/benchmarking-the-torrust-bittorrent-tracker-banner.webp",
-    "excerpt": "In the ever-evolving landscape of BitTorrent technology, performance and scalability are paramount. Torrust stands at the forefront, offering a suite of open-source software products designed to enhance peer-to-peer file sharing. At the heart of this suite is the Torrust BitTorrent Tracker, a Rust-based engine crafted for efficiency and speed. This post will introduce you to the benchmarking tools we are using at the moment for the tracker.",
+    "date": "2023-12-20T00:00:00.000Z",
+    "coverImage": "/images/posts/deploying-torrust-to-production/deploy-torrust-to-a-digital-ocean-droplet.png",
+    "excerpt": "Dive into our step-by-step tutorial on deploying a BitTorrent Index and Tracker, written in Rust, on a Digital Ocean droplet. From initial server setup to advanced configurations, this guide is designed for both non-developers and tech-savvy users, ensuring a seamless, production-ready deployment.",
     "tags": [
-      "Performance",
-      "Benchmarking"
+      "Tutorial",
+      "Deployment",
+      "Production"
     ]
   },
   {