@jant/core 0.2.11 → 0.2.13

package/src/routes/dash/media.tsx

@@ -6,13 +6,14 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Media } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -102,10 +103,22 @@ function MediaListContent({
 }) {
   const { t } = useLingui();
 
-  const processingText = t({ message: "Processing...", comment: "@context: Upload status - processing" });
-  const uploadingText = t({ message: "Uploading...", comment: "@context: Upload status - uploading" });
-  const uploadText = t({ message: "Upload", comment: "@context: Button to upload media file" });
-  const errorText = t({ message: "Upload failed. Please try again.", comment: "@context: Upload error message" });
+  const processingText = t({
+    message: "Processing...",
+    comment: "@context: Upload status - processing",
+  });
+  const uploadingText = t({
+    message: "Uploading...",
+    comment: "@context: Upload status - uploading",
+  });
+  const uploadText = t({
+    message: "Upload",
+    comment: "@context: Button to upload media file",
+  });
+  const errorText = t({
+    message: "Upload failed. Please try again.",
+    comment: "@context: Upload error message",
+  });
 
   // Plain JavaScript upload handler - shows progress in the list
   const uploadScript = `
@@ -289,8 +302,10 @@ function processSSEEvent(event) {
         <section class="text-sm text-muted-foreground">
           <p>
             {t({
-              message: "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
-              comment: "@context: Media upload instructions - auto optimization",
+              message:
+                "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
+              comment:
+                "@context: Media upload instructions - auto optimization",
             })}
           </p>
         </section>
@@ -330,7 +345,12 @@ function processSSEEvent(event) {
         class="p-0 m-auto bg-transparent backdrop:bg-black/80"
         onclick="event.target === this && this.close()"
       >
-        <img id="lightbox-img" src="" alt="" class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg" />
+        <img
+          id="lightbox-img"
+          src=""
+          alt=""
+          class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+        />
       </dialog>
     </>
   );
@@ -363,11 +383,15 @@ function ViewMediaContent({
         <div>
           <h1 class="text-2xl font-semibold">{media.originalName}</h1>
           <p class="text-muted-foreground mt-1">
-            {formatSize(media.size)} · {media.mimeType} · {time.formatDate(media.createdAt)}
+            {formatSize(media.size)} · {media.mimeType} ·{" "}
+            {time.formatDate(media.createdAt)}
           </p>
         </div>
         <a href="/dash/media" class="btn-outline">
-          {t({ message: "Back", comment: "@context: Button to go back to media list" })}
+          {t({
+            message: "Back",
+            comment: "@context: Button to go back to media list",
+          })}
         </a>
       </div>
 
@@ -375,7 +399,12 @@ function ViewMediaContent({
         {/* Preview */}
         <div class="card">
           <header>
-            <h2>{t({ message: "Preview", comment: "@context: Media detail section - preview" })}</h2>
+            <h2>
+              {t({
+                message: "Preview",
+                comment: "@context: Media detail section - preview",
+              })}
+            </h2>
           </header>
           <section>
             {isImage ? (
@@ -392,7 +421,10 @@ function ViewMediaContent({
                   />
                 </button>
                 <p class="text-xs text-muted-foreground mt-2">
-                  {t({ message: "Click image to view full size", comment: "@context: Hint to click image for lightbox" })}
+                  {t({
+                    message: "Click image to view full size",
+                    comment: "@context: Hint to click image for lightbox",
+                  })}
                 </p>
               </>
             ) : (
@@ -407,7 +439,12 @@ function ViewMediaContent({
         <div class="space-y-6">
           <div class="card">
             <header>
-              <h2>{t({ message: "URL", comment: "@context: Media detail section - URL" })}</h2>
+              <h2>
+                {t({
+                  message: "URL",
+                  comment: "@context: Media detail section - URL",
+                })}
+              </h2>
             </header>
             <section>
               <div class="flex items-center gap-2">
@@ -422,18 +459,29 @@ function ViewMediaContent({
                   class="btn-outline"
                   onclick={`navigator.clipboard.writeText('${url}')`}
                 >
-                  {t({ message: "Copy", comment: "@context: Button to copy URL to clipboard" })}
+                  {t({
+                    message: "Copy",
+                    comment: "@context: Button to copy URL to clipboard",
+                  })}
                 </button>
               </div>
               <p class="text-xs text-muted-foreground mt-2">
-                {t({ message: "Use this URL to embed the media in your posts.", comment: "@context: Media URL helper text" })}
+                {t({
+                  message: "Use this URL to embed the media in your posts.",
+                  comment: "@context: Media URL helper text",
+                })}
               </p>
             </section>
           </div>
 
           <div class="card">
             <header>
-              <h2>{t({ message: "Markdown", comment: "@context: Media detail section - Markdown snippet" })}</h2>
+              <h2>
+                {t({
+                  message: "Markdown",
+                  comment: "@context: Media detail section - Markdown snippet",
+                })}
+              </h2>
             </header>
             <section>
               <div class="flex items-center gap-2">
@@ -448,7 +496,10 @@ function ViewMediaContent({
                   class="btn-outline"
                   onclick={`navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`}
                 >
-                  {t({ message: "Copy", comment: "@context: Button to copy Markdown to clipboard" })}
+                  {t({
+                    message: "Copy",
+                    comment: "@context: Button to copy Markdown to clipboard",
+                  })}
                 </button>
               </div>
             </section>
@@ -456,10 +507,17 @@ function ViewMediaContent({
 
           {/* Delete */}
           <DangerZone
-            actionLabel={t({ message: "Delete Media", comment: "@context: Button to delete media" })}
+            actionLabel={t({
+              message: "Delete Media",
+              comment: "@context: Button to delete media",
+            })}
             formAction={`/dash/media/${media.id}/delete`}
             confirmMessage="Are you sure you want to delete this media?"
-            description={t({ message: "Deleting this media will remove it permanently from storage.", comment: "@context: Warning message before deleting media" })}
+            description={t({
+              message:
+                "Deleting this media will remove it permanently from storage.",
+              comment: "@context: Warning message before deleting media",
+            })}
           />
         </div>
       </div>
@@ -491,13 +549,18 @@ mediaRoutes.get("/", async (c) => {
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 
   return c.html(
-    <DashLayout c={c} title="Media" siteName={siteName} currentPath="/dash/media">
+    <DashLayout
+      c={c}
+      title="Media"
+      siteName={siteName}
+      currentPath="/dash/media"
+    >
       <MediaListContent
         mediaList={mediaList}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -512,13 +575,18 @@ mediaRoutes.get("/:id", async (c) => {
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
 
   return c.html(
-    <DashLayout c={c} title={media.originalName} siteName={siteName} currentPath="/dash/media">
+    <DashLayout
+      c={c}
+      title={media.originalName}
+      siteName={siteName}
+      currentPath="/dash/media"
+    >
       <ViewMediaContent
         media={media}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
       />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -541,5 +609,7 @@ mediaRoutes.post("/:id/delete", async (c) => {
   // Delete from database
   await c.var.services.media.delete(id);
 
-  return c.redirect("/dash/media");
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/media");
+  });
 });

package/src/routes/dash/pages.tsx

@@ -5,14 +5,22 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
-import { PageForm, VisibilityBadge, EmptyState, ListItemRow, ActionButtons, CrudPageHeader, DangerZone } from "../../theme/components/index.js";
+import {
+  PageForm,
+  VisibilityBadge,
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+  DangerZone,
+} from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { VisibilitySchema, parseFormData } from "../../lib/schemas.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -25,14 +33,23 @@ function PagesListContent({ pages }: { pages: Post[] }) {
     <>
       <CrudPageHeader
         title={t({ message: "Pages", comment: "@context: Pages main heading" })}
-        ctaLabel={t({ message: "New Page", comment: "@context: Button to create new page" })}
+        ctaLabel={t({
+          message: "New Page",
+          comment: "@context: Button to create new page",
+        })}
         ctaHref="/dash/pages/new"
       />
 
       {pages.length === 0 ? (
         <EmptyState
-          message={t({ message: "No pages yet.", comment: "@context: Empty state message when no pages exist" })}
-          ctaText={t({ message: "Create your first page", comment: "@context: Button in empty state to create first page" })}
+          message={t({
+            message: "No pages yet.",
+            comment: "@context: Empty state message when no pages exist",
+          })}
+          ctaText={t({
+            message: "Create your first page",
+            comment: "@context: Button in empty state to create first page",
+          })}
           ctaHref="/dash/pages/new"
         />
       ) : (
@@ -43,9 +60,19 @@ function PagesListContent({ pages }: { pages: Post[] }) {
               actions={
                 <ActionButtons
                   editHref={`/dash/pages/${sqid.encode(page.id)}/edit`}
-                  editLabel={t({ message: "Edit", comment: "@context: Button to edit page" })}
-                  viewHref={page.visibility !== "draft" && page.path ? `/${page.path}` : undefined}
-                  viewLabel={t({ message: "View", comment: "@context: Button to view page on public site" })}
+                  editLabel={t({
+                    message: "Edit",
+                    comment: "@context: Button to edit page",
+                  })}
+                  viewHref={
+                    page.visibility !== "draft" && page.path
+                      ? `/${page.path}`
+                      : undefined
+                  }
+                  viewLabel={t({
+                    message: "View",
+                    comment: "@context: Button to view page on public site",
+                  })}
                 />
               }
             >
@@ -59,11 +86,13 @@ function PagesListContent({ pages }: { pages: Post[] }) {
                 href={`/dash/pages/${sqid.encode(page.id)}`}
                 class="font-medium hover:underline"
               >
-                {page.title || t({ message: "Untitled", comment: "@context: Default title for untitled page" })}
+                {page.title ||
+                  t({
+                    message: "Untitled",
+                    comment: "@context: Default title for untitled page",
+                  })}
               </a>
-              <p class="text-sm text-muted-foreground mt-1">
-                /{page.path}
-              </p>
+              <p class="text-sm text-muted-foreground mt-1">/{page.path}</p>
             </ListItemRow>
           ))}
         </div>
@@ -90,27 +119,47 @@ function ViewPageContent({ page }: { page: Post }) {
     <>
       <div class="flex items-center justify-between mb-6">
         <div>
-          <h1 class="text-2xl font-semibold">{page.title || t({ message: "Page", comment: "@context: Default page heading when untitled" })}</h1>
-          {page.path && (
-            <p class="text-muted-foreground mt-1">/{page.path}</p>
-          )}
+          <h1 class="text-2xl font-semibold">
+            {page.title ||
+              t({
+                message: "Page",
+                comment: "@context: Default page heading when untitled",
+              })}
+          </h1>
+          {page.path && <p class="text-muted-foreground mt-1">/{page.path}</p>}
         </div>
         <ActionButtons
           editHref={`/dash/pages/${sqid.encode(page.id)}/edit`}
-          editLabel={t({ message: "Edit", comment: "@context: Button to edit page" })}
-          viewHref={page.visibility !== "draft" && page.path ? `/${page.path}` : undefined}
-          viewLabel={t({ message: "View", comment: "@context: Button to view page on public site" })}
+          editLabel={t({
+            message: "Edit",
+            comment: "@context: Button to edit page",
+          })}
+          viewHref={
+            page.visibility !== "draft" && page.path
+              ? `/${page.path}`
+              : undefined
+          }
+          viewLabel={t({
+            message: "View",
+            comment: "@context: Button to view page on public site",
+          })}
         />
       </div>
 
       <div class="card">
         <section>
-          <div class="prose" dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }} />
+          <div
+            class="prose"
+            dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
+          />
         </section>
       </div>
 
       <DangerZone
-        actionLabel={t({ message: "Delete Page", comment: "@context: Button to delete page" })}
+        actionLabel={t({
+          message: "Delete Page",
+          comment: "@context: Button to delete page",
+        })}
         formAction={`/dash/pages/${sqid.encode(page.id)}/delete`}
         confirmMessage="Are you sure you want to delete this page?"
       />
@@ -123,7 +172,10 @@ function EditPageContent({ page }: { page: Post }) {
   return (
     <>
       <h1 class="text-2xl font-semibold mb-6">
-        {t({ message: "Edit Page", comment: "@context: Edit page main heading" })}
+        {t({
+          message: "Edit Page",
+          comment: "@context: Edit page main heading",
+        })}
       </h1>
       <PageForm page={page} action={`/dash/pages/${sqid.encode(page.id)}`} />
     </>
@@ -140,9 +192,14 @@ pagesRoutes.get("/", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="Pages" siteName={siteName} currentPath="/dash/pages">
+    <DashLayout
+      c={c}
+      title="Pages"
+      siteName={siteName}
+      currentPath="/dash/pages"
+    >
       <PagesListContent pages={pages} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -151,30 +208,37 @@ pagesRoutes.get("/new", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="New Page" siteName={siteName} currentPath="/dash/pages">
+    <DashLayout
+      c={c}
+      title="New Page"
+      siteName={siteName}
+      currentPath="/dash/pages"
+    >
       <NewPageContent />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
 // Create page
 pagesRoutes.post("/", async (c) => {
-  const formData = await c.req.formData();
-
-  const title = formData.get("title") as string;
-  const content = formData.get("content") as string;
-  const visibility = parseFormData(formData, "visibility", VisibilitySchema);
-  const path = formData.get("path") as string;
+  const body = await c.req.json<{
+    title: string;
+    content: string;
+    visibility: string;
+    path: string;
+  }>();
 
   const page = await c.var.services.posts.create({
     type: "page",
-    title,
-    content,
-    visibility,
-    path: path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
+    title: body.title,
+    content: body.content,
+    visibility: body.visibility as Post["visibility"],
+    path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
 
-  return c.redirect(`/dash/pages/${sqid.encode(page.id)}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/pages/${sqid.encode(page.id)}`);
+  });
 });
 
 // View single page
@@ -188,9 +252,14 @@ pagesRoutes.get("/:id", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={page.title || "Page"} siteName={siteName} currentPath="/dash/pages">
+    <DashLayout
+      c={c}
+      title={page.title || "Page"}
+      siteName={siteName}
+      currentPath="/dash/pages"
+    >
       <ViewPageContent page={page} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -205,9 +274,14 @@ pagesRoutes.get("/:id/edit", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={`Edit: ${page.title || "Page"}`} siteName={siteName} currentPath="/dash/pages">
+    <DashLayout
+      c={c}
+      title={`Edit: ${page.title || "Page"}`}
+      siteName={siteName}
+      currentPath="/dash/pages"
+    >
       <EditPageContent page={page} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -216,22 +290,24 @@ pagesRoutes.post("/:id", async (c) => {
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.notFound();
 
-  const formData = await c.req.formData();
-
-  const title = formData.get("title") as string;
-  const content = formData.get("content") as string;
-  const visibility = parseFormData(formData, "visibility", VisibilitySchema);
-  const path = formData.get("path") as string;
+  const body = await c.req.json<{
+    title: string;
+    content: string;
+    visibility: string;
+    path: string;
+  }>();
 
   await c.var.services.posts.update(id, {
     type: "page",
-    title,
-    content,
-    visibility,
-    path: path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
+    title: body.title,
+    content: body.content,
+    visibility: body.visibility as Post["visibility"],
+    path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
 
-  return c.redirect(`/dash/pages/${sqid.encode(id)}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/pages/${sqid.encode(id)}`);
+  });
 });
 
 // Delete page
@@ -241,5 +317,7 @@ pagesRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.posts.delete(id);
 
-  return c.redirect("/dash/pages");
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/pages");
+  });
 });