@jant/core 0.2.12 → 0.2.13

package/src/routes/dash/pages.tsx

@@ -5,7 +5,7 @@
  */
 
 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";
@@ -20,7 +20,7 @@ import {
 } 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 };
 
@@ -33,7 +33,10 @@ 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"
       />
 
@@ -57,8 +60,15 @@ 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}
+                  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",
@@ -68,11 +78,19 @@ function PagesListContent({ pages }: { pages: Post[] }) {
             >
               <div class="flex items-center gap-2 mb-1">
                 <VisibilityBadge visibility={page.visibility} />
-                <span class="text-xs text-muted-foreground">{time.formatDate(page.updatedAt)}</span>
+                <span class="text-xs text-muted-foreground">
+                  {time.formatDate(page.updatedAt)}
+                </span>
               </div>
-              <a href={`/dash/pages/${sqid.encode(page.id)}`} class="font-medium hover:underline">
+              <a
+                href={`/dash/pages/${sqid.encode(page.id)}`}
+                class="font-medium hover:underline"
+              >
                 {page.title ||
-                  t({ message: "Untitled", comment: "@context: Default title for untitled page" })}
+                  t({
+                    message: "Untitled",
+                    comment: "@context: Default title for untitled page",
+                  })}
               </a>
               <p class="text-sm text-muted-foreground mt-1">/{page.path}</p>
             </ListItemRow>
