From c58f3b0b147b884c47ba8041e3d6675bd37d1857 Mon Sep 17 00:00:00 2001
From: notxorand <ewanretorokugbe@gmail.com>
Date: Sun, 22 Feb 2026 03:51:19 +0100
Subject: [PATCH 1/2] chore: docs

---
 app/app.vue                         |  98 +--------
 app/components/BlogCard.vue         |  15 +-
 app/components/DocsNavigation.vue   | 318 ++++++++++++++++++++++++++++
 app/components/Navigation.vue       |   8 +-
 app/components/content/ProsePre.vue |  19 +-
 app/layouts/default.vue             |   9 +
 app/layouts/docs.vue                |   8 +
 app/pages/docs/[slug].vue           | 158 +++++++++++---
 app/pages/docs/index.vue            | 133 +++++++++++-
 content.config.ts                   |   7 +
 content/blog/intro.md               | 148 +++++++++++++
 content/docs/changelogs.md          |   8 +
 content/docs/faq.md                 |   8 +
 content/docs/home.md                |  29 ++-
 content/docs/queries.md             |   8 +
 content/docs/quickstart.md          | 125 +++++++++++
 content/docs/streaming.md           |   8 +
 content/docs/usecases.md            |   8 +
 content/docs/writebacks.md          |   8 +
 nuxt.config.ts                      |  10 +-
 package.json                        |   7 +
 pnpm-lock.yaml                      |  83 ++++++++
 22 files changed, 1073 insertions(+), 150 deletions(-)
 create mode 100644 app/components/DocsNavigation.vue
 create mode 100644 app/layouts/default.vue
 create mode 100644 app/layouts/docs.vue
 create mode 100644 content/blog/intro.md
 create mode 100644 content/docs/changelogs.md
 create mode 100644 content/docs/faq.md
 create mode 100644 content/docs/queries.md
 create mode 100644 content/docs/quickstart.md
 create mode 100644 content/docs/streaming.md
 create mode 100644 content/docs/usecases.md
 create mode 100644 content/docs/writebacks.md

diff --git a/app/app.vue b/app/app.vue
index 02e05a7..6435dc2 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,100 +1,10 @@
 <template>
-    <!-- <div id="custom-cursor">
-    <div class="cursor-fill"></div>
-  </div> -->
-    <div class="flex flex-col justify-evenly min-h-[calc(100vh-32px)]">
-        <Navigation />
-        <main class="grow">
-            <NuxtPage />
-        </main>
-        <Footer />
-    </div>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
 </template>
 
