@jant/core 0.3.6 → 0.3.8

package/src/routes/pages/post.tsx

@@ -1,60 +1,61 @@
-import { getSiteName } from "../../lib/config.js";
 /**
  * Single Post Page Route
  */
 
 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 { 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 };
 
 export const postRoutes = new Hono<Env>();
 
-function PostContent({ post }: { post: Post }) {
+function PostContent({
+  post,
+  mediaAttachments,
+}: {
+  post: Post;
+  mediaAttachments: MediaAttachment[];
+}) {
   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 || "" }}
-        />
-
-        <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>
   );
 }
 
@@ -82,12 +83,35 @@ postRoutes.get("/:id", async (c) => {
     return c.notFound();
   }
 
-  const siteName = await getSiteName(c);
-  const title = post.title || siteName;
+  // Load media attachments
+  const rawMedia = await c.var.services.media.getByPostId(post.id);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+
+  const mediaAttachments: MediaAttachment[] = rawMedia.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,
+  }));
+
+  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} />
+      <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__/collection.test.ts

@@ -223,4 +223,106 @@ describe("CollectionService", () => {
       expect(posts).toEqual([]);
     });
   });
+
+  describe("syncPostCollections", () => {
+    it("adds collections to a post with no existing collections", async () => {
+      const col1 = await collectionService.create({ title: "Col 1" });
+      const col2 = await collectionService.create({ title: "Col 2" });
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      await collectionService.syncPostCollections(post.id, [col1.id, col2.id]);
+
+      const collections = await collectionService.getCollectionsForPost(
+        post.id,
+      );
+      expect(collections).toHaveLength(2);
+      expect(collections.map((c) => c.id).sort()).toEqual(
+        [col1.id, col2.id].sort(),
+      );
+    });
+
+    it("removes collections no longer in the list", async () => {
+      const col1 = await collectionService.create({ title: "Col 1" });
+      const col2 = await collectionService.create({ title: "Col 2" });
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      await collectionService.addPost(col1.id, post.id);
+      await collectionService.addPost(col2.id, post.id);
+
+      // Sync with only col1 — col2 should be removed
+      await collectionService.syncPostCollections(post.id, [col1.id]);
+
+      const collections = await collectionService.getCollectionsForPost(
+        post.id,
+      );
+      expect(collections).toHaveLength(1);
+      expect(collections[0]?.id).toBe(col1.id);
+    });
+
+    it("handles mixed adds and removes", async () => {
+      const col1 = await collectionService.create({ title: "Col 1" });
+      const col2 = await collectionService.create({ title: "Col 2" });
+      const col3 = await collectionService.create({ title: "Col 3" });
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      // Start with col1 and col2
+      await collectionService.addPost(col1.id, post.id);
+      await collectionService.addPost(col2.id, post.id);
+
+      // Sync to col2 and col3 (remove col1, keep col2, add col3)
+      await collectionService.syncPostCollections(post.id, [col2.id, col3.id]);
+
+      const collections = await collectionService.getCollectionsForPost(
+        post.id,
+      );
+      expect(collections).toHaveLength(2);
+      expect(collections.map((c) => c.id).sort()).toEqual(
+        [col2.id, col3.id].sort(),
+      );
+    });
+
+    it("removes all collections when synced with empty array", async () => {
+      const col1 = await collectionService.create({ title: "Col 1" });
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      await collectionService.addPost(col1.id, post.id);
+
+      await collectionService.syncPostCollections(post.id, []);
+
+      const collections = await collectionService.getCollectionsForPost(
+        post.id,
+      );
+      expect(collections).toHaveLength(0);
+    });
+
+    it("is a no-op when already in sync", async () => {
+      const col1 = await collectionService.create({ title: "Col 1" });
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      await collectionService.addPost(col1.id, post.id);
+
+      await collectionService.syncPostCollections(post.id, [col1.id]);
+
+      const collections = await collectionService.getCollectionsForPost(
+        post.id,
+      );
+      expect(collections).toHaveLength(1);
+      expect(collections[0]?.id).toBe(col1.id);
+    });
+  });
 });

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

@@ -1,24 +1,28 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- Test assertions use ! for readability */
 import { describe, it, expect, beforeEach } from "vitest";
 import { createTestDatabase } from "../../__tests__/helpers/db.js";
 import { createMediaService } from "../media.js";
