@jant/core 0.3.24 → 0.3.26

package/src/{themes/threads/timeline → ui/feed}/QuoteCard.tsx

@@ -1,9 +1,9 @@
 /**
- * Threads Theme - Quote Card
+ * Quote Card
  *
- * Left-border accent blockquote — date is shown at the feed level as a group header.
+ * Left-border accent blockquote with full date in footer.
  *
- * v2 fields:
+ * Fields:
  * - quoteText: the quoted text
  * - title: attribution (who said it)
  * - url: source link
@@ -11,13 +11,17 @@
  */
 
 import type { FC } from "hono/jsx";
-import type { TimelineCardProps } from "../../../types.js";
+import type { TimelineCardProps } from "../../types.js";
 
 export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   return (
-    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="quote"
+    >
       {post.quoteText && (
-        <blockquote class="threads-quote">
+        <blockquote class="feed-quote">
           <div
             class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
           >
@@ -45,16 +49,17 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
       {!compact && post.bodyHtml && (
         <div
           class="mt-3 prose text-muted-foreground"
+          data-post-body
           dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
-      <footer class="mt-2">
+      <footer class="mt-2" data-post-meta>
         <a
           href={post.permalink}
           class="u-url text-xs text-muted-foreground hover:underline"
         >
           <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtRelative}
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/{themes/threads/timeline → ui/feed}/ThreadPreview.tsx

@@ -1,12 +1,12 @@
 /**
- * Threads Theme - Thread Preview
+ * Thread Preview
  *
  * Root post + vertical line connector + compact replies underneath.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { ThreadPreviewProps } from "../../../types.js";
+import type { ThreadPreviewProps } from "../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
 
@@ -14,23 +14,22 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
   previewReplies,
   totalReplyCount,
-  theme,
 }) => {
   const { t } = useLingui();
   const remainingCount = totalReplyCount - previewReplies.length;
 
   return (
     <div>
-      <TimelineItem item={{ post: rootPost }} theme={theme} />
+      <TimelineItem item={{ post: rootPost }} />
       {previewReplies.length > 0 && (
-        <div class="threads-replies">
+        <div class="feed-replies">
           {previewReplies.map((reply) => (
-            <div key={reply.id} class="threads-reply">
-              <TimelineItemFromPost post={reply} compact theme={theme} />
+            <div key={reply.id} class="feed-reply">
+              <TimelineItemFromPost post={reply} compact />
             </div>
           ))}
           {remainingCount > 0 && (
-            <div class="threads-reply">
+            <div class="feed-reply">
               <a
                 href={rootPost.permalink}
                 class="text-sm text-muted-foreground hover:text-foreground hover:underline"

package/src/ui/feed/TimelineFeed.tsx

@@ -0,0 +1,49 @@
+/**
+ * Timeline Feed
+ *
+ * Flat list of posts separated by simple dividers.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineFeedProps } from "../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+import { PagePagination } from "../shared/Pagination.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  currentPage,
+  totalPages,
+}) => {
+  return (
+    <div data-feed>
+      <div id="timeline-feed">
+        <div id="timeline-items" class="flex flex-col">
+          {items.map((item, i) => (
+            <div key={item.post.id}>
+              {i > 0 && <hr class="feed-divider" />}
+              {item.threadPreview ? (
+                <ThreadPreview
+                  rootPost={item.post}
+                  previewReplies={item.threadPreview.replies}
+                  totalReplyCount={item.threadPreview.totalReplyCount}
+                />
+              ) : (
+                <TimelineItem item={item} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      {currentPage !== undefined &&
+        totalPages !== undefined &&
+        totalPages > 1 && (
+          <PagePagination
+            baseUrl="/"
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        )}
+    </div>
+  );
+};

package/src/ui/feed/TimelineItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * Timeline Item
+ *
+ * Dispatches to the correct card component based on post format.
+ */
+
+import type { FC } from "hono/jsx";
+import type {
+  TimelineItemView,
+  TimelineCardProps,
+  PostView,
+  Format,
+} from "../../types.js";
+import { NoteCard } from "./NoteCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+
+const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  link: LinkCard,
+  quote: QuoteCard,
+};
+
+interface TimelineItemProps {
+  item: TimelineItemView;
+  compact?: boolean;
+}
+
+interface TimelineItemFromPostProps {
+  post: PostView;
+  compact?: boolean;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({ item, compact }) => {
+  const Card = CARD_MAP[item.post.format];
+  return <Card post={item.post} compact={compact} />;
+};
+
+export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
+  post,
+  compact,
+}) => {
+  const Card = CARD_MAP[post.format];
+  return <Card post={post} compact={compact} />;
+};

package/src/ui/font-themes.ts

@@ -0,0 +1,54 @@
+/**
+ * Built-in Font Themes
+ *
+ * System-font-only presets — no external font loading required.
+ */
+
+/**
+ * A font theme definition with display metadata.
+ */
+export interface FontTheme {
+  /** Stored in DB settings, e.g. "serif" */
+  id: string;
+  /** Display name, e.g. "Serif" */
+  name: string;
+  /** CSS font-family stack */
+  fontFamily: string;
+  /** Short description for the picker UI */
+  description: string;
+}
+
+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: "与你的操作系统保持一致，最稳定的阅读体验",
+  },
+  {
+    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: "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: "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: "等宽字体，适合技术内容或代码展示",
+  },
+];

