@jant/core 0.3.7 → 0.3.8

package/src/routes/pages/home.tsx

@@ -1,161 +1,150 @@
 /**
  * Home Page Route
+ *
+ * Timeline feed with per-type card components and thread previews.
  */
 
 import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Post, MediaAttachment } from "../../types.js";
+import type { FC } from "hono/jsx";
+import type {
+  Bindings,
+  PostWithMedia,
+  TimelineItemData,
+  TimelineFeedProps,
+} from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout } from "../../theme/layouts/index.js";
-import { MediaGallery } from "../../theme/components/index.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
-import { getSiteName } from "../../lib/config.js";
-import { getMediaUrl, getImageUrl } from "../../lib/image.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";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
+const PAGE_SIZE = 20;
+
 export const homeRoutes = new Hono<Env>();
 
 function HomeContent({
-  siteName,
-  posts,
-  mediaMap,
+  FeedComponent,
+  feedProps,
 }: {
-  siteName: string;
-  posts: Post[];
-  mediaMap: Map<number, MediaAttachment[]>;
+  FeedComponent: FC<TimelineFeedProps>;
+  feedProps: TimelineFeedProps;
 }) {
   const { t } = useLingui();
 
   return (
-    <div class="container py-8">
-      <header class="mb-8 flex items-center justify-between">
-        <h1 class="text-2xl font-semibold">{siteName}</h1>
-        <nav class="flex items-center gap-4 text-sm">
-          <a
-            href="/archive"
-            class="text-muted-foreground hover:text-foreground"
-          >
-            {t({
-              message: "Archive",
-              comment: "@context: Navigation link to archive page",
-            })}
-          </a>
-          <a href="/feed" class="text-muted-foreground hover:text-foreground">
-            RSS
-          </a>
-        </nav>
-      </header>
-
-      <main class="flex flex-col gap-6">
-        {posts.length === 0 ? (
-          <p class="text-muted-foreground">
-            {t({
-              message: "No posts yet.",
-              comment: "@context: Empty state message on home page",
-            })}
-          </p>
-        ) : (
-          posts.map((post) => {
-            const attachments = mediaMap.get(post.id) ?? [];
-            return (
-              <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 || "" }}
-                />
-                {attachments.length > 0 && (
-                  <MediaGallery attachments={attachments} />
-                )}
-                <footer class="mt-2 text-sm text-muted-foreground">
-                  <time
-                    class="dt-published"
-                    datetime={time.toISOString(post.publishedAt)}
-                  >
-                    {time.formatDate(post.publishedAt)}
-                  </time>
-                  {post.visibility === "featured" && (
-                    <span class="ml-2 text-xs">
-                      {t({
-                        message: "Featured",
-                        comment: "@context: Post visibility badge",
-                      })}
-                    </span>
-                  )}
-                </footer>
-              </article>
-            );
-          })
-        )}
-      </main>
-
-      {posts.length >= 20 && (
-        <nav class="mt-8 text-center">
-          <a
-            href="/archive"
-            class="text-sm text-muted-foreground hover:text-foreground"
-          >
-            {t({
-              message: "View all posts →",
-              comment: "@context: Link to view all posts on archive page",
-            })}
-          </a>
-        </nav>
+    <>
+      {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} />
       )}
-    </div>
+    </>
   );
 }
 
 homeRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
+  const navData = await getNavigationData(c);
 
+  // Fetch one extra to determine if there are more
   const posts = await c.var.services.posts.list({
     visibility: ["featured", "quiet"],
-    limit: 20,
+    excludeReplies: true,
+    excludeTypes: ["page"],
+    limit: PAGE_SIZE + 1,
   });
 
+  const hasMore = posts.length > PAGE_SIZE;
+  const displayPosts = hasMore ? posts.slice(0, PAGE_SIZE) : posts;
+
   // Batch load media attachments
-  const postIds = posts.map((p) => p.id);
+  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 mediaMap = buildMediaMap(rawMediaMap, r2PublicUrl, imageTransformUrl);
 