-<!-- <script setup lang="ts">
-let cursor: HTMLElement | null = null;
-
-onMounted(() => {
-  cursor = document.getElementById("custom-cursor");
-
-  const moveCursor = (e: MouseEvent) => {
-    const { clientX: x, clientY: y } = e;
-    if (cursor) {
-      cursor.style.left = x + "px";
-      cursor.style.top = y + "px";
-    }
-  };
-
-  const handleMouseDown = () => {
-    cursor?.classList.add("cursor-clicked");
-  };
-
-  const handleMouseUp = () => {
-    cursor?.classList.remove("cursor-clicked");
-  };
-
-  window.addEventListener("mousemove", moveCursor);
-  window.addEventListener("mousedown", handleMouseDown);
-  window.addEventListener("mouseup", handleMouseUp);
-
-  // Add and remove cursor-hover class
-  document.body.addEventListener("mouseover", (e) => {
-    if (
-      e.target instanceof HTMLElement &&
-      e.target.matches("a, button, input, textarea")
-    ) {
-      cursor?.classList.add("cursor-hover");
-    }
-  });
-
-  document.body.addEventListener("mouseout", (e) => {
-    if (
-      e.target instanceof HTMLElement &&
-      e.target.matches("a, button, input, textarea")
-    ) {
-      cursor?.classList.remove("cursor-hover");
-    }
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("mousemove", moveCursor);
-    window.removeEventListener("mousedown", handleMouseDown);
-    window.removeEventListener("mouseup", handleMouseUp);
-  });
-});
-</script>
-
-<style>
-#custom-cursor {
-  width: 40px;
-  height: 40px;
-  border: 2px solid #ee6f5388;
-  background: #ee6f5344;
-  border-radius: 50%;
-  position: fixed;
-  pointer-events: none;
-  z-index: 9999;
-  transition: all 0.3s ease-out;
-  transform: translate(-50%, -50%);
-}
-
-.cursor-clicked {
-  transform: translate(-50%, -50%) scale(1.5) !important;
-}
-
-/* Hide cursor on touch devices */
-@media (hover: none) and (pointer: coarse) {
-  #custom-cursor {
-    display: none;
-  }
-
-  body {
-    cursor: auto;
-  }
-}
-</style> -->
-
-<script setup>
+<script setup lang="ts">
 useHead({
     script: [
         {
diff --git a/app/components/BlogCard.vue b/app/components/BlogCard.vue
index c1afc3b..3efd527 100644
--- a/app/components/BlogCard.vue
+++ b/app/components/BlogCard.vue
@@ -8,7 +8,7 @@
                 class="relative h-auto overflow-hidden bg-[#faf8f4] hover:bg-[#fcf4f0] group"
             >
                 <img
-                    :src="getHeroImage(post.hero)"
+                    :src="`/blog/${post.hero}`"
                     :alt="post.title"
                     class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[106.25%] hover:transform hover:scale-[1.0625]"
                 />
@@ -68,19 +68,6 @@ const props = defineProps({
     },
 });
 
-const blogImages = import.meta.glob("~/assets/img/blog/*", {
-    eager: true,
-    import: "default",
-}) as Record<string, string>;
-
-const getHeroImage = (hero: string | undefined): string => {
-    if (!hero) return "/blog-placeholder.png";
-    const matchingKey = Object.keys(blogImages).find((k) =>
-        k.endsWith(`/assets/img/blog/${hero}`),
-    );
-    return matchingKey ? blogImages[matchingKey] : "/placeholder.png";
-};
-
 const formatDate = (date: string) => {
     if (!date) return "";
     return new Date(date).toLocaleDateString("en-US", {
diff --git a/app/components/DocsNavigation.vue b/app/components/DocsNavigation.vue
new file mode 100644
index 0000000..f4e0baf
--- /dev/null
+++ b/app/components/DocsNavigation.vue
@@ -0,0 +1,318 @@
+<template>
+    <div class="w-full py-4 flex justify-center items-center">
+        <div
+            class="min-w-[calc(100%-2.125rem)] md:min-w-[calc(100%-7.75rem)] mb-8 flex justify-between items-center fixed bottom-0 z-[999]"
+        >
+            <div class="w-28.5 flex justify-start items-center z-[200]">
+                <nuxt-link to="/">
+                    <img src="assets/img/logo.png" alt="Logo" class="w-7" />
+                </nuxt-link>
+            </div>
+            <div
+                class="hidden md:flex gap-2 items-end justify-center z-[200]"
+            ></div>
+            <div
+                class="z-[100] flex flex-wrap gap-2 items-center"
+                ref="menuContent"
+            >
+                <Transition name="menu" :duration="250">
+                    <div>
+                        <Motion
+                            as="ul"
+                            :initial="{ y: 4, opacity: 0 }"
+                            :animate="
+                                menuOpen
+                                    ? { y: 0, opacity: 1 }
+                                    : { y: 4, opacity: 0 }
+                            "
+                            class="flex flex-col items-center justify-center py-2 gap-2 h-fit w-full absolute bottom-0 right-0 mb-12 bg-white"
+                            id="navigation-items"
+                            :class="{ 'pointer-events-none!': !menuOpen }"
+                        >
+                            <Motion
+                                v-for="group in groups"
+                                :key="group.id"
+                                as="li"
+                                :initial="{ y: 4, opacity: 0 }"
+                                :animate="
+                                    menuOpen
+                                        ? { y: 0, opacity: 1 }
+                                        : { y: 4, opacity: 0 }
+                                "
+                                :transition="
+                                    menuOpen
+                                        ? {
+                                              delay:
+                                                  (groups.length -
+                                                      1 -
+                                                      group.id) *
+                                                  0.05,
+                                          }
+                                        : { delay: group.id * 0.05 }
+                                "
+                                class="w-[calc(100%-16px)] relative text-[#010101]"
+                                id="navigation-items"
+                            >
+                                <button
+                                    class="w-full px-4 py-2 text-xs uppercase tracking-wide text-[#886655] bg-[#faf8f4] text-start font-semibold cursor-pointer flex items-center justify-between"
+                                    :class="{
+                                        'text-[#4e0d0b] bg-[#f7eadf]':
+                                            group.name === activeGroupName,
+                                    }"
+                                    @click="toggleGroup(group.name)"
+                                >
+                                    <span>{{ group.name }}</span>
+                                    <span class="text-sm leading-none">
+                                        {{
+                                            openGroups[group.name] === false
+                                                ? "+"
+                                                : "-"
+                                        }}
+                                    </span>
+                                </button>
+                                <div
+                                    v-show="openGroups[group.name] !== false"
+                                    class="flex flex-col"
+                                >
+                                    <nuxt-link
+                                        v-for="item in group.items"
+                                        :key="item.id"
+                                        class="text-start h-9 w-full flex items-center justify-between no-select bg-[#faf8f4] hover:bg-[#fcf4f0]"
+                                        :class="{
+                                            'bg-[#fff8f0]!': isActivePath(
+                                                item.url,
+                                            ),
+                                        }"
+                                        :id="
+                                            isActivePath(item.url)
+                                                ? 'navigation-items'
+                                                : undefined
+                                        "
+                                        :to="item.url"
+                                    >
+                                        <span
+                                            class="uppercase px-6 font-semibold"
+                                            :class="{
+                                                'text-[#4e0d0b]': isActivePath(
+                                                    item.url,
+                                                ),
+                                            }"
+                                        >
+                                            {{ item.name }}
+                                        </span>
+                                    </nuxt-link>
+                                </div>
+                            </Motion>
+                        </Motion>
+                    </div>
+                </Transition>
+                <button
+                    @click="toggleMenuState"
+                    class="h-[36px] w-[170px] text-center bg-[#ddccbb] hover:bg-[#ccbbaa] gap-4 relative flex justify-center items-center"
+                    id="navigation-items"
+                    :class="{ 'bg-[#ccbbaa]!': menuOpen }"
+                >
+                    <svg
+                        class="fill-[#010101] shrink-0 mr-2"
+                        width="16"
+                        height="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <rect
+                            y="7"
+                            width="16"
+                            height="2"
+                            rx="1"
+                            class="transform origin-center translate-x-0 transition duration-200 ease-out"
+                            :class="{
+                                '!-rotate-180': menuOpen,
+                            }"
+                        />
+                        <rect
+                            y="7"
+                            width="20"
+                            height="2"
+                            rx="1"
+                            class="transform origin-center translate-x-0 transition duration-200 ease-out -rotate-[90deg]"
+                            :class="{
+                                '!-rotate-180': menuOpen,
+                            }"
+                        />
+                    </svg>
+                    <span class="uppercase text-[#010101] font-bold mr-1">
+                        NAVIGATION
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Motion } from "motion-v";
+const route = useRoute();
+
+let menuOpen = ref(false);
+const toggleMenuState = () => {
+    menuOpen.value = !menuOpen.value;
+};
+
+const menuContent = ref(null);
+
+const handleClickOutside = (event: MouseEvent) => {
+    if (
+        menuContent.value &&
+        !(menuContent.value as HTMLElement).contains(event.target as Node)
+    ) {
+        menuOpen.value = false;
+    }
+};
+
+onMounted(() => {
+    document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener("click", handleClickOutside);
+});
+
+const { data: docsPages } = await useAsyncData("docs-nav-items", () =>
+    queryCollection("docs")
+        .select(
+            "title",
+            "path",
+            "index",
+            "navGroup",
+            "navGroupIndex",
+            "navTitle",
+            "navHidden",
+        )
+        .all(),
+);
+
+const groups = computed(() => {
+    const pages = docsPages.value || [];
+    const sortedPages = pages
+        .filter((page) => !page.navHidden)
+        .sort((a, b) => {
+            const ai =
+                typeof a.index === "number" ? a.index : Number.MAX_SAFE_INTEGER;
+            const bi =
+                typeof b.index === "number" ? b.index : Number.MAX_SAFE_INTEGER;
+            if (ai !== bi) return ai - bi;
+            return String(a.title).localeCompare(String(b.title));
+        });
+
+    if (!sortedPages.length) {
+        return [
+            {
+                id: 0,
+                name: "General",
+                items: [{ id: 1, name: "Docs Home", url: "/docs" }],
+            },
+        ];
+    }
+
+    const groupedMap = sortedPages.reduce(
+        (acc, page) => {
+            const groupName = page.navGroup?.trim() || "General";
+            if (!acc[groupName]) {
+                acc[groupName] = {
+                    index:
+                        typeof page.navGroupIndex === "number"
+                            ? page.navGroupIndex
+                            : Number.MAX_SAFE_INTEGER,
+                    pages: [],
+                };
+            }
+            if (
+                typeof page.navGroupIndex === "number" &&
+                page.navGroupIndex < acc[groupName].index
+            ) {
+                acc[groupName].index = page.navGroupIndex;
+            }
+            acc[groupName].pages.push(page);
+            return acc;
+        },
+        {} as Record<
+            string,
+            {
+                index: number;
+                pages: typeof sortedPages;
+            }
+        >,
+    );
+
+    const orderedGroups = Object.entries(groupedMap).sort(
+        ([aName, aData], [bName, bData]) => {
+            if (aData.index !== bData.index) {
+                return aData.index - bData.index;
+            }
+            if (aName === "General") return 1;
+            if (bName === "General") return -1;
+            return aName.localeCompare(bName);
+        },
+    );
+
+    return orderedGroups.map(([groupName, groupData], groupId) => {
+        const items = groupData.pages.map((page, itemIdx) => ({
+            id: `${groupId}-${itemIdx}`,
+            name: page.navTitle || page.title,
+            url: page.path === "/docs/home" ? "/docs" : page.path,
+        }));
+
+        return {
+            id: groupId,
+            name: groupName,
+            items,
+        };
+    });
+});
+
+const normalizeDocsPath = (path: string) => {
+    if (path === "/docs/home") return "/docs";
+    return path.replace(/\/+$/, "") || "/";
+};
+
+const currentDocsPath = computed(() => normalizeDocsPath(route.path));
+const activeGroupName = computed(() => {
+    for (const group of groups.value) {
+        if (
+            group.items.some(
+                (item) => normalizeDocsPath(item.url) === currentDocsPath.value,
+            )
+        ) {
+            return group.name;
+        }
+    }
+    return "";
+});
+
+const isActivePath = (path: string) =>
+    normalizeDocsPath(path) === currentDocsPath.value;
+
+const openGroups = ref<Record<string, boolean>>({});
+watch(
+    groups,
+    () => {
+        const nextOpenState: Record<string, boolean> = {
+            ...openGroups.value,
+        };
+        for (const group of groups.value) {
+            if (!(group.name in nextOpenState)) {
+                nextOpenState[group.name] = true;
+            }
+        }
+        openGroups.value = nextOpenState;
+    },
+    { immediate: true },
+);
+
+const toggleGroup = (groupName: string) => {
+    openGroups.value[groupName] = openGroups.value[groupName] === false;
+};
+
+const desktopItems = computed(() =>
+    groups.value.flatMap((group) => group.items).slice(0, 2),
+);
+</script>
diff --git a/app/components/Navigation.vue b/app/components/Navigation.vue
index 86fabd9..d479ed5 100644
--- a/app/components/Navigation.vue
+++ b/app/components/Navigation.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="w-full py-4 flex justify-center items-center">
         <div
