@jant/core 0.3.21 → 0.3.22

package/src/theme/components/timeline/ArticleCard.tsx

@@ -6,17 +6,8 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-  const excerpt = post.content
-    ? post.content.length > 160
-      ? post.content.slice(0, 160) + "..."
-      : post.content
-    : null;
-
   return (
     <article
       class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
@@ -25,28 +16,25 @@ export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
         <h2
           class={`p-name font-semibold ${compact ? "text-sm" : "text-lg"} mb-1`}
         >
-          <a href={permalink} class="u-url hover:underline">
+          <a href={post.permalink} class="u-url hover:underline">
             {post.title}
           </a>
         </h2>
       )}
-      {!compact && excerpt && (
+      {!compact && post.excerpt && (
         <p class="e-content text-sm text-muted-foreground line-clamp-3">
-          {excerpt}
+          {post.excerpt}
         </p>
       )}
       <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={permalink} class="u-url hover:underline">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
+        <a href={post.permalink} class="u-url hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
         {!compact && (
           <span class="ml-2">
-            <a href={permalink} class="hover:underline">
+            <a href={post.permalink} class="hover:underline">
               Read more &rarr;
             </a>
           </span>

package/src/theme/components/timeline/ImageCard.tsx

@@ -7,18 +7,14 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
 import { MediaGallery } from "../MediaGallery.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   if (compact) {
     return (
       <article class="h-entry timeline-card timeline-card-compact">
         {post.title && (
           <h2 class="p-name text-sm font-medium mb-1">
-            <a href={permalink} class="u-url hover:underline">
+            <a href={post.permalink} class="u-url hover:underline">
               {post.title}
             </a>
           </h2>
@@ -30,12 +26,9 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
           />
         )}
         <footer class="mt-1 text-xs text-muted-foreground">
-          <a href={permalink} class="u-url hover:underline">
-            <time
-              class="dt-published"
-              datetime={time.toISOString(post.publishedAt)}
-            >
-              {time.formatDate(post.publishedAt)}
+          <a href={post.permalink} class="u-url hover:underline">
+            <time class="dt-published" datetime={post.publishedAt}>
+              {post.publishedAtFormatted}
             </time>
           </a>
         </footer>
@@ -45,15 +38,15 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
 
   return (
     <article class="h-entry timeline-card timeline-card-image">
-      {post.mediaAttachments.length > 0 && (
+      {post.media.length > 0 && (
         <div class="timeline-card-image-gallery">
-          <MediaGallery attachments={post.mediaAttachments} />
+          <MediaGallery attachments={post.media} />
         </div>
       )}
       <div class="p-4">
         {post.title && (
           <h2 class="p-name font-medium mb-1">
-            <a href={permalink} class="u-url hover:underline">
+            <a href={post.permalink} class="u-url hover:underline">
               {post.title}
             </a>
           </h2>
@@ -65,12 +58,9 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
           />
         )}
         <footer class="mt-2 text-xs text-muted-foreground">
-          <a href={permalink} class="u-url hover:underline">
-            <time
-              class="dt-published"
-              datetime={time.toISOString(post.publishedAt)}
-            >
-              {time.formatDate(post.publishedAt)}
+          <a href={post.permalink} class="u-url hover:underline">
+            <time class="dt-published" datetime={post.publishedAt}>
+              {post.publishedAtFormatted}
             </time>
           </a>
         </footer>

package/src/theme/components/timeline/LinkCard.tsx

@@ -6,12 +6,8 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   return (
     <article
       class={`h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`}
@@ -36,7 +32,7 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
           class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
         >
           <a
-            href={post.sourceUrl || permalink}
+            href={post.sourceUrl || post.permalink}
             class="u-url hover:underline"
             target={post.sourceUrl ? "_blank" : undefined}
             rel={post.sourceUrl ? "noopener noreferrer" : undefined}
@@ -52,12 +48,9 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
         />
       )}
       <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={permalink} class="hover:underline">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
+        <a href={post.permalink} class="hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/theme/components/timeline/NoteCard.tsx

@@ -7,12 +7,8 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
 import { MediaGallery } from "../MediaGallery.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   return (
     <article
       class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
@@ -23,16 +19,13 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           dangerouslySetInnerHTML={{ __html: post.contentHtml }}
         />
       )}
-      {!compact && post.mediaAttachments.length > 0 && (
-        <MediaGallery attachments={post.mediaAttachments} />
+      {!compact && post.media.length > 0 && (
+        <MediaGallery attachments={post.media} />
       )}
       <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={permalink} class="u-url hover:underline">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
+        <a href={post.permalink} class="u-url hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/theme/components/timeline/QuoteCard.tsx

@@ -6,12 +6,8 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   return (
     <article
       class={`h-entry timeline-card timeline-card-quote${compact ? " timeline-card-compact" : ""}`}
@@ -41,12 +37,9 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
         </div>
       )}
       <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={permalink} class="u-url hover:underline">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
+        <a href={post.permalink} class="u-url hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/theme/components/timeline/ThreadPreview.tsx

@@ -8,31 +8,31 @@ import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { ThreadPreviewProps } from "../../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
-import * as sqid from "../../../lib/sqid.js";
+import { TimelineItemFromPost } from "./TimelineItem.js";
 
 export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
   previewReplies,
   totalReplyCount,
+  theme,
 }) => {
   const { t } = useLingui();
-  const permalink = `/p/${sqid.encode(rootPost.id)}`;
   const remainingCount = totalReplyCount - previewReplies.length;
 
   return (
     <div class="timeline-thread">
-      <TimelineItem item={{ post: rootPost }} />
+      <TimelineItem item={{ post: rootPost }} theme={theme} />
       {previewReplies.length > 0 && (
         <div class="timeline-thread-replies">
           {previewReplies.map((reply) => (
             <div key={reply.id} class="timeline-thread-reply">
-              <TimelineItem item={{ post: reply }} compact />
+              <TimelineItemFromPost post={reply} compact theme={theme} />
             </div>
           ))}
           {remainingCount > 0 && (
             <div class="timeline-thread-reply">
               <a
-                href={permalink}
+                href={rootPost.permalink}
                 class="text-sm text-muted-foreground hover:text-foreground hover:underline"
               >
                 {t({

package/src/theme/components/timeline/TimelineFeed.tsx

@@ -8,30 +8,34 @@ import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { TimelineFeedProps } from "../../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
-import { ThreadPreview } from "./ThreadPreview.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
 
 export const TimelineFeed: FC<TimelineFeedProps> = ({
   items,
   hasMore,
   nextCursor,
+  theme,
 }) => {
   const { t } = useLingui();
 
+  const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+
   return (
     <div>
       <div id="timeline-feed" class="flex flex-col gap-4">
         {items.map((item) => {
           if (item.threadPreview) {
             return (
-              <ThreadPreview
+              <ResolvedThreadPreview
                 key={item.post.id}
                 rootPost={item.post}
                 previewReplies={item.threadPreview.replies}
                 totalReplyCount={item.threadPreview.totalReplyCount}
+                theme={theme}
               />
             );
           }
-          return <TimelineItem key={item.post.id} item={item} />;
+          return <TimelineItem key={item.post.id} item={item} theme={theme} />;
         })}
       </div>
       {hasMore && nextCursor && (

package/src/theme/components/timeline/TimelineItem.tsx

@@ -2,10 +2,16 @@
  * Timeline Item Component
  *
  * Dispatches to the correct card component based on post type.
+ * Resolves card overrides from theme components if provided.
  */
 
 import type { FC } from "hono/jsx";
-import type { TimelineItemData, TimelineCardProps } from "../../../types.js";
+import type {
+  TimelineItemView,
+  TimelineCardProps,
+  ThemeComponents,
+  PostView,
+} from "../../../types.js";
 import { NoteCard } from "./NoteCard.js";
 import { ArticleCard } from "./ArticleCard.js";
 import { LinkCard } from "./LinkCard.js";
@@ -22,18 +28,51 @@ const CARD_MAP: Record<PostType, FC<TimelineCardProps>> = {
   page: NoteCard,
 };
 
+const THEME_KEY_MAP: Record<PostType, keyof ThemeComponents> = {
+  note: "NoteCard",
+  article: "ArticleCard",
+  link: "LinkCard",
+  quote: "QuoteCard",
+  image: "ImageCard",
+  page: "NoteCard",
+};
+
 interface TimelineItemProps {
-  item: TimelineItemData;
+  item: TimelineItemView;
+  compact?: boolean;
+  /** Override card component (for direct overrides) */
+  cardOverride?: FC<TimelineCardProps>;
+  /** Theme components for cascade resolution */
+  theme?: ThemeComponents;
+}
+
+interface TimelineItemFromPostProps {
+  post: PostView;
   compact?: boolean;
-  /** Override card component (for theme overrides) */
   cardOverride?: FC<TimelineCardProps>;
+  theme?: ThemeComponents;
 }
 
 export const TimelineItem: FC<TimelineItemProps> = ({
   item,
   compact,
   cardOverride,
+  theme,
 }) => {
-  const Card = cardOverride ?? CARD_MAP[item.post.type];
+  const themeKey = THEME_KEY_MAP[item.post.type];
+  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.type];
   return <Card post={item.post} compact={compact} />;
 };
+
+export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
+  post,
+  compact,
+  cardOverride,
+  theme,
+}) => {
+  const themeKey = THEME_KEY_MAP[post.type];
+  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.type];
+  return <Card post={post} compact={compact} />;
+};

package/src/theme/components/timeline/index.ts

@@ -4,5 +4,5 @@ export { LinkCard } from "./LinkCard.js";
 export { QuoteCard } from "./QuoteCard.js";
 export { ImageCard } from "./ImageCard.js";
 export { ThreadPreview } from "./ThreadPreview.js";
-export { TimelineItem } from "./TimelineItem.js";
+export { TimelineItem, TimelineItemFromPost } from "./TimelineItem.js";
 export { TimelineFeed } from "./TimelineFeed.js";

package/src/theme/index.ts

@@ -5,12 +5,13 @@
  *
  * @example
  * ```typescript
- * import { PostCard } from "@jant/core/theme";
+ * import { PostPage } from "@jant/core/theme";
+ * import type { PostPageProps } from "@jant/core";
  *
- * export function MyPostCard(props) {
+ * export function MyPostPage(props: PostPageProps) {
  *   return (
  *     <div class="my-wrapper">
- *       <PostCard {...props} />
+ *       <PostPage {...props} />
  *     </div>
  *   );
  * }
@@ -22,3 +23,6 @@ export * from "./layouts/index.js";
 
 // UI components
 export * from "./components/index.js";
+
+// Page components
+export * from "./pages/index.js";

package/src/theme/layouts/SiteLayout.tsx

@@ -6,87 +6,41 @@
  */
 
 import type { FC, PropsWithChildren } from "hono/jsx";
-import type { NavigationLink } from "../../types.js";
-
-export interface SiteLayoutProps {
-  siteName: string;
-  navigationLinks: NavigationLink[];
-  currentPath: string;
-}
-
-/**
- * Determine if a navigation link is active based on the current path.
- *
- * @param linkUrl - The link's URL
- * @param currentPath - The current page path
- * @returns Whether the link should be shown as active
- */
-function isLinkActive(linkUrl: string, currentPath: string): boolean {
-  // External links are never active
-  if (linkUrl.startsWith("http://") || linkUrl.startsWith("https://")) {
-    return false;
-  }
-
-  // Exact match for home
-  if (linkUrl === "/") {
-    return currentPath === "/";
-  }
-
-  // Prefix match for other internal links
-  return currentPath === linkUrl || currentPath.startsWith(linkUrl + "/");
-}
-
-/**
- * Check if a URL is external
- */
-function isExternalUrl(url: string): boolean {
-  return url.startsWith("http://") || url.startsWith("https://");
-}
+import type { NavLinkView, SiteLayoutProps } from "../../types.js";
 
 /**
  * Render navigation links with dot indicator for active state.
  */
-function NavLinks({
-  navigationLinks,
-  currentPath,
-}: {
-  navigationLinks: NavigationLink[];
-  currentPath: string;
-}) {
+function NavLinks({ links }: { links: NavLinkView[] }) {
   return (
     <>
-      {navigationLinks.map((link) => {
-        const active = isLinkActive(link.url, currentPath);
-        const external = isExternalUrl(link.url);
-        return (
-          <a
-            key={link.id}
-            href={link.url}
-            class={`text-sm flex items-center gap-2 py-0.5 ${
-              active
-                ? "text-primary font-medium"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-            {...(external
-              ? { target: "_blank", rel: "noopener noreferrer" }
-              : {})}
-          >
-            <span
-              class={`size-1.5 rounded-full shrink-0 ${active ? "bg-primary" : "bg-transparent"}`}
-            />
-            {link.label}
-            {external && <span class="ml-1 text-xs opacity-50">↗</span>}
-          </a>
-        );
-      })}
+      {links.map((link) => (
+        <a
+          key={link.id}
+          href={link.url}
+          class={`text-sm flex items-center gap-2 py-0.5 ${
+            link.isActive
+              ? "text-primary font-medium"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+          {...(link.isExternal
+            ? { target: "_blank", rel: "noopener noreferrer" }
+            : {})}
+        >
+          <span
+            class={`size-1.5 rounded-full shrink-0 ${link.isActive ? "bg-primary" : "bg-transparent"}`}
+          />
+          {link.label}
+          {link.isExternal && <span class="ml-1 text-xs opacity-50">↗</span>}
+        </a>
+      ))}
     </>
   );
 }
 
 export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   siteName,
-  navigationLinks,
-  currentPath,
+  links,
   children,
 }) => {
   return (
@@ -157,10 +111,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
           </button>
         </div>
         <nav class="flex flex-col gap-0.5">
-          <NavLinks
-            navigationLinks={navigationLinks}
-            currentPath={currentPath}
-          />
+          <NavLinks links={links} />
         </nav>
       </aside>
 
@@ -170,10 +121,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
           {siteName}
         </a>
         <nav class="flex flex-col gap-0.5">
-          <NavLinks
-            navigationLinks={navigationLinks}
-            currentPath={currentPath}
-          />
+          <NavLinks links={links} />
         </nav>
       </aside>
 

package/src/theme/layouts/index.ts

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