-  const mediaMap = new Map<number, MediaAttachment[]>();
-  for (const [postId, mediaList] of rawMediaMap) {
-    mediaMap.set(
-      postId,
-      mediaList.map((m) => ({
-        id: m.id,
-        url: getMediaUrl(m.id, m.r2Key, r2PublicUrl),
-        previewUrl: getImageUrl(
-          getMediaUrl(m.id, m.r2Key, r2PublicUrl),
-          imageTransformUrl,
-          { width: 400, quality: 80, format: "auto", fit: "cover" },
-        ),
-        alt: m.alt,
-        blurhash: m.blurhash,
-        width: m.width,
-        height: m.height,
-        position: m.position,
-        mimeType: m.mimeType,
-      })),
-    );
+  // Get reply counts to identify thread roots
+  const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
+  const threadRootIds = postIds.filter((id) => (replyCounts.get(id) ?? 0) > 0);
+
+  // Batch load thread previews
+  const threadPreviews = await c.var.services.posts.getThreadPreviews(
+    threadRootIds,
+    3,
+  );
+
+  // Batch load media for preview replies
+  const previewReplyIds: number[] = [];
+  for (const replies of threadPreviews.values()) {
+    for (const reply of replies) {
+      previewReplyIds.push(reply.id);
+    }
   }
+  const previewMediaMap =
+    previewReplyIds.length > 0
+      ? buildMediaMap(
+          await c.var.services.media.getByPostIds(previewReplyIds),
+          r2PublicUrl,
+          imageTransformUrl,
+        )
+      : new Map();
+
+  // Assemble timeline items
+  const items: TimelineItemData[] = displayPosts.map((post) => {
+    const postWithMedia: PostWithMedia = {
+      ...post,
+      mediaAttachments: mediaMap.get(post.id) ?? [],
+    };
+
+    const replyCount = replyCounts.get(post.id) ?? 0;
+    const previewReplies = threadPreviews.get(post.id);
+
+    if (replyCount > 0 && previewReplies) {
+      return {
+        post: postWithMedia,
+        threadPreview: {
+          replies: previewReplies.map((r) => ({
+            ...r,
+            mediaAttachments: previewMediaMap.get(r.id) ?? [],
+          })),
+          totalReplyCount: replyCount,
+        },
+      };
+    }
+
+    return { post: postWithMedia };
+  });
+
+  // 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={siteName} c={c}>
-      <HomeContent siteName={siteName} posts={posts} mediaMap={mediaMap} />
+    <BaseLayout title={navData.siteName} c={c}>
+      <SiteLayout {...navData}>
+        <HomeContent FeedComponent={Feed} feedProps={feedProps} />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/routes/pages/page.tsx

@@ -1,4 +1,3 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Custom Page Route
  *
@@ -6,41 +5,27 @@ import { getSiteName } from "../../lib/config.js";
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout } from "../../theme/layouts/index.js";
+import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
+import { getNavigationData } from "../../lib/navigation.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const pageRoutes = new Hono<Env>();
 
 function PageContent({ page }: { page: Post }) {
-  const { t } = useLingui();
-
   return (
-    <div class="container py-8 max-w-2xl">
-      <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>
-
-      <nav class="mt-8 pt-6 border-t">
-        <a href="/" class="text-sm hover:underline">
-          ←{" "}
-          {t({
-            message: "Back to home",
-            comment: "@context: Navigation link back to home page",
-          })}
-        </a>
-      </nav>
-    </div>
+    <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>
   );
 }
 