-            class="min-w-[calc(100%-2.125rem)] md:min-w-[calc(100%-7.75rem)] mb-8 flex justify-between items-center fixed bottom-0 z-999"
+            class="min-w-[calc(100%-2.125rem)] md:min-w-[calc(100%-7.75rem)] mb-8 flex justify-between items-center fixed bottom-0 z-[999]"
         >
-            <div class="w-28.5 flex justify-start items-center z-200">
+            <div class="w-28.5 flex justify-start items-center z-[200]">
                 <nuxt-link to="/">
                     <img src="assets/img/logo.png" alt="Logo" class="w-7" />
                 </nuxt-link>
             </div>
-            <div class="hidden md:flex gap-2 items-end justify-center z-200">
+            <div class="hidden md:flex gap-2 items-end justify-center z-[200]">
                 <nuxt-link class="text-start link" to="/docs">
                     <span class="px-2 font-semibold" data-text="// Docs"
                         >// Docs</span
@@ -21,7 +21,7 @@
                 </nuxt-link>
             </div>
             <div
-                class="z-100 flex flex-wrap gap-2 items-center"
+                class="z-[100] flex flex-wrap gap-2 items-center"
                 ref="menuContent"
             >
                 <Transition name="menu" :duration="250">
diff --git a/app/components/content/ProsePre.vue b/app/components/content/ProsePre.vue
index cc0328f..1c6bc79 100644
--- a/app/components/content/ProsePre.vue
+++ b/app/components/content/ProsePre.vue
@@ -7,7 +7,10 @@
             {{ $props.filename }}
         </div>
         <pre
-            :class="$props.class"
+            :class="[
+                $props.class,
+                { 'no-line-numbers pb-2!': $props.language === 'bash' },
+            ]"
             class="p-5 pl-2! pt-2 border border-[#4e0d0b]/40 overflow-x-auto"
         ><slot /></pre>
     </div>
