@jant/core 0.2.12 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "bin": {
@@ -15,6 +15,10 @@
       "types": "./dist/theme/index.d.ts",
       "default": "./dist/theme/index.js"
     },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "default": "./dist/i18n/index.js"
+    },
     "./preset.css": "./src/preset.css",
     "./client": "./dist/client.js"
   },
@@ -29,7 +33,6 @@
   },
   "dependencies": {
     "@lingui/core": "^5.9.0",
-    "@sudodevnull/datastar": "^0.19.9",
     "better-auth": "^1.4.18",
     "drizzle-orm": "^0.45.1",
     "hono": "^4.11.7",

package/src/app.tsx

@@ -7,7 +7,8 @@ import type { FC } from "hono/jsx";
 import { createDatabase } from "./db/index.js";
 import { createServices, type Services } from "./services/index.js";
 import { createAuth, type Auth } from "./auth.js";
-import { i18nMiddleware, useLingui } from "./i18n/index.js";
+import { i18nMiddleware } from "./i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, JantConfig } from "./types.js";
 
 // Routes - Pages
@@ -41,6 +42,7 @@ import { requireAuth } from "./middleware/auth.js";
 
 // Layouts for auth pages
 import { BaseLayout } from "./theme/layouts/index.js";
+import { sse } from "./lib/sse.js";
 
 // Extend Hono's context variables
 export interface AppVariables {
@@ -123,7 +125,7 @@ export function createApp(config: JantConfig = {}): App {
       status: "ok",
       auth: c.env.AUTH_SECRET ? "configured" : "missing",
       authSecretLength: c.env.AUTH_SECRET?.length ?? 0,
-    })
+    }),
   );
 
   // better-auth handler
