@jant/core 0.0.1

package/src/routes/api/upload.ts

@@ -0,0 +1,240 @@
+/**
+ * Upload API Routes
+ *
+ * Handles file uploads to R2 storage.
+ * Supports both JSON and SSE (Datastar) responses.
+ */
+
+import { Hono } from "hono";
+import { html } from "hono/html";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { requireAuthApi } from "../../middleware/auth.js";
+import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import { sse } from "../../lib/sse.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const uploadApiRoutes = new Hono<Env>();
+
+// Require auth for all upload routes
+uploadApiRoutes.use("*", requireAuthApi());
+
+/**
+ * Render a media card HTML string for SSE response
+ */
+function renderMediaCard(
+  media: { id: string; r2Key: string; mimeType: string; originalName: string; alt: string | null; size: number },
+  r2PublicUrl?: string,
+  imageTransformUrl?: string
+): string {
+  const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+  const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
+    width: 300,
+    quality: 80,
+    format: "auto",
+    fit: "cover",
+  });
+  const isImage = media.mimeType.startsWith("image/");
+  const displayName = media.alt || media.originalName;
+  const sizeStr = formatSize(media.size);
+
+  if (isImage) {
+    return html`
+      <div class="group relative" data-media-id="${media.id}">
+        <button
+          type="button"
+          class="block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer"
+          data-on-click="$$lightboxSrc = '${fullUrl}'; document.getElementById('lightbox').showModal()"
+        >
+          <img
+            src="${thumbnailUrl}"
+            alt="${displayName}"
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </button>
+        <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+          ${media.originalName}
+        </a>
+        <div class="text-xs text-muted-foreground">${sizeStr}</div>
+      </div>
+    `.toString();
+  }
+
+  return html`
+    <div class="group relative" data-media-id="${media.id}">
+      <a
+        href="/dash/media/${media.id}"
+        class="block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary"
+      >
+        <div class="w-full h-full flex items-center justify-center text-muted-foreground">
+          <span class="text-xs">${media.mimeType}</span>
+        </div>
+      </a>
+      <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+        ${media.originalName}
+      </a>
+      <div class="text-xs text-muted-foreground">${sizeStr}</div>
+    </div>
+  `.toString();
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Check if request wants SSE response (from Datastar)
+ */
+function wantsSSE(c: { req: { header: (name: string) => string | undefined } }): boolean {
+  const accept = c.req.header("accept") || "";
+  return accept.includes("text/event-stream");
+}
+
+// Upload a file
+uploadApiRoutes.post("/", async (c) => {
+  if (!c.env.R2) {
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.patchSignals({ _uploadError: "R2 storage not configured" });
+      });
+    }
+    return c.json({ error: "R2 storage not configured" }, 500);
+  }
+
+  const formData = await c.req.formData();
+  const file = formData.get("file") as File | null;
+
+  if (!file) {
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.patchSignals({ _uploadError: "No file provided" });
+      });
+    }
+    return c.json({ error: "No file provided" }, 400);
+  }
+
+  // Validate file type
+  const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+  if (!allowedTypes.includes(file.type)) {
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.patchSignals({ _uploadError: "File type not allowed" });
+      });
+    }
+    return c.json({ error: "File type not allowed" }, 400);
+  }
+
+  // Validate file size (max 10MB)
+  const maxSize = 10 * 1024 * 1024;
+  if (file.size > maxSize) {
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.patchSignals({ _uploadError: "File too large (max 10MB)" });
+      });
+    }
+    return c.json({ error: "File too large (max 10MB)" }, 400);
+  }
+
+  // Generate unique filename
+  const ext = file.name.split(".").pop() || "bin";
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substring(2, 8);
+  const filename = `${timestamp}-${random}.${ext}`;
+  const r2Key = `uploads/${filename}`;
+
+  try {
+    // Upload to R2
+    await c.env.R2.put(r2Key, file.stream(), {
+      httpMetadata: {
+        contentType: file.type,
+      },
+    });
+
+    // Save to database
+    const media = await c.var.services.media.create({
+      filename,
+      originalName: file.name,
+      mimeType: file.type,
+      size: file.size,
+      r2Key,
+    });
+
+    // SSE response for Datastar
+    if (wantsSSE(c)) {
+      const cardHtml = renderMediaCard(
+        media,
+        c.env.R2_PUBLIC_URL,
+        c.env.IMAGE_TRANSFORM_URL
+      );
+
+      return sse(c, async (stream) => {
+        // Replace placeholder with real media card
+        await stream.patchElements(cardHtml, {
+          mode: "outer",
+          selector: "#upload-placeholder",
+        });
+      });
+    }
+
+    // JSON response for API clients
+    const publicUrl = getMediaUrl(media.id, r2Key, c.env.R2_PUBLIC_URL);
+    return c.json({
+      id: media.id,
+      filename: media.filename,
+      url: publicUrl,
+      mimeType: media.mimeType,
+      size: media.size,
+    });
+  } catch (err) {
+    // eslint-disable-next-line no-console -- Error logging is intentional
+    console.error("Upload error:", err);
+
+    // Return error - client will handle updating the placeholder
+    return c.json({ error: "Upload failed" }, 500);
+  }
+});
+
+// List uploaded files (JSON only)
+uploadApiRoutes.get("/", async (c) => {
+  const limit = parseInt(c.req.query("limit") ?? "50", 10);
+  const mediaList = await c.var.services.media.list(limit);
+
+  return c.json({
+    media: mediaList.map((m) => ({
+      id: m.id,
+      filename: m.filename,
+      url: getMediaUrl(m.id, m.r2Key, c.env.R2_PUBLIC_URL),
+      mimeType: m.mimeType,
+      size: m.size,
+      createdAt: m.createdAt,
+    })),
+  });
+});
+
+// Delete a file
+uploadApiRoutes.delete("/:id", async (c) => {
+  const id = c.req.param("id");
+  const media = await c.var.services.media.getById(id);
+  if (!media) {
+    return c.json({ error: "Not found" }, 404);
+  }
+
+  // Delete from R2
+  if (c.env.R2) {
+    try {
+      await c.env.R2.delete(media.r2Key);
+    } catch (err) {
+      // eslint-disable-next-line no-console -- Error logging is intentional
+      console.error("R2 delete error:", err);
+    }
+  }
+
+  // Delete from database
+  await c.var.services.media.delete(id);
+
+  return c.json({ success: true });
+});

