Add experimental Search Feature

2024-08-02 01:26:05 +02:00 · 2024-08-02 01:26:05 +02:00 · 4778429452
Commit 4778429452
--- a/astro.config.mjs
+++ b/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: {
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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==}

--- a/src/components/Card.svelte
+++ b/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;

--- a/src/components/Navbar.svelte
+++ b/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);
--- a/src/components/PlayerCount.svelte
+++ b/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}
--- a/src/components/SearchComponent.svelte
+++ b/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>
--- a/src/components/types/pagefind.ts
+++ b/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);
+}
--- a/src/layouts/NavbarLayout.astro
+++ b/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">