@@ -76,6 +79,20 @@ pre code .line {
     @apply bg-[#fcf4f0];
 }
 
+.no-line-numbers .line::before {
+    content: "~";
+    border-right: 0;
+    width: 2em;
+}
+
+.no-line-numbers .line:hover {
+    @apply bg-[#fffdf6];
+}
+
+.no-line-numbers .line {
+    padding-left: 2em;
+}
+
 pre code .line *::-moz-selection,
 pre code .line *::selection {
     background-color: #dcb !important;
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..52dfbfc
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,9 @@
+<template>
+    <div class="flex flex-col justify-evenly min-h-[calc(100vh-32px)]">
+        <Navigation />
+        <main class="grow">
+            <slot />
+        </main>
+        <Footer />
+    </div>
+</template>
diff --git a/app/layouts/docs.vue b/app/layouts/docs.vue
new file mode 100644
index 0000000..8d025f4
--- /dev/null
+++ b/app/layouts/docs.vue
@@ -0,0 +1,8 @@
+<template>
+    <div class="flex flex-col justify-evenly min-h-[calc(100vh-32px)]">
+        <DocsNavigation />
+        <main class="grow">
+            <slot />
+        </main>
+    </div>
+</template>
diff --git a/app/pages/docs/[slug].vue b/app/pages/docs/[slug].vue
index 958c54c..0ec9871 100644
--- a/app/pages/docs/[slug].vue
+++ b/app/pages/docs/[slug].vue
@@ -1,46 +1,138 @@
-<template>
-    <div class="flex justify-center items-center h-screen w-full">// Docs</div>
-</template>
-
 <script setup lang="ts">
-const formatDate = (date: string) => {
-    if (!date) return "";
-    return new Date(date).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-    });
-};
+definePageMeta({
+    layout: "docs",
+});
+
+const route = useRoute();
+const slug = computed(() => String(route.params.slug || "home"));
+const docPath = computed(() => `/docs/${slug.value}`);
+const docsSourcePath = computed(() => `content/docs/${slug.value}.md`);
+const docsPathLabel = computed(() => `/docs/${slug.value}`);
+
+const { data: doc } = await useAsyncData(
+    () => `docs-${slug.value}`,
+    () => queryCollection("docs").path(docPath.value).first(),
+);
 
-const slug = useRoute().params.slug;
-const { data: doc } = await useAsyncData(`docs-${slug}`, () => {
-    return queryCollection("docs").path(`/docs/${slug}`).first();
+const editUrl = computed(
+    () => `https://github.com/slunghq/web/edit/main/${docsSourcePath.value}`,
+);
+
+const markdownToCopy = computed(() => {
+    if (!doc.value) return "";
+    if (typeof doc.value.rawbody === "string" && doc.value.rawbody.trim()) {
+        return doc.value.rawbody;
+    }
+
+    const title = `# ${doc.value.title}`;
+    const description = doc.value.description
+        ? `\n\n${doc.value.description}`
+        : "";
+    return `${title}${description}\n`;
 });
 
-const docsImages = import.meta.glob("~/assets/img/docs/*", {
-    eager: true,
-    import: "default",
-}) as Record<string, string>;
-
-const getHeroImage = (hero: string | undefined): string => {
-    if (!hero) return "/docs-placeholder.png";
-    const matchingKey = Object.keys(docsImages).find((k) =>
-        k.endsWith(`/assets/img/docs/${hero}`),
-    );
-    return matchingKey ? docsImages[matchingKey] : "/placeholder.png";
+const copiedMarkdown = ref(false);
+const copyAsMarkdown = async () => {
+    if (!markdownToCopy.value) return;
+    if (!import.meta.client) return;
+    await navigator.clipboard.writeText(markdownToCopy.value);
+    copiedMarkdown.value = true;
+    setTimeout(() => {
+        copiedMarkdown.value = false;
+    }, 1800);
 };
 
 useSeoMeta({
-    title: `${doc.value.meta.metaTitle || doc.value.title} | Documentation`,
-    ogTitle: `${doc.value.meta.metaTitle || doc.value.title} | Documentation`,
-    description:
-        doc.value.description ||
+    title: () =>
+        `${doc.value?.metaTitle || doc.value?.title || "Docs"} | Documentation`,
+    ogTitle: () =>
+        `${doc.value?.metaTitle || doc.value?.title || "Docs"} | Documentation`,
+    description: () =>
+        doc.value?.description ||
         "Build and deploy durable data streaming applications.",
-    ogDescription:
-        doc.value.description ||
+    ogDescription: () =>
+        doc.value?.description ||
         "Build and deploy durable data streaming applications.",
-    ogImage: doc.value.hero || "/default.png",
+    ogImage: () => doc.value?.hero || "/default.png",
     twitterCard: "summary_large_image",
     twitterSite: "@slunghq",
 });
 </script>
+
+<template>
+    <div class="w-full py-20">
+        <div class="px-5">
+            <div class="container mx-auto max-w-6xl">
+                <div v-if="doc" class="max-w-4xl mx-auto">
+                    <article class="w-full">
+                        <div
+                            id="navigation-items"
+                            class="bg-[#faf8f4] p-6 mb-8"
+                        >
+                            <p
+                                class="text-sm uppercase font-semibold tracking-wide text-[#886655]"
+                            >
+                                Overview
+                            </p>
+                            <h1
+                                class="text-3xl md:text-5xl font-bold tracking-tight leading-tight mt-2"
+                            >
+                                {{ doc.title }}
+                            </h1>
+                            <p
+                                v-if="doc.description"
+                                class="text-lg mt-4 max-w-3xl"
+                            >
+                                {{ doc.description }}
+                            </p>
+                            <div class="mt-6 flex flex-wrap items-center gap-2">
+                                <button
+                                    class="h-9 px-4 bg-[#ddccbb] hover:bg-[#ccbbaa] font-semibold text-sm cursor-pointer"
+                                    id="navigation-items"
+                                    @click="copyAsMarkdown"
+                                >
+                                    <font-awesome
+                                        :icon="['far', 'clone']"
+                                        v-if="!copiedMarkdown"
+                                    />
+                                    <font-awesome
+                                        :icon="['fas', 'check']"
+                                        v-else
+                                    />
+                                </button>
+                                <a
+                                    class="h-9 px-4 bg-[#faf8f4] hover:bg-[#fcf4f0] font-semibold text-sm inline-flex items-center"
+                                    id="navigation-items"
+                                    :href="editUrl"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    <font-awesome :icon="['fas', 'pen']" />
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="blog-content-wrapper">
+                            <ContentRenderer
+                                :value="doc"
+                                class="blog-content"
+                            />
+                        </div>
+                    </article>
+                </div>
+
+                <div
+                    v-else
+                    id="navigation-items"
+                    class="bg-[#faf8f4] p-8 max-w-xl"
+                >
+                    <h1 class="text-2xl font-bold">Document Not Found</h1>
+                    <p class="mt-2">This docs page does not exist.</p>
+                    <nuxt-link to="/docs" class="link mt-4 inline-flex px-2">
+                        <span class="font-semibold">Back to docs</span>
+                    </nuxt-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/app/pages/docs/index.vue b/app/pages/docs/index.vue
index c971d30..9ee3038 100644
--- a/app/pages/docs/index.vue
+++ b/app/pages/docs/index.vue
@@ -1,3 +1,134 @@
 <script setup lang="ts">
-useRouter().replace("/docs/home");
+definePageMeta({
+    layout: "docs",
+});
+
+const docPath = "/docs/home";
+const docsSourcePath = "content/docs/home.md";
+
+const { data: doc } = await useAsyncData("docs-home", () =>
+    queryCollection("docs").path(docPath).first(),
+);
+
+const editUrl = computed(
+    () => `https://github.com/slunghq/web/edit/main/${docsSourcePath}`,
+);
+
+const markdownToCopy = computed(() => {
+    if (!doc.value) return "";
+    if (typeof doc.value.rawbody === "string" && doc.value.rawbody.trim()) {
+        return doc.value.rawbody;
+    }
+
+    const title = `# ${doc.value.title}`;
+    const description = doc.value.description
+        ? `\n\n${doc.value.description}`
+        : "";
+    return `${title}${description}\n`;
+});
+
+const copiedMarkdown = ref(false);
+const copyAsMarkdown = async () => {
+    if (!markdownToCopy.value) return;
+    if (!import.meta.client) return;
+    await navigator.clipboard.writeText(markdownToCopy.value);
+    copiedMarkdown.value = true;
+    setTimeout(() => {
+        copiedMarkdown.value = false;
+    }, 1800);
+};
+
+useSeoMeta({
+    title: () =>
+        `${doc.value?.metaTitle || doc.value?.title || "Docs"} | Documentation`,
+    ogTitle: () =>
+        `${doc.value?.metaTitle || doc.value?.title || "Docs"} | Documentation`,
+    description: () =>
+        doc.value?.description ||
+        "Build and deploy durable data streaming applications.",
+    ogDescription: () =>
+        doc.value?.description ||
+        "Build and deploy durable data streaming applications.",
+    ogImage: () => doc.value?.hero || "/default.png",
+    twitterCard: "summary_large_image",
+    twitterSite: "@slunghq",
+});
 </script>
+
+<template>
+    <div class="w-full py-20">
+        <div class="px-5">
+            <div class="container mx-auto max-w-6xl">
+                <div v-if="doc" class="max-w-4xl mx-auto">
+                    <article class="w-full">
+                        <div
+                            id="navigation-items"
+                            class="bg-[#faf8f4] p-6 mb-8"
+                        >
+                            <p
+                                class="text-sm uppercase font-semibold tracking-wide text-[#886655]"
+                            >
+                                Overview
+                            </p>
+                            <h1
+                                class="text-3xl md:text-5xl font-bold tracking-tight leading-tight mt-2"
+                            >
+                                {{ doc.title }}
+                            </h1>
+                            <p
+                                v-if="doc.description"
+                                class="text-lg mt-4 max-w-3xl"
+                            >
+                                {{ doc.description }}
+                            </p>
+                            <div class="mt-6 flex flex-wrap items-center gap-2">
+                                <button
+                                    class="h-9 px-4 bg-[#ddccbb] hover:bg-[#ccbbaa] font-semibold text-sm cursor-pointer"
+                                    id="navigation-items"
+                                    @click="copyAsMarkdown"
+                                >
+                                    <font-awesome
+                                        :icon="['far', 'clone']"
+                                        v-if="!copiedMarkdown"
+                                    />
+                                    <font-awesome
+                                        :icon="['fas', 'check']"
+                                        v-else
+                                    />
+                                </button>
+                                <a
+                                    class="h-9 px-4 bg-[#faf8f4] hover:bg-[#fcf4f0] font-semibold text-sm inline-flex items-center"
+                                    id="navigation-items"
+                                    :href="editUrl"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    <font-awesome :icon="['fas', 'pen']" />
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="blog-content-wrapper">
+                            <ContentRenderer
+                                :value="doc"
+                                class="blog-content"
+                            />
+                        </div>
+                    </article>
+                </div>
+
+                <div
+                    v-else
+                    id="navigation-items"
+                    class="bg-[#faf8f4] p-8 max-w-xl"
+                >
+                    <h1 class="text-2xl font-bold">Document Not Found</h1>
+                    <p class="mt-2">This docs page does not exist.</p>
+                    <nuxt-link to="/docs" class="link mt-4 inline-flex px-2">
+                        <span class="font-semibold">Back to docs</span>
+                    </nuxt-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/content.config.ts b/content.config.ts
index b8c0234..45554c9 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -19,9 +19,16 @@ export default defineContentConfig({
       source: "docs/**/*.md",
       schema: z.object({
         title: z.string(),
+        index: z.number().optional(),
+        navGroup: z.string().optional(),
+        navGroupIndex: z.number().optional(),
+        navTitle: z.string().optional(),
+        navHidden: z.boolean().optional(),
+        metaTitle: z.string().optional(),
         description: z.string().optional(),
         hero: z.string().optional(),
         icon: z.string().optional(),
+        rawbody: z.string().optional(),
       }),
     }),
   },
diff --git a/content/blog/intro.md b/content/blog/intro.md
new file mode 100644
index 0000000..5a14f7c
--- /dev/null
+++ b/content/blog/intro.md
@@ -0,0 +1,148 @@
+---
+title: Durable Workflows Over Real-Time Data Streams
+description: Write durable, fast, stateful functions that compute over live data streams with full historical context.
+date: 2026-02-24
+hero: durable_fast_stateful.png
+tags: [engineering, announcement, runtime]
+authors: [Ewan]
+---
+
+As an engineer, if you've ever worked with say IoT data and were trying to do work with your live data stream while trying to use any historical data, you probably designed a pipeline that looked like this:
+
++ Kafka for ingestion
++ Flink for ETL
++ Lambda/workers for compute
++ Timescale for time series storage
++ Redis for caching
++ Complex glue code to orchestrate it all
+
+Six extra managed services. And you now have to try to optimise away milliseconds of latency between these disparate services, trying to keep up with your edge data sources. And oh yeah, hope you are ready to cover the cloud bill?
+
+Stream processing shouldn't require distributed systems expertise and a 6-figure cloud bill. It should be **one lightweight runtime** that you deploy where your data lives.
+
+Today, I'm announcing the first alpha version of Slung, a durable workflow engine that brings together stream processing, time series data storage, and serverless compute together on the edge.
+
+## What I've Built
+
+With Slung, I went back to first principles. I thought deeply about the problem of streaming data and decided to vertically integrate the entire stack, providing:
+
++ **Durable workflows** triggered by incoming data streams
++ **Live query and processing** to compute and aggregate live temporal data.
++ **Built-in TSDB** with 1M+ sustained writes/sec and <160ms aggregated query for 1M points
++ **Sub-millisecond cold starts** powered by Wasm
++ **Edge-optimised, lightweight design** (single node, <1 GiB memory at 1B events)
+
+All in a single binary that you can deploy on your edge infrastructure, today.
+
+### Why Now?
+
+Edge computing is eating the cloud. IoT devices are getting smarter and now process more data that should be put to work. Latency matters more than ever. Streaming infrastructure is still designed for datacenter-scale distributed systems.
+
+Slung aims to make analytical stream processing lightweight, single-node, edge-native with historical data built-in, just next to your data producers.
+
+> Note: this is our first alpha so expect bugs (report them [here](https://github.com/slunghq/slung/issues/new)). I also do not suggest migrating your data to Slung without a back-up to a data lake.
+
+As part of the runtime, I've also shipped a basic [Rust workflow SDK](https://docs.rs/slung) alongside a simple [Typescript client SDK](https://github.com/slunghq/slung/tree/dev/sdks/client/typescript).
+
+**[How It Works - Basic Anomaly detection]**
+
+```rust [main.rs] 
+use slung::prelude::*;
+
+#[main]
+fn main() -> Result<()> {
+    // Subscribe to live stream updates.
+    let handle = query_live("SUM:temp:[sensor=1]")?;
+    poll_handle(handle, on_event, 100.0)?;
+
+    Ok(())
+}
+
+fn on_event(event: Event, alert_threshold: f64) -> Result<()> {
+    // Compare against baseline in real-time
+    if event.value > alert_threshold {
+        for producer in event.producers {
+            // Write back to producers
+            writeback_ws(producer, "ALERT: threshold exceeded")?;
+        }
+    }
+
+    Ok(())
+}
+```
+
+Functions are triggered by incoming streams from producers, processes live events, queries historical data, and writes back through several mediums (WebSocket, HTTP for now) in a closed feedback loop.
+
+## Architecture
+
+![Architecture Overview](blog/architecture_overview.png)
+
+To maintain brevity, this is a high-level overview of the core system architecture:
+
+1. **Streaming layer**
+
++ Websocket ingestion with bi-directional writes
++ MPSC ring buffers for live data
++ Query DSL - `OP:SERIES:[TAGS]:[RANGE]`{lang="zig"}
+
+2. **Storage layer**
+
++ Series organised skip list memtable for fast writes
++ On-disk columnar data format with Gorilla and Delta compression
++ Bloom filters for AMQ
+
+3. **Compute layer**
+
++ Deterministic Wasm runtime
++ Query live and historical data via host functions
++ Triggered by incoming streams and sleeps when idle
+
+### Built with Zig
+
+![Made with Zig](blog/zig.png)
+
+When it came to choosing my tech stack I had to pick between the systems languages I know (Go, Rust, and Zig). Go was clearly out of the picture due to the garbage collector, it really was just me picking between Rust and Zig (which I just started getting familiar with). I wound up choosing Zig because I wanted:
+
++ **Control over performance** - Everything in Zig is explicit with no hidden allocations.
++ **Edge-friendliness** - Binaries are smaller by default and compile time is exponentially faster with zig.
++ **Simpler mental model** - It was easier to think about system data without needing to battle the compiler.
++ **C interop** - The Zig build system is really powerful and allows me to easily integrate into the rich C ecosystem.
+
+I love Rust, by every means. It has a blossoming ecosystem and is fast as hell, but Zig just seemed like a better option to me for this project. Again, check out our first official [SDK](https://docs.rs/slung), written in Rust.
+
+## Use cases
+
+This architecture unlocks use cases that were previously too complex or expensive and I'm quite keen in enabling (not limited):
+
+1. **IoT Anomaly Detection at the Edge:**
+Run inference on-device, compare against historical baselines with no cloud roundtrip.
+
+2. **Financial Tick Processing:**
+Process market data with microsecond historical lookups without any external database queries.
+
+3. **Real-Time Analytics:**
+Aggregate live metrics while querying historical trends using one runtime instead of six managed services.
+
+And it's so lightweight, you really don't need the cloud.
+
+## What's next
+
+I have a [roadmap](/roadmap) of tasks I want to achieve. It's quite high level but points to GitHub [issues](https://github.com/slunghq/slung/issues). But TL;DR, I'll be improving our existing workflow SDK, writing more in Zig, C and Go, as well as more client SDKs expanding the query DSL (to support tumbling window aggs, etc.), object storage sync, and shipping a commercial pipeline builder. If you want to join me, shoot me an [email](mailto:ewan@slung.tech) or just open a PR.
+
+### Try it
+
+Slung is free and open source (Apache 2.0) and available on [GitHub](https://github.com/slunghq/slung). Star it on GitHub if you find this interesting!
+
+### Call for design partners
+
+If you're currently processing 50k+ events/sec with a duct-taped solution I'd love to talk to you.
+
+I'll help you:
++ Benchmark Slung against your current stack
++ Build a proof-of-concept for your use case  
++ Get priority support during alpha
+
+I'm especially interested in IoT, high-frequency trading, fintech, and industrial monitoring.
+
++ Book a call (15 or 30 min): [cal.com/ewanretor/slung-live](https://cal.com/ewanretor/slung-live)
++ Email: [ewan@slung.tech](mailto:ewan@slung.tech)
diff --git a/content/docs/changelogs.md b/content/docs/changelogs.md
new file mode 100644
index 0000000..3dd925e
--- /dev/null
+++ b/content/docs/changelogs.md
@@ -0,0 +1,8 @@
+---
+title: Changelogs
+index: 2
+navGroup: Misc
+navGroupIndex: 4
+metaTitle: Changelogs
+description: See what's new in Slung.
+---
diff --git a/content/docs/faq.md b/content/docs/faq.md
new file mode 100644
index 0000000..3a2d24e
--- /dev/null
+++ b/content/docs/faq.md
@@ -0,0 +1,8 @@
+---
+title: FAQ
+index: 1
+navGroup: Misc
+navGroupIndex: 4
+metaTitle: FAQ
+description: Answers to common questions.
+---
diff --git a/content/docs/home.md b/content/docs/home.md
index 2f8ecbe..b652a31 100644
--- a/content/docs/home.md
+++ b/content/docs/home.md
@@ -1,4 +1,29 @@
 ---
-title: Welcome to our docs!
-metaTitle: Home
+title: Welcome to the Slung docs!
+index: 1
+navTitle: Welcome
+metaTitle: Welcome to the Slung docs!
+description: Write real-time functions that compute over temporal data streams with full historical context.
 ---
+
+## Overview
+
+[Quickstart](/docs/quickstart) - Get started with Slung.
+
+[Use cases](/docs/usecases) - Where we think Slung can be useful.
+
+## Core Concepts
+
+[Streaming](/docs/streaming) - Learn how data flows through the runtime.
+
+[Queries](/docs/queries) - Simple but powerful query filters.
+
+[Write backs](/docs/writebacks) - Close the loop over HTTP & WS.
+
+## Misc
+
+[FAQ](/docs/faq) - Answers to common questions.
+
+[Changelogs](/docs/changelogs) - See what's new in Slung.
+
+[GitHub](https://github.com/slunghq/slung) - Contribute to Slung.
diff --git a/content/docs/queries.md b/content/docs/queries.md
new file mode 100644
index 0000000..b2618b8
--- /dev/null
+++ b/content/docs/queries.md
@@ -0,0 +1,8 @@
+---
+title: Queries
+index: 2
+navGroup: Core Concepts
+navGroupIndex: 2
+metaTitle: Queries
+description: Simple but powerful query filters.
+---
diff --git a/content/docs/quickstart.md b/content/docs/quickstart.md
new file mode 100644
index 0000000..b00a33b
--- /dev/null
+++ b/content/docs/quickstart.md
@@ -0,0 +1,125 @@
+---
+title: Quickstart
+index: 2
+navGroup: Overview
+navGroupIndex: 1
+metaTitle: Quickstart
+description: Get started with Slung.
+---
+
+Slung is pretty straightforward to use. All you need to do is set up your environment, pick up the [SDKs](https://github.com/slunghq/slung/tree/main/sdks), write and compile your workflow pipeline to Wasm, and run. Let's walk you through how to do this.
+
+1. **Set up your local environment**
+
+The hardware requirement for running is relatively low. All you need is a machine with at least 1 GB of RAM, a CPU with at least free 1 core, and a place to store your data (data ratio is about 8.7MB/1M events).
+
+Now, we should have existing binaries for Slung provided on our [release page](https://github.com/slunghq/slung/releases). Grab one of the binaries for your platform and place it in your `$PATH`. If you're on Windows, we have first class support as well but we recommend using [WSL](https://learn.microsoft.com/en-us/windows/wsl/install) for a better experience.
+
+If you want to build Slung from source, it's pretty simple:
+
++ Make sure you have [Zig](https://ziglang.org/), and [Nix](https://nixos.org/) installed.
++ Clone the [repository](https://github.com/slunghq/slung) locally.
++ Then run the following commands.
+
+```bash
+nix develop -c zig build --release=fast
+cp ./zig-out/bin/slung .
+```
+
+2. **Write your workflow pipeline**
+
+Create a new Rust project and add our SDK to the `Cargo.toml` file.
+
+```toml [Cargo.toml]
+[dependencies]
+slung = "0.1.0"
+```
+
+Write a simple workflow that subscribes to live stream updates and compares against a threshold.
+
+```rust [main.rs] 
+use slung::prelude::*;
+
+#[main]
+fn main() -> Result<()> {
+    // Subscribe to live stream updates.
+    let handle = query_live("SUM:temp:[sensor=1]")?;
+    poll_handle(handle, on_event, 100.0)?;
+
+    Ok(())
+}
+
+fn on_event(event: Event, alert_threshold: f64) -> Result<()> {
+    // Compare against baseline in real-time
+    if event.value > alert_threshold {
+        for producer in event.producers {
+            // Write back to producers
+            writeback_ws(producer, "ALERT: threshold exceeded")?;
+        }
+    }
+
+    Ok(())
+}
+```
+
+Compile your workflow pipeline to Wasm and run Slung.
+
+```bash
+cargo build --target wasm32-wasi --release
+cp ./target/wasm32-wasi/release/main.wasm .
+# use --wasm flag to point to the Wasm file
+slung --wasm main.wasm
+```
+
+> We currently only support writing workflows in [Rust](https://docs.rs/slung), with plans to support other languages soon.
+
+3. **Create a data source**
+
+To stream data to your workflow, we recommend using our [Typescript client SDK](https://github.com/slunghq/slung/tree/main/sdks/clients/typescript) or writing one yourself (see the [streaming API](/docs/streaming#api)).
+
+Write a simple data publisher that streams events to your workflow:
+
+```typescript [index.ts]
+import { SlungClient } from "../src/index.ts";
+
+async function main(): Promise<void> {
+  const client = new SlungClient(
+    process.env.SLUNG_WS_URL ?? "ws://127.0.0.1:2077",
+  );
+  await client.connect();
+
+  console.log("connected to slung websocket");
+  console.log("sending simulated events every 10ms");
+
+  const stop = client.startSimulatedStream({
+    intervalMs: 10,
+    initialValue: 90,
+    jitter: 1.2,
+    series: "temp",
+    tags: ["sensor=1", "env=dev", "service=api"],
+  });
+
+  const shutdown = () => {
+    stop();
+    client.close(1000, "shutdown");
+    process.exit(0);
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
+```
+
+Set up your Node project and run the publisher.
+
+```bash
+npm install ./slung/sdks/clients/typescript
+npx tsx index.ts
+```
+
+You can now plug in your own data source to stream events to a custom workflow! :tada:
diff --git a/content/docs/streaming.md b/content/docs/streaming.md
new file mode 100644
index 0000000..c62ddb7
--- /dev/null
+++ b/content/docs/streaming.md
@@ -0,0 +1,8 @@
+---
+title: Streaming
+index: 1
+navGroup: Core Concepts
+navGroupIndex: 2
+metaTitle: Streaming
+description: Learn how data flows through the runtime.
+---
diff --git a/content/docs/usecases.md b/content/docs/usecases.md
new file mode 100644
index 0000000..30dd11b
--- /dev/null
+++ b/content/docs/usecases.md
@@ -0,0 +1,8 @@
+---
+title: Use cases
+index: 3
+navGroup: Overview
+navGroupIndex: 1
+metaTitle: Use cases
+description: Where we think Slung can be useful.
+---
diff --git a/content/docs/writebacks.md b/content/docs/writebacks.md
new file mode 100644
index 0000000..6f212da
--- /dev/null
+++ b/content/docs/writebacks.md
@@ -0,0 +1,8 @@
+---
+title: Write backs
+index: 3
+navGroup: Core Concepts
+navGroupIndex: 2
+metaTitle: Write backs
+description: Close the loop over HTTP & WS.
+---
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a156cff..8ed154b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -12,6 +12,8 @@ export default defineNuxtConfig({
     "@nuxt/icon",
     "@nuxt/image",
     "motion-v/nuxt",
+    "@solar-icons/nuxt",
+    "@vesp/nuxt-fontawesome",
   ],
   vite: { plugins: [tailwindcss()] },
   content: {
@@ -19,11 +21,17 @@ export default defineNuxtConfig({
       markdown: {
         highlight: {
           theme: "gruvbox-light-medium",
-          langs: ["rust", "zig", "sql"],
+          langs: ["rust", "zig", "sql", "toml"],
         },
       },
     },
   },
+  fontawesome: {
+    icons: {
+      regular: ["clone"],
+      solid: ["pen", "check"],
+    },
+  },
   app: {
     head: {
       titleTemplate: "%s | Slung",
diff --git a/package.json b/package.json
index 6cf567c..85151a7 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,9 @@
     "@nuxt/fonts": "0.12.1",
     "@nuxt/icon": "2.1.1",
     "@nuxt/image": "2.0.0",
+    "@solar-icons/nuxt": "1.2.0",
     "@tailwindcss/vite": "^4.1.18",
+    "@vesp/nuxt-fontawesome": "2.0.0",
     "motion-v": "^1.10.2",
     "nuxt": "^4.3.1",
     "tailwind-merge": "^3.4.0",
@@ -34,5 +36,10 @@
       "esbuild",
       "sharp"
     ]
+  },
+  "devDependencies": {
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 044a06e..a3350ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,15 @@ importers:
       '@nuxt/image':
         specifier: 2.0.0
         version: 2.0.0(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2)(magicast@0.5.2)
+      '@solar-icons/nuxt':
+        specifier: 1.2.0
+        version: 1.2.0(magicast@0.5.2)(vue@3.5.28(typescript@5.9.3))
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
+      '@vesp/nuxt-fontawesome':
+        specifier: 2.0.0
+        version: 2.0.0
       motion-v:
         specifier: ^1.10.2
         version: 1.10.2(@vueuse/core@14.1.0(vue@3.5.28(typescript@5.9.3)))(vue@3.5.28(typescript@5.9.3))
@@ -44,6 +50,16 @@ importers:
       vue-router:
         specifier: ^4.6.4
         version: 4.6.4(vue@3.5.28(typescript@5.9.3))
+    devDependencies:
+      '@fortawesome/free-brands-svg-icons':
+        specifier: ^7.2.0
+        version: 7.2.0
+      '@fortawesome/free-regular-svg-icons':
+        specifier: ^7.2.0
+        version: 7.2.0
+      '@fortawesome/free-solid-svg-icons':
+        specifier: ^7.2.0
+        version: 7.2.0
 
 packages:
 
@@ -532,6 +548,26 @@ packages:
   '@fastify/accept-negotiator@2.0.1':
     resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
 
+  '@fortawesome/fontawesome-common-types@7.2.0':
+    resolution: {integrity: sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-svg-core@7.2.0':
+    resolution: {integrity: sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-brands-svg-icons@7.2.0':
+    resolution: {integrity: sha512-VNG8xqOip1JuJcC3zsVsKRQ60oXG9+oYNDCosjoU/H9pgYmLTEwWw8pE0jhPz/JWdHeUuK6+NQ3qsM4gIbdbYQ==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-regular-svg-icons@7.2.0':
+    resolution: {integrity: sha512-iycmlN51EULlQ4D/UU9WZnHiN0CvjJ2TuuCrAh+1MVdzD+4ViKYH2deNAll4XAAYlZa8WAefHR5taSK8hYmSMw==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    resolution: {integrity: sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==}
+    engines: {node: '>=6'}
+
   '@iconify/collections@1.0.648':
     resolution: {integrity: sha512-0365h8NN+PXjUXc32cmaQaulext6S6Jnx1+6XxU5ivzNiQWmMlh6W1BkF9wncH+e48yzL1Tqes2A17WwYieZtw==}
 
@@ -1554,6 +1590,15 @@ packages:
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
+  '@solar-icons/nuxt@1.2.0':
+    resolution: {integrity: sha512-cQYVaG3DoRQlErQAYtUQfV88w+KQv2z25r8+3sX5U3nt6mfjeiEBEzRpZtb/kBggBwgJH9XJXij7vfKIc8vCHA==}
+    engines: {node: '>=18.0.0'}
+
+  '@solar-icons/vue@1.2.0':
+    resolution: {integrity: sha512-9K7ZMYSivk/prxk14x6/kCT1/HJYZmqgsRvgjYB1UUwgubAIWZHZTWzZ2swqWICHXJGWwQonO2C6kkKQKwwhkQ==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
   '@speed-highlight/core@1.2.14':
     resolution: {integrity: sha512-G4ewlBNhUtlLvrJTb88d2mdy2KRijzs4UhnlrOSRT4bmjh/IqNElZa3zkrZ+TC47TwtlDWzVLFADljF1Ijp5hA==}
 
@@ -1707,6 +1752,9 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  '@vesp/nuxt-fontawesome@2.0.0':
+    resolution: {integrity: sha512-20of3+NQHy5naZIk/DsH4LKjfmjEyiA1ajvrrCZexqEkVuf9e8IBVvtl228zAdzSgRxjHDcWGLKW8j0sirCDzA==}
+
   '@vitejs/plugin-vue-jsx@5.1.4':
     resolution: {integrity: sha512-70LmoVk9riR7qc4W2CpjsbNMWTPnuZb9dpFKX1emru0yP57nsc9k8nhLA6U93ngQapv5VDIUq2JatNfLbBIkrA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -3813,6 +3861,7 @@ packages:
   prebuild-install@7.1.3:
     resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
     engines: {node: '>=10'}
+    deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
     hasBin: true
 
   pretty-bytes@7.1.0:
@@ -5158,6 +5207,24 @@ snapshots:
   '@fastify/accept-negotiator@2.0.1':
     optional: true
 
+  '@fortawesome/fontawesome-common-types@7.2.0': {}
+
+  '@fortawesome/fontawesome-svg-core@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
+  '@fortawesome/free-brands-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
+  '@fortawesome/free-regular-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
   '@iconify/collections@1.0.648':
     dependencies:
       '@iconify/types': 2.0.0
@@ -6292,6 +6359,18 @@ snapshots:
 
   '@socket.io/component-emitter@3.1.2': {}
 
+  '@solar-icons/nuxt@1.2.0(magicast@0.5.2)(vue@3.5.28(typescript@5.9.3))':
+    dependencies:
+      '@nuxt/kit': 4.3.1(magicast@0.5.2)
+      '@solar-icons/vue': 1.2.0(vue@3.5.28(typescript@5.9.3))
+    transitivePeerDependencies:
+      - magicast
+      - vue
+
+  '@solar-icons/vue@1.2.0(vue@3.5.28(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.28(typescript@5.9.3)
+
   '@speed-highlight/core@1.2.14': {}
 
   '@sqlite.org/sqlite-wasm@3.50.4-build1': {}
@@ -6432,6 +6511,10 @@ snapshots:
       - rollup
       - supports-color
 
+  '@vesp/nuxt-fontawesome@2.0.0':
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 7.2.0
+
   '@vitejs/plugin-vue-jsx@5.1.4(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.29.0

From e3729d591e28aa5eca71769b758c1eae157c3f15 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 22 Feb 2026 02:54:59 +0000
Subject: [PATCH 2/2] dependabot: bump vue-router from 4.6.4 to 5.0.2

Bumps [vue-router](https://github.com/vuejs/router) from 4.6.4 to 5.0.2.
- [Release notes](https://github.com/vuejs/router/releases)
- [Commits](https://github.com/vuejs/router/compare/v4.6.4...v5.0.2)

---
updated-dependencies:
- dependency-name: vue-router
  dependency-version: 5.0.2
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json   |  2 +-
 pnpm-lock.yaml | 69 ++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 85151a7..eeb5308 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.5.28",
-    "vue-router": "^4.6.4"
+    "vue-router": "^5.0.3"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3350ce..fe5136a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ importers:
         specifier: ^3.5.28
         version: 3.5.28(typescript@5.9.3)
       vue-router:
-        specifier: ^4.6.4
-        version: 4.6.4(vue@3.5.28(typescript@5.9.3))
+        specifier: ^5.0.3
+        version: 5.0.3(@vue/compiler-sfc@3.5.28)(vue@3.5.28(typescript@5.9.3))
     devDependencies:
       '@fortawesome/free-brands-svg-icons':
         specifier: ^7.2.0
@@ -1818,6 +1818,9 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
+  '@vue/devtools-api@8.0.6':
+    resolution: {integrity: sha512-+lGBI+WTvJmnU2FZqHhEB8J1DXcvNlDeEalz77iYgOdY1jTj1ipSBaKj3sRhYcy+kqA8v/BSuvOz1XJucfQmUA==}
+
   '@vue/devtools-core@8.0.6':
     resolution: {integrity: sha512-fN7iVtpSQQdtMORWwVZ1JiIAKriinhD+lCHqPw9Rr252ae2TczILEmW0zcAZifPW8HfYcbFkn+h7Wv6kQQCayw==}
     peerDependencies:
@@ -1883,6 +1886,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -4303,6 +4311,7 @@ packages:
   tar@7.5.7:
     resolution: {integrity: sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==}
     engines: {node: '>=18'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   terser@5.46.0:
     resolution: {integrity: sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==}
@@ -4692,6 +4701,21 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  vue-router@5.0.3:
+    resolution: {integrity: sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==}
+    peerDependencies:
+      '@pinia/colada': '>=0.21.2'
+      '@vue/compiler-sfc': ^3.5.17
+      pinia: ^3.0.4
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      '@pinia/colada':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      pinia:
+        optional: true
+
   vue@3.5.28:
     resolution: {integrity: sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==}
     peerDependencies:
@@ -6496,8 +6520,8 @@ snapshots:
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3
       '@rollup/pluginutils': 5.3.0(rollup@4.57.1)
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
@@ -6616,6 +6640,10 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
+  '@vue/devtools-api@8.0.6':
+    dependencies:
+      '@vue/devtools-kit': 8.0.6
+
   '@vue/devtools-core@8.0.6(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.28(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 8.0.6
@@ -6697,12 +6725,14 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
   acorn@8.15.0: {}
 
+  acorn@8.16.0: {}
+
   agent-base@7.1.4: {}
 
   alien-signals@3.1.2: {}
@@ -8521,7 +8551,7 @@ snapshots:
 
   mlly@1.8.0:
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.3
@@ -9835,7 +9865,7 @@ snapshots:
   terser@5.46.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -10218,6 +10248,29 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.28(typescript@5.9.3)
 
+  vue-router@5.0.3(@vue/compiler-sfc@3.5.28)(vue@3.5.28(typescript@5.9.3)):
+    dependencies:
+      '@babel/generator': 7.29.1
+      '@vue-macros/common': 3.1.2(vue@3.5.28(typescript@5.9.3))
+      '@vue/devtools-api': 8.0.6
+      ast-walker-scope: 0.8.3
+      chokidar: 5.0.0
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 3.0.0
+      unplugin-utils: 0.3.1
+      vue: 3.5.28(typescript@5.9.3)
+      yaml: 2.8.2
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.28
+
   vue@3.5.28(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.28