@@ -103,14 +121,24 @@ function ViewPageContent({ page }: { page: Post }) {
         <div>
           <h1 class="text-2xl font-semibold">
             {page.title ||
-              t({ message: "Page", comment: "@context: Default page heading when untitled" })}
+              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}
+          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",
@@ -120,12 +148,18 @@ function ViewPageContent({ page }: { page: Post }) {
 
       <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?"
       />
@@ -138,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)}`} />
     </>
@@ -155,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>,
   );
 });
 
@@ -166,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
@@ -203,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>,
   );
 });
 
@@ -227,7 +281,7 @@ pagesRoutes.get("/:id/edit", async (c) => {
       currentPath="/dash/pages"
     >
       <EditPageContent page={page} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -236,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
@@ -261,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");
+  });
 });

package/src/routes/dash/posts.tsx

@@ -3,19 +3,18 @@
  */
 
 import { Hono } from "hono";
-import { z } from "zod";
-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 { PostForm, PostList, CrudPageHeader, ActionButtons } from "../../theme/components/index.js";
-import * as sqid from "../../lib/sqid.js";
 import {
-  PostTypeSchema,
-  VisibilitySchema,
-  parseFormData,
-  parseFormDataOptional,
-} from "../../lib/schemas.js";
+  PostForm,
+  PostList,
+  CrudPageHeader,
+  ActionButtons,
+} from "../../theme/components/index.js";
+import * as sqid from "../../lib/sqid.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -27,7 +26,10 @@ function PostsListContent({ posts }: { posts: Post[] }) {
     <>
       <CrudPageHeader
         title={t({ message: "Posts", comment: "@context: Dashboard heading" })}
-        ctaLabel={t({ message: "New Post", comment: "@context: Button to create new post" })}
+        ctaLabel={t({
+          message: "New Post",
+          comment: "@context: Button to create new post",
+        })}
         ctaHref="/dash/posts/new"
       />
       <PostList posts={posts} />
@@ -55,9 +57,14 @@ postsRoutes.get("/", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="Posts" siteName={siteName} currentPath="/dash/posts">
+    <DashLayout
+      c={c}
+      title="Posts"
+      siteName={siteName}
+      currentPath="/dash/posts"
+    >
       <PostsListContent posts={posts} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -66,39 +73,48 @@ postsRoutes.get("/new", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="New Post" siteName={siteName} currentPath="/dash/posts">
+    <DashLayout
+      c={c}
+      title="New Post"
+      siteName={siteName}
+      currentPath="/dash/posts"
+    >
       <NewPostContent />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
 // Create post
 postsRoutes.post("/", async (c) => {
-  const formData = await c.req.formData();
-
-  // Validate and parse form data
-  const type = parseFormData(formData, "type", PostTypeSchema);
-  const visibility = parseFormData(formData, "visibility", VisibilitySchema);
-  const title = parseFormDataOptional(formData, "title", z.string());
-  const content = formData.get("content") as string;
-  const sourceUrl = parseFormDataOptional(formData, "sourceUrl", z.string());
-  const path = parseFormDataOptional(formData, "path", z.string());
+  const body = await c.req.json<{
+    type: string;
+    title?: string;
+    content: string;
+    visibility: string;
+    sourceUrl?: string;
+    path?: string;
+  }>();
 
   const post = await c.var.services.posts.create({
-    type,
-    title,
-    content,
-    visibility,
-    sourceUrl,
-    path,
+    type: body.type as Post["type"],
+    title: body.title || undefined,
+    content: body.content,
+    visibility: body.visibility as Post["visibility"],
+    sourceUrl: body.sourceUrl || undefined,
+    path: body.path || undefined,
   });
 
-  return c.redirect(`/dash/posts/${sqid.encode(post.id)}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/posts/${sqid.encode(post.id)}`);
+  });
 });
 
 function ViewPostContent({ post }: { post: Post }) {
   const { t } = useLingui();
-  const defaultTitle = t({ message: "Post", comment: "@context: Default post title" });
+  const defaultTitle = t({
+    message: "Post",
+    comment: "@context: Default post title",
+  });
 
   return (
     <>
@@ -106,15 +122,24 @@ function ViewPostContent({ post }: { post: Post }) {
         <h1 class="text-2xl font-semibold">{post.title || defaultTitle}</h1>
         <ActionButtons
           editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-          editLabel={t({ message: "Edit", comment: "@context: Button to edit post" })}
+          editLabel={t({
+            message: "Edit",
+            comment: "@context: Button to edit post",
+          })}
           viewHref={`/p/${sqid.encode(post.id)}`}
-          viewLabel={t({ message: "View", comment: "@context: Button to view post" })}
+          viewLabel={t({
+            message: "View",
+            comment: "@context: Button to view post",
+          })}
         />
       </div>
 
       <div class="card">
         <section>
-          <div class="prose" dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }} />
+          <div
+            class="prose"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+          />
         </section>
       </div>
     </>
@@ -145,9 +170,14 @@ postsRoutes.get("/:id", async (c) => {
   const pageTitle = post.title || "Post";
 
   return c.html(
-    <DashLayout c={c} title={pageTitle} siteName={siteName} currentPath="/dash/posts">
+    <DashLayout
+      c={c}
+      title={pageTitle}
+      siteName={siteName}
+      currentPath="/dash/posts"
+    >
       <ViewPostContent post={post} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -169,7 +199,7 @@ postsRoutes.get("/:id/edit", async (c) => {
       currentPath="/dash/posts"
     >
       <EditPostContent post={post} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -178,26 +208,27 @@ postsRoutes.post("/:id", async (c) => {
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.notFound();
 
-  const formData = await c.req.formData();
-
-  // Validate and parse form data
-  const type = parseFormData(formData, "type", PostTypeSchema);
-  const visibility = parseFormData(formData, "visibility", VisibilitySchema);
-  const title = parseFormDataOptional(formData, "title", z.string()) || null;
-  const content = parseFormDataOptional(formData, "content", z.string()) || null;
-  const sourceUrl = parseFormDataOptional(formData, "sourceUrl", z.string()) || null;
-  const path = parseFormDataOptional(formData, "path", z.string()) || null;
+  const body = await c.req.json<{
+    type: string;
+    title?: string;
+    content?: string;
+    visibility: string;
+    sourceUrl?: string;
+    path?: string;
+  }>();
 
   await c.var.services.posts.update(id, {
-    type,
-    title,
-    content,
-    visibility,
-    sourceUrl,
-    path,
+    type: body.type as Post["type"],
+    title: body.title || null,
+    content: body.content || null,
+    visibility: body.visibility as Post["visibility"],
+    sourceUrl: body.sourceUrl || null,
+    path: body.path || null,
   });
 
-  return c.redirect(`/dash/posts/${sqid.encode(id)}`);
+  return sse(c, async (stream) => {
+    await stream.redirect(`/dash/posts/${sqid.encode(id)}`);
+  });
 });
 
 // Delete post
@@ -207,5 +238,7 @@ postsRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.posts.delete(id);
 
-  return c.redirect("/dash/posts");
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/posts");
+  });
 });

package/src/routes/dash/redirects.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Redirect } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
@@ -13,6 +13,7 @@ import {
   ActionButtons,
   CrudPageHeader,
 } from "../../theme/components/index.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -24,7 +25,10 @@ function RedirectsListContent({ redirects }: { redirects: Redirect[] }) {
   return (
     <>
       <CrudPageHeader
-        title={t({ message: "Redirects", comment: "@context: Dashboard heading" })}
+        title={t({
+          message: "Redirects",
+          comment: "@context: Dashboard heading",
+        })}
         ctaLabel={t({
           message: "New Redirect",
           comment: "@context: Button to create new redirect",
@@ -82,12 +86,25 @@ function NewRedirectContent() {
         {t({ message: "New Redirect", comment: "@context: Page heading" })}
       </h1>
 
-      <form method="post" action="/dash/redirects" class="flex flex-col gap-4 max-w-lg">
+      <form
+        data-signals="{fromPath: '', toPath: '', type: '301'}"
+        data-on:submit__prevent="@post('/dash/redirects')"
+        class="flex flex-col gap-4 max-w-lg"
+      >
         <div class="field">
           <label class="label">
-            {t({ message: "From Path", comment: "@context: Redirect form field" })}
+            {t({
+              message: "From Path",
+              comment: "@context: Redirect form field",
+            })}
           </label>
-          <input type="text" name="fromPath" class="input" placeholder="/old-path" required />
+          <input
+            type="text"
+            data-bind="fromPath"
+            class="input"
+            placeholder="/old-path"
+            required
+          />
           <p class="text-xs text-muted-foreground mt-1">
             {t({
               message: "The path to redirect from",
@@ -98,11 +115,14 @@ function NewRedirectContent() {
 
         <div class="field">
           <label class="label">
-            {t({ message: "To Path", comment: "@context: Redirect form field" })}
+            {t({
+              message: "To Path",
+              comment: "@context: Redirect form field",
+            })}
           </label>
           <input
             type="text"
-            name="toPath"
+            data-bind="toPath"
             class="input"
             placeholder="/new-path or https://..."
             required
@@ -119,22 +139,34 @@ function NewRedirectContent() {
           <label class="label">
             {t({ message: "Type", comment: "@context: Redirect form field" })}
           </label>
-          <select name="type" class="select">
+          <select data-bind="type" class="select">
             <option value="301">
-              {t({ message: "301 (Permanent)", comment: "@context: Redirect type option" })}
+              {t({
+                message: "301 (Permanent)",
+                comment: "@context: Redirect type option",
+              })}
             </option>
             <option value="302">
-              {t({ message: "302 (Temporary)", comment: "@context: Redirect type option" })}
+              {t({
+                message: "302 (Temporary)",
+                comment: "@context: Redirect type option",
+              })}
             </option>
           </select>
         </div>
 
         <div class="flex gap-2">
           <button type="submit" class="btn">
-            {t({ message: "Create Redirect", comment: "@context: Button to save new redirect" })}
+            {t({
+              message: "Create Redirect",
+              comment: "@context: Button to save new redirect",
+            })}
           </button>
           <a href="/dash/redirects" class="btn-outline">
-            {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
           </a>
         </div>
       </form>
@@ -148,9 +180,14 @@ redirectsRoutes.get("/", async (c) => {
   const redirects = await c.var.services.redirects.list();
 
   return c.html(
-    <DashLayout c={c} title="Redirects" siteName={siteName} currentPath="/dash/redirects">
+    <DashLayout
+      c={c}
+      title="Redirects"
+      siteName={siteName}
+      currentPath="/dash/redirects"
+    >
       <RedirectsListContent redirects={redirects} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -159,23 +196,31 @@ redirectsRoutes.get("/new", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title="New Redirect" siteName={siteName} currentPath="/dash/redirects">
+    <DashLayout
+      c={c}
+      title="New Redirect"
+      siteName={siteName}
+      currentPath="/dash/redirects"
+    >
       <NewRedirectContent />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
 // Create redirect
 redirectsRoutes.post("/", async (c) => {
-  const formData = await c.req.formData();
-
-  const fromPath = formData.get("fromPath") as string;
-  const toPath = formData.get("toPath") as string;
-  const type = parseInt(formData.get("type") as string, 10) as 301 | 302;
-
-  await c.var.services.redirects.create(fromPath, toPath, type);
-
-  return c.redirect("/dash/redirects");
+  const body = await c.req.json<{
+    fromPath: string;
+    toPath: string;
+    type: string;
+  }>();
+
+  const type = parseInt(body.type, 10) as 301 | 302;
+  await c.var.services.redirects.create(body.fromPath, body.toPath, type);
+
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/redirects");
+  });
 });
 
 // Delete redirect
@@ -184,5 +229,8 @@ redirectsRoutes.post("/:id/delete", async (c) => {
   if (!isNaN(id)) {
     await c.var.services.redirects.delete(id);
   }
-  return c.redirect("/dash/redirects");
+
+  return sse(c, async (stream) => {
+    await stream.redirect("/dash/redirects");
+  });
 });