@jant/core 0.2.16 → 0.2.18

package/src/app.tsx

@@ -10,6 +10,8 @@ import { createAuth, type Auth } from "./auth.js";
 import { i18nMiddleware } from "./i18n/index.js";
 import { useLingui } from "@lingui/react/macro";
 import type { Bindings, JantConfig } from "./types.js";
+import { SETTINGS_KEYS } from "./lib/constants.js";
+import { hashPassword } from "better-auth/crypto";
 
 // Routes - Pages
 import { homeRoutes } from "./routes/pages/home.js";
@@ -27,6 +29,7 @@ import { mediaRoutes as dashMediaRoutes } from "./routes/dash/media.js";
 import { settingsRoutes as dashSettingsRoutes } from "./routes/dash/settings.js";
 import { redirectsRoutes as dashRedirectsRoutes } from "./routes/dash/redirects.js";
 import { collectionsRoutes as dashCollectionsRoutes } from "./routes/dash/collections.js";
+import { appearanceRoutes as dashAppearanceRoutes } from "./routes/dash/appearance.js";
 
 // Routes - API
 import { postsApiRoutes } from "./routes/api/posts.js";
@@ -43,12 +46,14 @@ import { requireAuth } from "./middleware/auth.js";
 // Layouts for auth pages
 import { BaseLayout } from "./theme/layouts/index.js";
 import { sse } from "./lib/sse.js";
+import { getAvailableThemes, buildThemeStyle } from "./lib/theme.js";
 
 // Extend Hono's context variables
 export interface AppVariables {
   services: Services;
   auth: Auth;
   config: JantConfig;
+  themeStyle: string;
 }
 
 export type App = Hono<{ Bindings: Bindings; Variables: AppVariables }>;
@@ -59,12 +64,15 @@ export type App = Hono<{ Bindings: Bindings; Variables: AppVariables }>;
  * @param config - Optional configuration
  * @returns Hono app instance
  *
+ * Site settings (name, description, language) should be configured via
+ * environment variables (SITE_NAME, SITE_DESCRIPTION, SITE_LANGUAGE).
+ * They can also be set in the dashboard, which stores them in the database.
+ *
  * @example
  * ```typescript
  * import { createApp } from "@jant/core";
  *
  * export default createApp({
- *   site: { name: "My Blog" },
  *   theme: { components: { PostCard: MyPostCard } },
  * });
  * ```
