@jant/core 0.2.16 → 0.2.18

package/src/routes/dash/posts.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Posts Routes
  */
@@ -54,7 +55,7 @@ postsRoutes.get("/", async (c) => {
   const posts = await c.var.services.posts.list({
     visibility: ["featured", "quiet", "unlisted", "draft"],
   });
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -70,7 +71,7 @@ postsRoutes.get("/", async (c) => {
 
 // New post form
 postsRoutes.get("/new", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout
@@ -166,7 +167,7 @@ postsRoutes.get("/:id", async (c) => {
   const post = await c.var.services.posts.getById(id);
   if (!post) return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const pageTitle = post.title || "Post";
 
   return c.html(
@@ -189,7 +190,7 @@ postsRoutes.get("/:id/edit", async (c) => {
   const post = await c.var.services.posts.getById(id);
   if (!post) return c.notFound();
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout

package/src/routes/dash/redirects.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Dashboard Redirects Routes
  */
@@ -176,7 +177,7 @@ function NewRedirectContent() {
 
 // List redirects
 redirectsRoutes.get("/", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const redirects = await c.var.services.redirects.list();
 
   return c.html(
@@ -193,7 +194,7 @@ redirectsRoutes.get("/", async (c) => {
 
 // New redirect form
 redirectsRoutes.get("/new", async (c) => {
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <DashLayout

package/src/routes/dash/settings.tsx

@@ -8,6 +8,7 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { sse } from "../../lib/sse.js";
+import { getSiteLanguage, getConfigFallback } from "../../lib/config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -17,12 +18,14 @@ function SettingsContent({
   siteName,
   siteDescription,
   siteLanguage,
-  saved,
+  siteNameFallback,
+  siteDescriptionFallback,
 }: {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
-  saved: boolean;
+  siteNameFallback: string;
+  siteDescriptionFallback: string;
 }) {
   const { t } = useLingui();
 
@@ -38,27 +41,11 @@ function SettingsContent({
         {t({ message: "Settings", comment: "@context: Dashboard heading" })}
       </h1>
 
-      {saved && (
-        <div
-          id="settings-saved-toast"
-          class="alert mb-4 max-w-lg transition-opacity duration-300"
-          data-init={`console.log('[toast] init fired at', Date.now()); history.replaceState({}, '', '/dash/settings'); setTimeout(() => { console.log('[toast] hiding at', Date.now()); const el = document.getElementById('settings-saved-toast'); if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 300) } }, 3000)`}
-        >
-          <h2>
-            {t({
-              message: "Settings saved successfully.",
-              comment: "@context: Toast message after saving settings",
-            })}
-          </h2>
-        </div>
-      )}
-
       <div class="flex flex-col gap-6 max-w-lg">
         <form
           data-signals={generalSignals}
           data-on:submit__prevent="@post('/dash/settings')"
         >
-          <div id="settings-message"></div>
           <div class="card">
             <header>
               <h2>
@@ -80,7 +67,7 @@ function SettingsContent({
                   type="text"
                   data-bind="siteName"
                   class="input"
-                  required
+                  placeholder={siteNameFallback}
                 />
               </div>
 
@@ -91,7 +78,12 @@ function SettingsContent({
                     comment: "@context: Settings form field",
                   })}
                 </label>
-                <textarea data-bind="siteDescription" class="textarea" rows={3}>
+                <textarea
+                  data-bind="siteDescription"
+                  class="textarea"
+                  rows={3}
+                  placeholder={siteDescriptionFallback}
+                >
                   {siteDescription}
                 </textarea>
               </div>
@@ -130,7 +122,6 @@ function SettingsContent({
           data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
           data-on:submit__prevent="@post('/dash/settings/password')"
         >
-          <div id="password-message"></div>
           <div class="card">
             <header>
               <h2>
@@ -207,24 +198,33 @@ function SettingsContent({
 
 // Settings page
 settingsRoutes.get("/", async (c) => {
-  const all = await c.var.services.settings.getAll();
-  const siteName = all["SITE_NAME"] ?? "Jant";
-  const siteDescription = all["SITE_DESCRIPTION"] ?? "";
-  const siteLanguage = all["SITE_LANGUAGE"] ?? "en";
+  const { settings } = c.var.services;
+
+  // Fetch raw DB values (null if not set)
+  const dbSiteName = await settings.get("SITE_NAME");
+  const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
+  const siteLanguage = await getSiteLanguage(c);
+
+  // Fallback values (ENV > Default) for placeholders
+  const siteNameFallback = getConfigFallback(c, "SITE_NAME");
+  const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
+
   const saved = c.req.query("saved") !== undefined;
 
   return c.html(
     <DashLayout
       c={c}
       title="Settings"
-      siteName={siteName}
+      siteName={dbSiteName || siteNameFallback}
       currentPath="/dash/settings"
+      toast={saved ? { message: "Settings saved successfully." } : undefined}
     >
       <SettingsContent
-        siteName={siteName}
-        siteDescription={siteDescription}
+        siteName={dbSiteName || ""}
+        siteDescription={dbSiteDescription || ""}
         siteLanguage={siteLanguage}
-        saved={saved}
+        siteNameFallback={siteNameFallback}
+        siteDescriptionFallback={siteDescriptionFallback}
       />
     </DashLayout>,
   );
@@ -238,14 +238,25 @@ settingsRoutes.post("/", async (c) => {
     siteLanguage: string;
   }>();
 
-  const oldLanguage =
-    (await c.var.services.settings.get("SITE_LANGUAGE")) ?? "en";
+  const { settings } = c.var.services;
 
-  await c.var.services.settings.setMany({
-    SITE_NAME: body.siteName,
-    SITE_DESCRIPTION: body.siteDescription,
-    SITE_LANGUAGE: body.siteLanguage,
-  });
+  const oldLanguage = (await settings.get("SITE_LANGUAGE")) ?? "en";
+
+  // For text fields: empty = remove from DB (fall back to ENV > Default)
+  if (body.siteName.trim()) {
+    await settings.set("SITE_NAME", body.siteName.trim());
+  } else {
+    await settings.remove("SITE_NAME");
+  }
+
+  if (body.siteDescription.trim()) {
+    await settings.set("SITE_DESCRIPTION", body.siteDescription.trim());
+  } else {
+    await settings.remove("SITE_DESCRIPTION");
+  }
+
+  // Language always has a value from the select
+  await settings.set("SITE_LANGUAGE", body.siteLanguage);
 
   const languageChanged = oldLanguage !== body.siteLanguage;
 
@@ -254,10 +265,7 @@ settingsRoutes.post("/", async (c) => {
       // Language changed - full reload needed to update all UI text
       await stream.redirect("/dash/settings?saved");
     } else {
-      // No language change - show inline success message
-      await stream.patchElements(
-        '<div id="settings-message"><div class="alert mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)"><h2>Settings saved successfully.</h2></div></div>',
-      );
+      await stream.toast("Settings saved successfully.");
     }
   });
 });
@@ -272,9 +280,7 @@ settingsRoutes.post("/password", async (c) => {
 
   if (body.newPassword !== body.confirmPassword) {
     return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Passwords do not match.</h2></div></div>',
-      );
+      await stream.toast("Passwords do not match.", "error");
     });
   }
 
@@ -289,16 +295,12 @@ settingsRoutes.post("/password", async (c) => {
     });
   } catch {
     return sse(c, async (stream) => {
-      await stream.patchElements(
-        '<div id="password-message"><div class="alert-destructive mb-4"><h2>Current password is incorrect.</h2></div></div>',
-      );
+      await stream.toast("Current password is incorrect.", "error");
     });
   }
 
   return sse(c, async (stream) => {
-    await stream.patchElements(
-      '<div id="password-message"><div class="alert mb-4"><h2>Password changed successfully.</h2></div></div>',
-    );
+    await stream.toast("Password changed successfully.");
     await stream.patchSignals({
       currentPassword: "",
       newPassword: "",

package/src/routes/pages/archive.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Archive Page Route
  *
@@ -225,7 +226,7 @@ archiveRoutes.get("/", async (c) => {
   const cursorParam = c.req.query("cursor");
   const cursor = cursorParam ? parseInt(cursorParam, 10) : undefined;
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   // Fetch one extra to check for more
   const posts = await c.var.services.posts.list({

package/src/routes/pages/collection.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Collection Page Route
  */
@@ -89,7 +90,7 @@ collectionRoutes.get("/:path", async (c) => {
   if (!collection) return c.notFound();
 
   const posts = await c.var.services.collections.getPosts(collection.id);
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <BaseLayout

package/src/routes/pages/home.tsx

@@ -9,6 +9,7 @@ import type { AppVariables } from "../../app.js";
 import { BaseLayout } from "../../theme/layouts/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
+import { getSiteName } from "../../lib/config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -106,7 +107,7 @@ homeRoutes.get("/", async (c) => {
     return c.redirect("/setup");
   }
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   const posts = await c.var.services.posts.list({
     visibility: ["featured", "quiet"],

package/src/routes/pages/page.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Custom Page Route
  *
@@ -60,7 +61,7 @@ pageRoutes.get("/:path", async (c) => {
     return c.notFound();
   }
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   return c.html(
     <BaseLayout

package/src/routes/pages/post.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Single Post Page Route
  */
@@ -81,7 +82,7 @@ postRoutes.get("/:id", async (c) => {
     return c.notFound();
   }
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
   const title = post.title || siteName;
 
   return c.html(

package/src/routes/pages/search.tsx

@@ -1,3 +1,4 @@
+import { getSiteName } from "../../lib/config.js";
 /**
  * Search Page Route
  */
@@ -155,7 +156,7 @@ searchRoutes.get("/", async (c) => {
   const pageParam = c.req.query("page");
   const page = pageParam ? Math.max(1, parseInt(pageParam, 10) || 1) : 1;
 
-  const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
+  const siteName = await getSiteName(c);
 
   // Only search if there's a query
   let results: Awaited<ReturnType<typeof c.var.services.search.search>> = [];

package/src/services/settings.ts

@@ -19,6 +19,7 @@ export interface SettingsService {
   getAll(): Promise<Record<string, string>>;
   set(key: SettingsKey, value: string): Promise<void>;
   setMany(entries: Partial<Record<SettingsKey, string>>): Promise<void>;
+  remove(key: SettingsKey): Promise<void>;
   isOnboardingComplete(): Promise<boolean>;
   completeOnboarding(): Promise<void>;
 }
@@ -54,6 +55,10 @@ export function createSettingsService(db: Database): SettingsService {
         });
     },
 
+    async remove(key) {
+      await db.delete(settings).where(eq(settings.key, key));
+    },
+
     async setMany(entries) {
       const timestamp = now();
       const keys = Object.keys(entries) as SettingsKey[];

package/src/styles/components.css

@@ -12,6 +12,32 @@
   }
 }
 
+/* Alert variants */
+@layer components {
+  .alert-success {
+    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
+    @apply text-success bg-card [&>svg]:text-current;
+
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6,
+    > strong,
+    > [data-title] {
+      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
+    }
+
+    > section {
+      @apply text-success col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
+
+      ul {
+        @apply list-inside list-disc text-sm;
+      }
+    }
+  }
+}
+
 /* Badge components */
 @layer components {
   .badge {
@@ -45,3 +71,70 @@
     color: white;
   }
 }
+
+/* Toast notifications */
+@layer components {
+  .toast-container {
+    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none;
+  }
+
+  .toast {
+    @apply pointer-events-auto rounded-lg border px-4 py-3 text-sm shadow-lg;
+    @apply flex items-start gap-2.5 min-w-64 max-w-sm;
+    background-color: var(--color-card);
+    animation: toast-in 0.3s ease-out;
+
+    > svg:first-child {
+      @apply size-4 shrink-0 translate-y-0.5;
+    }
+
+    > span {
+      @apply flex-1;
+    }
+  }
+
+  .toast-success {
+    color: var(--color-success);
+  }
+
+  .toast-error {
+    color: var(--color-destructive);
+  }
+
+  .toast-close {
+    @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
+    color: var(--color-muted-foreground);
+
+    &:hover {
+      color: var(--color-foreground);
+    }
+
+    > svg {
+      @apply size-3.5;
+    }
+  }
+
+  .toast-out {
+    animation: toast-out 0.3s ease-in forwards;
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toast-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}