@jant/core 0.2.17 → 0.2.19

package/src/theme/color-themes.ts

@@ -0,0 +1,321 @@
+/**
+ * Built-in Color Themes
+ *
+ * Each theme defines CSS variable overrides for light and dark modes,
+ * plus preview colors for the theme picker UI.
+ */
+
+/**
+ * A color theme definition with light and dark mode CSS variable overrides.
+ */
+export interface ColorTheme {
+  /** Stored in DB settings, e.g. "beach" */
+  id: string;
+  /** Display name, e.g. "Beach" */
+  name: string;
+  /** CSS variable overrides for :root (light mode) */
+  light: Record<string, string>;
+  /** CSS variable overrides for .dark (dark mode) */
+  dark: Record<string, string>;
+  /** Preview colors (hex) for theme picker cards */
+  preview: {
+    lightBg: string;
+    lightText: string;
+    lightLink: string;
+    darkBg: string;
+    darkText: string;
+    darkLink: string;
+  };
+}
+
+/**
+ * Create a comprehensive color theme from key colors.
+ * Derives card, popover, muted, secondary, accent, and sidebar variables.
+ */
+function defineTheme(opts: {
+  id: string;
+  name: string;
+  preview: ColorTheme["preview"];
+  light: {
+    bg: string;
+    fg: string;
+    primary: string;
+    primaryFg: string;
+    muted: string;
+    mutedFg: string;
+    border: string;
+  };
+  dark: {
+    bg: string;
+    fg: string;
+    primary: string;
+    primaryFg: string;
+    muted: string;
+    mutedFg: string;
+    border: string;
+  };
+}): ColorTheme {
+  const { light, dark } = opts;
+  return {
+    id: opts.id,
+    name: opts.name,
+    preview: opts.preview,
+    light: {
+      "--background": light.bg,
+      "--foreground": light.fg,
+      "--card": light.bg,
+      "--card-foreground": light.fg,
+      "--popover": light.bg,
+      "--popover-foreground": light.fg,
+      "--primary": light.primary,
+      "--primary-foreground": light.primaryFg,
+      "--secondary": light.muted,
+      "--secondary-foreground": light.fg,
+      "--muted": light.muted,
+      "--muted-foreground": light.mutedFg,
+      "--accent": light.muted,
+      "--accent-foreground": light.fg,
+      "--border": light.border,
+      "--input": light.border,
+      "--ring": light.primary,
+      "--sidebar": light.bg,
+      "--sidebar-foreground": light.fg,
+      "--sidebar-primary": light.primary,
+      "--sidebar-primary-foreground": light.primaryFg,
+      "--sidebar-accent": light.muted,
+      "--sidebar-accent-foreground": light.fg,
+      "--sidebar-border": light.border,
+      "--sidebar-ring": light.primary,
+    },
+    dark: {
+      "--background": dark.bg,
+      "--foreground": dark.fg,
+      "--card": dark.bg,
+      "--card-foreground": dark.fg,
+      "--popover": dark.bg,
+      "--popover-foreground": dark.fg,
+      "--primary": dark.primary,
+      "--primary-foreground": dark.primaryFg,
+      "--secondary": dark.muted,
+      "--secondary-foreground": dark.fg,
+      "--muted": dark.muted,
+      "--muted-foreground": dark.mutedFg,
+      "--accent": dark.muted,
+      "--accent-foreground": dark.fg,
+      "--border": dark.border,
+      "--input": dark.border,
+      "--ring": dark.primary,
+      "--sidebar": dark.bg,
+      "--sidebar-foreground": dark.fg,
+      "--sidebar-primary": dark.primary,
+      "--sidebar-primary-foreground": dark.primaryFg,
+      "--sidebar-accent": dark.muted,
+      "--sidebar-accent-foreground": dark.fg,
+      "--sidebar-border": dark.border,
+      "--sidebar-ring": dark.primary,
+    },
+  };
+}
+
+export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
+  {
+    id: "default",
+    name: "Default",
+    light: {},
+    dark: {},
+    preview: {
+      lightBg: "#ffffff",
+      lightText: "#1e1e1e",
+      lightLink: "#1e1e1e",
+      darkBg: "#262626",
+      darkText: "#fafafa",
+      darkLink: "#eaeaea",
+    },
+  },
+
+  defineTheme({
+    id: "beach",
+    name: "Beach",
+    preview: {
+      lightBg: "#f9f3ea",
+      lightText: "#3d3527",
+      lightLink: "#2d6a59",
+      darkBg: "#2d4553",
+      darkText: "#e2d6c4",
+      darkLink: "#7cc5a2",
+    },
+    light: {
+      bg: "oklch(0.97 0.01 85)",
+      fg: "oklch(0.28 0.02 65)",
+      primary: "oklch(0.46 0.1 170)",
+      primaryFg: "oklch(0.98 0.005 85)",
+      muted: "oklch(0.93 0.015 85)",
+      mutedFg: "oklch(0.52 0.015 65)",
+      border: "oklch(0.88 0.018 85)",
+    },
+    dark: {
+      bg: "oklch(0.27 0.03 210)",
+      fg: "oklch(0.88 0.015 80)",
+      primary: "oklch(0.72 0.1 165)",
+      primaryFg: "oklch(0.22 0.03 210)",
+      muted: "oklch(0.33 0.025 210)",
+      mutedFg: "oklch(0.65 0.015 80)",
+      border: "oklch(0.38 0.02 210)",
+    },
+  }),
+
+  defineTheme({
+    id: "gameboy",
+    name: "Gameboy",
+    preview: {
+      lightBg: "#d3d7c0",
+      lightText: "#2b3326",
+      lightLink: "#466740",
+      darkBg: "#1b1f18",
+      darkText: "#a6b09a",
+      darkLink: "#6d9660",
+    },
+    light: {
+      bg: "oklch(0.87 0.03 130)",
+      fg: "oklch(0.25 0.04 140)",
+      primary: "oklch(0.4 0.08 145)",
+      primaryFg: "oklch(0.92 0.02 130)",
+      muted: "oklch(0.83 0.035 130)",
+      mutedFg: "oklch(0.48 0.03 140)",
+      border: "oklch(0.79 0.035 130)",
+    },
+    dark: {
+      bg: "oklch(0.18 0.02 140)",
+      fg: "oklch(0.78 0.025 130)",
+      primary: "oklch(0.6 0.08 145)",
+      primaryFg: "oklch(0.15 0.02 140)",
+      muted: "oklch(0.24 0.02 140)",
+      mutedFg: "oklch(0.58 0.02 130)",
+      border: "oklch(0.3 0.02 140)",
+    },
+  }),
+
+  defineTheme({
+    id: "grayscale",
+    name: "Grayscale",
+    preview: {
+      lightBg: "#efefef",
+      lightText: "#3a3a3a",
+      lightLink: "#555555",
+      darkBg: "#1e1e1e",
+      darkText: "#c8c8c8",
+      darkLink: "#999999",
+    },
+    light: {
+      bg: "oklch(0.96 0 0)",
+      fg: "oklch(0.3 0 0)",
+      primary: "oklch(0.4 0 0)",
+      primaryFg: "oklch(0.96 0 0)",
+      muted: "oklch(0.92 0 0)",
+      mutedFg: "oklch(0.55 0 0)",
+      border: "oklch(0.87 0 0)",
+    },
+    dark: {
+      bg: "oklch(0.18 0 0)",
+      fg: "oklch(0.82 0 0)",
+      primary: "oklch(0.7 0 0)",
+      primaryFg: "oklch(0.18 0 0)",
+      muted: "oklch(0.24 0 0)",
+      mutedFg: "oklch(0.6 0 0)",
+      border: "oklch(0.3 0 0)",
+    },
+  }),
+
+  defineTheme({
+    id: "halloween",
+    name: "Halloween",
+    preview: {
+      lightBg: "#f9f2e3",
+      lightText: "#352200",
+      lightLink: "#cc5500",
+      darkBg: "#1e1000",
+      darkText: "#dfc390",
+      darkLink: "#ff8c00",
+    },
+    light: {
+      bg: "oklch(0.97 0.015 75)",
+      fg: "oklch(0.25 0.04 55)",
+      primary: "oklch(0.6 0.2 50)",
+      primaryFg: "oklch(0.98 0.01 75)",
+      muted: "oklch(0.93 0.02 75)",
+      mutedFg: "oklch(0.5 0.025 55)",
+      border: "oklch(0.88 0.025 75)",
+    },
+    dark: {
+      bg: "oklch(0.16 0.03 50)",
+      fg: "oklch(0.85 0.025 75)",
+      primary: "oklch(0.72 0.19 55)",
+      primaryFg: "oklch(0.14 0.03 50)",
+      muted: "oklch(0.22 0.025 50)",
+      mutedFg: "oklch(0.62 0.02 75)",
+      border: "oklch(0.28 0.025 50)",
+    },
+  }),
+
+  defineTheme({
+    id: "notepad",
+    name: "Notepad",
+    preview: {
+      lightBg: "#fdfce8",
+      lightText: "#333333",
+      lightLink: "#2060b8",
+      darkBg: "#2a291a",
+      darkText: "#d2d2b8",
+      darkLink: "#6695cc",
+    },
+    light: {
+      bg: "oklch(0.985 0.018 95)",
+      fg: "oklch(0.27 0 0)",
+      primary: "oklch(0.5 0.17 260)",
+      primaryFg: "oklch(0.985 0.01 95)",
+      muted: "oklch(0.94 0.022 95)",
+      mutedFg: "oklch(0.52 0 0)",
+      border: "oklch(0.88 0.025 95)",
+    },
+    dark: {
+      bg: "oklch(0.2 0.02 90)",
+      fg: "oklch(0.87 0.015 95)",
+      primary: "oklch(0.65 0.14 260)",
+      primaryFg: "oklch(0.98 0.01 95)",
+      muted: "oklch(0.26 0.018 90)",
+      mutedFg: "oklch(0.62 0.012 95)",
+      border: "oklch(0.32 0.018 90)",
+    },
+  }),
+
+  defineTheme({
+    id: "sonnet",
+    name: "Sonnet",
+    preview: {
+      lightBg: "#f7eef5",
+      lightText: "#2e1e2c",
+      lightLink: "#9845c8",
+      darkBg: "#1d1428",
+      darkText: "#d4c2d0",
+      darkLink: "#c080fc",
+    },
+    light: {
+      bg: "oklch(0.97 0.012 325)",
+      fg: "oklch(0.25 0.02 310)",
+      primary: "oklch(0.55 0.2 300)",
+      primaryFg: "oklch(0.98 0.008 325)",
+      muted: "oklch(0.93 0.016 325)",
+      mutedFg: "oklch(0.52 0.015 310)",
+      border: "oklch(0.88 0.016 325)",
+    },
+    dark: {
+      bg: "oklch(0.18 0.025 300)",
+      fg: "oklch(0.87 0.012 325)",
+      primary: "oklch(0.72 0.18 300)",
+      primaryFg: "oklch(0.98 0.008 325)",
+      muted: "oklch(0.24 0.022 300)",
+      mutedFg: "oklch(0.62 0.012 325)",
+      border: "oklch(0.3 0.022 300)",
+    },
+  }),
+];

