@jant/core 0.3.6 → 0.3.8

package/src/routes/dash/posts.tsx

@@ -5,7 +5,7 @@ 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 { Bindings, Post, Media, Collection } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import {
@@ -38,14 +38,14 @@ function PostsListContent({ posts }: { posts: Post[] }) {
   );
 }
 
-function NewPostContent() {
+function NewPostContent({ collections }: { collections: Collection[] }) {
   const { t } = useLingui();
   return (
     <>
       <h1 class="text-2xl font-semibold mb-6">
         {t({ message: "New Post", comment: "@context: Page heading" })}
       </h1>
-      <PostForm action="/dash/posts" />
+      <PostForm action="/dash/posts" collections={collections} />
     </>
   );
 }
@@ -72,6 +72,7 @@ postsRoutes.get("/", async (c) => {
 // New post form
 postsRoutes.get("/new", async (c) => {
   const siteName = await getSiteName(c);
+  const collections = await c.var.services.collections.list();
 
   return c.html(
     <DashLayout
@@ -80,7 +81,7 @@ postsRoutes.get("/new", async (c) => {
       siteName={siteName}
       currentPath="/dash/posts"
     >
-      <NewPostContent />
+      <NewPostContent collections={collections} />
     </DashLayout>,
   );
 });
@@ -93,7 +94,10 @@ postsRoutes.post("/", async (c) => {
     content: string;
     visibility: string;
     sourceUrl?: string;
+    sourceName?: string;
     path?: string;
+    mediaIds?: string[];
+    collectionIds?: number[];
   }>();
 
   const post = await c.var.services.posts.create({
@@ -102,9 +106,23 @@ postsRoutes.post("/", async (c) => {
     content: body.content,
     visibility: body.visibility as Post["visibility"],
     sourceUrl: body.sourceUrl || undefined,
+    sourceName: body.sourceName || undefined,
     path: body.path || undefined,
   });
 
+  // Attach media if provided
+  if (body.mediaIds && body.mediaIds.length > 0) {
+    await c.var.services.media.attachToPost(post.id, body.mediaIds);
+  }
+
+  // Sync collection associations
+  if (body.collectionIds) {
+    await c.var.services.collections.syncPostCollections(
+      post.id,
+      body.collectionIds,
+    );
+  }
+
   return dsRedirect(`/dash/posts/${sqid.encode(post.id)}`);
 });
 
@@ -145,14 +163,36 @@ function ViewPostContent({ post }: { post: Post }) {
   );
 }
 
-function EditPostContent({ post }: { post: Post }) {
+function EditPostContent({
+  post,
+  mediaAttachments,
+  r2PublicUrl,
+  imageTransformUrl,
+  collections,
+  postCollectionIds,
+}: {
+  post: Post;
+  mediaAttachments: Media[];
+  r2PublicUrl?: string;
+  imageTransformUrl?: string;
+  collections: Collection[];
+  postCollectionIds: number[];
+}) {
   const { t } = useLingui();
   return (
     <>
       <h1 class="text-2xl font-semibold mb-6">
         {t({ message: "Edit Post", comment: "@context: Page heading" })}
       </h1>
-      <PostForm post={post} action={`/dash/posts/${sqid.encode(post.id)}`} />
+      <PostForm
+        post={post}
+        action={`/dash/posts/${sqid.encode(post.id)}`}
+        mediaAttachments={mediaAttachments}
+        r2PublicUrl={r2PublicUrl}
+        imageTransformUrl={imageTransformUrl}
+        collections={collections}
+        postCollectionIds={postCollectionIds}
+      />
     </>
   );
 }
@@ -189,6 +229,13 @@ postsRoutes.get("/:id/edit", async (c) => {
   if (!post) return c.notFound();
 
   const siteName = await getSiteName(c);
+  const mediaAttachments = await c.var.services.media.getByPostId(post.id);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const collections = await c.var.services.collections.list();
+  const postCollections =
+    await c.var.services.collections.getCollectionsForPost(post.id);
+  const postCollectionIds = postCollections.map((col) => col.id);
 
   return c.html(
     <DashLayout
@@ -197,7 +244,14 @@ postsRoutes.get("/:id/edit", async (c) => {
       siteName={siteName}
       currentPath="/dash/posts"
     >
-      <EditPostContent post={post} />
+      <EditPostContent
+        post={post}
+        mediaAttachments={mediaAttachments}
+        r2PublicUrl={r2PublicUrl}
+        imageTransformUrl={imageTransformUrl}
+        collections={collections}
+        postCollectionIds={postCollectionIds}
+      />
     </DashLayout>,
   );
 });
@@ -213,7 +267,10 @@ postsRoutes.post("/:id", async (c) => {
     content?: string;
     visibility: string;
     sourceUrl?: string;
+    sourceName?: string;
     path?: string;
+    mediaIds?: string[];
+    collectionIds?: number[];
   }>();
 
   await c.var.services.posts.update(id, {
@@ -222,9 +279,23 @@ postsRoutes.post("/:id", async (c) => {
     content: body.content || null,
     visibility: body.visibility as Post["visibility"],
     sourceUrl: body.sourceUrl || null,
+    sourceName: body.sourceName || null,
     path: body.path || null,
   });
 
+  // Update media attachments if provided
+  if (body.mediaIds !== undefined) {
+    await c.var.services.media.attachToPost(id, body.mediaIds);
+  }
+
+  // Sync collection associations
+  if (body.collectionIds !== undefined) {
+    await c.var.services.collections.syncPostCollections(
+      id,
+      body.collectionIds,
+    );
+  }
+
   return dsRedirect(`/dash/posts/${sqid.encode(id)}`);
 });
 
@@ -233,6 +304,7 @@ postsRoutes.post("/:id/delete", async (c) => {
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.notFound();
 
+  await c.var.services.media.detachFromPost(id);
   await c.var.services.posts.delete(id);
 
   return dsRedirect("/dash/posts");

package/src/routes/feed/rss.ts

@@ -7,6 +7,7 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
+import { getMediaUrl } from "../../lib/image.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -18,25 +19,37 @@ rssRoutes.get("/", async (c) => {
   const siteName = all["SITE_NAME"] ?? "Jant";
   const siteDescription = all["SITE_DESCRIPTION"] ?? "";
   const siteUrl = c.env.SITE_URL;
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
 
   const posts = await c.var.services.posts.list({
     visibility: ["featured", "quiet"],
     limit: 50,
   });
 
+  // Batch load media for enclosures
+  const postIds = posts.map((p) => p.id);
+  const mediaMap = await c.var.services.media.getByPostIds(postIds);
+
   const items = posts
     .map((post) => {
       const link = `${siteUrl}/p/${sqid.encode(post.id)}`;
       const title = post.title || `Post #${post.id}`;
       const pubDate = new Date(post.publishedAt * 1000).toUTCString();
 
+      // Add enclosure for first media attachment
+      const postMedia = mediaMap.get(post.id);
+      const firstMedia = postMedia?.[0];
+      const enclosure = firstMedia
+        ? `\n      <enclosure url="${getMediaUrl(firstMedia.id, firstMedia.r2Key, r2PublicUrl)}" length="${firstMedia.size}" type="${firstMedia.mimeType}"/>`
+        : "";
+
       return `
     <item>
       <title><![CDATA[${escapeXml(title)}]]></title>
       <link>${link}</link>
       <guid isPermaLink="true">${link}</guid>
       <pubDate>${pubDate}</pubDate>
-      <description><![CDATA[${post.contentHtml || ""}]]></description>
+      <description><![CDATA[${post.contentHtml || ""}]]></description>${enclosure}
     </item>`;
     })
     .join("");

package/src/routes/pages/archive.tsx

@@ -1,4 +1,3 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Archive Page Route
  *
@@ -9,11 +8,12 @@ import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post, PostType } 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 { 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 { getNavigationData } from "../../lib/navigation.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -102,7 +102,7 @@ function ArchiveContent({
     : t({ message: "Archive", comment: "@context: Archive page title" });
 
   return (
-    <div class="container py-8">
+    <div>
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{title}</h1>
 
@@ -202,16 +202,6 @@ function ArchiveContent({
         hasMore={hasMore}
         nextCursor={nextCursor}
       />
-
-      <nav class="mt-4">
-        <a href="/" class="text-sm hover:underline">
-          ←{" "}
-          {t({
-            message: "Back to home",
-            comment: "@context: Navigation link back to home page",
-          })}
-        </a>
-      </nav>
     </div>
   );
 }
@@ -226,7 +216,7 @@ archiveRoutes.get("/", async (c) => {
   const cursorParam = c.req.query("cursor");
   const cursor = cursorParam ? parseInt(cursorParam, 10) : undefined;
 
-  const siteName = await getSiteName(c);
+  const navData = await getNavigationData(c);
 
   // Fetch one extra to check for more
   const posts = await c.var.services.posts.list({
@@ -264,15 +254,17 @@ archiveRoutes.get("/", async (c) => {
   }
 
   return c.html(
-    <BaseLayout title={`Archive - ${siteName}`} c={c}>
-      <ArchiveContent
-        displayPosts={displayPosts}
-        hasMore={hasMore}
-        nextCursor={nextCursor}
-        type={type}
-        grouped={grouped}
-        replyCounts={replyCounts}
-      />
+    <BaseLayout title={`Archive - ${navData.siteName}`} c={c}>
+      <SiteLayout {...navData}>
+        <ArchiveContent
+          displayPosts={displayPosts}
+          hasMore={hasMore}
+          nextCursor={nextCursor}
+          type={type}
+          grouped={grouped}
+          replyCounts={replyCounts}
+        />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/routes/pages/collection.tsx

@@ -1,4 +1,3 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Collection Page Route
  */
@@ -7,9 +6,10 @@ import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Collection, 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 * 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 };
 
@@ -25,7 +25,7 @@ function CollectionContent({
   const { t } = useLingui();
 
   return (
-    <div class="container py-8">
+    <div>
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{collection.title}</h1>
         {collection.description && (
@@ -70,15 +70,6 @@ function CollectionContent({
           ))
         )}
       </main>
-
-      <nav class="mt-8">
-        <a href="/" class="text-sm hover:underline">
-          {t({
-            message: "← Back to home",
-            comment: "@context: Navigation link",
-          })}
-        </a>
-      </nav>
     </div>
   );
 }
@@ -90,15 +81,17 @@ collectionRoutes.get("/:path", async (c) => {
   if (!collection) return c.notFound();
 
   const posts = await c.var.services.collections.getPosts(collection.id);
-  const siteName = await getSiteName(c);
+  const navData = await getNavigationData(c);
 
   return c.html(
     <BaseLayout
-      title={`${collection.title} - ${siteName}`}
+      title={`${collection.title} - ${navData.siteName}`}
       description={collection.description ?? undefined}
       c={c}
     >
-      <CollectionContent collection={collection} posts={posts} />
+      <SiteLayout {...navData}>
+        <CollectionContent collection={collection} posts={posts} />
+      </SiteLayout>
     </BaseLayout>,
   );
 });

package/src/routes/pages/home.tsx

@@ -1,117 +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 } 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 * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
-import { getSiteName } from "../../lib/config.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 }: { siteName: string; posts: Post[] }) {
+function HomeContent({
+  FeedComponent,
+  feedProps,
+}: {
+  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) => (
-            <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>
-                {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 = 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);
+
+  // 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} />
+    <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>,
   );
 });