@jant/core 0.3.5 → 0.3.7

package/src/routes/api/posts.ts

@@ -3,16 +3,50 @@
  */
 
 import { Hono } from "hono";
-import type { Bindings, PostType, Visibility } from "../../types.js";
+import type { Bindings, PostType, Visibility, Media } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import * as sqid from "../../lib/sqid.js";
-import { CreatePostSchema, UpdatePostSchema } from "../../lib/schemas.js";
+import {
+  CreatePostSchema,
+  UpdatePostSchema,
+  validateMediaForPostType,
+} from "../../lib/schemas.js";
 import { requireAuthApi } from "../../middleware/auth.js";
+import { getMediaUrl, getImageUrl } from "../../lib/image.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const postsApiRoutes = new Hono<Env>();
 
+/**
+ * Converts a Media record to a MediaAttachment API response shape.
+ */
+function toMediaAttachment(
+  m: Media,
+  r2PublicUrl?: string,
+  imageTransformUrl?: string,
+) {
+  const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+  const previewUrl = getImageUrl(url, imageTransformUrl, {
+    width: 400,
+    quality: 80,
+    format: "auto",
+    fit: "cover",
+  });
+
+  return {
+    id: m.id,
+    url,
+    previewUrl,
+    alt: m.alt,
+    blurhash: m.blurhash,
+    width: m.width,
+    height: m.height,
+    position: m.position,
+    mimeType: m.mimeType,
+  };
+}
+
 // List posts
 postsApiRoutes.get("/", async (c) => {
   const type = c.req.query("type") as PostType | undefined;
@@ -27,10 +61,19 @@ postsApiRoutes.get("/", async (c) => {
     limit,
   });
 
+  // Batch load media for all posts
+  const postIds = posts.map((p) => p.id);
+  const mediaMap = await c.var.services.media.getByPostIds(postIds);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
   return c.json({
     posts: posts.map((p) => ({
       ...p,
       sqid: sqid.encode(p.id),
+      mediaAttachments: (mediaMap.get(p.id) ?? []).map((m) =>
+        toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+      ),
     })),
 
     nextCursor:
@@ -48,7 +91,17 @@ postsApiRoutes.get("/:id", async (c) => {
   const post = await c.var.services.posts.getById(id);
   if (!post) return c.json({ error: "Not found" }, 404);
 
-  return c.json({ ...post, sqid: sqid.encode(post.id) });
+  const mediaList = await c.var.services.media.getByPostId(post.id);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  return c.json({
+    ...post,
+    sqid: sqid.encode(post.id),
+    mediaAttachments: mediaList.map((m) =>
+      toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+    ),
+  });
 });
 
 // Create post (requires auth)
@@ -66,6 +119,22 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
 
   const body = parseResult.data;
 
+  // Validate media for post type
+  if (body.mediaIds) {
+    const mediaError = validateMediaForPostType(body.type, body.mediaIds);
+    if (mediaError) {
+      return c.json({ error: mediaError }, 400);
+    }
+
+    // Verify all media IDs exist
+    if (body.mediaIds.length > 0) {
+      const existing = await c.var.services.media.getByIds(body.mediaIds);
+      if (existing.length !== body.mediaIds.length) {
+        return c.json({ error: "One or more media IDs are invalid" }, 400);
+      }
+    }
+  }
+
   const post = await c.var.services.posts.create({
     type: body.type,
     title: body.title,
@@ -80,7 +149,25 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
     publishedAt: body.publishedAt,
   });
 
-  return c.json({ ...post, sqid: sqid.encode(post.id) }, 201);
+  // Attach media
+  if (body.mediaIds && body.mediaIds.length > 0) {
+    await c.var.services.media.attachToPost(post.id, body.mediaIds);
+  }
+
+  const mediaList = await c.var.services.media.getByPostId(post.id);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  return c.json(
+    {
+      ...post,
+      sqid: sqid.encode(post.id),
+      mediaAttachments: mediaList.map((m) =>
+        toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+      ),
+    },
+    201,
+  );
 });
 
 // Update post (requires auth)
@@ -101,6 +188,30 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
 
   const body = parseResult.data;
 
+  // Validate media for post type if mediaIds is provided
+  if (body.mediaIds !== undefined) {
+    // Need the post type — use the new type if provided, else fetch existing
+    let postType = body.type;
+    if (!postType) {
+      const existing = await c.var.services.posts.getById(id);
+      if (!existing) return c.json({ error: "Not found" }, 404);
+      postType = existing.type;
+    }
+
+    const mediaError = validateMediaForPostType(postType, body.mediaIds);
+    if (mediaError) {
+      return c.json({ error: mediaError }, 400);
+    }
+
+    // Verify all media IDs exist
+    if (body.mediaIds.length > 0) {
+      const existing = await c.var.services.media.getByIds(body.mediaIds);
+      if (existing.length !== body.mediaIds.length) {
+        return c.json({ error: "One or more media IDs are invalid" }, 400);
+      }
+    }
+  }
+
   const post = await c.var.services.posts.update(id, {
     type: body.type,
     title: body.title,
@@ -114,7 +225,22 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
 
   if (!post) return c.json({ error: "Not found" }, 404);
 
-  return c.json({ ...post, sqid: sqid.encode(post.id) });
+  // Update media attachments if provided (including empty array to clear)
+  if (body.mediaIds !== undefined) {
+    await c.var.services.media.attachToPost(post.id, body.mediaIds);
+  }
+
+  const mediaList = await c.var.services.media.getByPostId(post.id);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  return c.json({
+    ...post,
+    sqid: sqid.encode(post.id),
+    mediaAttachments: mediaList.map((m) =>
+      toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+    ),
+  });
 });
 
 // Delete post (requires auth)
@@ -122,6 +248,9 @@ postsApiRoutes.delete("/:id", requireAuthApi(), async (c) => {
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.json({ error: "Invalid ID" }, 400);
 
+  // Detach media before deleting
+  await c.var.services.media.detachFromPost(id);
+
   const success = await c.var.services.posts.delete(id);
   if (!success) return c.json({ error: "Not found" }, 404);
 

package/src/routes/dash/media.tsx

@@ -418,6 +418,56 @@ mediaRoutes.get("/", async (c) => {
   );
 });
 
+// Media picker (returns HTML fragment for PostForm dialog)
+// Must be defined before /:id to avoid "picker" matching as an ID
+mediaRoutes.get("/picker", async (c) => {
+  const mediaList = await c.var.services.media.list(100);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  if (mediaList.length === 0) {
+    return c.html(
+      <p class="text-muted-foreground text-sm col-span-4">
+        No media uploaded yet. Upload media from the Media page first.
+      </p>,
+    );
+  }
+
+  return c.html(
+    <>
+      {mediaList
+        .filter((m) => m.mimeType.startsWith("image/"))
+        .map((m) => {
+          const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+          const thumbUrl = getImageUrl(url, imageTransformUrl, {
+            width: 150,
+            quality: 80,
+            format: "auto",
+            fit: "cover",
+          });
+          return (
+            <button
+              key={m.id}
+              type="button"
+              class="aspect-square rounded-lg overflow-hidden border-2 hover:border-primary cursor-pointer transition-colors"
+              data-on:click={`$mediaIds.includes('${m.id}') ? ($mediaIds = $mediaIds.filter(id => id !== '${m.id}')) : ($mediaIds = [...$mediaIds, '${m.id}'])`}
+              data-class:border-primary={`$mediaIds.includes('${m.id}')`}
+              data-class:ring-2={`$mediaIds.includes('${m.id}')`}
+              data-class:ring-primary={`$mediaIds.includes('${m.id}')`}
+            >
+              <img
+                src={thumbUrl}
+                alt={m.alt || m.originalName}
+                class="w-full h-full object-cover"
+                loading="lazy"
+              />
+            </button>
+          );
+        })}
+    </>,
+  );
+});
+
 // View single media
 mediaRoutes.get("/:id", async (c) => {
   const id = c.req.param("id");

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/home.tsx

@@ -4,18 +4,28 @@
 
 import { Hono } from "hono";
 import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Post } from "../../types.js";
+import type { Bindings, Post, MediaAttachment } 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";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const homeRoutes = new Hono<Env>();
 
-function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
+function HomeContent({
+  siteName,
+  posts,
+  mediaMap,
+}: {
+  siteName: string;
+  posts: Post[];
+  mediaMap: Map<number, MediaAttachment[]>;
+}) {
   const { t } = useLingui();
 
   return (
@@ -47,40 +57,46 @@ function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
             })}
           </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>
+          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>
-            </article>
-          ))
+                <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>
 
@@ -109,9 +125,37 @@ homeRoutes.get("/", async (c) => {
     limit: 20,
   });
 
+  // Batch load media attachments
+  const postIds = posts.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 = 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,
+      })),
+    );
+  }
+
   return c.html(
     <BaseLayout title={siteName} c={c}>
-      <HomeContent siteName={siteName} posts={posts} />
+      <HomeContent siteName={siteName} posts={posts} mediaMap={mediaMap} />
     </BaseLayout>,
   );
 });