@@ -138,7 +140,7 @@ export function createApp(config: JantConfig = {}): App {
   app.route("/api/posts", postsApiRoutes);
 
   // Setup page component
-  const SetupContent: FC<{ error?: string }> = ({ error }) => {
+  const SetupContent: FC = () => {
     const { t } = useLingui();
 
     return (
@@ -146,7 +148,10 @@ export function createApp(config: JantConfig = {}): App {
         <div class="card max-w-md w-full">
           <header>
             <h2>
-              {t({ message: "Welcome to Jant", comment: "@context: Setup page welcome heading" })}
+              {t({
+                message: "Welcome to Jant",
+                comment: "@context: Setup page welcome heading",
+              })}
             </h2>
             <p>
               {t({
@@ -156,15 +161,22 @@ export function createApp(config: JantConfig = {}): App {
             </p>
           </header>
           <section>
-            {error && <p class="text-destructive text-sm mb-4">{error}</p>}
-            <form method="post" action="/setup" class="flex flex-col gap-4">
+            <div id="setup-message"></div>
+            <form
+              data-signals="{siteName: '', name: '', email: '', password: ''}"
+              data-on:submit__prevent="@post('/setup')"
+              class="flex flex-col gap-4"
+            >
               <div class="field">
                 <label class="label">
-                  {t({ message: "Site Name", comment: "@context: Setup form field - site name" })}
+                  {t({
+                    message: "Site Name",
+                    comment: "@context: Setup form field - site name",
+                  })}
                 </label>
                 <input
                   type="text"
-                  name="siteName"
+                  data-bind="siteName"
                   class="input"
                   required
                   placeholder={t({
@@ -175,17 +187,29 @@ export function createApp(config: JantConfig = {}): App {
               </div>
               <div class="field">
                 <label class="label">
-                  {t({ message: "Your Name", comment: "@context: Setup form field - user name" })}
+                  {t({
+                    message: "Your Name",
+                    comment: "@context: Setup form field - user name",
+                  })}
                 </label>
-                <input type="text" name="name" class="input" required placeholder="John Doe" />
+                <input
+                  type="text"
+                  data-bind="name"
+                  class="input"
+                  required
+                  placeholder="John Doe"
+                />
               </div>
               <div class="field">
                 <label class="label">
-                  {t({ message: "Email", comment: "@context: Setup/signin form field - email" })}
+                  {t({
+                    message: "Email",
+                    comment: "@context: Setup/signin form field - email",
+                  })}
                 </label>
                 <input
                   type="email"
-                  name="email"
+                  data-bind="email"
                   class="input"
                   required
                   placeholder="you@example.com"
@@ -198,10 +222,19 @@ export function createApp(config: JantConfig = {}): App {
                     comment: "@context: Setup/signin form field - password",
                   })}
                 </label>
-                <input type="password" name="password" class="input" required minLength={8} />
+                <input
+                  type="password"
+                  data-bind="password"
+                  class="input"
+                  required
+                  minLength={8}
+                />
               </div>
               <button type="submit" class="btn">
-                {t({ message: "Complete Setup", comment: "@context: Setup form submit button" })}
+                {t({
+                  message: "Complete Setup",
+                  comment: "@context: Setup form submit button",
+                })}
               </button>
             </form>
           </section>
@@ -215,12 +248,10 @@ export function createApp(config: JantConfig = {}): App {
     const isComplete = await c.var.services.settings.isOnboardingComplete();
     if (isComplete) return c.redirect("/");
 
-    const error = c.req.query("error");
-
     return c.html(
       <BaseLayout title="Setup - Jant" c={c}>
-        <SetupContent error={error} />
-      </BaseLayout>
+        <SetupContent />
+      </BaseLayout>,
     );
   });
 
@@ -228,22 +259,36 @@ export function createApp(config: JantConfig = {}): App {
     const isComplete = await c.var.services.settings.isOnboardingComplete();
     if (isComplete) return c.redirect("/");
 
-    const formData = await c.req.formData();
-    const siteName = formData.get("siteName") as string;
-    const name = formData.get("name") as string;
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
+    const body = await c.req.json<{
+      siteName: string;
+      name: string;
+      email: string;
+      password: string;
+    }>();
+    const { siteName, name, email, password } = body;
 
     if (!siteName || !name || !email || !password) {
-      return c.redirect("/setup?error=All fields are required");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="setup-message"><p class="text-destructive text-sm mb-4">All fields are required</p></div>',
+        );
+      });
     }
 
     if (password.length < 8) {
-      return c.redirect("/setup?error=Password must be at least 8 characters");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="setup-message"><p class="text-destructive text-sm mb-4">Password must be at least 8 characters</p></div>',
+        );
+      });
     }
 
     if (!c.var.auth) {
-      return c.redirect("/setup?error=AUTH_SECRET not configured");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="setup-message"><p class="text-destructive text-sm mb-4">AUTH_SECRET not configured</p></div>',
+        );
+      });
     }
 
     try {
@@ -252,7 +297,11 @@ export function createApp(config: JantConfig = {}): App {
       });
 
       if (!signUpResponse || "error" in signUpResponse) {
-        return c.redirect("/setup?error=Failed to create account");
+        return sse(c, async (stream) => {
+          await stream.patchElements(
+            '<div id="setup-message"><p class="text-destructive text-sm mb-4">Failed to create account</p></div>',
+          );
+        });
       }
 
       await c.var.services.settings.setMany({
@@ -261,32 +310,66 @@ export function createApp(config: JantConfig = {}): App {
       });
       await c.var.services.settings.completeOnboarding();
 
-      return c.redirect("/signin");
+      return sse(c, async (stream) => {
+        await stream.redirect("/signin");
+      });
     } catch (err) {
       // eslint-disable-next-line no-console -- Error logging is intentional
       console.error("Setup error:", err);
-      return c.redirect("/setup?error=Failed to create account");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="setup-message"><p class="text-destructive text-sm mb-4">Failed to create account</p></div>',
+        );
+      });
     }
   });
 
   // Signin page component
