@jant/core 0.3.27 → 0.3.28

package/src/ui/font-themes.ts

@@ -1,54 +1,137 @@
 /**
  * Built-in Font Themes
  *
- * System-font-only presets — no external font loading required.
+ * Heading + body font pairings using system fonts only — no external font
+ * loading required. Each theme sets `--font-heading` and `--font-body`
+ * independently to enable classic editorial combinations.
+ *
+ * Name and description are MessageDescriptor objects for i18n support.
+ * Pass them to t() from useLingui() when rendering.
  */
 
+import type { MessageDescriptor } from "@lingui/core";
+
 /**
- * A font theme definition with display metadata.
+ * A font theme definition with heading + body pairing.
  */
 export interface FontTheme {
-  /** Stored in DB settings, e.g. "serif" */
+  /** Stored in DB settings, e.g. "classic-editorial" */
   id: string;
-  /** Display name, e.g. "Serif" */
-  name: string;
-  /** CSS font-family stack */
-  fontFamily: string;
-  /** Short description for the picker UI */
-  description: string;
+  /** Display name — pass to t() for translation */
+  name: MessageDescriptor;
+  /** CSS font-family stack for headings (h1-h6, site logo) */
+  headingFontFamily: string;
+  /** CSS font-family stack for body text */
+  bodyFontFamily: string;
+  /** Short description for the picker UI — pass to t() for translation */
+  description: MessageDescriptor;
 }
 
+/** System sans-serif stack */
+const SANS =
+  'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif';
+
+/**
+ * Editorial serif stack
+ *
+ * ui-serif → New York (macOS 10.15+); Iowan Old Style (macOS/iOS);
+ * Charter (macOS); Cambria / Sitka Text (Windows); Georgia (universal)
+ */
+const EDITORIAL_SERIF =
+  'ui-serif, "Iowan Old Style", Charter, "Bitstream Charter", Cambria, "Sitka Text", Georgia, "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif';
+
+/**
+ * Classical serif stack
+ *
+ * Palatino (macOS); Palatino Linotype / Book Antiqua (Windows);
+ * Old-style serif with calligraphic warmth
+ */
+const CLASSICAL_SERIF =
+  'Palatino, "Palatino Linotype", "Book Antiqua", "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif';
+
+/**
+ * Geometric sans stack
+ *
+ * Futura (macOS); Century Gothic (Windows); clean geometric proportions
+ */
+const GEOMETRIC_SANS =
+  'Futura, "Century Gothic", "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif';
+
 export const BUILTIN_FONT_THEMES: FontTheme[] = [
   {
     id: "default",
-    name: "System Default",
-    // 现代系统字体栈：先英文，后 Mac/iOS 中文，再 Win 中文
-    fontFamily:
-      'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", sans-serif',
-    description: "与你的操作系统保持一致，最稳定的阅读体验",
+    name: {
+      id: "System Default",
+      message: "System Default",
+      comment: "@context: Font theme name",
+    },
+    headingFontFamily: SANS,
+    bodyFontFamily: SANS,
+    description: {
+      id: "Matches your OS native font for consistent reading",
+      message: "Matches your OS native font for consistent reading",
+      comment: "@context: Font theme description",
+    },
+  },
+
+  {
+    id: "modern-editorial",
+    name: {
+      id: "Modern Editorial",
+      message: "Modern Editorial",
+      comment: "@context: Font theme name",
+    },
+    headingFontFamily: SANS,
+    bodyFontFamily: EDITORIAL_SERIF,
+    description: {
+      id: "Clean sans-serif headings with elegant serif body text",
+      message: "Clean sans-serif headings with elegant serif body text",
+      comment: "@context: Font theme description",
+    },
   },
   {
-    id: "serif",
-    name: "Classic Serif",
-    // Charter 是 Apple 系统自带的极品衬线体
-    fontFamily:
-      'Charter, "Bitstream Charter", "Sitka Text", Georgia, "Songti SC", "Source Han Serif CN", "STSong", "SimSun", serif',
-    description: "传统的衬线体，适合深度长文阅读",
+    id: "classic-editorial",
+    name: {
+      id: "Classic Editorial",
+      message: "Classic Editorial",
+      comment: "@context: Font theme name",
+    },
+    headingFontFamily: EDITORIAL_SERIF,
+    bodyFontFamily: SANS,
+    description: {
+      id: "Serif headings with clean sans-serif body text",
+      message: "Serif headings with clean sans-serif body text",
+      comment: "@context: Font theme description",
+    },
   },
   {
-    id: "humanist",
-    name: "Humanist",
-    // Optima 具有书法韵味，Candara 是 Windows 上的优质人文体
-    fontFamily:
-      'Optima, Candara, "Noto Sans", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
-    description: "温润如玉的字体风格，兼具现代感与书法美感",
+    id: "literary",
+    name: {
+      id: "Literary",
+      message: "Literary",
+      comment: "@context: Font theme name",
+    },
+    headingFontFamily: CLASSICAL_SERIF,
+    bodyFontFamily: EDITORIAL_SERIF,
+    description: {
+      id: "Full serif pairing for immersive long-form reading",
+      message: "Full serif pairing for immersive long-form reading",
+      comment: "@context: Font theme description",
+    },
   },
   {
-    id: "mono",
-    name: "Monospace",
-    // 优先使用 JetBrains Mono 或 SF Mono
-    fontFamily:
-      '"JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", "PingFang SC", "Microsoft YaHei", monospace',
-    description: "等宽字体，适合技术内容或代码展示",
+    id: "geometric",
+    name: {
+      id: "Geometric",
+      message: "Geometric",
+      comment: "@context: Font theme name",
+    },
+    headingFontFamily: GEOMETRIC_SANS,
+    bodyFontFamily: SANS,
+    description: {
+      id: "Bold geometric headings with clean sans-serif body text",
+      message: "Bold geometric headings with clean sans-serif body text",
+      comment: "@context: Font theme description",
+    },
   },
 ];

