Add experimental Search Feature

src/components/Card.svelte

@@ -25,6 +25,8 @@
     export let hoverEffect: boolean = true;
 
     function rotateElement(event: MouseEvent) {
+        if(!hoverEffect) return;
+
         const x = event.clientX;
         const y = event.clientY;
 

src/components/Navbar.svelte

@@ -18,14 +18,14 @@
   -->
 
 <script lang="ts">
-    import {Image} from "astro:assets";
     import "../styles/button.css";
-    import {CaretDownOutline} from "flowbite-svelte-icons";
+    import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
     import {t} from "astro-i18n";
     import {l} from "../util/util";
     import {onMount} from "svelte";
 
     let navbar: HTMLDivElement;
+    let searchOpen = false;
 
     onMount(() => {
         handleScroll();
@@ -42,14 +42,14 @@
 
 <svelte:window on:scroll={handleScroll}/>
 
-<nav class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
+<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
     <div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
         <a class="flex items-center" href={l("/")}>
             <slot name="logo"></slot>
-            <h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
+            <span class="text-2xl uppercase font-bold inline-block dark:text-white">
                 {t("navbar.title")}
                 <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
-            </h1>
+            </span>
         </a>
         <div class="flex justify-center flex-wrap">
             <div class="btn-dropdown my-1">
@@ -109,10 +109,19 @@
             <a class="btn my-1" href={l("/login")}>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
+            <button class="btn my-1" on:click={() => searchOpen = true}>
+                <SearchOutline ariaLabel="Site Search" class="inline-block h-6"/>
+            </button>
         </div>
     </div>
 </nav>
 
+{#if searchOpen}
+    {#await import("./SearchComponent.svelte") then c}
+        <svelte:component this={c.default} bind:open={searchOpen} />
+    {/await}
+{/if}
+
 <style lang="scss">
     .match {
         width: min(100vw, 70em);

src/components/PlayerCount.svelte

@@ -22,7 +22,6 @@
 import {server} from "./stores/stores.ts";
 </script>
 
-{#await $server}
-{:then data}
+{#await $server then data}
     {data.players.online}
 {/await}

src/components/SearchComponent.svelte

@@ -0,0 +1,77 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+
+    import {slide, fade} from "svelte/transition";
+    import {onMount} from "svelte";
+    import {importPagefind, type Pagefind, type PagefindDocument} from "@type/pagefind.js";
+    import Card from "@components/Card.svelte";
+    import {l} from "@utils/util.ts";
+    let pagefind: Pagefind;
+
+    onMount(async () => {
+        pagefind = await importPagefind();
+
+        pagefind.init();
+    });
+
+    let results: PagefindDocument[] = [];
+
+    async function search(e: KeyboardEvent) {
+        if (e.target instanceof HTMLInputElement) {
+            let search: {results: any[]} = await pagefind.debouncedSearch(e.target.value);
+
+            results = await Promise.all(search.results.slice(0, 10).map(value => value.data()))
+        }
+    }
+
+    export let open = false;
+</script>
+
+<button transition:fade class="fixed top-0 left-0 w-screen h-screen backdrop-blur z-20 cursor-default" on:click={() => open = false}>
+</button>
+<div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 dark:bg-zinc-900 rounded-b-2xl shadow-2xl z-30 p-4 text-white flex flex-col">
+    <input placeholder="Search..." on:keypress={search}>
+
+    <div class="overflow-y-scroll flex-1 w-full mt-2 rounded-2xl">
+        {#each results as result}
+            <Card extraClasses="w-full m-0 my-2" hoverEffect={false}>
+                <a class="grid grid-cols-3" href={l(result.url)}>
+                    <h1>{result.meta.title}</h1>
+                    {#each result.sub_results.slice(0, 2) as sub_result}
+                        <p>{@html sub_result.excerpt}</p>
+                    {/each}
+                </a>
+            </Card>
+        {/each}
+    </div>
+</div>
+
+<style lang="postcss">
+    input {
+        @apply border-2 rounded-md p-2 shadow-2xl w-full
+        dark:bg-neutral-800
+        focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-transparent;
+    }
+
+    label {
+        @apply text-neutral-300;
+    }
+</style>

src/components/types/pagefind.ts

@@ -0,0 +1,65 @@
+/*
+ *   This file is a part of the SteamWar software.
+ *
+ *   Copyright (C) 2024 SteamWar.de-Serverteam
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export interface Pagefind {
+    search: (query: string) => Promise<PagefindResponse>;
+    debouncedSearch: (query: string) => Promise<PagefindResponse>;
+    init: () => void;
+}
+
+export interface PagefindResponse {
+    results: PagefindResult[];
+}
+
+export interface PagefindResult {
+    id: string;
+    data: () => Promise<PagefindDocument>;
+}
+
+export interface PagefindDocument {
+    url: string;
+    excerpt: string;
+    filters: {
+        author: string;
+    };
+    meta: {
+        title: string;
+        image: string;
+    };
+    content: string;
+    word_count: number;
+    sub_results: PagefindSubresult[];
+}
+
+export interface PagefindSubresult {
+    excerpt: string;
+    title: string;
+    url: string;
+}
+
+declare global {
+    interface Window {
+        pagefind: Pagefind;
+    }
+}
+
+export async function importPagefind(): Promise<Pagefind> {
+    const url = "/pagefind/pagefind.js";
+    return await import(/* @vite-ignore */ url);
+}