-  const SigninContent: FC<{ error?: string }> = ({ error }) => {
+  const SigninContent: FC<{
+    demoEmail?: string;
+    demoPassword?: string;
+  }> = ({ demoEmail, demoPassword }) => {
     const { t } = useLingui();
+    const signals = JSON.stringify({
+      email: demoEmail || "",
+      password: demoPassword || "",
+    }).replace(/</g, "\\u003c");
 
     return (
       <div class="min-h-screen flex items-center justify-center">
         <div class="card max-w-md w-full">
           <header>
-            <h2>{t({ message: "Sign In", comment: "@context: Sign in page heading" })}</h2>
+            <h2>
+              {t({
+                message: "Sign In",
+                comment: "@context: Sign in page heading",
+              })}
+            </h2>
           </header>
           <section>
-            {error && <p class="text-destructive text-sm mb-4">{error}</p>}
-            <form method="post" action="/signin" class="flex flex-col gap-4">
+            <div id="signin-message"></div>
+            {demoEmail && demoPassword && (
+              <p class="text-muted-foreground text-sm mb-4">
+                {t({
+                  message: "Demo account pre-filled. Just click Sign In.",
+                  comment:
+                    "@context: Hint shown on signin page when demo credentials are pre-filled",
+                })}
+              </p>
+            )}
+            <form
+              data-signals={signals}
+              data-on:submit__prevent="@post('/signin')"
+              class="flex flex-col gap-4"
+            >
               <div class="field">
                 <label class="label">
-                  {t({ message: "Email", comment: "@context: Setup/signin form field - email" })}
+                  {t({
+                    message: "Email",
+                    comment: "@context: Setup/signin form field - email",
+                  })}
                 </label>
-                <input type="email" name="email" class="input" required />
+                <input type="email" data-bind="email" class="input" required />
               </div>
               <div class="field">
                 <label class="label">
@@ -295,10 +378,18 @@ export function createApp(config: JantConfig = {}): App {
                     comment: "@context: Setup/signin form field - password",
                   })}
                 </label>
-                <input type="password" name="password" class="input" required />
+                <input
+                  type="password"
+                  data-bind="password"
+                  class="input"
+                  required
+                />
               </div>
               <button type="submit" class="btn">
-                {t({ message: "Sign In", comment: "@context: Sign in form submit button" })}
+                {t({
+                  message: "Sign In",
+                  comment: "@context: Sign in form submit button",
+                })}
               </button>
             </form>
           </section>
@@ -309,45 +400,70 @@ export function createApp(config: JantConfig = {}): App {
 
   // Signin page
   app.get("/signin", async (c) => {
-    const error = c.req.query("error");
-
     return c.html(
       <BaseLayout title="Sign In - Jant" c={c}>
-        <SigninContent error={error} />
-      </BaseLayout>
+        <SigninContent
+          demoEmail={c.env.DEMO_EMAIL}
+          demoPassword={c.env.DEMO_PASSWORD}
+        />
+      </BaseLayout>,
     );
   });
 
   app.post("/signin", async (c) => {
     if (!c.var.auth) {
-      return c.redirect("/signin?error=Auth not configured");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="signin-message"><p class="text-destructive text-sm mb-4">Auth not configured</p></div>',
+        );
+      });
     }
 
-    const formData = await c.req.formData();
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
+    const body = await c.req.json<{ email: string; password: string }>();
+    const { email, password } = body;
 
     try {
-      const signInRequest = new Request(`${c.env.SITE_URL}/api/auth/sign-in/email`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email, password }),
-      });
+      const signInRequest = new Request(
+        `${c.env.SITE_URL}/api/auth/sign-in/email`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+        },
+      );
 
       const response = await c.var.auth.handler(signInRequest);
 
       if (!response.ok) {
-        return c.redirect("/signin?error=Invalid email or password");
+        return sse(c, async (stream) => {
+          await stream.patchElements(
+            '<div id="signin-message"><p class="text-destructive text-sm mb-4">Invalid email or password</p></div>',
+          );
+        });
       }
 
-      const headers = new Headers(response.headers);
-      headers.set("Location", "/dash");
+      // Forward Set-Cookie headers from auth response
+      const cookieHeaders: Record<string, string> = {};
+      const setCookie = response.headers.get("set-cookie");
+      if (setCookie) {
+        cookieHeaders["Set-Cookie"] = setCookie;
+      }
 