@@ -61,15 +46,17 @@ pageRoutes.get("/:path", async (c) => {
     return c.notFound();
   }
 
-  const siteName = await getSiteName(c);
+  const navData = await getNavigationData(c);
 
   return c.html(
     <BaseLayout
-      title={`${page.title} - ${siteName}`}
+      title={`${page.title} - ${navData.siteName}`}
       description={page.content?.slice(0, 160)}
       c={c}
     >
-      <PageContent page={page} />
+      <SiteLayout {...navData}>
+        <PageContent page={page} />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/routes/pages/post.tsx

@@ -1,4 +1,3 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Single Post Page Route
  */
@@ -7,11 +6,12 @@ import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post, MediaAttachment } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout } from "../../theme/layouts/index.js";
+import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
 import { MediaGallery } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import { getNavigationData } from "../../lib/navigation.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -27,46 +27,35 @@ function PostContent({
   const { t } = useLingui();
 
   return (
-    <div class="container py-8">
-      <article class="h-entry">
-        {post.title && (
-          <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
-        )}
-
-        <div
-          class="e-content prose"
-          dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
-        />
-
-        {mediaAttachments.length > 0 && (
-          <MediaGallery attachments={mediaAttachments} />
-        )}
-
-        <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
-          </time>
-          <a href={`/p/${sqid.encode(post.id)}`} class="u-url ml-4">
-            {t({
-              message: "Permalink",
-              comment: "@context: Link to permanent URL of post",
-            })}
-          </a>
-        </footer>
-      </article>
-
-      <nav class="mt-8">
-        <a href="/" class="text-sm hover:underline">
+    <article class="h-entry">
+      {post.title && (
+        <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
+      )}
+
+      <div
+        class="e-content prose"
+        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+      />
+
+      {mediaAttachments.length > 0 && (
+        <MediaGallery attachments={mediaAttachments} />
+      )}
+
+      <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
+        <time
+          class="dt-published"
+          datetime={time.toISOString(post.publishedAt)}
+        >
+          {time.formatDate(post.publishedAt)}
+        </time>
+        <a href={`/p/${sqid.encode(post.id)}`} class="u-url ml-4">
           {t({
-            message: "← Back to home",
-            comment: "@context: Navigation link",
+            message: "Permalink",
+            comment: "@context: Link to permanent URL of post",
           })}
         </a>
-      </nav>
-    </div>
+      </footer>
+    </article>
   );
 }
 
@@ -115,12 +104,14 @@ postRoutes.get("/:id", async (c) => {
     mimeType: m.mimeType,
   }));
 
-  const siteName = await getSiteName(c);
-  const title = post.title || siteName;
+  const navData = await getNavigationData(c);
+  const title = post.title || navData.siteName;
 
   return c.html(
     <BaseLayout title={title} description={post.content?.slice(0, 160)} c={c}>
-      <PostContent post={post} mediaAttachments={mediaAttachments} />
+      <SiteLayout {...navData}>
+        <PostContent post={post} mediaAttachments={mediaAttachments} />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/routes/pages/search.tsx

@@ -1,4 +1,3 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Search Page Route
  */
@@ -8,10 +7,11 @@ import { useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import type { SearchResult } from "../../services/search.js";
-import { BaseLayout } from "../../theme/layouts/index.js";
+import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
 import { PagePagination } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
+import { getNavigationData } from "../../lib/navigation.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -39,7 +39,7 @@ function SearchContent({
   });
 
   return (
-    <div class="container py-8 max-w-2xl">
+    <div>
       <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
 
       {/* Search form */}
@@ -137,16 +137,6 @@ function SearchContent({
           )}
         </div>
       )}
-
-      <nav class="mt-8 pt-6 border-t">
-        <a href="/" class="text-sm hover:underline">
-          ←{" "}
-          {t({
-            message: "Back to home",
-            comment: "@context: Navigation link back to home page",
-          })}
-        </a>
-      </nav>
     </div>
   );
 }