package/src/theme/layouts/BaseLayout.tsx

@@ -12,11 +12,17 @@ import type { Context } from "hono";
 import { Script, Link, ViteClient } from "vite-ssr-components/hono";
 import { I18nProvider } from "../../i18n/index.js";
 
+export interface ToastProps {
+  message: string;
+  type?: "success" | "error";
+}
+
 export interface BaseLayoutProps {
   title: string;
   description?: string;
   lang?: string;
   c?: Context;
+  toast?: ToastProps;
 }
 
 export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
@@ -24,6 +30,7 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   description,
   lang,
   c,
+  toast,
   children,
 }) => {
   // Read lang from Hono context if available, otherwise use prop or default
@@ -32,6 +39,9 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   // Automatically wrap with I18nProvider if Context is provided
   const content = c ? <I18nProvider c={c}>{children}</I18nProvider> : children;
 
+  // Read theme style from Hono context if available
+  const themeStyle = c ? c.get("themeStyle") : undefined;
+
   return (
     <html lang={resolvedLang}>
       <head>
@@ -41,9 +51,59 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         {description && <meta name="description" content={description} />}
         <ViteClient />
         <Link href="/src/style.css" rel="stylesheet" />
+        {themeStyle && <style>{themeStyle}</style>}
         <Script src="/src/client.ts" />
       </head>
-      <body class="bg-background text-foreground antialiased">{content}</body>
+      <body class="bg-background text-foreground antialiased">
+        {content}
+        <div id="toast-container" class="toast-container">
+          {toast && (
+            <div
+              class={`toast ${toast.type === "error" ? "toast-error" : "toast-success"}`}
+              data-init="history.replaceState({}, '', location.pathname); setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)"
+            >
+              {toast.type === "error" ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="m15 9-6 6M9 9l6 6" />
+                </svg>
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="m9 12 2 2 4-4" />
+                </svg>
+              )}
+              <span>{toast.message}</span>
+              <button
+                class="toast-close"
+                data-on:click="el.closest('.toast').classList.add('toast-out'); el.closest('.toast').addEventListener('animationend', () => el.closest('.toast').remove())"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+      </body>
     </html>
   );
 };

package/src/theme/layouts/DashLayout.tsx

@@ -7,13 +7,14 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Context } from "hono";
 import { useLingui } from "@lingui/react/macro";