-      return new Response(null, { status: 302, headers });
+      return sse(
+        c,
+        async (stream) => {
+          await stream.redirect("/dash");
+        },
+        { headers: cookieHeaders },
+      );
     } catch (err) {
       // eslint-disable-next-line no-console -- Error logging is intentional
       console.error("Signin error:", err);
-      return c.redirect("/signin?error=Invalid email or password");
+      return sse(c, async (stream) => {
+        await stream.patchElements(
+          '<div id="signin-message"><p class="text-destructive text-sm mb-4">Invalid email or password</p></div>',
+        );
+      });
     }
   });
 
@@ -397,7 +513,10 @@ export function createApp(config: JantConfig = {}): App {
     }
 
     const headers = new Headers();
-    headers.set("Content-Type", object.httpMetadata?.contentType || media.mimeType);
+    headers.set(
+      "Content-Type",
+      object.httpMetadata?.contentType || media.mimeType,
+    );
     headers.set("Cache-Control", "public, max-age=31536000, immutable");
 
     return new Response(object.body, { headers });

package/src/auth.ts

@@ -7,7 +7,10 @@ import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { drizzle } from "drizzle-orm/d1";
 import * as schema from "./db/schema.js";
 
-export function createAuth(d1: D1Database, options: { secret: string; baseURL: string }) {
+export function createAuth(
+  d1: D1Database,
+  options: { secret: string; baseURL: string },
+) {
   const db = drizzle(d1, { schema });
 
   return betterAuth({
@@ -25,6 +28,7 @@ export function createAuth(d1: D1Database, options: { secret: string; baseURL: s
     emailAndPassword: {
       enabled: true,
       autoSignIn: true,
+      minPasswordLength: 8,
     },
     session: {
       cookieCache: {

package/src/client.ts

@@ -7,6 +7,6 @@
  * - ImageProcessor (media uploads)
  */
 
-import "@sudodevnull/datastar";
+import "./vendor/datastar.js";
 import "basecoat-css/all";
 import "./lib/image-processor.js";

package/src/db/schema.ts

@@ -4,7 +4,12 @@
  * Database schema for Jant
  */
 
-import { sqliteTable, text, integer, primaryKey } from "drizzle-orm/sqlite-core";
+import {
+  sqliteTable,
+  text,
+  integer,
+  primaryKey,
+} from "drizzle-orm/sqlite-core";
 
 // =============================================================================
 // Posts
@@ -12,8 +17,12 @@ import { sqliteTable, text, integer, primaryKey } from "drizzle-orm/sqlite-core"
 
 export const posts = sqliteTable("posts", {
   id: integer("id").primaryKey({ autoIncrement: true }),
-  type: text("type", { enum: ["note", "article", "link", "quote", "image", "page"] }).notNull(),
-  visibility: text("visibility", { enum: ["featured", "quiet", "unlisted", "draft"] })
+  type: text("type", {
+    enum: ["note", "article", "link", "quote", "image", "page"],
+  }).notNull(),
+  visibility: text("visibility", {
+    enum: ["featured", "quiet", "unlisted", "draft"],
+  })
     .notNull()
     .default("quiet"),
   title: text("title"),
@@ -77,7 +86,7 @@ export const postCollections = sqliteTable(
       .references(() => collections.id),
     addedAt: integer("added_at").notNull(),
   },
-  (table) => [primaryKey({ columns: [table.postId, table.collectionId] })]
+  (table) => [primaryKey({ columns: [table.postId, table.collectionId] })],
 );
 
 // =============================================================================
@@ -111,7 +120,9 @@ export const user = sqliteTable("user", {
   id: text("id").primaryKey(),
   name: text("name").notNull(),
   email: text("email").notNull().unique(),
-  emailVerified: integer("email_verified", { mode: "boolean" }).notNull().default(false),
+  emailVerified: integer("email_verified", { mode: "boolean" })
+    .notNull()
+    .default(false),
   image: text("image"),
   role: text("role").default("admin"),
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
@@ -141,8 +152,12 @@ export const account = sqliteTable("account", {
   accessToken: text("access_token"),
   refreshToken: text("refresh_token"),
   idToken: text("id_token"),
-  accessTokenExpiresAt: integer("access_token_expires_at", { mode: "timestamp" }),
-  refreshTokenExpiresAt: integer("refresh_token_expires_at", { mode: "timestamp" }),
+  accessTokenExpiresAt: integer("access_token_expires_at", {
+    mode: "timestamp",
+  }),
+  refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+    mode: "timestamp",
+  }),
   scope: text("scope"),
   password: text("password"),
   createdAt: integer("created_at", { mode: "timestamp" }).notNull(),

package/src/i18n/EXAMPLES.md

@@ -14,7 +14,7 @@ dashRoute.get("/", async (c) => {
   return c.html(
     <I18nProvider c={c}>
       <MyApp />
-    </I18nProvider>
+    </I18nProvider>,
   );
 });
 
@@ -22,7 +22,9 @@ dashRoute.get("/", async (c) => {
 function MyApp() {
   const { t } = useLingui();
 
-  return <h1>{t({ message: "Dashboard", comment: "@context: Page title" })}</h1>;
+  return (
+    <h1>{t({ message: "Dashboard", comment: "@context: Page title" })}</h1>
+  );
 }
 ```
 
@@ -53,12 +55,18 @@ dashRoute.get("/", async (c) => {
   return c.html(
     <I18nProvider c={c}>
       <Dashboard postCount={posts.length} username="Alice" />
-    </I18nProvider>
+    </I18nProvider>,
   );
 });
 
 // Component: use useLingui() hook
-function Dashboard({ postCount, username }: { postCount: number; username: string }) {
+function Dashboard({
+  postCount,
+  username,
+}: {
+  postCount: number;
+  username: string;
+}) {
   const { t } = useLingui();
 
   return (
@@ -69,16 +77,22 @@ function Dashboard({ postCount, username }: { postCount: number; username: strin
       {/* 2. With variables */}
       <p>
         {t(
-          { message: "Welcome back, {name}!", comment: "@context: Welcome message" },
-          { name: username }
+          {
+            message: "Welcome back, {name}!",
+            comment: "@context: Welcome message",
+          },
+          { name: username },
         )}
       </p>
 
       {/* 3. With dynamic values */}
       <p>
         {t(
-          { message: "You have {count} posts", comment: "@context: Post count" },
-          { count: postCount }
+          {
+            message: "You have {count} posts",
+            comment: "@context: Post count",
+          },
+          { count: postCount },
         )}
       </p>
 
@@ -130,11 +144,14 @@ const { t } = useLingui();
 // For dynamic content, use t() with placeholders
 <p>
   {t(
-    { message: "Visit {linkStart}our website{linkEnd}", comment: "@context: Website link" },
+    {
+      message: "Visit {linkStart}our website{linkEnd}",
+      comment: "@context: Website link",
+    },
     {
       linkStart: '<a href="/" class="text-primary">',
       linkEnd: "</a>",
-    }
+    },
   )}
 </p>;
 ```
@@ -154,7 +171,7 @@ dashRoute.get("/", async (c) => {
   return c.html(
     <Layout>
       <MyComponent c={c} /> {/* Must pass c prop */}
-    </Layout>
+    </Layout>,
   );
 });
 
@@ -163,7 +180,7 @@ function MyComponent({ c }: { c: Context }) {
   const title = i18n._({ message: "Dashboard", comment: "@context: Title" });
   const greeting = i18n._(
     { message: "Hello {name}", comment: "@context: Greeting" },
-    { name: "Alice" }
+    { name: "Alice" },
   );
 
   return <h1>{title}</h1>;
@@ -181,14 +198,17 @@ dashRoute.get("/", async (c) => {
       <Layout>
         <MyComponent /> {/* No props needed */}
       </Layout>
-    </I18nProvider>
+    </I18nProvider>,
   );
 });
 
 function MyComponent() {
   const { t } = useLingui();
   const title = t({ message: "Dashboard", comment: "@context: Title" });
-  const greeting = t({ message: "Hello {name}", comment: "@context: Greeting" }, { name: "Alice" });
+  const greeting = t(
+    { message: "Hello {name}", comment: "@context: Greeting" },
+    { name: "Alice" },
+  );
 
   return <h1>{title}</h1>;
 }