@jant/core 0.3.22 → 0.3.24

package/src/theme/components/PostList.tsx

@@ -37,56 +37,65 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
 
   return (
     <div class="flex flex-col divide-y">
-      {posts.map((post) => (
-        <ListItemRow
-          key={post.id}
-          actions={
-            <ActionButtons
-              editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-              editLabel={t({
-                message: "Edit",
-                comment: "@context: Button to edit post",
-              })}
-              viewHref={`/p/${sqid.encode(post.id)}`}
-              viewLabel={t({
-                message: "View",
-                comment: "@context: Button to view post on public site",
-              })}
-              deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
-              deleteConfirm={t({
-                message:
-                  "Are you sure you want to delete this post? This cannot be undone.",
-                comment:
-                  "@context: Confirmation dialog when deleting a post from the list",
-              })}
-            />
-          }
-        >
-          <div class="flex items-center gap-2 mb-1">
-            <TypeBadge type={post.type} />
-            <VisibilityBadge visibility={post.visibility} />
-            <span class="text-xs text-muted-foreground">
-              {time.formatDate(post.publishedAt)}
-            </span>
-          </div>
-          <a
-            href={`/dash/posts/${sqid.encode(post.id)}`}
-            class="font-medium hover:underline"
+      {posts.map((post) => {
+        const permalink = post.slug
+          ? `/${post.slug}`
+          : `/p/${sqid.encode(post.id)}`;
+        return (
+          <ListItemRow
+            key={post.id}
+            actions={
+              <ActionButtons
+                editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
+                editLabel={t({
+                  message: "Edit",
+                  comment: "@context: Button to edit post",
+                })}
+                viewHref={permalink}
+                viewLabel={t({
+                  message: "View",
+                  comment: "@context: Button to view post on public site",
+                })}
+                deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
+                deleteConfirm={t({
+                  message:
+                    "Are you sure you want to delete this post? This cannot be undone.",
+                  comment:
+                    "@context: Confirmation dialog when deleting a post from the list",
+                })}
+              />
+            }
           >
-            {post.title ||
-              post.content?.slice(0, 60) ||
-              t({
-                message: "Untitled",
-                comment: "@context: Default title for untitled post",
-              })}
-          </a>
-          {post.content && !post.title && (
-            <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
-              {post.content.slice(0, 120)}
-            </p>
-          )}
-        </ListItemRow>
-      ))}
+            <div class="flex items-center gap-2 mb-1">
+              <TypeBadge type={post.format} />
+              <VisibilityBadge
+                status={post.status}
+                featured={post.featured === 1}
+                pinned={post.pinned === 1}
+              />
+              <span class="text-xs text-muted-foreground">
+                {time.formatDate(post.publishedAt)}
+              </span>
+            </div>
+            <a
+              href={`/dash/posts/${sqid.encode(post.id)}`}
+              class="font-medium hover:underline"
+            >
+              {post.title ||
+                post.body?.slice(0, 60) ||
+                t({
+                  message: "Untitled",
+                  comment: "@context: Default title for untitled post",
+                })}
+            </a>
+            {post.body && !post.title && (
+              <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
+                {post.body.slice(0, 120)}
+              </p>
+            )}
+          </ListItemRow>
+        );
+      })}
     </div>
   );
 };

package/src/theme/components/ThreadView.tsx

