@jant/core 0.2.11 → 0.2.13

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} />
@@ -39,7 +41,9 @@ function NewPostContent() {
   const { t } = useLingui();
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "New Post", comment: "@context: Page heading" })}</h1>
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "New Post", comment: "@context: Page heading" })}
+      </h1>
       <PostForm action="/dash/posts" />
     </>
   );
@@ -53,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>,
   );
 });
 
@@ -64,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 (
     <>
@@ -104,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>
     </>
@@ -123,7 +150,9 @@ function EditPostContent({ post }: { post: Post }) {
   const { t } = useLingui();
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "Edit Post", comment: "@context: Page heading" })}</h1>
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "Edit Post", comment: "@context: Page heading" })}
+      </h1>
       <PostForm post={post} action={`/dash/posts/${sqid.encode(post.id)}`} />
     </>
   );
@@ -141,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>,
   );
 });
 
@@ -158,9 +192,14 @@ postsRoutes.get("/:id/edit", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={`Edit: ${post.title || "Post"}`} siteName={siteName} currentPath="/dash/posts">
+    <DashLayout
+      c={c}
+      title={`Edit: ${post.title || "Post"}`}
+      siteName={siteName}
+      currentPath="/dash/posts"
+    >
       <EditPostContent post={post} />
-    </DashLayout>
+    </DashLayout>,
   );
 });
 
@@ -169,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
@@ -198,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,11 +3,17 @@
  */
 
 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";
-import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader } from "../../theme/components/index.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+} from "../../theme/components/index.js";
+import { sse } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -19,15 +25,27 @@ function RedirectsListContent({ redirects }: { redirects: Redirect[] }) {
   return (
     <>
       <CrudPageHeader
-        title={t({ message: "Redirects", comment: "@context: Dashboard heading" })}
-        ctaLabel={t({ message: "New Redirect", comment: "@context: Button to create new redirect" })}
+        title={t({
+          message: "Redirects",
+          comment: "@context: Dashboard heading",
+        })}
+        ctaLabel={t({
+          message: "New Redirect",
+          comment: "@context: Button to create new redirect",
+        })}
         ctaHref="/dash/redirects/new"
       />
 
       {redirects.length === 0 ? (
         <EmptyState
-          message={t({ message: "No redirects configured.", comment: "@context: Empty state message" })}
-          ctaText={t({ message: "New Redirect", comment: "@context: Button to create new redirect" })}
+          message={t({
+            message: "No redirects configured.",
+            comment: "@context: Empty state message",
+          })}
+          ctaText={t({
+            message: "New Redirect",
+            comment: "@context: Button to create new redirect",
+          })}
           ctaHref="/dash/redirects/new"
         />
       ) : (
@@ -38,7 +56,10 @@ function RedirectsListContent({ redirects }: { redirects: Redirect[] }) {
               actions={
                 <ActionButtons
                   deleteAction={`/dash/redirects/${r.id}/delete`}
-                  deleteLabel={t({ message: "Delete", comment: "@context: Button to delete redirect" })}
+                  deleteLabel={t({
+                    message: "Delete",
+                    comment: "@context: Button to delete redirect",
+                  })}
                 />
               }
             >
@@ -61,47 +82,91 @@ function NewRedirectContent() {
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "New Redirect", comment: "@context: Page heading" })}</h1>
-
-      <form method="post" action="/dash/redirects" class="flex flex-col gap-4 max-w-lg">
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "New Redirect", comment: "@context: Page heading" })}
+      </h1>
+
+      <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" })}</label>
+          <label class="label">
+            {t({
+              message: "From Path",
+              comment: "@context: Redirect form field",
+            })}
+          </label>
           <input
             type="text"
-            name="fromPath"
+            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", comment: "@context: Redirect from path help text" })}</p>
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message: "The path to redirect from",
+              comment: "@context: Redirect from path help text",
+            })}
+          </p>
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "To Path", comment: "@context: Redirect form field" })}</label>
+          <label class="label">
+            {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
           />
-          <p class="text-xs text-muted-foreground mt-1">{t({ message: "The destination path or URL", comment: "@context: Redirect to path help text" })}</p>
+          <p class="text-xs text-muted-foreground mt-1">
+            {t({
+              message: "The destination path or URL",
+              comment: "@context: Redirect to path help text",
+            })}
+          </p>
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Type", comment: "@context: Redirect form field" })}</label>
-          <select name="type" class="select">
-            <option value="301">{t({ message: "301 (Permanent)", comment: "@context: Redirect type option" })}</option>
-            <option value="302">{t({ message: "302 (Temporary)", comment: "@context: Redirect type option" })}</option>
+          <label class="label">
+            {t({ message: "Type", comment: "@context: Redirect form field" })}
+          </label>
+          <select data-bind="type" class="select">
+            <option value="301">
+              {t({
+                message: "301 (Permanent)",
+                comment: "@context: Redirect type option",
+              })}
+            </option>
+            <option value="302">
+              {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>
@@ -115,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>,
   );
 });
 
@@ -126,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
@@ -151,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");
+  });
 });