+import { createPostService } from "../post.js";
 import type { Database } from "../../db/index.js";
 
 describe("MediaService", () => {
   let db: Database;
   let mediaService: ReturnType<typeof createMediaService>;
+  let postService: ReturnType<typeof createPostService>;
 
   beforeEach(() => {
     const testDb = createTestDatabase();
     db = testDb.db as unknown as Database;
     mediaService = createMediaService(db);
+    postService = createPostService(db);
   });
 
   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,
   };
@@ -28,15 +32,19 @@ 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();
       expect(media.alt).toBeNull();
+      expect(media.position).toBe(0);
+      expect(media.blurhash).toBeNull();
     });
 
     it("creates media with optional alt text", async () => {
@@ -48,17 +56,51 @@ describe("MediaService", () => {
       expect(media.alt).toBe("A beautiful sunset");
     });
 
+    it("creates media with position and blurhash", async () => {
+      const media = await mediaService.create({
+        ...sampleMedia,
+        position: 3,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      });
+
+      expect(media.position).toBe(3);
+      expect(media.blurhash).toBe("LKO2?U%2Tw=w]~RBVZRi};RPxuwH");
+    });
+
     it("generates UUIDv7 IDs", async () => {
       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", () => {
@@ -67,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 () => {
@@ -76,11 +118,142 @@ describe("MediaService", () => {
     });
   });
 
+  describe("getByIds", () => {
+    it("returns media for valid IDs", async () => {
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      const results = await mediaService.getByIds([m1.id, m2.id]);
+      expect(results).toHaveLength(2);
+      expect(results.map((r) => r.id).sort()).toEqual([m1.id, m2.id].sort());
+    });
+
+    it("returns empty array for empty input", async () => {
+      const results = await mediaService.getByIds([]);
+      expect(results).toEqual([]);
+    });
+
+    it("ignores non-existent IDs", async () => {
+      const m1 = await mediaService.create(sampleMedia);
+
+      const results = await mediaService.getByIds([m1.id, "nonexistent"]);
+      expect(results).toHaveLength(1);
+      expect(results[0]!.id).toBe(m1.id);
+    });
+  });
+
+  describe("getByPostId", () => {
+    it("returns media ordered by position", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m2.id, m1.id]);
+
+      const results = await mediaService.getByPostId(post.id);
+      expect(results).toHaveLength(2);
+      expect(results[0]!.id).toBe(m2.id);
+      expect(results[0]!.position).toBe(0);
+      expect(results[1]!.id).toBe(m1.id);
+      expect(results[1]!.position).toBe(1);
+    });
+
+    it("returns empty array for post with no media", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const results = await mediaService.getByPostId(post.id);
+      expect(results).toEqual([]);
+    });
+  });
+
+  describe("getByPostIds", () => {
+    it("returns Map grouped by postId", async () => {
+      const post1 = await postService.create({
+        type: "note",
+        content: "post 1",
+      });
+      const post2 = await postService.create({
+        type: "note",
+        content: "post 2",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+      const m3 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/c.jpg",
+      });
+
+      await mediaService.attachToPost(post1.id, [m1.id, m2.id]);
+      await mediaService.attachToPost(post2.id, [m3.id]);
+
+      const results = await mediaService.getByPostIds([post1.id, post2.id]);
+      expect(results.size).toBe(2);
+      expect(results.get(post1.id)).toHaveLength(2);
+      expect(results.get(post2.id)).toHaveLength(1);
+    });
+
+    it("returns empty Map for empty input", async () => {
+      const results = await mediaService.getByPostIds([]);
+      expect(results.size).toBe(0);
+    });
+
+    it("returns ordered by position within each post", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m2.id, m1.id]);
+
+      const results = await mediaService.getByPostIds([post.id]);
+      const postMedia = results.get(post.id)!;
+      expect(postMedia[0]!.id).toBe(m2.id);
+      expect(postMedia[1]!.id).toBe(m1.id);
+    });
+  });
+
   describe("getByR2Key", () => {
     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");
     });
@@ -115,6 +288,108 @@ describe("MediaService", () => {
     });
   });
 
+  describe("attachToPost", () => {
+    it("sets postId and position for each media", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id, m2.id]);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(2);
+      expect(attached[0]!.id).toBe(m1.id);
+      expect(attached[0]!.position).toBe(0);
+      expect(attached[1]!.id).toBe(m2.id);
+      expect(attached[1]!.position).toBe(1);
+    });
+
+    it("replaces existing attachments", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+      const m3 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/c.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id, m2.id]);
+      await mediaService.attachToPost(post.id, [m3.id]);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(1);
+      expect(attached[0]!.id).toBe(m3.id);
+      expect(attached[0]!.position).toBe(0);
+
+      // Verify old media is detached
+      const old1 = await mediaService.getById(m1.id);
+      expect(old1!.postId).toBeNull();
+      expect(old1!.position).toBe(0);
+    });
+
+    it("handles empty array by clearing all attachments", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id]);
+      await mediaService.attachToPost(post.id, []);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(0);
+    });
+  });
+
+  describe("detachFromPost", () => {
+    it("clears postId and resets position", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id]);
+      await mediaService.detachFromPost(post.id);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(0);
+
+      const detached = await mediaService.getById(m1.id);
+      expect(detached!.postId).toBeNull();
+      expect(detached!.position).toBe(0);
+    });
+  });
+
   describe("delete", () => {
     it("deletes a media record", async () => {
       const media = await mediaService.create(sampleMedia);