package/src/routes/dash/collections.tsx

@@ -0,0 +1,341 @@
+/**
+ * Dashboard Collections Routes
+ */
+
+import { Hono } from "hono";
+import { useLingui } from "../../i18n/index.js";
+import type { Bindings, Collection, Post } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { DashLayout } from "../../theme/layouts/index.js";
+import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader, DangerZone } from "../../theme/components/index.js";
+import * as sqid from "../../lib/sqid.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const collectionsRoutes = new Hono<Env>();
+
+function CollectionsListContent({ collections }: { collections: Collection[] }) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({ message: "Collections", comment: "@context: Dashboard heading" })}
+        ctaLabel={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+        ctaHref="/dash/collections/new"
+      />
+
+      {collections.length === 0 ? (
+        <EmptyState
+          message={t({ message: "No collections yet.", comment: "@context: Empty state message" })}
+          ctaText={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+          ctaHref="/dash/collections/new"
+        />
+      ) : (
+        <div class="flex flex-col divide-y">
+          {collections.map((col) => (
+            <ListItemRow
+              key={col.id}
+              actions={
+                <ActionButtons
+                  editHref={`/dash/collections/${col.id}/edit`}
+                  editLabel={t({ message: "Edit", comment: "@context: Button to edit collection" })}
+                  viewHref={`/c/${col.path}`}
+                  viewLabel={t({ message: "View", comment: "@context: Button to view collection" })}
+                />
+              }
+            >
+              <a href={`/dash/collections/${col.id}`} class="font-medium hover:underline">
+                {col.title}
+              </a>
+              <p class="text-sm text-muted-foreground">/{col.path}</p>
+              {col.description && (
+                <p class="text-sm text-muted-foreground mt-1">{col.description}</p>
+              )}
+            </ListItemRow>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function NewCollectionContent() {
+  const { t } = useLingui();
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{t({ message: "New Collection", comment: "@context: Page heading" })}</h1>
+
+      <form method="post" action="/dash/collections" class="flex flex-col gap-4 max-w-lg">
+        <div class="field">
+          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
+          <input type="text" name="title" class="input" required placeholder={t({ message: "My Collection", comment: "@context: Collection title placeholder" })} />
+        </div>
+
+        <div class="field">
+          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <input
+            type="text"
+            name="path"
+            class="input"
+            required
+            placeholder="my-collection"
+            pattern="[a-z0-9-]+"
+          />
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({ message: "URL-safe identifier (lowercase, numbers, hyphens)", comment: "@context: Collection path help text" })}
+          </p>
+        </div>
+
+        <div class="field">
+          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
+          <textarea name="description" class="textarea" rows={3} placeholder={t({ message: "What's this collection about?", comment: "@context: Collection description placeholder" })} />
+        </div>
+
+        <div class="flex gap-2">
+          <button type="submit" class="btn">
+            {t({ message: "Create Collection", comment: "@context: Button to save new collection" })}
+          </button>
+          <a href="/dash/collections" class="btn-outline">
+            {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+          </a>
+        </div>
+      </form>
+    </>
+  );
+}
+
+function ViewCollectionContent({ collection, posts }: { collection: Collection; posts: Post[] }) {
+  const { t } = useLingui();
+  const postsHeader = t({ message: "Posts in Collection ({count})", comment: "@context: Collection posts section heading", values: { count: String(posts.length) } });
+
+  return (
+    <>
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h1 class="text-2xl font-semibold">{collection.title}</h1>
+          <p class="text-sm text-muted-foreground">/{collection.path}</p>
+        </div>
+        <ActionButtons
+          editHref={`/dash/collections/${collection.id}/edit`}
+          editLabel={t({ message: "Edit", comment: "@context: Button to edit collection" })}
+          viewHref={`/c/${collection.path}`}
+          viewLabel={t({ message: "View", comment: "@context: Button to view collection" })}
+        />
+      </div>
+
+      {collection.description && (
+        <p class="text-muted-foreground mb-6">{collection.description}</p>
+      )}
+
+      <div class="card">
+        <header>
+          <h2>{postsHeader}</h2>
+        </header>
+        <section>
+          {posts.length === 0 ? (
+            <p class="text-muted-foreground">{t({ message: "No posts in this collection.", comment: "@context: Empty state message" })}</p>
+          ) : (
+            <div class="flex flex-col divide-y">
+              {posts.map((post) => (
+                <div key={post.id} class="py-3 flex items-center gap-4">
+                  <div class="flex-1 min-w-0">
+                    <a
+                      href={`/dash/posts/${sqid.encode(post.id)}`}
+                      class="font-medium hover:underline"
+                    >
+                      {post.title || post.content?.slice(0, 50) || `Post #${post.id}`}
+                    </a>
+                  </div>
+                  <form method="post" action={`/dash/collections/${collection.id}/remove-post`}>
+                    <input type="hidden" name="postId" value={post.id} />
+                    <button type="submit" class="btn-sm-ghost text-destructive">
+                      {t({ message: "Remove", comment: "@context: Button to remove post from collection" })}
+                    </button>
+                  </form>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+
+      <div class="mt-6">
+        <a href="/dash/collections" class="text-sm hover:underline">
+          {t({ message: "← Back to Collections", comment: "@context: Navigation link" })}
+        </a>
+      </div>
+    </>
+  );
+}
+
+function EditCollectionContent({ collection }: { collection: Collection }) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{t({ message: "Edit Collection", comment: "@context: Page heading" })}</h1>
+
+      <form method="post" action={`/dash/collections/${collection.id}`} class="flex flex-col gap-4 max-w-lg">
+        <div class="field">
+          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
+          <input type="text" name="title" class="input" required value={collection.title} />
+        </div>
+
+        <div class="field">
+          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <input
+            type="text"
+            name="path"
+            class="input"
+            required
+            value={collection.path ?? ""}
+            pattern="[a-z0-9-]+"
+          />
+        </div>
+
+        <div class="field">
+          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
+          <textarea name="description" class="textarea" rows={3}>
+            {collection.description ?? ""}
+          </textarea>
+        </div>
+
+        <div class="flex gap-2">
+          <button type="submit" class="btn">
+            {t({ message: "Update Collection", comment: "@context: Button to save collection changes" })}
+          </button>
+          <a href={`/dash/collections/${collection.id}`} class="btn-outline">
+            {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+          </a>
+        </div>
+      </form>
+
+      <DangerZone
+        actionLabel={t({ message: "Delete Collection", comment: "@context: Button to delete collection" })}
+        formAction={`/dash/collections/${collection.id}/delete`}
+        confirmMessage="Are you sure you want to delete this collection?"
+      />
+    </>
+  );
+}
+
+// List collections
+collectionsRoutes.get("/", async (c) => {
+  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const collections = await c.var.services.collections.list();
+
+  return c.html(
+    <DashLayout c={c} title="Collections" siteName={siteName} currentPath="/dash/collections">
+      <CollectionsListContent collections={collections} />
+    </DashLayout>
+  );
+});
+
+// New collection form
+collectionsRoutes.get("/new", async (c) => {
+  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+
+  return c.html(
+    <DashLayout c={c} title="New Collection" siteName={siteName} currentPath="/dash/collections">
+      <NewCollectionContent />
+    </DashLayout>
+  );
+});
+
+// Create collection
+collectionsRoutes.post("/", async (c) => {
+  const formData = await c.req.formData();
+
+  const title = formData.get("title") as string;
+  const path = formData.get("path") as string;
+  const description = formData.get("description") as string;
+
+  const collection = await c.var.services.collections.create({
+    title,
+    path,
+    description: description || undefined,
+  });
+
+  return c.redirect(`/dash/collections/${collection.id}`);
+});
+
+// View single collection
+collectionsRoutes.get("/:id", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const collection = await c.var.services.collections.getById(id);
+  if (!collection) return c.notFound();
+
+  const posts = await c.var.services.collections.getPosts(id);
+  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+
+  return c.html(
+    <DashLayout c={c} title={collection.title} siteName={siteName} currentPath="/dash/collections">
+      <ViewCollectionContent collection={collection} posts={posts} />
+    </DashLayout>
+  );
+});
+
+// Edit collection form
+collectionsRoutes.get("/:id/edit", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const collection = await c.var.services.collections.getById(id);
+  if (!collection) return c.notFound();
+
+  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+
+  return c.html(
+    <DashLayout c={c} title={`Edit: ${collection.title}`} siteName={siteName} currentPath="/dash/collections">
+      <EditCollectionContent collection={collection} />
+    </DashLayout>
+  );
+});
+
+// Update collection
+collectionsRoutes.post("/:id", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const formData = await c.req.formData();
+
+  const title = formData.get("title") as string;
+  const path = formData.get("path") as string;
+  const description = formData.get("description") as string;
+
+  await c.var.services.collections.update(id, {
+    title,
+    path,
+    description: description || undefined,
+  });
+
+  return c.redirect(`/dash/collections/${id}`);
+});
+
+// Delete collection
+collectionsRoutes.post("/:id/delete", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  await c.var.services.collections.delete(id);
+
+  return c.redirect("/dash/collections");
+});
+
+// Remove post from collection
+collectionsRoutes.post("/:id/remove-post", async (c) => {
+  const id = parseInt(c.req.param("id"), 10);
+  if (isNaN(id)) return c.notFound();
+
+  const formData = await c.req.formData();
+  const postId = parseInt(formData.get("postId") as string, 10);
+
+  if (!isNaN(postId)) {
+    await c.var.services.collections.removePost(id, postId);
+  }
+
+  return c.redirect(`/dash/collections/${id}`);
+});

package/src/routes/dash/index.tsx

@@ -0,0 +1,89 @@
+/**
+ * Dashboard Index Route
+ *
+ * Example of using @lingui/react/macro with Hono JSX!
+ */
+
+import { Hono } from "hono";
+import { Trans, useLingui } from "../../i18n/index.js";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { DashLayout } from "../../theme/layouts/index.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export const dashIndexRoutes = new Hono<Env>();
+
+/**
+ * Dashboard content component
+ * Uses useLingui() from @lingui/react/macro - works with Hono JSX!
+ */
+function DashboardContent({
+  publishedCount,
+  draftCount,
+}: {
+  publishedCount: number;
+  draftCount: number;
+}) {
+  // 🎉 Single layer! Just like React!
+  const { t } = useLingui();
+
+  return (
+    <div class="container py-8">
+      <h1 class="text-2xl font-semibold mb-6">
+        {/* ✅ No more nesting! */}
+        {t({ message: "Dashboard", comment: "@context: Dashboard main heading" })}
+      </h1>
+
+      <div class="grid gap-4 md:grid-cols-3 mb-6">
+        <div class="p-4 border rounded">
+          <p class="text-sm text-muted-foreground">
+            {t({ message: "Published", comment: "@context: Post status label" })}
+          </p>
+          <p class="text-3xl font-bold">{publishedCount}</p>
+        </div>
+
+        <div class="p-4 border rounded">
+          <p class="text-sm text-muted-foreground">
+            {t({ message: "Drafts", comment: "@context: Post status label" })}
+          </p>
+          <p class="text-3xl font-bold">{draftCount}</p>
+        </div>
+
+        <div class="p-4 border rounded">
+          <p class="text-sm text-muted-foreground mb-2">
+            {t({ message: "Quick Actions", comment: "@context: Dashboard section title" })}
+          </p>
+          <a href="/dash/posts/new" class="btn btn-primary w-full">
+            {t({ message: "New Post", comment: "@context: Button to create new post" })}
+          </a>
+        </div>
+      </div>
+
+      {/* ✅ Trans component with embedded JSX! */}
+      <p>
+        <Trans comment="@context: Help text with link">
+          Need help? Visit the <a href="/docs" class="underline">documentation</a>
+        </Trans>
+      </p>
+    </div>
+  );
+}
+
+dashIndexRoutes.get("/", async (c) => {
+  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+
+  // Get some stats
+  const allPosts = await c.var.services.posts.list({ limit: 1000 });
+  const publishedPosts = allPosts.filter((p) => p.visibility !== "draft");
+  const draftPosts = allPosts.filter((p) => p.visibility === "draft");
+
+  return c.html(
+    <DashLayout c={c} title="Dashboard" siteName={siteName} currentPath="/dash">
+      <DashboardContent
+        publishedCount={publishedPosts.length}
+        draftCount={draftPosts.length}
+      />
+    </DashLayout>
+  );
+});