bosbun 0.0.5 → 0.0.7

package/templates/default/README.md

@@ -1,6 +1,6 @@
 # {{PROJECT_NAME}}
 
-A [Bunia](https://github.com/bosapi/bunia) project — SSR · Svelte 5 · Bun · ElysiaJS.
+A [Bosbun](https://github.com/bosapi/bosbun) project — SSR · Svelte 5 · Bun · ElysiaJS.
 
 ## Getting Started
 
@@ -45,7 +45,7 @@ Fetch data on the server before rendering:
 
 ```typescript
 // src/routes/blog/[slug]/+page.server.ts
-import type { LoadEvent } from "bunia";
+import type { LoadEvent } from "bosbun";
 
 export async function load({ params }: LoadEvent) {
     return { post: await getPost(params.slug) };
@@ -97,6 +97,6 @@ cn("px-4 py-2", isActive && "bg-primary")
 
 ## Learn More
 
-- [Bunia documentation](https://github.com/bosapi/bunia)
+- [Bosbun documentation](https://github.com/bosapi/bosbun)
 - [Svelte 5 docs](https://svelte.dev)
 - [Tailwind CSS v4](https://tailwindcss.com)

package/templates/default/package.json

@@ -3,13 +3,13 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "bunia dev",
-    "build": "bunia build",
-    "start": "bunia start",
+    "dev": "bosbun dev",
+    "build": "bosbun build",
+    "start": "bosbun start",
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "bunia": "*",
+    "bosbun": "*",
     "svelte": "^5.20.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0"

package/templates/default/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="currentColor" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="currentColor" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="currentColor" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/default/src/routes/+page.svelte

@@ -4,16 +4,16 @@
 
 <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
     <div class="flex flex-col items-center gap-3 text-center">
-        <p class="text-6xl">🐰</p>
+        <img src="/favicon.svg" alt="" class="size-16" />
         <h1 class="text-4xl font-bold tracking-tight">{name}</h1>
         <p class="text-muted-foreground text-lg">
-            A Bunia project — SSR + Svelte 5 + Bun + ElysiaJS
+            A Bosbun project — SSR + Svelte 5 + Bun + ElysiaJS
         </p>
     </div>
 
     <div class="mt-4 flex gap-3">
         <a
-            href="https://github.com/bosapi/bunia"
+            href="https://github.com/bosapi/bosbun"
             target="_blank"
             rel="noopener noreferrer"
             class="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
@@ -21,7 +21,7 @@
             Docs
         </a>
         <a
-            href="https://github.com/bosapi/bunia/tree/main/registry"
+            href="https://github.com/bosapi/bosbun/tree/main/registry"
             target="_blank"
             rel="noopener noreferrer"
             class="border-border bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-md border px-4 py-2 text-sm font-medium transition-colors"

package/templates/default/tsconfig.json

@@ -11,7 +11,7 @@
     "verbatimModuleSyntax": true,
     "types": ["bun-types"],
     "lib": ["dom", "dom.iterable", "esnext"],
-    "rootDirs": [".", ".bunia/types"],
+    "rootDirs": [".", ".bosbun/types"],
     "paths": {
       "$lib": ["./src/lib"],
       "$lib/*": ["./src/lib/*"]

package/templates/demo/.env.example

@@ -0,0 +1,52 @@
+# Server port. Defaults to 9000 in production, 9001 in dev (proxied via :9000).
+PORT=9000
+
+# Maximum request body size. Supports K/M/G suffixes or "Infinity". Defaults to 512K.
+BODY_SIZE_LIMIT=512K
+
+# Comma-separated list of allowed CORS origins for CSRF validation.
+# Leave unset to allow same-origin requests only.
+# Example: https://app.example.com, https://admin.example.com
+CSRF_ALLOWED_ORIGINS=
+
+# Comma-separated list of origins allowed to make cross-origin requests.
+# Leave unset to disable CORS (browsers block cross-origin requests by default).
+# Example: https://app.example.com, http://localhost:5173
+CORS_ALLOWED_ORIGINS=
+
+# Comma-separated HTTP methods to allow in CORS requests.
+# Default: GET, HEAD, PUT, PATCH, POST, DELETE
+# CORS_ALLOWED_METHODS=GET, POST
+
+# Comma-separated request headers to allow in CORS requests.
+# Default: Content-Type, Authorization
+# CORS_ALLOWED_HEADERS=Content-Type, Authorization, X-Custom-Header
+
+# Comma-separated response headers to expose to the browser.
+# Default: none
+# CORS_EXPOSED_HEADERS=X-Total-Count, X-Request-Id
+
+# Whether to allow cookies and auth credentials in cross-origin requests.
+# Must be "true" to enable; requires CORS_ALLOWED_ORIGINS to be set (not wildcard).
+# Default: false
+# CORS_CREDENTIALS=true
+
+# Preflight response cache duration in seconds.
+# Default: 86400 (24 hours)
+# CORS_MAX_AGE=86400
+
+# Timeout for load() functions (layout + page) in milliseconds. Defaults to 5000 (5s).
+# Set to 0 or Infinity to disable.
+# LOAD_TIMEOUT=5000
+
+# Timeout for metadata() functions in milliseconds. Defaults to 3000 (3s).
+# Set to 0 or Infinity to disable.
+# METADATA_TIMEOUT=3000
+
+# Timeout for prerender fetches during build in milliseconds. Defaults to 5000 (5s).
+# Set to 0 or Infinity to disable.
+# PRERENDER_TIMEOUT=5000
+
+# Set automatically by the framework (bosbun dev / bosbun build / bosbun start).
+# Do not set manually.
+# NODE_ENV=production

package/templates/demo/README.md

@@ -0,0 +1,23 @@
+# {{PROJECT_NAME}}
+
+A [Bosbun](https://github.com/nicholascostadev/bosbun) project with demo routes, hooks, API endpoints, and form actions.
+
+## Running
+
+```bash
+bun x bosbun dev     # http://localhost:9000
+bun x bosbun build   # production build
+bun x bosbun start   # run production server
+```
+
+## Routes
+
+| URL | File | Description |
+|-----|------|-------------|
+| `/` | `(public)/+page.svelte` | Home page |
+| `/about` | `(public)/about/+page.svelte` | About page |
+| `/blog` | `(public)/blog/+page.svelte` | Blog listing |
+| `/blog/:slug` | `(public)/blog/[slug]/+page.svelte` | Blog post — fetched via server loader |
+| `/api/hello` | `api/hello/+server.ts` | Multi-method JSON API |
+| `/actions-test` | `actions-test/+page.svelte` | Form actions demo |
+| `/*` | `(public)/[...catchall]/+page.svelte` | 404 catch-all |

package/templates/demo/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bosbun dev",
+    "build": "bosbun build",
+    "start": "bosbun start"
+  },
+  "dependencies": {
+    "bosbun": "*",
+    "svelte": "^5.20.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5"
+  }
+}

package/templates/demo/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Top block -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="28" rx="6"/>
+  <rect fill="currentColor" x="86" y="50" width="60" height="28" rx="6"/>
+
+  <!-- Middle block -->
+  <rect fill="currentColor" x="86" y="86" width="72" height="28" rx="6"/>
+
+  <!-- Bottom block -->
+  <rect fill="currentColor" x="86" y="122" width="60" height="28" rx="6"/>
+
+  <!-- Connector bar on left -->
+  <rect fill="currentColor" x="50" y="50" width="28" height="100" rx="6"/>
+</svg>

package/templates/demo/src/app.css

@@ -0,0 +1,132 @@
+@import "tailwindcss";
+@source "../src";
+
+/*
+ * ─── shadcn-inspired Design Tokens ──────────────────────
+ * CSS custom properties for light & dark themes.
+ * Uses HSL values so Tailwind can apply opacity modifiers.
+ */
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ─── Light Theme (Default) ─────────────────────────────── */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+/* ─── Dark Theme ─────────────────────────────────────────── */
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+/* ─── Base Styles ────────────────────────────────────────── */
+
+@layer base {
+  * {
+    border-color: theme(--color-border);
+  }
+
+  body {
+    background-color: theme(--color-background);
+    color: theme(--color-foreground);
+    font-family:
+      "Inter",
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      sans-serif;
+  }
+}

package/templates/demo/src/app.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+    const component: Component<Record<string, any>, Record<string, any>, any>;
+    export default component;
+}

package/templates/demo/src/hooks.server.ts

@@ -0,0 +1,21 @@
+import { sequence } from "bosbun";
+import type { Handle } from "bosbun";
+
+// Sets locals that every loader and API handler can read
+const authHandle: Handle = async ({ event, resolve }) => {
+    event.locals.requestTime = Date.now();
+    event.locals.user = null; // replace with real session logic
+    return resolve(event);
+};
+
+// Logs each request with method, path, status, and duration
+const loggingHandle: Handle = async ({ event, resolve }) => {
+    const start = Date.now();
+    const res = await resolve(event);
+    const ms = Date.now() - start;
+    console.log(`[${event.request.method}] ${event.url.pathname} ${res.status} (${ms}ms)`);
+    res.headers.set("X-Response-Time", `${ms}ms`);
+    return res;
+};
+
+export const handle = sequence(authHandle, loggingHandle);

package/templates/demo/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "bosbun";

package/templates/demo/src/routes/(public)/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { LayoutData } from '../$types';
+
+    let { children, data }: { children: any; data: LayoutData } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col bg-background text-foreground">
+    <header class="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
+        <nav class="mx-auto flex max-w-4xl items-center gap-6 px-4 py-3">
+            <a href="/" class="font-bold tracking-tight flex items-center gap-2"><img src="/favicon.svg" alt="" class="size-5" /> {{PROJECT_NAME}}</a>
+            <a href="/" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
+            <a href="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a>
+            <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Blog</a>
+            <a href="/all/foo/bar" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Catch-all</a>
+            <a href="/api/hello" target="_blank" class="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a>
+        </nav>
+    </header>
+
+    <main class="mx-auto w-full max-w-4xl flex-1 px-4 py-8">
+        {@render children()}
+    </main>
+
+    <footer class="border-t py-4 text-center text-sm text-muted-foreground">
+        Powered by Bosbun
+        {#if data.requestTime}
+            <span class="ml-2 opacity-40 font-mono text-xs">
+                req at {new Date(data.requestTime).toISOString()}
+            </span>
+        {/if}
+    </footer>
+</div>

package/templates/demo/src/routes/(public)/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    let count = $state(0);
+
+    const features = [
+        { icon: "📂", label: "File-based routing", desc: "+page.svelte, +layout.svelte, route groups, dynamic [params]" },
+        { icon: "⚡", label: "SSR + Hydration", desc: "Server renders HTML, Svelte hydrates on the client" },
+        { icon: "🔁", label: "Server loaders", desc: "+page.server.ts and +layout.server.ts with parent() threading" },
+        { icon: "🪝", label: "Hooks", desc: "sequence() middleware — auth, logging, locals" },
+        { icon: "📡", label: "API routes", desc: "+server.ts exports GET, POST, PUT, PATCH, DELETE" },
+        { icon: "🧩", label: "Component registry", desc: "bosbun add button — shadcn-style, code you own" },
+        { icon: "✨", label: "feat system", desc: "bosbun feat login — scaffold entire features, not just components" },
+    ];
+</script>
+
+<svelte:head>
+    <title>{{PROJECT_NAME}}</title>
+    <meta name="description" content="{{PROJECT_NAME}} — SSR + Svelte 5 + Bun + ElysiaJS" />
+</svelte:head>
+
+<div class="space-y-12">
+    <!-- Hero -->
+    <div class="space-y-3 pt-4">
+        <h1 class="text-5xl font-bold tracking-tight flex items-center gap-3"><img src="/favicon.svg" alt="" class="size-10" /> {{PROJECT_NAME}}</h1>
+        <p class="text-xl text-muted-foreground max-w-xl">
+            A minimalist fullstack framework — SSR, Svelte 5 Runes, Bun, and ElysiaJS.
+        </p>
+    </div>
+
+    <!-- Svelte 5 reactivity demo -->
+    <div class="rounded-lg border bg-card p-6 space-y-3 max-w-sm">
+        <p class="text-sm font-medium text-muted-foreground">Svelte 5 $state demo</p>
+        <p class="text-5xl font-bold tabular-nums">{count}</p>
+        <div class="flex gap-2">
+            <button
+                onclick={() => count++}
+                class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+                +1
+            </button>
+            <button
+                onclick={() => count = 0}
+                class="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+            >
+                Reset
+            </button>
+        </div>
+    </div>
+
+    <!-- Features grid -->
+    <div class="space-y-4">
+        <h2 class="text-2xl font-semibold tracking-tight">Features</h2>
+        <div class="grid gap-4 sm:grid-cols-2">
+            {#each features as f}
+                <div class="rounded-lg border bg-card p-4 space-y-1">
+                    <p class="font-medium">{f.icon} {f.label}</p>
+                    <p class="text-sm text-muted-foreground">{f.desc}</p>
+                </div>
+            {/each}
+        </div>
+    </div>
+
+    <!-- Navigation demo -->
+    <div class="space-y-4">
+        <h2 class="text-2xl font-semibold tracking-tight">Routes in this demo</h2>
+        <div class="flex flex-wrap gap-2">
+            {#each ["/", "/about", "/blog", "/blog/hello-world", "/blog/route-groups", "/all/foo/bar", "/missing-page"] as href}
+                <a
+                    {href}
+                    class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+                >{href}</a>
+            {/each}
+            <a
+                href="/api/hello"
+                target="_blank"
+                class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+            >/api/hello ↗</a>
+        </div>
+    </div>
+</div>

package/templates/demo/src/routes/(public)/about/+page.server.ts

@@ -0,0 +1 @@
+export const prerender = true;

package/templates/demo/src/routes/(public)/about/+page.svelte

@@ -0,0 +1,31 @@
+<svelte:head>
+    <title>About | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="space-y-6 max-w-2xl">
+    <h1 class="text-4xl font-bold tracking-tight">About {{PROJECT_NAME}}</h1>
+    <p class="text-muted-foreground text-lg">
+        A minimalist fullstack framework built on Bun, ElysiaJS, and Svelte 5.
+    </p>
+
+    <ul class="space-y-2 text-foreground">
+        {#each [
+            "Bun runtime — fast builds, native TypeScript",
+            "ElysiaJS — HTTP server with type-safe routing",
+            "Svelte 5 Runes — fine-grained reactivity",
+            "Isomorphic SSR with client hydration",
+            "File-based routing (SvelteKit-compatible conventions)",
+            "Nested layouts and route groups (public), (auth), (admin)",
+            "Dynamic params [slug] and catch-all [...rest]",
+            "Server loaders with parent() data threading",
+            "Hooks — sequence() middleware for auth, logging, etc.",
+            "Component registry — bosbun add button",
+            "Feature registry — bosbun feat login",
+        ] as item}
+            <li class="flex items-start gap-2">
+                <span class="text-primary mt-0.5">✓</span>
+                <span>{item}</span>
+            </li>
+        {/each}
+    </ul>
+</div>

package/templates/demo/src/routes/(public)/all/[...catchall]/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    let { data = {} }: { data?: Record<string, any> } = $props();
+    const segments = $derived(
+        ((data as any)?.params?.catchall ?? "")
+            .split("/")
+            .filter(Boolean)
+    );
+</script>
+
+<svelte:head>
+    <title>Catch-all Demo | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="flex flex-col items-center justify-center py-24 text-center space-y-6">
+    <h1 class="text-3xl font-bold">Catch-all Route Demo</h1>
+    <p class="text-muted-foreground text-sm">
+        This page matches <code class="bg-muted rounded px-1 font-mono">/all/[...catchall]</code>
+    </p>
+
+    {#if segments.length > 0}
+        <div class="mt-2 space-y-1">
+            <p class="text-sm text-muted-foreground">Captured segments:</p>
+            <div class="flex gap-2 flex-wrap justify-center">
+                {#each segments as segment, i}
+                    <span class="bg-muted rounded px-2 py-1 font-mono text-sm">
+                        [{i}] {segment}
+                    </span>
+                {/each}
+            </div>
+        </div>
+    {:else}
+        <p class="text-muted-foreground text-sm italic">No segments captured</p>
+    {/if}
+
+    <a href="/" class="mt-4 rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">
+        Go Home
+    </a>
+</div>

package/templates/demo/src/routes/(public)/blog/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    const posts = [
+        {
+            slug: "hello-world",
+            title: "Hello, World!",
+            date: "2026-03-05",
+            excerpt: "The first post in the demo — a quick intro to the framework.",
+            tags: ["intro", "bosbun"],
+        },
+        {
+            slug: "route-groups",
+            title: "Route Groups Explained",
+            date: "2026-03-04",
+            excerpt: "How (public), (auth), (admin) groups work — invisible in URLs, share layouts.",
+            tags: ["routing", "layouts"],
+        },
+        {
+            slug: "dynamic-params",
+            title: "Dynamic Params with [slug]",
+            date: "2026-03-03",
+            excerpt: "Using [slug] segments to match any value and pass it to server loaders.",
+            tags: ["routing", "dynamic"],
+        },
+    ];
+</script>
+
+<svelte:head>
+    <title>Blog | {{PROJECT_NAME}}</title>
+</svelte:head>
+
+<div class="space-y-8">
+    <div class="space-y-2">
+        <h1 class="text-4xl font-bold tracking-tight">Blog</h1>
+        <p class="text-muted-foreground">Routing patterns and framework internals.</p>
+    </div>
+
+    <div class="grid gap-4" data-bosbun-preload="hover">
+        {#each posts as post}
+            <a href="/blog/{post.slug}" class="group block rounded-lg border bg-card p-5 hover:border-primary transition-colors">
+                <div class="flex items-start justify-between gap-4">
+                    <div class="space-y-1">
+                        <p class="font-semibold group-hover:text-primary transition-colors">{post.title}</p>
+                        <p class="text-xs text-muted-foreground font-mono">{post.date}</p>
+                    </div>
+                    <div class="flex gap-1 shrink-0">
+                        {#each post.tags as tag}
+                            <span class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">{tag}</span>
+                        {/each}
+                    </div>
+                </div>
+                <p class="mt-2 text-sm text-muted-foreground">{post.excerpt}</p>
+            </a>
+        {/each}
+    </div>
+</div>