@@ -74,13 +82,20 @@ export function createApp(config: JantConfig = {}): App {
 
   // Initialize services, auth, and config middleware
   app.use("*", async (c, next) => {
-    const db = createDatabase(c.env.DB);
-    const services = createServices(db, c.env.DB);
+    // Use withSession() to enable D1 Read Replication
+    // Automatically routes read queries to the nearest replica for lower latency
+    // See: https://developers.cloudflare.com/d1/best-practices/read-replication/
+    const session = c.env.DB.withSession();
+
+    // Note: Drizzle ORM doesn't officially support D1DatabaseSession yet (issue #2226)
+    // but it works at runtime. We use type assertion as a temporary workaround.
+    const db = createDatabase(session as unknown as D1Database);
+    const services = createServices(db, session as unknown as D1Database);
     c.set("services", services);
     c.set("config", config);
 
     if (c.env.AUTH_SECRET) {
-      const auth = createAuth(c.env.DB, {
+      const auth = createAuth(session as unknown as D1Database, {
         secret: c.env.AUTH_SECRET,
         baseURL: c.env.SITE_URL,
       });
@@ -90,6 +105,18 @@ export function createApp(config: JantConfig = {}): App {
     await next();
   });
 
+  // Theme middleware - resolve active color theme and build CSS
+  app.use("*", async (c, next) => {
+    const themeId = await c.var.services.settings.get(SETTINGS_KEYS.THEME);
+    const themes = getAvailableThemes(config);
+    const activeTheme = themeId
+      ? themes.find((t) => t.id === themeId)
+      : undefined;
+    const themeStyle = buildThemeStyle(activeTheme, config.theme?.cssVariables);
+    c.set("themeStyle", themeStyle);
+    await next();
+  });
+
   // i18n middleware
   app.use("*", i18nMiddleware());
 
@@ -155,36 +182,17 @@ export function createApp(config: JantConfig = {}): App {
             </h2>
             <p>
               {t({
-                message: "Let's set up your site.",
+                message: "Create your admin account.",
                 comment: "@context: Setup page description",
               })}
             </p>
           </header>
           <section>
-            <div id="setup-message"></div>
             <form
-              data-signals="{siteName: '', name: '', email: '', password: ''}"
+              data-signals="{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",
-                  })}
-                </label>
-                <input
-                  type="text"
-                  data-bind="siteName"
-                  class="input"
-                  required
-                  placeholder={t({
-                    message: "My Blog",
-                    comment: "@context: Setup site name placeholder",
-                  })}
-                />
-              </div>
               <div class="field">
                 <label class="label">
                   {t({
@@ -260,34 +268,27 @@ export function createApp(config: JantConfig = {}): App {
     if (isComplete) return c.redirect("/");
 
     const body = await c.req.json<{
-      siteName: string;
       name: string;
       email: string;
       password: string;
     }>();
-    const { siteName, name, email, password } = body;
+    const { name, email, password } = body;
 
-    if (!siteName || !name || !email || !password) {
+    if (!name || !email || !password) {
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="setup-message"><div class="alert-destructive mb-4"><h2>All fields are required</h2></div></div>',
-        );
+        await stream.toast("All fields are required", "error");
       });
     }
 
     if (password.length < 8) {
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="setup-message"><div class="alert-destructive mb-4"><h2>Password must be at least 8 characters</h2></div></div>',
-        );
+        await stream.toast("Password must be at least 8 characters", "error");
       });
     }
 
     if (!c.var.auth) {
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="setup-message"><div class="alert-destructive mb-4"><h2>AUTH_SECRET not configured</h2></div></div>',
-        );
+        await stream.toast("AUTH_SECRET not configured", "error");
       });
     }
 
@@ -298,28 +299,20 @@ export function createApp(config: JantConfig = {}): App {
 
       if (!signUpResponse || "error" in signUpResponse) {
         return sse(c, async (stream) => {
-          await stream.patchElements(
-            '<div id="setup-message"><div class="alert-destructive mb-4"><h2>Failed to create account</h2></div></div>',
-          );
+          await stream.toast("Failed to create account", "error");
         });
       }
 
-      await c.var.services.settings.setMany({
-        SITE_NAME: siteName,
-        SITE_LANGUAGE: "en",
-      });
       await c.var.services.settings.completeOnboarding();
 
       return sse(c, async (stream) => {
-        await stream.redirect("/signin");
+        await stream.redirect("/signin?setup");
       });
     } catch (err) {
       // eslint-disable-next-line no-console -- Error logging is intentional
       console.error("Setup error:", err);
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="setup-message"><div class="alert-destructive mb-4"><h2>Failed to create account</h2></div></div>',
-        );
+        await stream.toast("Failed to create account", "error");
       });
     }
   });