package/src/ui/layouts/BaseLayout.tsx

@@ -4,12 +4,13 @@
  * Provides the HTML shell with meta tags, styles, and scripts.
  * If Context is provided, automatically wraps children with I18nProvider.
  *
- * Uses vite-ssr-components for automatic dev/prod asset path resolution.
+ * In dev mode (Vite), serves assets via Vite's dev server.
+ * In production, serves pre-built assets with version cache-busting.
  */
 
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Context } from "hono";
-import { Script, Link, ViteClient } from "vite-ssr-components/hono";
+import { CORE_VERSION, IS_VITE_DEV } from "../../lib/version.js";
 import { I18nProvider } from "../../i18n/index.js";
 
 export interface ToastProps {
@@ -24,7 +25,9 @@ export interface BaseLayoutProps {
   c?: Context;
   toast?: ToastProps;
   faviconUrl?: string;
+  faviconVersion?: string;
   noindex?: boolean;
+  isAuthenticated?: boolean;
 }
 
 export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
@@ -34,17 +37,21 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   c,
   toast,
   faviconUrl,
+  faviconVersion,
   noindex,
+  isAuthenticated = false,
   children,
 }) => {
   // Read lang from Hono context if available, otherwise use prop or default
   const resolvedLang = lang ?? (c ? c.get("lang") : "en");
 
-  // Read faviconUrl from context when not provided as prop (fixes dashboard favicon)
-  const resolvedFaviconUrl = faviconUrl ?? (c ? c.get("faviconUrl") : undefined);
-
-  // Read noindex from context when not provided as prop
-  const resolvedNoindex = noindex ?? (c ? c.get("noindex") : undefined);
+  // Read favicon/noindex from appConfig when not provided as prop
+  const appConfig = c ? c.get("appConfig") : undefined;
+  const resolvedFaviconUrl =
+    faviconUrl ?? (appConfig?.siteAvatarUrl || undefined);
+  const resolvedFaviconVersion =
+    faviconVersion ?? (appConfig?.faviconVersion || undefined);
+  const resolvedNoindex = noindex ?? appConfig?.noindex;
 
   // Automatically wrap with I18nProvider if Context is provided
   const content = c ? <I18nProvider c={c}>{children}</I18nProvider> : children;
@@ -52,11 +59,8 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   // Read theme style from Hono context if available
   const themeStyle = c ? c.get("themeStyle") : undefined;
 
-  // Read custom CSS from Hono context if available
-  const customCSS = c ? c.get("customCSS") : undefined;
-
-  // Check authentication status for data attribute
-  const isAuthenticated = c ? c.get("isAuthenticated") : false;
+  // Read custom CSS from appConfig
+  const customCSS = appConfig?.customCSS || undefined;
 
   return (
     <html lang={resolvedLang}>
@@ -68,15 +72,41 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         {resolvedNoindex && <meta name="robots" content="noindex, nofollow" />}
         {resolvedFaviconUrl && (
           <>
-            <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />
-            <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+            <link
+              rel="icon"
+              href={
+                resolvedFaviconVersion
+                  ? `/favicon.ico?v=${resolvedFaviconVersion}`
+                  : "/favicon.ico"
+              }
+              sizes="16x16 32x32"
+            />
+            <link
+              rel="apple-touch-icon"
+              href={
+                resolvedFaviconVersion
+                  ? `/apple-touch-icon.png?v=${resolvedFaviconVersion}`
+                  : "/apple-touch-icon.png"
+              }
+              sizes="180x180"
+            />
           </>
         )}
-        <ViteClient />
-        <Link href="/src/style.css" rel="stylesheet" />
-        {themeStyle && <style>{themeStyle}</style>}
-        {customCSS && <style>{customCSS}</style>}
-        <Script src="/src/client.ts" />
+        {IS_VITE_DEV && <script type="module" src="/@vite/client" />}
+        <link
+          rel="stylesheet"
+          href={
+            IS_VITE_DEV ? "/src/style.css" : `/client.css?v=${CORE_VERSION}`
+          }
+        />
+        {themeStyle && (
+          <style dangerouslySetInnerHTML={{ __html: themeStyle }} />
+        )}
+        {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+        <script
+          type="module"
+          src={IS_VITE_DEV ? "/src/client.ts" : `/client.js?v=${CORE_VERSION}`}
+        />
       </head>
       <body
         class="bg-background text-foreground antialiased"

package/src/ui/layouts/DashLayout.tsx

@@ -41,7 +41,7 @@ function DashLayoutContent({
     <div class="min-h-screen">
       {/* Header */}
       <header class="border-b bg-card">
-        <div class="container flex h-14 items-center justify-between">
+        <div class="container-sidebar flex h-14 items-center justify-between">
           <a id="site-name" href="/dash" class="font-semibold">
             {siteName}
           </a>
@@ -70,9 +70,9 @@ function DashLayoutContent({
       </header>
 
       {/* Sidebar + Main */}
-      <div class="container flex gap-8 py-8">
+      <div class="container-sidebar sidebar-layout py-8">
         {/* Sidebar */}
-        <aside class="w-48 shrink-0">
+        <aside class="sidebar-nav">
           <nav class="flex flex-col gap-1">
             <a href="/dash" class={navClass("/dash", /^\/dash$/)}>
               {t({
@@ -118,12 +118,12 @@ function DashLayoutContent({
               })}
             </a>
             <a
-              href="/dash/redirects"
-              class={navClass("/dash/redirects", /^\/dash\/redirects/)}
+              href="/dash/appearance"
+              class={navClass("/dash/appearance", /^\/dash\/appearance/)}
             >
               {t({
-                message: "Redirects",
-                comment: "@context: Dashboard navigation - URL redirects",
+                message: "Appearance",
+                comment: "@context: Dashboard navigation - appearance settings",
               })}
             </a>
             <a
@@ -139,7 +139,7 @@ function DashLayoutContent({
         </aside>
 
         {/* Main content */}
-        <main class="flex-1 min-w-0">{children}</main>
+        <main class="sidebar-main">{children}</main>
       </div>
     </div>
   );
@@ -154,7 +154,12 @@ export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
   children,
 }) => {
   return (
-    <BaseLayout title={`${title} - ${siteName}`} c={c} toast={toast}>
+    <BaseLayout
+      title={`${title} - ${siteName}`}
+      c={c}
+      toast={toast}
+      isAuthenticated={true}
+    >
       <DashLayoutContent siteName={siteName} currentPath={currentPath}>
         {children}
       </DashLayoutContent>

package/src/ui/layouts/SiteLayout.tsx

@@ -36,6 +36,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   siteAvatarUrl,
   showHeaderAvatar,
   siteFooterHtml,
+  sidebar,
   children,
 }) => {
   const { t } = useLingui();
@@ -76,7 +77,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
 
   return (
     <div class="site-page">
-      <header class="site-header">
+      <header class={`site-header ${sidebar ? "site-header-sidebar" : ""}`}>
         <div class="site-header-inner">
           <div class="site-header-top site-header-top-bordered">
             <a href="/" class="site-logo">
@@ -123,32 +124,46 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
       </header>
 
       <main class="site-main">
-        <div class="site-container">
-          <div class="site-content">
-            {isHomePage && (
-              <nav class="site-browse-nav">
-                {browseLinks.map((link, i) => (
-                  <>
-                    {i > 0 && <span class="site-browse-sep">/</span>}
-                    <a
-                      key={link.href}
-                      href={link.href}
-                      class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
-                    >
-                      {link.label}
-                    </a>
-                  </>
-                ))}
-              </nav>
-            )}
-            {isHomePage && isAuthenticated && <ComposePrompt />}
-            {children}
+        {sidebar ? (
+          <div class="container-sidebar">
+            <div class="sidebar-layout">
+              <aside class="sidebar-nav">{sidebar}</aside>
+              <div class="sidebar-main">
+                <div class="site-content">{children}</div>
+              </div>
+            </div>
           </div>
-        </div>
+        ) : (
+          <div class="site-container">
+            <div class="site-content">
+              {isHomePage && (
+                <nav class="site-browse-nav">
+                  {browseLinks.map((link, i) => (
+                    <>
+                      {i > 0 && <span class="site-browse-sep">/</span>}
+                      <a
+                        key={link.href}
+                        href={link.href}
+                        class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
+                      >
+                        {link.label}
+                      </a>
+                    </>
+                  ))}
+                </nav>
+              )}
+              {isHomePage && isAuthenticated && <ComposePrompt />}
+              {children}
+            </div>
+          </div>
+        )}
       </main>
 
       {siteFooterHtml && (
-        <footer class="site-footer" data-footer>
+        <footer
+          class={`site-footer ${sidebar ? "site-footer-sidebar" : ""}`}
+          data-footer
+        >
           <div class="site-container">
             <div
               class="prose"

package/src/ui/pages/CollectionPage.tsx

@@ -1,23 +1,33 @@
 /**
  * Collection Page
  *
- * Collection header with divider-separated post list.
+ * Collection header with icon and divider-separated post list.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { CollectionPageProps } from "../../types.js";
+import { renderCollectionIcon } from "../../lib/icons.js";
 
 export const CollectionPage: FC<CollectionPageProps> = ({
   collection,
   posts,
 }) => {
   const { t } = useLingui();
+  const iconHtml = renderCollectionIcon(collection.icon, { size: 28 });
 
   return (
     <div class="py-6" data-page="collection">
       <header class="mb-8">
-        <h1 class="text-2xl font-semibold">{collection.title}</h1>
+        <h1 class="text-2xl font-semibold flex items-center gap-3">
+          {iconHtml && (
+            <span
+              class="shrink-0"
+              dangerouslySetInnerHTML={{ __html: iconHtml }}
+            />
+          )}
+          {collection.title}
+        </h1>
         {collection.description && (
           <p class="text-muted-foreground mt-2">{collection.description}</p>
         )}

package/src/ui/pages/CollectionsPage.tsx

@@ -1,12 +1,13 @@
 /**
  * Collections Listing Page
  *
- * Lists all collections with titles, descriptions, and post counts.
+ * 2-column card grid of collections with icons and post counts.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { CollectionsPageProps } from "../../types.js";
+import { renderCollectionIcon } from "../../lib/icons.js";
 
 export const CollectionsPage: FC<CollectionsPageProps> = ({ collections }) => {
   const { t } = useLingui();
@@ -31,38 +32,37 @@ export const CollectionsPage: FC<CollectionsPageProps> = ({ collections }) => {
             })}
           </p>
         ) : (
-          <div class="divide-y divide-border">
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
             {collections.map((collection) => (
               <a
                 key={collection.id}
-                href={"/c/" + collection.slug}
-                class="block py-4 hover:bg-accent/50 -mx-4 px-4 rounded-md transition-colors"
+                href={`/c/${collection.slug}`}
+                class="collection-card"
               >
                 <div class="flex items-center gap-3">
-                  {collection.icon && (
-                    <span class="text-2xl">{collection.icon}</span>
-                  )}
-                  <div class="flex-1 min-w-0">
-                    <h2 class="font-medium">{collection.title}</h2>
-                    {collection.description && (
-                      <p class="text-sm text-muted-foreground mt-1">
-                        {collection.description}
-                      </p>
-                    )}
-                  </div>
-                  <span class="text-sm text-muted-foreground shrink-0">
-                    {collection.postCount}{" "}
-                    {collection.postCount === 1
-                      ? t({
-                          message: "post",
-                          comment: "@context: Singular post count label",
-                        })
-                      : t({
-                          message: "posts",
-                          comment: "@context: Plural post count label",
-                        })}
-                  </span>
+                  <span
+                    class="collection-card-icon"
+                    dangerouslySetInnerHTML={{
+                      __html: renderCollectionIcon(collection.icon, {
+                        size: 20,
+                        fallback: true,
+                      }),
+                    }}
+                  />
+                  <span class="font-medium">{collection.title}</span>
                 </div>
+                <p class="text-sm text-muted-foreground mt-1">
+                  {collection.postCount}{" "}
+                  {collection.postCount === 1
+                    ? t({
+                        message: "entry",
+                        comment: "@context: Singular entry count label",
+                      })
+                    : t({
+                        message: "entries",
+                        comment: "@context: Plural entry count label",
+                      })}
+                </p>
               </a>
             ))}
           </div>

package/src/ui/pages/HomePage.tsx

@@ -19,12 +19,21 @@ export const HomePage: FC<HomePageProps> = ({
   return (
     <div data-page="home">
       {items.length === 0 ? (
-        <p class="py-12 text-center text-muted-foreground">
-          {t({
-            message: "No posts yet.",
-            comment: "@context: Empty state message on home page",
-          })}
-        </p>
+        <div data-feed>
+          <div id="timeline-feed">
+            <div id="timeline-items" class="flex flex-col">
+              <p
+                id="empty-timeline"
+                class="py-12 text-center text-muted-foreground"
+              >
+                {t({
+                  message: "No posts yet.",
+                  comment: "@context: Empty state message on home page",
+                })}
+              </p>
+            </div>
+          </div>
+        </div>
       ) : (
         <TimelineFeed
           items={items}

package/src/ui/pages/SearchPage.tsx

@@ -71,9 +71,8 @@ export const SearchPage: FC<SearchPageProps> = ({
                     comment: "@context: Search results count - single",
                   })
                 : t({
-                    message: "Found {count} results",
+                    message: `Found ${String(results.length)} results`,
                     comment: "@context: Search results count - multiple",
-                    values: { count: String(results.length) },
                   })}
           </p>
 

package/src/ui/shared/CollectionsSidebar.tsx

@@ -0,0 +1,59 @@
+/**
+ * Collections Sidebar
+ *
+ * Shared sidebar navigation for public collection pages.
+ * Shows all collections with icons and active state.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../types.js";
+import { renderCollectionIcon } from "../../lib/icons.js";
+
+export interface CollectionsSidebarProps {
+  collections: Collection[];
+  activeSlug?: string;
+}
+
+export const CollectionsSidebar: FC<CollectionsSidebarProps> = ({
+  collections,
+  activeSlug,
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <nav class="flex flex-col gap-1 pt-6">
+      <h2 class="px-3 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        {t({
+          message: "Collections",
+          comment: "@context: Sidebar heading for collections nav",
+        })}
+      </h2>
+      {collections.map((col) => {
+        const isActive = col.slug === activeSlug;
+        return (
+          <a
+            key={col.id}
+            href={`/c/${col.slug}`}
+            class={`flex items-center gap-2.5 px-3 py-2 text-sm rounded-md truncate ${
+              isActive
+                ? "bg-accent text-accent-foreground font-medium"
+                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            }`}
+          >
+            <span
+              class="flex items-center justify-center w-4 h-4 shrink-0"
+              dangerouslySetInnerHTML={{
+                __html: renderCollectionIcon(col.icon, {
+                  size: 16,
+                  fallback: true,
+                }),
+              }}
+            />
+            <span class="truncate">{col.title}</span>
+          </a>
+        );
+      })}
+    </nav>
+  );
+};

package/src/ui/shared/Pagination.tsx

@@ -224,10 +224,10 @@ export const PagePagination: FC<PagePaginationProps> = ({
   }
 
   // Simple prev/next fallback when totalPages is unknown
+  const page = String(currentPage);
   const pageText = t({
-    message: "Page {page}",
+    message: `Page ${page}`,
     comment: "@context: Pagination - current page indicator",
-    values: { page: String(currentPage) },
   });
 
   return (