Add experimental Search Feature

astro.config.mjs

@@ -8,6 +8,7 @@ import robotsTxt from "astro-robots-txt";
 import {resolve} from "node:url";
 import path from "node:path";
 import mdx from "@astrojs/mdx";
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
@@ -22,6 +23,7 @@ export default defineConfig({
         tailwind({
             configFile: "./tailwind.config.cjs",
         }),
+        pagefind(),
         configureI18n(),
         sitemap({
             i18n: {
@@ -35,7 +37,7 @@ export default defineConfig({
                 userAgent: "*", disallow: ["/admin", "/login", "/dashboard", "/de", "/_astro"],
             }],
         }),
-        mdx()
+        mdx(),
     ],
     vite: {
         resolve: {

package.json

@@ -47,6 +47,7 @@
 		"@ddietr/codemirror-themes": "^1.4.2",
 		"astro": "^4.12.2",
 		"astro-i18n": "^2.2.4",
+		"astro-pagefind": "^1.6.0",
 		"astro-robots-txt": "^1.0.0",
 		"astro-seo": "^0.8.2",
 		"chart.js": "^4.4.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   astro-i18n:
     specifier: ^2.2.4
     version: 2.2.4(esbuild@0.19.12)
+  astro-pagefind:
+    specifier: ^1.6.0
+    version: 1.6.0(astro@4.12.2)
   astro-robots-txt:
     specifier: ^1.0.0
     version: 1.0.0
@@ -1413,6 +1416,50 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  /@pagefind/darwin-arm64@1.1.0:
+    resolution: {integrity: sha512-SLsXNLtSilGZjvqis8sX42fBWsWAVkcDh1oerxwqbac84HbiwxpxOC2jm8hRwcR0Z55HPZPWO77XeRix/8GwTg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@pagefind/darwin-x64@1.1.0:
+    resolution: {integrity: sha512-QjQSE/L5oS1C8N8GdljGaWtjCBMgMtfrPAoiCmINTu9Y9dp0ggAyXvF8K7Qg3VyIMYJ6v8vg2PN7Z3b+AaAqUA==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@pagefind/default-ui@1.1.0:
+    resolution: {integrity: sha512-+XiAJAK++C64nQcD7s3Prdmd5S92lT05fwjOxm0L1jj80jbL+tmvcqkkFnPpoqhnicIPgcAX/Y5W0HRZnBt35w==}
+    dev: false
+
+  /@pagefind/linux-arm64@1.1.0:
+    resolution: {integrity: sha512-8zjYCa2BtNEL7KnXtysPtBELCyv5DSQ4yHeK/nsEq6w4ToAMTBl0K06khqxdSGgjMSwwrxvLzq3so0LC5Q14dA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@pagefind/linux-x64@1.1.0:
+    resolution: {integrity: sha512-4lsg6VB7A6PWTwaP8oSmXV4O9H0IHX7AlwTDcfyT+YJo/sPXOVjqycD5cdBgqNLfUk8B9bkWcTDCRmJbHrKeCw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@pagefind/windows-x64@1.1.0:
+    resolution: {integrity: sha512-OboCM76BcMKT9IoSfZuFhiqMRgTde8x4qDDvKulFmycgiJrlL5WnIqBHJLQxZq+o2KyZpoHF97iwsGAm8c32sQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1424,6 +1471,10 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
+  /@polka/url@1.0.0-next.25:
+    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+    dev: false
+
   /@popperjs/core@2.11.8:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
@@ -2180,6 +2231,17 @@ packages:
       esbuild: 0.19.12
     dev: false
 
+  /astro-pagefind@1.6.0(astro@4.12.2):
+    resolution: {integrity: sha512-U/WuE0ktkZkoFJf6yopWO4DjIJ3+wrnopE2L3kUYiyqNTJpqmp13bFLR8gir6B+KzQ5dsXQtJZYTQtKJg1FxIA==}
+    peerDependencies:
+      astro: ^2.0.4 || ^3.0.0 || ^4.0.0
+    dependencies:
+      '@pagefind/default-ui': 1.1.0
+      astro: 4.12.2(@types/node@20.11.20)(sass@1.71.1)(typescript@5.3.3)
+      pagefind: 1.1.0
+      sirv: 2.0.4
+    dev: false
+
   /astro-robots-txt@1.0.0:
     resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
     dependencies:
@@ -5339,6 +5401,17 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  /pagefind@1.1.0:
+    resolution: {integrity: sha512-1nmj0/vfYcMxNEQj0YDRp6bTVv9hI7HLdPhK/vBBYlrnwjATndQvHyicj5Y7pUHrpCFZpFnLVQXIF829tpFmaw==}
+    hasBin: true
+    optionalDependencies:
+      '@pagefind/darwin-arm64': 1.1.0
+      '@pagefind/darwin-x64': 1.1.0
+      '@pagefind/linux-arm64': 1.1.0
+      '@pagefind/linux-x64': 1.1.0
+      '@pagefind/windows-x64': 1.1.0
+    dev: false
+
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -6351,6 +6424,15 @@ packages:
     dependencies:
       is-arrayish: 0.3.2
 
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.25
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: false
+
   /sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -6841,6 +6923,11 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 

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}
+{#await $server then data}
-{: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);
+}

src/layouts/NavbarLayout.astro

@@ -22,7 +22,7 @@ const {title, description} = Astro.props;
                 <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
                     class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
             </Navbar>
-            <main class="flex-1">
+            <main class="flex-1" data-pagefind-body>
                 <slot/>
             </main>
             <footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">