@jant/core 0.3.20 → 0.3.22

package/src/routes/pages/archive.tsx

@@ -5,15 +5,13 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Post, PostType } from "../../types.js";
+import type { Bindings, PostType } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import { Pagination } from "../../theme/components/index.js";
 import { POST_TYPES } from "../../types.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
+import { ArchivePage as DefaultArchivePage } from "../../theme/pages/ArchivePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toArchiveGroups } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -21,191 +19,6 @@ const PAGE_SIZE = 50;
 
 export const archiveRoutes = new Hono<Env>();
 
-function getTypeLabel(type: string): string {
-  const { t } = useLingui();
-  const labels: Record<string, string> = {
-    note: t({ message: "Note", comment: "@context: Post type label - note" }),
-    article: t({
-      message: "Article",
-      comment: "@context: Post type label - article",
-    }),
-    link: t({ message: "Link", comment: "@context: Post type label - link" }),
-    quote: t({
-      message: "Quote",
-      comment: "@context: Post type label - quote",
-    }),
-    image: t({
-      message: "Image",
-      comment: "@context: Post type label - image",
-    }),
-    page: t({ message: "Page", comment: "@context: Post type label - page" }),
-  };
-  return labels[type] ?? type;
-}
-
-function getTypeLabelPlural(type: string): string {
-  const { t } = useLingui();
-  const labels: Record<string, string> = {
-    note: t({
-      message: "Notes",
-      comment: "@context: Post type label plural - notes",
-    }),
-    article: t({
-      message: "Articles",
-      comment: "@context: Post type label plural - articles",
-    }),
-    link: t({
-      message: "Links",
-      comment: "@context: Post type label plural - links",
-    }),
-    quote: t({
-      message: "Quotes",
-      comment: "@context: Post type label plural - quotes",
-    }),
-    image: t({
-      message: "Images",
-      comment: "@context: Post type label plural - images",
-    }),
-    page: t({
-      message: "Pages",
-      comment: "@context: Post type label plural - pages",
-    }),
-  };
-  return labels[type] ?? `${type}s`;
-}
-
-function formatYearMonth(yearMonth: string): string {
-  const [year, month] = yearMonth.split("-");
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- yearMonth format YYYY-MM guarantees both year and month exist
-  const date = new Date(parseInt(year!, 10), parseInt(month!, 10) - 1);
-  return date.toLocaleDateString("en-US", { year: "numeric", month: "long" });
-}
-
-function ArchiveContent({
-  displayPosts,
-  hasMore,
-  nextCursor,
-  type,
-  grouped,
-  replyCounts,
-}: {
-  displayPosts: Post[];
-  hasMore: boolean;
-  nextCursor?: number;
-  type?: string;
-  grouped: Map<string, Post[]>;
-  replyCounts: Map<number, number>;
-}) {
-  const { t } = useLingui();
-  const title = type
-    ? getTypeLabelPlural(type)
-    : t({ message: "Archive", comment: "@context: Archive page title" });
-
-  return (
-    <div>
-      <header class="mb-8">
-        <h1 class="text-2xl font-semibold">{title}</h1>
-
-        {/* Type filter */}
-        <nav class="flex flex-wrap gap-2 mt-4">
-          <a
-            href="/archive"
-            class={`badge ${!type ? "badge-primary" : "badge-outline"}`}
-          >
-            {t({
-              message: "All",
-              comment: "@context: Archive filter - all types",
-            })}
-          </a>
-          {POST_TYPES.filter((t) => t !== "page").map((typeKey) => (
-            <a
-              key={typeKey}
-              href={`/archive?type=${typeKey}`}
-              class={`badge ${type === typeKey ? "badge-primary" : "badge-outline"}`}
-            >
-              {getTypeLabelPlural(typeKey)}
-            </a>
-          ))}
-        </nav>
-      </header>
-
-      <main>
-        {displayPosts.length === 0 ? (
-          <p class="text-muted-foreground">
-            {t({
-              message: "No posts found.",
-              comment: "@context: Archive empty state",
-            })}
-          </p>
-        ) : (
-          Array.from(grouped.entries()).map(([yearMonth, monthPosts]) => (
-            <section key={yearMonth} class="mb-8">
-              <h2 class="text-lg font-medium mb-4 text-muted-foreground">
-                {formatYearMonth(yearMonth)}
-              </h2>
-              <div class="flex flex-col gap-3">
-                {monthPosts.map((post) => {
-                  const replyCount = replyCounts.get(post.id);
-                  return (
-                    <article key={post.id} class="flex items-baseline gap-4">
-                      <time
-                        class="text-sm text-muted-foreground w-12 shrink-0"
-                        datetime={time.toISOString(post.publishedAt)}
-                      >
-                        {new Date(post.publishedAt * 1000).getDate()}
-                      </time>
-                      <div class="flex-1 min-w-0">
-                        <a
-                          href={`/p/${sqid.encode(post.id)}`}
-                          class="hover:underline"
-                        >
-                          {post.title ||
-                            post.content?.slice(0, 80) ||
-                            `Post #${post.id}`}
-                        </a>
-                        {!type && (
-                          <span class="ml-2 badge-outline text-xs">
-                            {getTypeLabel(post.type)}
-                          </span>
-                        )}
-                        {replyCount && replyCount > 0 && (
-                          <span class="ml-2 text-xs text-muted-foreground">
-                            (
-                            {replyCount === 1
-                              ? t({
-                                  message: "1 reply",
-                                  comment:
-                                    "@context: Archive post reply indicator - single",
-                                })
-                              : t({
-                                  message: "{count} replies",
-                                  comment:
-                                    "@context: Archive post reply indicator - plural",
-                                  values: { count: String(replyCount) },
-                                })}
-                            )
-                          </span>
-                        )}
-                      </div>
-                    </article>
-                  );
-                })}
-              </div>
-            </section>
-          ))
-        )}
-      </main>
-
-      {/* Pagination */}
-      <Pagination
-        baseUrl={type ? `/archive?type=${type}` : "/archive"}
-        hasMore={hasMore}
-        nextCursor={nextCursor}
-      />
-    </div>
-  );
-}
-
 // Archive page - all posts
 archiveRoutes.get("/", async (c) => {
   const typeParam = c.req.query("type") as PostType | undefined;
@@ -230,10 +43,6 @@ archiveRoutes.get("/", async (c) => {
   const hasMore = posts.length > PAGE_SIZE;
   const displayPosts = hasMore ? posts.slice(0, PAGE_SIZE) : posts;
 
-  // Get reply counts for thread indicators
-  const postIds = displayPosts.map((p) => p.id);
-  const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
-
   // Get next cursor
   const nextCursor =
     hasMore && displayPosts.length > 0
@@ -253,18 +62,24 @@ archiveRoutes.get("/", async (c) => {
     grouped.get(key)!.push(post);
   }
 
-  return c.html(
-    <BaseLayout title={`Archive - ${navData.siteName}`} c={c}>
-      <SiteLayout {...navData}>
-        <ArchiveContent
-          displayPosts={displayPosts}
-          hasMore={hasMore}
-          nextCursor={nextCursor}
-          type={type}
-          grouped={grouped}
-          replyCounts={replyCounts}
-        />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Transform to View Models
+  const mediaCtx = createMediaContext(c);
+  const groups = toArchiveGroups(grouped, mediaCtx);
+
+  const components = c.var.config.theme?.components;
+  const Page = components?.ArchivePage ?? DefaultArchivePage;
+
+  return renderPublicPage(c, {
+    title: `Archive - ${navData.siteName}`,
+    navData,
+    content: (
+      <Page
+        groups={groups}
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+        type={type}
+        theme={components}
+      />
+    ),
+  });
 });

package/src/routes/pages/collection.tsx

@@ -3,77 +3,17 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Collection, Post } from "../../types.js";
+import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
+import { CollectionPage as DefaultCollectionPage } from "../../theme/pages/CollectionPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const collectionRoutes = new Hono<Env>();
 
-function CollectionContent({
-  collection,
-  posts,
-}: {
-  collection: Collection;
-  posts: Post[];
-}) {
-  const { t } = useLingui();
-
-  return (
-    <div>
-      <header class="mb-8">
-        <h1 class="text-2xl font-semibold">{collection.title}</h1>
-        {collection.description && (
-          <p class="text-muted-foreground mt-2">{collection.description}</p>
-        )}
-      </header>
-
-      <main class="flex flex-col gap-6">
-        {posts.length === 0 ? (
-          <p class="text-muted-foreground">
-            {t({
-              message: "No posts in this collection.",
-              comment: "@context: Empty state message",
-            })}
-          </p>
-        ) : (
-          posts.map((post) => (
-            <article key={post.id} class="h-entry">
-              {post.title && (
-                <h2 class="p-name text-lg font-medium mb-2">
-                  <a
-                    href={`/p/${sqid.encode(post.id)}`}
-                    class="u-url hover:underline"
-                  >
-                    {post.title}
-                  </a>
-                </h2>
-              )}
-              <div
-                class="e-content prose prose-sm"
-                dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
-              />
-              <footer class="mt-2 text-sm text-muted-foreground">
-                <time
-                  class="dt-published"
-                  datetime={time.toISOString(post.publishedAt)}
-                >
-                  {time.formatDate(post.publishedAt)}
-                </time>
-              </footer>
-            </article>
-          ))
-        )}
-      </main>
-    </div>
-  );
-}
-
 collectionRoutes.get("/:path", async (c) => {
   const path = c.req.param("path");
 
@@ -83,15 +23,19 @@ collectionRoutes.get("/:path", async (c) => {
   const posts = await c.var.services.collections.getPosts(collection.id);
   const navData = await getNavigationData(c);
 
-  return c.html(
-    <BaseLayout
-      title={`${collection.title} - ${navData.siteName}`}
-      description={collection.description ?? undefined}
-      c={c}
-    >
-      <SiteLayout {...navData}>
-        <CollectionContent collection={collection} posts={posts} />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Transform to View Models
+  const mediaCtx = createMediaContext(c);
+  const postViews = toPostViewsFromPosts(posts, mediaCtx);
+
+  const components = c.var.config.theme?.components;
+  const Page = components?.CollectionPage ?? DefaultCollectionPage;
+
+  return renderPublicPage(c, {
+    title: `${collection.title} - ${navData.siteName}`,
+    description: collection.description ?? undefined,
+    navData,
+    content: (
+      <Page collection={collection} posts={postViews} theme={components} />
+    ),
+  });
 });

package/src/routes/pages/home.tsx

@@ -5,20 +5,13 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { FC } from "hono/jsx";
-import type {
-  Bindings,
-  PostWithMedia,
-  TimelineItemData,
-  TimelineFeedProps,
-} from "../../types.js";
+import type { Bindings, TimelineItemView } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
 import { buildMediaMap } from "../../lib/media-helpers.js";
-import { resolveTimelineFeed } from "../../lib/theme-components.js";
-import { TimelineFeed as DefaultTimelineFeed } from "../../theme/components/timeline/TimelineFeed.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { HomePage as DefaultHomePage } from "../../theme/pages/HomePage.js";
+import { createMediaContext, toPostView, toPostViews } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -26,31 +19,6 @@ const PAGE_SIZE = 20;
 
 export const homeRoutes = new Hono<Env>();
 
-function HomeContent({
-  FeedComponent,
-  feedProps,
-}: {
-  FeedComponent: FC<TimelineFeedProps>;
-  feedProps: TimelineFeedProps;
-}) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      {feedProps.items.length === 0 ? (
-        <p class="text-muted-foreground">
-          {t({
-            message: "No posts yet.",
-            comment: "@context: Empty state message on home page",
-          })}
-        </p>
-      ) : (
-        <FeedComponent {...feedProps} />
-      )}
-    </>
-  );
-}
-
 homeRoutes.get("/", async (c) => {
   const navData = await getNavigationData(c);
 
@@ -68,14 +36,12 @@ homeRoutes.get("/", async (c) => {
   // Batch load media attachments
   const postIds = displayPosts.map((p) => p.id);
   const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
-  const r2PublicUrl = c.env.R2_PUBLIC_URL;
-  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-  const s3PublicUrl = c.env.S3_PUBLIC_URL;
+  const mediaCtx = createMediaContext(c);
   const mediaMap = buildMediaMap(
     rawMediaMap,
-    r2PublicUrl,
-    imageTransformUrl,
-    s3PublicUrl,
+    mediaCtx.r2PublicUrl,
+    mediaCtx.imageTransformUrl,
+    mediaCtx.s3PublicUrl,
   );
 
   // Get reply counts to identify thread roots
@@ -99,59 +65,59 @@ homeRoutes.get("/", async (c) => {
     previewReplyIds.length > 0
       ? buildMediaMap(
           await c.var.services.media.getByPostIds(previewReplyIds),
-          r2PublicUrl,
-          imageTransformUrl,
-          s3PublicUrl,
+          mediaCtx.r2PublicUrl,
+          mediaCtx.imageTransformUrl,
+          mediaCtx.s3PublicUrl,
         )
       : new Map();
 
-  // Assemble timeline items
-  const items: TimelineItemData[] = displayPosts.map((post) => {
-    const postWithMedia: PostWithMedia = {
-      ...post,
-      mediaAttachments: mediaMap.get(post.id) ?? [],
-    };
+  // Assemble timeline items with View Models
+  const items: TimelineItemView[] = displayPosts.map((post) => {
+    const postView = toPostView(
+      { ...post, mediaAttachments: mediaMap.get(post.id) ?? [] },
+      mediaCtx,
+    );
 
     const replyCount = replyCounts.get(post.id) ?? 0;
     const previewReplies = threadPreviews.get(post.id);
 
     if (replyCount > 0 && previewReplies) {
       return {
-        post: postWithMedia,
+        post: postView,
         threadPreview: {
-          replies: previewReplies.map((r) => ({
-            ...r,
-            mediaAttachments: previewMediaMap.get(r.id) ?? [],
-          })),
+          replies: toPostViews(
+            previewReplies.map((r) => ({
+              ...r,
+              mediaAttachments: previewMediaMap.get(r.id) ?? [],
+            })),
+            mediaCtx,
+          ),
           totalReplyCount: replyCount,
         },
       };
     }
 
-    return { post: postWithMedia };
+    return { post: postView };
   });
 
   // Determine next cursor
   const lastPost = displayPosts[displayPosts.length - 1];
   const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
 
-  // Resolve theme components
-  const Feed = resolveTimelineFeed(
-    DefaultTimelineFeed,
-    c.var.config.theme?.components,
-  );
-
-  const feedProps: TimelineFeedProps = {
-    items,
-    hasMore,
-    nextCursor,
-  };
-
-  return c.html(
-    <BaseLayout title={navData.siteName} c={c}>
-      <SiteLayout {...navData}>
-        <HomeContent FeedComponent={Feed} feedProps={feedProps} />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Resolve page component
+  const components = c.var.config.theme?.components;
+  const Page = components?.HomePage ?? DefaultHomePage;
+
+  return renderPublicPage(c, {
+    title: navData.siteName,
+    navData,
+    content: (
+      <Page
+        items={items}
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+        theme={components}
+      />
+    ),
+  });
 });

package/src/routes/pages/page.tsx

@@ -5,30 +5,17 @@
  */
 
 import { Hono } from "hono";
-import type { Bindings, Post } from "../../types.js";
+import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
+import { SinglePage as DefaultSinglePage } from "../../theme/pages/SinglePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewFromPost } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const pageRoutes = new Hono<Env>();
 
-function PageContent({ page }: { page: Post }) {
-  return (
-    <article class="h-entry">
-      {page.title && (
-        <h1 class="p-name text-3xl font-semibold mb-6">{page.title}</h1>
-      )}
-
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
-      />
-    </article>
-  );
-}
-
 // Catch-all for custom page paths
 pageRoutes.get("/:path", async (c) => {
   const path = c.req.param("path");
@@ -48,15 +35,17 @@ pageRoutes.get("/:path", async (c) => {
 
   const navData = await getNavigationData(c);
 
-  return c.html(
-    <BaseLayout
-      title={`${page.title} - ${navData.siteName}`}
-      description={page.content?.slice(0, 160)}
-      c={c}
-    >
-      <SiteLayout {...navData}>
-        <PageContent page={page} />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Transform to View Model
+  const mediaCtx = createMediaContext(c);
+  const pageView = toPostViewFromPost(page, mediaCtx);
+
+  const components = c.var.config.theme?.components;
+  const Page = components?.SinglePage ?? DefaultSinglePage;
+
+  return renderPublicPage(c, {
+    title: `${page.title} - ${navData.siteName}`,
+    description: page.content?.slice(0, 160),
+    navData,
+    content: <Page page={pageView} theme={components} />,
+  });
 });