@@ -156,7 +146,7 @@ searchRoutes.get("/", async (c) => {
   const pageParam = c.req.query("page");
   const page = pageParam ? Math.max(1, parseInt(pageParam, 10) || 1) : 1;
 
-  const siteName = await getSiteName(c);
+  const navData = await getNavigationData(c);
 
   // Only search if there's a query
   let results: Awaited<ReturnType<typeof c.var.services.search.search>> = [];
@@ -185,16 +175,22 @@ searchRoutes.get("/", async (c) => {
 
   return c.html(
     <BaseLayout
-      title={query ? `Search: ${query} - ${siteName}` : `Search - ${siteName}`}
+      title={
+        query
+          ? `Search: ${query} - ${navData.siteName}`
+          : `Search - ${navData.siteName}`
+      }
       c={c}
     >
-      <SearchContent
-        query={query}
-        results={results}
-        error={error}
-        hasMore={hasMore}
-        page={page}
-      />
+      <SiteLayout {...navData}>
+        <SearchContent
+          query={query}
+          results={results}
+          error={error}
+          hasMore={hasMore}
+          page={page}
+        />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/services/__tests__/media.test.ts

@@ -18,11 +18,11 @@ describe("MediaService", () => {
   });
 
   const sampleMedia = {
-    filename: "image-abc123.jpg",
+    filename: "0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg",
     originalName: "photo.jpg",
     mimeType: "image/jpeg",
     size: 102400,
-    r2Key: "media/image-abc123.jpg",
+    r2Key: "media/2025/01/0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg",
     width: 1920,
     height: 1080,
   };
@@ -32,11 +32,13 @@ describe("MediaService", () => {
       const media = await mediaService.create(sampleMedia);
 
       expect(media.id).toBeTruthy(); // UUIDv7
-      expect(media.filename).toBe("image-abc123.jpg");
+      expect(media.filename).toBe("0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg");
       expect(media.originalName).toBe("photo.jpg");
       expect(media.mimeType).toBe("image/jpeg");
       expect(media.size).toBe(102400);
-      expect(media.r2Key).toBe("media/image-abc123.jpg");
+      expect(media.r2Key).toBe(
+        "media/2025/01/0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg",
+      );
       expect(media.width).toBe(1920);
       expect(media.height).toBe(1080);
       expect(media.postId).toBeNull();
@@ -69,13 +71,36 @@ describe("MediaService", () => {
       const media1 = await mediaService.create(sampleMedia);
       const media2 = await mediaService.create({
         ...sampleMedia,
-        r2Key: "media/other.jpg",
+        r2Key: "media/2025/01/other.jpg",
       });
 
       expect(media1.id).not.toBe(media2.id);
       // UUIDv7 should be sortable — later ID is lexicographically greater
       expect(media2.id > media1.id).toBe(true);
     });
+
+    it("uses provided id when given", async () => {
+      const customId = "0192a9f1-a2b7-7c3d-8e4f-custom000001";
+      const media = await mediaService.create({
+        ...sampleMedia,
+        id: customId,
+      });
+
+      expect(media.id).toBe(customId);
+    });
+
+    it("auto-generates id when not provided", async () => {
+      const media = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/2025/01/auto.jpg",
+      });
+
+      expect(media.id).toBeTruthy();
+      // UUIDv7 format: 8-4-4-4-12 hex chars
+      expect(media.id).toMatch(
+        /^[0-9a-f]{8}-[0-9a-f]{4}-7[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/,
+      );
+    });
   });
 
   describe("getById", () => {
@@ -84,7 +109,7 @@ describe("MediaService", () => {
 
       const found = await mediaService.getById(created.id);
       expect(found).not.toBeNull();
-      expect(found?.filename).toBe("image-abc123.jpg");
+      expect(found?.filename).toBe("0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg");
     });
 
     it("returns null for non-existent ID", async () => {
@@ -226,7 +251,9 @@ describe("MediaService", () => {
     it("returns media by R2 key", async () => {
       await mediaService.create(sampleMedia);
 
-      const found = await mediaService.getByR2Key("media/image-abc123.jpg");
+      const found = await mediaService.getByR2Key(
+        "media/2025/01/0192a9f1-a2b7-7c3d-8e4f-5a6b7c8d9e0f.jpg",
+      );
       expect(found).not.toBeNull();
       expect(found?.originalName).toBe("photo.jpg");
     });