@@ -34,7 +34,10 @@ const ThreadPost: FC<{
     >
       {post.title && (
         <h2 class="p-name text-lg font-medium mb-2">
-          <a href={`/p/${sqid.encode(post.id)}`} class="u-url hover:underline">
+          <a
+            href={`${post.slug ? `/${post.slug}` : `/p/${sqid.encode(post.id)}`}`}
+            class="u-url hover:underline"
+          >
             {post.title}
           </a>
         </h2>
@@ -42,7 +45,7 @@ const ThreadPost: FC<{
 
       <div
         class="e-content prose prose-sm"
-        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
       />
 
       <footer class="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
@@ -62,7 +65,7 @@ const ThreadPost: FC<{
         )}
         {!isCurrent && (
           <a
-            href={`/p/${sqid.encode(post.id)}`}
+            href={`${post.slug ? `/${post.slug}` : `/p/${sqid.encode(post.id)}`}`}
             class="text-xs hover:underline"
           >
             {t({

package/src/theme/components/TypeBadge.tsx

@@ -1,36 +1,28 @@
 /**
- * Type Badge Component
+ * Format Badge Component
  *
- * Displays a badge indicating the type of a post (note, article, link, etc.)
+ * Displays a badge indicating the format of a post (note, link, quote).
+ * Named TypeBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { PostType } from "../../types.js";
+import type { Format } from "../../types.js";
 
 export interface TypeBadgeProps {
-  type: PostType;
+  type: Format;
 }
 
 export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
   const { t } = useLingui();
 
-  const labels: Record<PostType, string> = {
-    note: t({ message: "Note", comment: "@context: Post type badge - note" }),
-    article: t({
-      message: "Article",
-      comment: "@context: Post type badge - article",
-    }),
-    link: t({ message: "Link", comment: "@context: Post type badge - link" }),
+  const labels: Record<Format, string> = {
+    note: t({ message: "Note", comment: "@context: Post format badge - note" }),
+    link: t({ message: "Link", comment: "@context: Post format badge - link" }),
     quote: t({
       message: "Quote",
-      comment: "@context: Post type badge - quote",
-    }),
-    image: t({
-      message: "Image",
-      comment: "@context: Post type badge - image",
+      comment: "@context: Post format badge - quote",
     }),
-    page: t({ message: "Page", comment: "@context: Post type badge - page" }),
   };
 
   return <span class="badge-outline">{labels[type]}</span>;

package/src/theme/components/VisibilityBadge.tsx

@@ -1,45 +1,62 @@
 /**
- * Visibility Badge Component
+ * Status Badge Component
  *
- * Displays a badge indicating the visibility level of a post
+ * Displays badges for post status, featured, and pinned state.
+ * Named VisibilityBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { Visibility } from "../../types.js";
+import type { Status } from "../../types.js";
 
 export interface VisibilityBadgeProps {
-  visibility: Visibility;
+  status: Status;
+  featured?: boolean;
+  pinned?: boolean;
 }
 
-export const VisibilityBadge: FC<VisibilityBadgeProps> = ({ visibility }) => {
+export const VisibilityBadge: FC<VisibilityBadgeProps> = ({
+  status,
+  featured,
+  pinned,
+}) => {
   const { t } = useLingui();
 
-  const variants: Record<Visibility, string> = {
-    featured: "badge-primary",
-    quiet: "badge-secondary",
-    unlisted: "badge-outline",
+  const statusVariants: Record<Status, string> = {
+    published: "badge-secondary",
     draft: "badge-outline",
   };
 
-  const labels: Record<Visibility, string> = {
-    featured: t({
-      message: "Featured",
-      comment: "@context: Post visibility badge - featured",
-    }),
-    quiet: t({
-      message: "Quiet",
-      comment: "@context: Post visibility badge - normal",
-    }),
-    unlisted: t({
-      message: "Unlisted",
-      comment: "@context: Post visibility badge - unlisted",
+  const statusLabels: Record<Status, string> = {
+    published: t({
+      message: "Published",
+      comment: "@context: Post status badge - published",
     }),
     draft: t({
       message: "Draft",
-      comment: "@context: Post visibility badge - draft",
+      comment: "@context: Post status badge - draft",
     }),
   };
 
-  return <span class={variants[visibility]}>{labels[visibility]}</span>;
+  return (
+    <span class="flex items-center gap-1">
+      <span class={statusVariants[status]}>{statusLabels[status]}</span>
+      {featured && (
+        <span class="badge-primary">
+          {t({
+            message: "Featured",
+            comment: "@context: Post badge - featured",
+          })}
+        </span>
+      )}
+      {pinned && (
+        <span class="badge-outline">
+          {t({
+            message: "Pinned",
+            comment: "@context: Post badge - pinned",
+          })}
+        </span>
+      )}
+    </span>
+  );
 };

package/src/theme/components/index.ts

@@ -21,16 +21,3 @@ export {
   VisibilityBadge,
   type VisibilityBadgeProps,
 } from "./VisibilityBadge.js";
-
-// Timeline components
-export {
-  NoteCard,
-  ArticleCard,
-  LinkCard,
-  QuoteCard,
-  ImageCard,
-  ThreadPreview,
-  TimelineItem,
-  TimelineItemFromPost,
-  TimelineFeed,
-} from "./timeline/index.js";

package/src/theme/index.ts

@@ -1,28 +1,22 @@
 /**
- * Jant Theme Components
+ * Jant Theme - Shared Infrastructure
  *
- * These components can be imported for wrapping/extending:
+ * Exports shared layouts, components, and color themes used by all themes.
+ * Individual theme packages (minimal, card, etc.) import from here.
  *
  * @example
  * ```typescript
- * import { PostPage } from "@jant/core/theme";
- * import type { PostPageProps } from "@jant/core";
- *
- * export function MyPostPage(props: PostPageProps) {
- *   return (
- *     <div class="my-wrapper">
- *       <PostPage {...props} />
- *     </div>
- *   );
- * }
+ * // In a theme package:
+ * import { MediaGallery, Pagination } from "@jant/core/theme";
+ * import type { ColorTheme } from "@jant/core/theme";
  * ```
  */
 
-// Layout components
+// Layout components (BaseLayout, DashLayout)
 export * from "./layouts/index.js";
 
-// UI components
+// Shared UI components (MediaGallery, Pagination, EmptyState, etc.)
 export * from "./components/index.js";
 
-// Page components
-export * from "./pages/index.js";
+// Color themes
+export * from "./color-themes.js";

package/src/theme/layouts/index.ts

@@ -4,5 +4,4 @@ export {
   type ToastProps,
 } from "./BaseLayout.js";
 export { DashLayout, type DashLayoutProps } from "./DashLayout.js";
-export { SiteLayout } from "./SiteLayout.js";
 export type { SiteLayoutProps } from "../../types.js";

package/src/themes/threads/ThreadsSiteLayout.tsx

@@ -0,0 +1,194 @@
+/**
+ * Threads Theme - Site Layout
+ *
+ * Left icon sidebar (76px) on desktop, bottom tab bar (60px) on mobile.
+ * Gray page background (#fafafa) with white rounded content container.
+ * All dimensions match threads.com's --barcelona-* design tokens.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { NavItemView, SiteLayoutProps } from "../../types.js";
+
+/** Map known URL paths to SVG icons. Size 26x26 matching Threads' nav icons. */
+function NavIcon({ url, isActive }: { url: string; isActive: boolean }) {
+  const stroke = "currentColor";
+  const sw = isActive ? "2.25" : "1.75";
+  const cls = "size-[26px]";
+
+  // Home
+  if (url === "/") {
+    return (
+      <svg
+        class={cls}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={sw}
+        stroke={stroke}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+        />
+      </svg>
+    );
+  }
+
+  // Search
+  if (url === "/search") {
+    return (
+      <svg
+        class={cls}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={sw}
+        stroke={stroke}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+    );
+  }
+
+  // Archive
+  if (url === "/archive") {
+    return (
+      <svg
+        class={cls}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={sw}
+        stroke={stroke}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+        />
+      </svg>
+    );
+  }
+
+  // RSS — common for /feed, /rss, /atom
+  if (url.match(/\/(feed|rss|atom)/)) {
+    return (
+      <svg
+        class={cls}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={sw}
+        stroke={stroke}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12.75 19.5v-.75a7.5 7.5 0 0 0-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M4.5 19.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+        />
+      </svg>
+    );
+  }
+
+  // External link
+  if (url.startsWith("http")) {
+    return (
+      <svg
+        class={cls}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width={sw}
+        stroke={stroke}
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+        />
+      </svg>
+    );
+  }
+
+  // Default: generic page icon
+  return (
+    <svg
+      class={cls}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width={sw}
+      stroke={stroke}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  );
+}
+
+function SidebarLink({ link }: { link: NavItemView }) {
+  return (
+    <a
+      href={link.url}
+      class={`threads-sidebar-link ${link.isActive ? "threads-sidebar-link-active" : ""}`}
+      title={link.label}
+      {...(link.isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {})}
+    >
+      <NavIcon url={link.url} isActive={link.isActive} />
+    </a>
+  );
+}
+
+function MobileTabLink({ link }: { link: NavItemView }) {
+  return (
+    <a
+      href={link.url}
+      class={`threads-mobile-tab ${link.isActive ? "threads-mobile-tab-active" : ""}`}
+      {...(link.isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {})}
+    >
+      <NavIcon url={link.url} isActive={link.isActive} />
+    </a>
+  );
+}
+
+export const ThreadsSiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  links,
+  children,
+}) => {
+  return (
+    <div class="threads-page">
+      {/* Desktop: left icon sidebar — no border, on gray background */}
+      <aside class="threads-sidebar">
+        <a href="/" class="threads-logo" title={siteName}>
+          <span class="text-2xl font-black leading-none">@</span>
+        </a>
+        <nav class="flex flex-1 flex-col items-center gap-1">
+          {links.map((link) => (
+            <SidebarLink key={link.id} link={link} />
+          ))}
+        </nav>
+      </aside>
+
+      {/* Main content — white rounded container on gray background */}
+      <main class="threads-main">
+        <div class="threads-container">
+          <div class="threads-content">{children}</div>
+        </div>
+      </main>
+
+      {/* Mobile: bottom tab bar */}
+      <nav class="threads-mobile-tabs">
+        {links.map((link) => (
+          <MobileTabLink key={link.id} link={link} />
+        ))}
+      </nav>
+    </div>
+  );
+};

package/src/themes/threads/index.ts

@@ -0,0 +1,100 @@
+/**
+ * Threads Theme
+ *
+ * A clean, centered timeline theme inspired by Threads.net.
+ * Posts separated by thin dividers, no cards, with thread connector lines.
+ *
+ * This is the default theme for Jant.
+ */
+
+import type { JantTheme, ThemeComponents } from "../../types.js";
+import type { ColorTheme } from "../../theme/color-themes.js";
+
+// Layout
+import { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
+
+// Pages
+import { HomePage } from "./pages/HomePage.js";
+import { PostPage } from "./pages/PostPage.js";
+import { SinglePage } from "./pages/SinglePage.js";
+import { ArchivePage } from "./pages/ArchivePage.js";
+import { SearchPage } from "./pages/SearchPage.js";
+import { CollectionPage } from "./pages/CollectionPage.js";
+
+// Timeline
+import { NoteCard } from "./timeline/NoteCard.js";
+import { LinkCard } from "./timeline/LinkCard.js";
+import { QuoteCard } from "./timeline/QuoteCard.js";
+import { ThreadPreview } from "./timeline/ThreadPreview.js";
+import { TimelineFeed } from "./timeline/TimelineFeed.js";
+import { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
+import { timelineMore } from "./timeline/timelineMore.js";
+
+export interface ThemeOptions {
+  /** Override individual components */
+  components?: Partial<ThemeComponents>;
+  /** CSS variable overrides */
+  cssVariables?: Record<string, string>;
+  /** Custom color themes */
+  colorThemes?: ColorTheme[];
+}
+
+/**
+ * Create the threads theme configuration.
+ *
+ * @param options - Optional overrides for components, CSS variables, or color themes
+ * @returns A JantTheme configuration object
+ *
+ * @example
+ * ```typescript
+ * import { createApp } from "@jant/core";
+ * import { threadsTheme } from "@jant/core";
+ *
+ * export default createApp({
+ *   theme: threadsTheme(),
+ * });
+ * ```
+ */
+export function theme(options?: ThemeOptions): JantTheme {
+  return {
+    name: "threads",
+    components: {
+      SiteLayout: ThreadsSiteLayout,
+      HomePage,
+      PostPage,
+      SinglePage,
+      ArchivePage,
+      SearchPage,
+      CollectionPage,
+      NoteCard,
+      LinkCard,
+      QuoteCard,
+      ThreadPreview,
+      TimelineFeed,
+      TimelineLoadMore,
+      ...options?.components,
+    },
+    timelineMore,
+    cssVariables: {
+      ...options?.cssVariables,
+    },
+    colorThemes: options?.colorThemes,
+  };
+}
+
+// Re-export individual components for wrapping/extending
+export { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
+export { HomePage } from "./pages/HomePage.js";
+export { PostPage } from "./pages/PostPage.js";
+export { SinglePage } from "./pages/SinglePage.js";
+export { ArchivePage } from "./pages/ArchivePage.js";
+export { SearchPage } from "./pages/SearchPage.js";
+export { CollectionPage } from "./pages/CollectionPage.js";
+export { NoteCard } from "./timeline/NoteCard.js";
+export { LinkCard } from "./timeline/LinkCard.js";
+export { QuoteCard } from "./timeline/QuoteCard.js";
+export { ThreadPreview } from "./timeline/ThreadPreview.js";
+export { TimelineFeed } from "./timeline/TimelineFeed.js";
+export { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
+export { TimelineItem, TimelineItemFromPost } from "./timeline/TimelineItem.js";
+export { timelineMore } from "./timeline/timelineMore.js";