package/src/{theme → ui}/layouts/BaseLayout.tsx

@@ -23,6 +23,8 @@ export interface BaseLayoutProps {
   lang?: string;
   c?: Context;
   toast?: ToastProps;
+  faviconUrl?: string;
+  noindex?: boolean;
 }
 
 export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
@@ -31,17 +33,31 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   lang,
   c,
   toast,
+  faviconUrl,
+  noindex,
   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);
+
   // 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;
 
+  // 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;
+
   return (
     <html lang={resolvedLang}>
       <head>
@@ -49,12 +65,23 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title}</title>
         {description && <meta name="description" content={description} />}
+        {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" />
+          </>
+        )}
         <ViteClient />
         <Link href="/src/style.css" rel="stylesheet" />
         {themeStyle && <style>{themeStyle}</style>}
+        {customCSS && <style>{customCSS}</style>}
         <Script src="/src/client.ts" />
       </head>
-      <body class="bg-background text-foreground antialiased">
+      <body
+        class="bg-background text-foreground antialiased"
+        {...(isAuthenticated ? { "data-authenticated": true } : {})}
+      >
         {content}
         <div id="toast-container" class="toast-container">
           {toast && (

package/src/{theme → ui}/layouts/DashLayout.tsx

@@ -126,16 +126,6 @@ function DashLayoutContent({
                 comment: "@context: Dashboard navigation - URL redirects",
               })}
             </a>
-            <a
-              href="/dash/navigation"
-              class={navClass("/dash/navigation", /^\/dash\/navigation/)}
-            >
-              {t({
-                message: "Navigation",
-                comment:
-                  "@context: Dashboard navigation - navigation links management",
-              })}
-            </a>
             <a
               href="/dash/settings"
               class={navClass("/dash/settings", /^\/dash\/settings/)}

package/src/ui/layouts/SiteLayout.tsx

@@ -0,0 +1,164 @@
+/**
+ * Site Layout
+ *
+ * Vertical header: site name on top, custom nav links below, description under nav.
+ * Content area with browse filter tabs and compose prompt/dialog for authenticated users.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { NavItemView, SiteLayoutProps } from "../../types.js";
+import { ComposeDialog } from "../compose/ComposeDialog.js";
+import { ComposePrompt } from "../compose/ComposePrompt.js";
+
+function HeaderLink({ link }: { link: NavItemView }) {
+  return (
+    <a
+      href={link.url}
+      class={`site-header-link ${link.isActive ? "site-header-link-active" : ""}`}
+      {...(link.isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {})}
+    >
+      {link.label}
+    </a>
+  );
+}
+
+export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  siteDescription,
+  links,
+  currentPath,
+  isAuthenticated,
+  collections,
+  homeDefaultView,
+  siteAvatarUrl,
+  showHeaderAvatar,
+  siteFooterHtml,
+  children,
+}) => {
+  const { t } = useLingui();
+
+  const latestHref = homeDefaultView === "featured" ? "/latest" : "/";
+  const featuredHref = homeDefaultView === "featured" ? "/" : "/featured";
+
+  const latestLink = {
+    href: latestHref,
+    label: t({
+      message: "Latest",
+      comment: "@context: Browse filter for latest posts",
+    }),
+  };
+  const featuredLink = {
+    href: featuredHref,
+    label: t({
+      message: "Featured",
+      comment: "@context: Browse filter for featured posts",
+    }),
+  };
+
+  // Default view tab comes first
+  const browseLinks =
+    homeDefaultView === "featured"
+      ? [featuredLink, latestLink]
+      : [latestLink, featuredLink];
+
+  const searchLabel = t({
+    message: "Search",
+    comment: "@context: Search icon link in browse nav",
+  });
+
+  const isHomePage =
+    currentPath === "/" ||
+    currentPath === "/featured" ||
+    currentPath === "/latest";
+
+  return (
+    <div class="site-page">
+      <header class="site-header">
+        <div class="site-header-inner">
+          <div class="site-header-top site-header-top-bordered">
+            <a href="/" class="site-logo">
+              {showHeaderAvatar && siteAvatarUrl && (
+                <img src={siteAvatarUrl} class="site-logo-avatar" alt="" />
+              )}
+              {siteName}
+            </a>
+            <div class="site-header-right">
+              {links.length > 0 && (
+                <nav class="site-header-nav">
+                  {links.map((link) => (
+                    <HeaderLink key={link.id} link={link} />
+                  ))}
+                </nav>
+              )}
+              <a
+                href="/search"
+                class={`site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`}
+                aria-label={searchLabel}
+                title={searchLabel}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.35-4.35" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          {isHomePage && siteDescription && (
+            <p class="site-description">{siteDescription}</p>
+          )}
+        </div>
+      </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}
+          </div>
+        </div>
+      </main>
+
+      {siteFooterHtml && (
+        <footer class="site-footer" data-footer>
+          <div class="site-container">
+            <div
+              class="prose"
+              dangerouslySetInnerHTML={{ __html: siteFooterHtml }}
+            />
+          </div>
+        </footer>
+      )}
+
+      {isAuthenticated && <ComposeDialog collections={collections} />}
+    </div>
+  );
+};

package/src/{themes/threads → ui}/pages/ArchivePage.tsx

@@ -1,14 +1,14 @@
 /**
- * Threads Theme - Archive Page
+ * Archive Page
  *
  * Posts grouped by year-month with format filter and cursor pagination.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { ArchivePageProps } from "../../../types.js";
-import { FORMATS } from "../../../types.js";
-import { Pagination as DefaultPagination } from "../../../theme/index.js";
+import type { ArchivePageProps } from "../../types.js";
+import { FORMATS } from "../../types.js";
+import { Pagination } from "../shared/Pagination.js";
 
 function getFormatLabel(format: string): string {
   const { t } = useLingui();
@@ -39,7 +39,7 @@ function getFormatLabelPlural(format: string): string {
       comment: "@context: Post format label plural - quotes",
     }),
   };
-  return labels[format] ?? `${format}s`;
+  return labels[format] ?? format + "s";
 }
 
 export const ArchivePage: FC<ArchivePageProps> = ({
@@ -48,17 +48,14 @@ export const ArchivePage: FC<ArchivePageProps> = ({
   nextCursor,
   format,
   featured,
-  theme,
 }) => {
   const { t } = useLingui();
   const title = format
     ? getFormatLabelPlural(format)
     : t({ message: "Archive", comment: "@context: Archive page title" });
 
-  const PaginationComponent = theme?.Pagination ?? DefaultPagination;
-
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="archive">
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{title}</h1>
 
@@ -66,7 +63,10 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         <nav class="flex flex-wrap gap-2 mt-4">
           <a
             href="/archive"
-            class={`badge ${!format && !featured ? "badge-primary" : "badge-outline"}`}
+            class={
+              "badge " +
+              (!format && !featured ? "badge-primary" : "badge-outline")
+            }
           >
             {t({
               message: "All",
@@ -76,15 +76,18 @@ export const ArchivePage: FC<ArchivePageProps> = ({
           {FORMATS.map((formatKey) => (
             <a
               key={formatKey}
-              href={`/archive?format=${formatKey}`}
-              class={`badge ${format === formatKey ? "badge-primary" : "badge-outline"}`}
+              href={"/archive?format=" + formatKey}
+              class={
+                "badge " +
+                (format === formatKey ? "badge-primary" : "badge-outline")
+              }
             >
               {getFormatLabelPlural(formatKey)}
             </a>
           ))}
           <a
             href="/archive?featured=true"
-            class={`badge ${featured ? "badge-primary" : "badge-outline"}`}
+            class={"badge " + (featured ? "badge-primary" : "badge-outline")}
           >
             {t({
               message: "Featured",
@@ -104,7 +107,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
           </p>
         ) : (
           groups.map((group) => (
-            <section key={`${group.year}-${group.month}`} class="mb-8">
+            <section key={group.year + "-" + group.month} class="mb-8">
               <h2 class="text-lg font-medium mb-4 text-muted-foreground">
                 {group.label}
               </h2>
@@ -113,6 +116,8 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                   <article
                     key={post.id}
                     class="flex items-baseline gap-4 py-2.5"
+                    data-post
+                    data-format={post.format}
                   >
                     <time
                       class="text-sm text-muted-foreground w-12 shrink-0"
@@ -124,7 +129,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                       <a href={post.permalink} class="hover:underline">
                         {post.title ||
                           post.excerpt?.slice(0, 80) ||
-                          `Post #${post.id}`}
+                          "Post #" + post.id}
                       </a>
                       {!format && (
                         <span class="ml-2 badge-outline text-xs">
@@ -141,10 +146,10 @@ export const ArchivePage: FC<ArchivePageProps> = ({
       </main>
 
       {/* Pagination */}