@@ -347,7 +340,6 @@ export function createApp(config: JantConfig = {}): App {
             </h2>
           </header>
           <section>
-            <div id="signin-message"></div>
             {demoEmail && demoPassword && (
               <p class="text-muted-foreground text-sm mb-4">
                 {t({
@@ -400,8 +392,17 @@ export function createApp(config: JantConfig = {}): App {
 
   // Signin page
   app.get("/signin", async (c) => {
+    const isSetup = c.req.query("setup") !== undefined;
+    const isReset = c.req.query("reset") !== undefined;
+    let toast: { message: string } | undefined;
+    if (isSetup) {
+      toast = { message: "Account created successfully. Please sign in." };
+    } else if (isReset) {
+      toast = { message: "Password reset successfully. Please sign in." };
+    }
+
     return c.html(
-      <BaseLayout title="Sign In - Jant" c={c}>
+      <BaseLayout title="Sign In - Jant" c={c} toast={toast}>
         <SigninContent
           demoEmail={c.env.DEMO_EMAIL}
           demoPassword={c.env.DEMO_PASSWORD}
@@ -413,9 +414,7 @@ export function createApp(config: JantConfig = {}): App {
   app.post("/signin", async (c) => {
     if (!c.var.auth) {
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="signin-message"><div class="alert-destructive mb-4"><h2>Auth not configured</h2></div></div>',
-        );
+        await stream.toast("Auth not configured", "error");
       });
     }
 
@@ -436,9 +435,7 @@ export function createApp(config: JantConfig = {}): App {
 
       if (!response.ok) {
         return sse(c, async (stream) => {
-          await stream.patchElements(
-            '<div id="signin-message"><div class="alert-destructive mb-4"><h2>Invalid email or password</h2></div></div>',
-          );
+          await stream.toast("Invalid email or password", "error");
         });
       }
 
@@ -460,9 +457,7 @@ export function createApp(config: JantConfig = {}): App {
       // eslint-disable-next-line no-console -- Error logging is intentional
       console.error("Signin error:", err);
       return sse(c, async (stream) => {
-        await stream.patchElements(
-          '<div id="signin-message"><div class="alert-destructive mb-4"><h2>Invalid email or password</h2></div></div>',
-        );
+        await stream.toast("Invalid email or password", "error");
       });
     }
   });
@@ -478,6 +473,237 @@ export function createApp(config: JantConfig = {}): App {
     return c.redirect("/");
   });
 
+  // Password reset via one-time token
+  const ResetContent: FC<{ token: string }> = ({ token }) => {
+    const { t } = useLingui();
+    const signals = JSON.stringify({
+      password: "",
+      confirmPassword: "",
+      token,
+    }).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: "Reset Password",
+                comment: "@context: Password reset page heading",
+              })}
+            </h2>
+            <p>
+              {t({
+                message: "Enter your new password.",
+                comment: "@context: Password reset page description",
+              })}
+            </p>
+          </header>
+          <section>
+            <form
+              data-signals={signals}
+              data-on:submit__prevent="@post('/reset')"
+              class="flex flex-col gap-4"
+            >
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "New Password",
+                    comment: "@context: Password reset form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="password"
+                  class="input"
+                  required
+                  minLength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Confirm Password",
+                    comment: "@context: Password reset form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="confirmPassword"
+                  class="input"
+                  required
+                  minLength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+              <button type="submit" class="btn">
+                {t({
+                  message: "Reset Password",
+                  comment: "@context: Password reset form submit button",
+                })}
+              </button>
+            </form>
+          </section>
+        </div>
+      </div>
+    );
+  };
+
+  const ResetErrorContent: FC = () => {
+    const { t } = useLingui();
+
+    return (
+      <div class="min-h-screen flex items-center justify-center">
+        <div class="card max-w-md w-full">
+          <header>
+            <h2>
+              {t({
+                message: "Invalid or Expired Link",
+                comment: "@context: Password reset error heading",
+              })}
+            </h2>
+          </header>
+          <section>
+            <p class="text-muted-foreground">
+              {t({
+                message:
+                  "This password reset link is invalid or has expired. Please generate a new one.",
+                comment: "@context: Password reset error description",
+              })}
+            </p>
+          </section>
+        </div>
+      </div>
+    );
+  };
+
+  app.get("/reset", async (c) => {
+    const token = c.req.query("token");
+    if (!token) {
+      return c.html(
+        <BaseLayout title="Reset Password - Jant" c={c}>
+          <ResetErrorContent />
+        </BaseLayout>,
+      );
+    }
+
+    const stored = await c.var.services.settings.get(
+      SETTINGS_KEYS.PASSWORD_RESET_TOKEN,
+    );
+    if (!stored) {
+      return c.html(
+        <BaseLayout title="Reset Password - Jant" c={c}>
+          <ResetErrorContent />
+        </BaseLayout>,
+      );
+    }
+
+    const separatorIndex = stored.lastIndexOf(":");
+    const storedToken = stored.substring(0, separatorIndex);
+    const expiry = parseInt(stored.substring(separatorIndex + 1), 10);
+    const now = Math.floor(Date.now() / 1000);
+
+    if (token !== storedToken || now > expiry) {
+      return c.html(
+        <BaseLayout title="Reset Password - Jant" c={c}>
+          <ResetErrorContent />
+        </BaseLayout>,
+      );
+    }
+
+    return c.html(
+      <BaseLayout title="Reset Password - Jant" c={c}>
+        <ResetContent token={token} />
+      </BaseLayout>,
+    );
+  });
+
+  app.post("/reset", async (c) => {
+    const body = await c.req.json<{
+      password: string;
+      confirmPassword: string;
+      token: string;
+    }>();
+    const { password, confirmPassword, token } = body;
+
+    // Validate token
+    const stored = await c.var.services.settings.get(
+      SETTINGS_KEYS.PASSWORD_RESET_TOKEN,
+    );
+    if (!stored) {
+      return sse(c, async (stream) => {
+        await stream.toast("Invalid or expired reset link.", "error");
+      });
+    }
+
+    const separatorIndex = stored.lastIndexOf(":");
+    const storedToken = stored.substring(0, separatorIndex);
+    const expiry = parseInt(stored.substring(separatorIndex + 1), 10);
+    const now = Math.floor(Date.now() / 1000);
+
+    if (token !== storedToken || now > expiry) {
+      return sse(c, async (stream) => {
+        await stream.toast("Invalid or expired reset link.", "error");
+      });
+    }
+
+    // Validate passwords
+    if (!password || password.length < 8) {
+      return sse(c, async (stream) => {
+        await stream.toast("Password must be at least 8 characters.", "error");
+      });
+    }
+
+    if (password !== confirmPassword) {
+      return sse(c, async (stream) => {
+        await stream.toast("Passwords do not match.", "error");
+      });
+    }
+
+    try {
+      const hashedPassword = await hashPassword(password);
+      const db = c.env.DB.withSession() as unknown as D1Database;
+
+      // Get admin user
+      const userResult = await db
+        .prepare("SELECT id FROM user LIMIT 1")
+        .first<{ id: string }>();
+      if (!userResult) {
+        return sse(c, async (stream) => {
+          await stream.toast("No user account found.", "error");
+        });
+      }
+
+      // Update password
+      await db
+        .prepare(
+          "UPDATE account SET password = ? WHERE user_id = ? AND provider_id = 'credential'",
+        )
+        .bind(hashedPassword, userResult.id)
+        .run();
+
+      // Delete all sessions
+      await db
+        .prepare("DELETE FROM session WHERE user_id = ?")
+        .bind(userResult.id)
+        .run();
+
+      // Delete the reset token
+      await c.var.services.settings.remove(SETTINGS_KEYS.PASSWORD_RESET_TOKEN);
+
+      return sse(c, async (stream) => {
+        await stream.redirect("/signin?reset");
+      });
+    } catch (err) {
+      // eslint-disable-next-line no-console -- Error logging is intentional
+      console.error("Password reset error:", err);
+      return sse(c, async (stream) => {
+        await stream.toast("Failed to reset password.", "error");
+      });
+    }
+  });
+
   // Dashboard routes (protected)
   app.use("/dash/*", requireAuth());
   app.route("/dash", dashIndexRoutes);
@@ -487,6 +713,7 @@ export function createApp(config: JantConfig = {}): App {
   app.route("/dash/settings", dashSettingsRoutes);
   app.route("/dash/redirects", dashRedirectsRoutes);
   app.route("/dash/collections", dashCollectionsRoutes);
+  app.route("/dash/appearance", dashAppearanceRoutes);
 
   // API routes
   app.route("/api/upload", uploadApiRoutes);

package/src/db/migrations/{0000_solid_moon_knight.sql → 0000_square_wallflower.sql}

@@ -17,16 +17,16 @@ CREATE TABLE `account` (
 --> statement-breakpoint
 CREATE TABLE `collections` (
 	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`slug` text NOT NULL,
+	`path` text,
 	`title` text NOT NULL,
 	`description` text,
 	`created_at` integer NOT NULL,
 	`updated_at` integer NOT NULL
 );
 --> statement-breakpoint
-CREATE UNIQUE INDEX `collections_slug_unique` ON `collections` (`slug`);--> statement-breakpoint
+CREATE UNIQUE INDEX `collections_path_unique` ON `collections` (`path`);--> statement-breakpoint
 CREATE TABLE `media` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`id` text PRIMARY KEY NOT NULL,
 	`post_id` integer,
 	`filename` text NOT NULL,
 	`original_name` text NOT NULL,

package/src/db/migrations/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "6",
   "dialect": "sqlite",
-  "id": "d32a99d8-a262-45b7-99e4-bc81bbb6f305",
+  "id": "3d04f8ef-088d-43f4-9fe9-55ffa2d7a73f",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "account": {
@@ -125,11 +125,11 @@
           "notNull": true,
           "autoincrement": true
         },
-        "slug": {
-          "name": "slug",
+        "path": {
+          "name": "path",
           "type": "text",
           "primaryKey": false,
-          "notNull": true,
+          "notNull": false,
           "autoincrement": false
         },
         "title": {
@@ -162,9 +162,9 @@
         }
       },
       "indexes": {
-        "collections_slug_unique": {
-          "name": "collections_slug_unique",
-          "columns": ["slug"],
+        "collections_path_unique": {
+          "name": "collections_path_unique",
+          "columns": ["path"],
           "isUnique": true
         }
       },
@@ -178,10 +178,10 @@
       "columns": {
         "id": {
           "name": "id",
-          "type": "integer",
+          "type": "text",
           "primaryKey": true,
           "notNull": true,
-          "autoincrement": true
+          "autoincrement": false
         },
         "post_id": {
           "name": "post_id",

package/src/db/migrations/meta/_journal.json

@@ -5,36 +5,8 @@
     {
       "idx": 0,
       "version": "6",
-      "when": 1769858252020,
-      "tag": "0000_solid_moon_knight",
-      "breakpoints": true
-    },
-    {
-      "idx": 1,
-      "version": "6",
-      "when": 1769859000000,
-      "tag": "0001_add_search_fts",
-      "breakpoints": true
-    },
-    {
-      "idx": 2,
-      "version": "6",
-      "when": 1769860000000,
-      "tag": "0002_collection_path",
-      "breakpoints": true
-    },
-    {
-      "idx": 3,
-      "version": "6",
-      "when": 1769861000000,
-      "tag": "0003_collection_path_nullable",
-      "breakpoints": true
-    },
-    {
-      "idx": 4,
-      "version": "6",
-      "when": 1770024000000,
-      "tag": "0004_media_uuid",
+      "when": 1770564499811,
+      "tag": "0000_square_wallflower",
       "breakpoints": true
     }
   ]

package/src/i18n/context.tsx

@@ -28,7 +28,7 @@ let currentI18n: I18n | null = null;
  *
  * @example
  * ```tsx
- * import { I18nProvider } from "@/i18n";
+ * import { I18nProvider } from "../i18n/index.js";
  *
  * return c.html(
  *   <I18nProvider c={c}>
@@ -56,7 +56,7 @@ export const I18nProvider: FC<I18nProviderProps> = ({ c, children }) => {
  * @example
  * ```tsx
  * import { t } from "@lingui/core/macro";
- * import { useLingui } from "@/i18n";
+ * import { useLingui } from "../i18n/index.js";
  *
  * function MyComponent() {
  *   const { t: _ } = useLingui();  // Use _ to avoid conflict with macro

package/src/i18n/i18n.ts

@@ -48,7 +48,7 @@ export function createI18n(locale: Locale): I18n {
  *
  * @example
  * import { msg } from "@lingui/core/macro";
- * import { getI18n } from "@/i18n";
+ * import { getI18n } from "../i18n/index.js";
  *
  * const i18n = getI18n(c);
  * const title = i18n._(msg({ message: "Dashboard", comment: "@context: Page title" }));

package/src/i18n/index.ts

@@ -9,7 +9,7 @@
  *
  * Usage:
  * ```tsx
- * import { useLingui, Trans, I18nProvider } from "@/i18n";
+ * import { useLingui, Trans, I18nProvider } from "../i18n/index.js";
  *
  * // Wrap your app in I18nProvider (automatically done by BaseLayout when c is provided)
  * c.html(