feat: docs

Author: lilrosalyn

bun.lock

@@ -1,12 +1,13 @@
 {
 	"name": "site",
 	"version": "0.0.1",
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
+		"prepack": "svelte-kit sync && svelte-package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
@@ -28,9 +29,11 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.47.1"
 	},
 	"devDependencies": {
+		"@poppanator/sveltekit-svg": "^5.0.0-svelte5.5",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.47.1",
 		"@sveltejs/package": "^2.5.4",

package.json

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { page } from "$app/state";
+    import type { ArticleCategory } from "$lib/types.ts";
+
+    let { articleList }: { articleList: ArticleCategory[] } = $props();
+    const currentArticle = $derived(() => {
+        return articleList.flatMap((category) => category.children)
+            .find((article) => (page.url.pathname + "/") === `/docs/${article.slug}`);
+    });
+</script>
+
+<div class="bg-zinc-900 left-0 top-0 pt-4 px-8 min-w-80 min-h-screen flex flex-col">
+    {#each articleList as category}
+        <hr class="my-4 text-zinc-700" />
+        
+        {#if category.title}
+            <b class="uppercase mb-2">{category.title}</b>
+        {/if}
+
+        {#each category.children as article}
+            <a href={`/docs/${article.slug}`}  class="{article === currentArticle() ? "text-sky-300" : "text-zinc-400"} hover:cursor-pointer hover:text-sky-300 hover:duration-500">{article.title}</a>
+        {/each}
+    {/each}
+</div>

src/lib/components/ArticleList.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import type { SearchEntry } from "$lib/types.ts";
+    import type { FormEventHandler } from "svelte/elements";
+
+    function mapEntryWithRank(entry: SearchEntry, keywords: string[]): SearchEntry & { rank: number } {
+        console.log({ entry, keywords, rank: keywords.filter((keyword) => entry.title.toLowerCase().includes(keyword) || entry.content.includes(keyword)).length })
+        return {
+            ...entry,
+            rank: keywords.filter((keyword) => entry.title.toLowerCase().includes(keyword) || entry.content.includes(keyword)).length
+        }
+    }
+
+    function onEscape(event: KeyboardEvent) {
+        if (event.key === "Escape")
+            isOpen = false;
+    }
+
+    function onKeyPress() {
+        const keywords = value.split(" ").map((keyword) => keyword.toLowerCase());
+        searchEntries = searchIndex.map((entry) => mapEntryWithRank(entry, keywords))
+            .filter((entry) => entry.rank !== 0)
+            .sort((a, b) => {
+                if (a.rank > b.rank) return -1;
+                else if (a.rank < b.rank) return 1;
+                else return 0;
+            });
+    }
+
+    export const open = () => {
+        isOpen = true;
+    }
+
+    export const close = () => {
+        isOpen = false;
+    }
+
+    let { searchIndex }: { searchIndex: SearchEntry[] } = $props();
+    let searchEntries = $state(searchIndex);
+    let isOpen = $state(false);
+    let value = $state("");
+</script>
+
+
+{#if isOpen}
+
+<div class="absolute left-0 top-0 w-screen h-screen bg-black opacity-35"></div>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={close} class="absolute left-0 top-0 w-screen h-screen flex justify-center items-center">
+    <div class="bg-zinc-800 rounded-lg w-1/3 h-3/4 p-4 flex flex-col">
+        <input oninput={onKeyPress} bind:value={value} type="text" placeholder="Search" class="bg-zinc-900 h-12 px-4 rounded-md hover:border-sky-300 hover:border focus:border-sky-300 focus:border-2 focus:outline-none focus:ring-0" />
+
+        {#each searchEntries as searchEntry}
+            <a href={`/docs/${searchEntry.slug}`} onclick={close} aria-label={searchEntry.title} class="border-4 border-zinc-700 rounded-md mt-4 px-2 py-1 flex flex-row hover:text-sky-300 hover:border-sky-300">
+                {#if searchEntry.category !== ""}
+                    <span class="uppercase font-bold">{searchEntry.category}</span>
+                    <span class="ml-2">〉</span>
+                {/if}
+
+                <span>{searchEntry.title}</span>
+            </a>
+        {/each}
+    </div>
+</div>
+{/if}
+
+<svelte:window on:keydown={onEscape} />

src/lib/components/Search.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import MagnifyingGlass from "$lib/icons/search.svg?url";
+    import Search from "$lib/components/Search.svelte";
+    import Discord from "$lib/icons/discord.svg?url";
+    import GitHub from "$lib/icons/github.svg?url";
+    import type { SearchEntry } from "$lib/types.ts";
+
+    let { searchIndex }: { searchIndex: SearchEntry[] } = $props();
+    let search: Search;
+
+    function onClick() {
+        search.open();
+    }
+</script>
+
+<Search searchIndex={searchIndex} bind:this={search} />
+
+<div class="bg-zinc-900 border-l border-l-zinc-950 w-full h-14 flex flex-row items-center">
+    <button onclick={onClick} class="rounded-md border border-zinc-950 bg-zinc-950 text-zinc-400 hover:border-sky-300 hover:text-gray-300 hover:cursor-pointer duration-500 ml-4 px-5 py-1 flex flex-row items-center">
+        <img src={MagnifyingGlass} alt="Search" class="h-4 mr-2 fill-white stroke-white" />
+        Search
+    </button>
+
+    <a href="https://discord.gg/KrHK7B39pY" class="ml-auto mr-4">
+        <img src={Discord} alt="Discord" class="h-6" />
+    </a>
+
+    <a href="https://github.com/HytaleModding/site" class="mr-4">
+        <img src={GitHub} alt="GitHub" class="h-6" />
+    </a>
+</div>