-      <PaginationComponent
+      <Pagination
         baseUrl={
           format
-            ? `/archive?format=${format}`
+            ? "/archive?format=" + format
             : featured
               ? "/archive?featured=true"
               : "/archive"

package/src/{themes/threads → ui}/pages/CollectionPage.tsx

@@ -1,12 +1,12 @@
 /**
- * Threads Theme - Collection Page
+ * Collection Page
  *
  * Collection header with divider-separated post list.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { CollectionPageProps } from "../../../types.js";
+import type { CollectionPageProps } from "../../types.js";
 
 export const CollectionPage: FC<CollectionPageProps> = ({
   collection,
@@ -15,7 +15,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
   const { t } = useLingui();
 
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="collection">
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{collection.title}</h1>
         {collection.description && (
@@ -34,7 +34,12 @@ export const CollectionPage: FC<CollectionPageProps> = ({
         ) : (
           <div class="divide-y divide-border">
             {posts.map((post) => (
-              <article key={post.id} class="h-entry py-4">
+              <article
+                key={post.id}
+                class="h-entry py-4"
+                data-post
+                data-format={post.format}
+              >
                 {post.title && (
                   <h2 class="p-name text-lg font-medium mb-2">
                     <a href={post.permalink} class="u-url hover:underline">
@@ -44,9 +49,13 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                 )}
                 <div
                   class="e-content prose prose-sm"
+                  data-post-body
                   dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
                 />
-                <footer class="mt-2 text-sm text-muted-foreground">
+                <footer
+                  class="mt-2 text-sm text-muted-foreground"
+                  data-post-meta
+                >
                   <time class="dt-published" datetime={post.publishedAt}>
                     {post.publishedAtFormatted}
                   </time>