-import { BaseLayout } from "./BaseLayout.js";
+import { BaseLayout, type ToastProps } from "./BaseLayout.js";
 
 export interface DashLayoutProps {
   c: Context;
   title: string;
   siteName: string;
   currentPath?: string;
+  toast?: ToastProps;
 }
 
 function DashLayoutContent({
@@ -41,7 +42,7 @@ function DashLayoutContent({
       {/* Header */}
       <header class="border-b bg-card">
         <div class="container flex h-14 items-center justify-between">
-          <a href="/dash" class="font-semibold">
+          <a id="site-name" href="/dash" class="font-semibold">
             {siteName}
           </a>
           <nav class="flex items-center gap-4">
@@ -134,6 +135,15 @@ function DashLayoutContent({
                 comment: "@context: Dashboard navigation - site settings",
               })}
             </a>
+            <a
+              href="/dash/appearance"
+              class={navClass("/dash/appearance", /^\/dash\/appearance/)}
+            >
+              {t({
+                message: "Appearance",
+                comment: "@context: Dashboard navigation - appearance settings",
+              })}
+            </a>
           </nav>
         </aside>
 
@@ -149,10 +159,11 @@ export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
   title,
   siteName,
   currentPath,
+  toast,
   children,
 }) => {
   return (
-    <BaseLayout title={`${title} - ${siteName}`} c={c}>
+    <BaseLayout title={`${title} - ${siteName}`} c={c} toast={toast}>
       <DashLayoutContent siteName={siteName} currentPath={currentPath}>
         {children}
       </DashLayoutContent>

package/src/theme/layouts/index.ts

@@ -1,2 +1,6 @@
-export { BaseLayout, type BaseLayoutProps } from "./BaseLayout.js";
+export {
+  BaseLayout,
+  type BaseLayoutProps,
+  type ToastProps,
+} from "./BaseLayout.js";
 export { DashLayout, type DashLayoutProps } from "./DashLayout.js";

package/src/types.ts

@@ -43,6 +43,64 @@ export interface Bindings {
   SITE_LANGUAGE?: string;
 }
 
+// =============================================================================
+// Configuration System
+// =============================================================================
+
+/**
+ * Configuration Registry - Single Source of Truth
+ *
+ * All available configuration fields with their metadata.
+ * Add new fields here, and they'll automatically work everywhere.
+ *
+ * Priority logic:
+ * - envOnly: false → User-configurable (DB > ENV > Default)
+ * - envOnly: true → Environment-only (ENV > Default)
+ */
+export const CONFIG_FIELDS = {
+  // User-configurable (can be modified in dashboard)
+  SITE_NAME: {
+    defaultValue: "Jant",
+    envOnly: false,
+  },
+  SITE_DESCRIPTION: {
+    defaultValue: "A microblog powered by Jant",
+    envOnly: false,
+  },
+  SITE_LANGUAGE: {
+    defaultValue: "en",
+    envOnly: false,
+  },
+
+  // Environment-only (deployment/infrastructure config)
+  SITE_URL: {
+    defaultValue: "",
+    envOnly: true,
+  },
+  AUTH_SECRET: {
+    defaultValue: "",
+    envOnly: true,
+  },
+  R2_PUBLIC_URL: {
+    defaultValue: "",
+    envOnly: true,
+  },
+  IMAGE_TRANSFORM_URL: {
+    defaultValue: "",
+    envOnly: true,
+  },
+  DEMO_EMAIL: {
+    defaultValue: "",
+    envOnly: true,
+  },
+  DEMO_PASSWORD: {
+    defaultValue: "",
+    envOnly: true,
+  },
+} as const;
+
+export type ConfigKey = keyof typeof CONFIG_FIELDS;
+
 // =============================================================================
 // Entity Types
 // =============================================================================
@@ -141,6 +199,7 @@ export interface UpdatePost {
 // =============================================================================
 
 import type { FC, PropsWithChildren } from "hono/jsx";
+import type { ColorTheme } from "./theme/color-themes.js";
 
 /**
  * Props for overridable theme components
@@ -193,8 +252,10 @@ export interface JantTheme {
   name?: string;
   /** Component overrides */
   components?: ThemeComponents;
-  /** CSS variable overrides */
+  /** CSS variable overrides (highest priority, always applied) */
   cssVariables?: Record<string, string>;
+  /** Replace built-in color themes with a custom list */
+  colorThemes?: ColorTheme[];
 }
 
 /**

package/src/db/migrations/0001_add_search_fts.sql

@@ -1,40 +0,0 @@
--- FTS5 Full-Text Search for posts
--- This creates a virtual table that indexes post titles and content
-
-CREATE VIRTUAL TABLE IF NOT EXISTS posts_fts USING fts5(
-  title,
-  content,
-  content='posts',
-  content_rowid='id'
-);
---> statement-breakpoint
-
--- Populate FTS table with existing posts
-INSERT INTO posts_fts(rowid, title, content)
-SELECT id, COALESCE(title, ''), COALESCE(content, '') FROM posts WHERE deleted_at IS NULL;
---> statement-breakpoint
-
--- Trigger to keep FTS in sync on INSERT
-CREATE TRIGGER posts_fts_insert AFTER INSERT ON posts
-WHEN NEW.deleted_at IS NULL
-BEGIN
-  INSERT INTO posts_fts(rowid, title, content)
-  VALUES (NEW.id, COALESCE(NEW.title, ''), COALESCE(NEW.content, ''));
-END;
---> statement-breakpoint
-
--- Trigger to keep FTS in sync on UPDATE
-CREATE TRIGGER posts_fts_update AFTER UPDATE ON posts
-BEGIN
-  DELETE FROM posts_fts WHERE rowid = OLD.id;
-  INSERT INTO posts_fts(rowid, title, content)
-  SELECT NEW.id, COALESCE(NEW.title, ''), COALESCE(NEW.content, '')
-  WHERE NEW.deleted_at IS NULL;
-END;
---> statement-breakpoint
-
--- Trigger to remove from FTS on DELETE
-CREATE TRIGGER posts_fts_delete AFTER DELETE ON posts
-BEGIN
-  DELETE FROM posts_fts WHERE rowid = OLD.id;
-END;

package/src/db/migrations/0002_collection_path.sql

@@ -1,2 +0,0 @@
--- Rename slug to path in collections table
-ALTER TABLE collections RENAME COLUMN slug TO path;

package/src/db/migrations/0003_collection_path_nullable.sql

@@ -1,21 +0,0 @@
--- Make collections.path nullable
--- SQLite doesn't support ALTER COLUMN, so we need to recreate the table
-
-PRAGMA foreign_keys=OFF;
-
-CREATE TABLE collections_new (
-  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
-  path TEXT UNIQUE,
-  title TEXT NOT NULL,
-  description TEXT,
-  created_at INTEGER NOT NULL,
-  updated_at INTEGER NOT NULL
-);
-
-INSERT INTO collections_new SELECT * FROM collections;
-
-DROP TABLE collections;
-
-ALTER TABLE collections_new RENAME TO collections;
-
-PRAGMA foreign_keys=ON;

package/src/db/migrations/0004_media_uuid.sql

@@ -1,35 +0,0 @@
--- Migration: Change media.id from integer to UUIDv7 (text)
--- SQLite doesn't support altering primary key types, so we recreate the table
-
--- Create new table with text id
-CREATE TABLE media_new (
-  id TEXT PRIMARY KEY NOT NULL,
-  post_id INTEGER REFERENCES posts(id),
-  filename TEXT NOT NULL,
-  original_name TEXT NOT NULL,
-  mime_type TEXT NOT NULL,
-  size INTEGER NOT NULL,
-  r2_key TEXT NOT NULL,
-  width INTEGER,
-  height INTEGER,
-  alt TEXT,
-  created_at INTEGER NOT NULL
-);
-
--- Migrate existing data (generate UUIDv7-like ids from old integer ids)
--- For existing data, we use a deterministic format based on timestamp + old id
-INSERT INTO media_new (id, post_id, filename, original_name, mime_type, size, r2_key, width, height, alt, created_at)
-SELECT
-  printf('%08x-%04x-7%03x-%04x-%012x',
-    created_at,
-    (id >> 16) & 0xFFFF,
-    id & 0x0FFF,
-    0x8000 | (RANDOM() & 0x3FFF),
-    ABS(RANDOM())
-  ) as id,
-  post_id, filename, original_name, mime_type, size, r2_key, width, height, alt, created_at
-FROM media;
-
--- Drop old table and rename new one
-DROP TABLE media;
-ALTER TABLE media_new RENAME TO media;