@jant/core 0.3.36 → 0.3.38

package/src/lib/__tests__/view.test.ts

@@ -20,29 +20,40 @@ import type {
   SearchResult,
   Post,
 } from "../../types.js";
-
 const EMPTY_CTX: MediaContext = {};
 const CTX_WITH_URLS: MediaContext = {
   r2PublicUrl: "https://cdn.example.com",
   imageTransformUrl: "https://example.com/cdn-cgi/image",
 };
 
+// UUIDv7 constants for test fixtures
+const UUID_1 = "019cb943-b2c0-76e3-ade2-209415e74da5";
+const UUID_2 = "019cb943-b2c0-76e3-ade2-209415e74da6";
+const UUID_3 = "019cb943-b2c0-76e3-ade2-209415e74da7";
+const UUID_POST = "019cb943-c000-7000-8000-000000000001";
+const UUID_NAV_1 = "019cb943-d000-7000-8000-000000000001";
+const UUID_NAV_2 = "019cb943-d000-7000-8000-000000000002";
+const UUID_NAV_3 = "019cb943-d000-7000-8000-000000000003";
+
 function makePost(overrides: Partial<Post> = {}): Post {
   return {
-    id: 1,
+    id: UUID_1,
     format: "note",
     status: "published",
-    visibility: "listed" as const,
-    pinned: 0,
-    path: null,
+    visibility: "public" as const,
+    pinnedAt: null,
+    featuredAt: null,
+    slug: "test-post",
     title: null,
     url: null,
     body: "Hello world",
     bodyHtml: "<p>Hello world</p>",
+    bodyText: null,
     quoteText: null,
+    summary: null,
     rating: null,
     replyToId: null,
-    threadId: null,
+    threadId: UUID_1,
     deletedAt: null,
     publishedAt: 1706745600, // 2024-02-01T00:00:00Z
     createdAt: 1706745600,
@@ -63,7 +74,7 @@ function makePostWithMedia(
 function makeMedia(overrides: Partial<Media> = {}): Media {
   return {
     id: "01902a9f-1a2b-7c3d",
-    postId: 1,
+    postId: UUID_1,
     filename: "image.webp",
     originalName: "photo.jpg",
     mimeType: "image/webp",
@@ -73,21 +84,24 @@ function makeMedia(overrides: Partial<Media> = {}): Media {
     width: 1920,
     height: 1080,
     alt: "A photo",
-    position: 0,
+    position: "a0",
     blurhash: null,
+    posterKey: null,
+    summary: null,
+    chars: null,
     createdAt: 1706745600,
+    updatedAt: 1706745600,
     ...overrides,
   };
 }
 
 function makeNavItem(overrides: Partial<NavItem> = {}): NavItem {
   return {
-    id: 1,
+    id: UUID_NAV_1,
     type: "link",
     label: "Home",
     url: "/",
-    pageId: null,
-    position: 0,
+    position: "a0",
     createdAt: 1706745600,
     updatedAt: 1706745600,
     ...overrides,
@@ -99,23 +113,11 @@ function makeNavItem(overrides: Partial<NavItem> = {}): NavItem {
 // =============================================================================
 
 describe("toPostView", () => {
-  it("generates permalink from post id when no path", () => {
-    const post = makePostWithMedia({ id: 123, path: null });
-    const view = toPostView(post, EMPTY_CTX);
-    expect(view.permalink).toMatch(/^\/p\/.+$/);
-    expect(view.permalink.length).toBeGreaterThan(3);
-  });
-
-  it("generates permalink from path when path is set", () => {
-    const post = makePostWithMedia({ id: 123, path: "my-post" });
+  it("generates permalink from slug", () => {
+    const post = makePostWithMedia({ id: UUID_POST, slug: "my-post" });
     const view = toPostView(post, EMPTY_CTX);
     expect(view.permalink).toBe("/my-post");
-  });
-
-  it("generates permalink from multi-level path", () => {
-    const post = makePostWithMedia({ id: 123, path: "2024/01/my-post" });
-    const view = toPostView(post, EMPTY_CTX);
-    expect(view.permalink).toBe("/2024/01/my-post");
+    expect(view.slug).toBe("my-post");
   });
 
   it("formats dates correctly", () => {
@@ -207,7 +209,7 @@ describe("toPostView", () => {
   it("converts null fields to undefined", () => {
     const view = toPostView(makePostWithMedia(), EMPTY_CTX);
     expect(view.title).toBeUndefined();
-    expect(view.path).toBeUndefined();
+    expect(view.slug).toBe("test-post");
     expect(view.url).toBeUndefined();
     expect(view.quoteText).toBeUndefined();
     expect(view.rating).toBeUndefined();
@@ -236,31 +238,33 @@ describe("toPostView", () => {
     expect(view.quoteText).toBe("Something wise");
   });
 
-  it("maps format, status, visibility, and pinned correctly", () => {
+  it("maps format, status, visibility, pinned, and featured correctly", () => {
     const view = toPostView(
       makePostWithMedia({
         format: "link",
         status: "draft",
-        visibility: "featured",
-        pinned: 1,
+        visibility: "public",
+        pinnedAt: 1706745600,
+        featuredAt: 1706745600,
       }),
       EMPTY_CTX,
     );
     expect(view.format).toBe("link");
     expect(view.status).toBe("draft");
-    expect(view.visibility).toBe("featured");
+    expect(view.visibility).toBe("public");
     expect(view.pinned).toBe(true);
+    expect(view.featured).toBe(true);
   });
 
-  it("maps default visibility and pinned=0", () => {
+  it("maps default visibility and pinnedAt=null", () => {
     const view = toPostView(
       makePostWithMedia({
-        visibility: "listed",
-        pinned: 0,
+        visibility: "public",
+        pinnedAt: null,
       }),
       EMPTY_CTX,
     );
-    expect(view.visibility).toBe("listed");
+    expect(view.visibility).toBe("public");
     expect(view.pinned).toBe(false);
   });
 
@@ -284,10 +288,15 @@ describe("toPostView", () => {
             previewUrl: "/media/abc-thumb.webp",
             alt: "Photo",
             blurhash: null,
+            posterUrl: null,
             width: 800,
             height: 600,
-            position: 0,
+            position: "a0",
             mimeType: "image/webp",
+            originalName: "photo.jpg",
+            size: 5000,
+            summary: null,
+            chars: null,
           },
         ],
       }),
@@ -302,17 +311,53 @@ describe("toPostView", () => {
       altText: "Photo",
       width: 800,
       height: 600,
+      blurhash: undefined,
+      posterUrl: undefined,
+      originalName: "photo.jpg",
+      size: 5000,
+      summary: undefined,
+      chars: undefined,
     });
   });
+
+  it("passes blurhash from media attachments to MediaView", () => {
+    const view = toPostView(
+      makePostWithMedia({
+        mediaAttachments: [
+          {
+            id: "abc",
+            url: "/media/abc.webp",
+            previewUrl: "/media/abc-thumb.webp",
+            alt: null,
+            blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+            posterUrl: null,
+            width: 800,
+            height: 600,
+            position: "a0",
+            mimeType: "image/webp",
+            originalName: "photo.jpg",
+            size: 5000,
+            summary: null,
+            chars: null,
+          },
+        ],
+      }),
+      EMPTY_CTX,
+    );
+    expect(view.media[0]?.blurhash).toBe("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
+  });
 });
 
 describe("toPostViews", () => {
   it("converts multiple posts", () => {
-    const posts = [makePostWithMedia({ id: 1 }), makePostWithMedia({ id: 2 })];
+    const posts = [
+      makePostWithMedia({ id: UUID_1 }),
+      makePostWithMedia({ id: UUID_2 }),
+    ];
     const views = toPostViews(posts, EMPTY_CTX);
     expect(views).toHaveLength(2);
-    expect(views[0]).toHaveProperty("id", 1);
-    expect(views[1]).toHaveProperty("id", 2);
+    expect(views[0]).toHaveProperty("id", UUID_1);
+    expect(views[1]).toHaveProperty("id", UUID_2);
   });
 });
 
@@ -347,21 +392,55 @@ describe("toMediaView", () => {
     expect(view.url).toContain("s3.example.com");
   });
 
-  it("maps alt text and dimensions", () => {
-    const view = toMediaView(makeMedia(), EMPTY_CTX);
+  it("maps alt text, dimensions, and blurhash", () => {
+    const view = toMediaView(
+      makeMedia({ blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj" }),
+      EMPTY_CTX,
+    );
     expect(view.altText).toBe("A photo");
     expect(view.width).toBe(1920);
     expect(view.height).toBe(1080);
     expect(view.mimeType).toBe("image/webp");
     expect(view.size).toBe(12345);
+    expect(view.blurhash).toBe("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
   });
 
-  it("handles null alt and dimensions", () => {
-    const media = makeMedia({ alt: null, width: null, height: null });
+  it("handles null alt, dimensions, and blurhash", () => {
+    const media = makeMedia({
+      alt: null,
+      width: null,
+      height: null,
+      blurhash: null,
+    });
     const view = toMediaView(media, EMPTY_CTX);
     expect(view.altText).toBeUndefined();
     expect(view.width).toBeUndefined();
     expect(view.height).toBeUndefined();
+    expect(view.blurhash).toBeUndefined();
+  });
+
+  it("computes posterUrl from posterKey", () => {
+    const media = makeMedia({
+      posterKey: "media/2025/01/abc-poster.webp",
+    });
+    const view = toMediaView(media, EMPTY_CTX);
+    expect(view.posterUrl).toBe("/media/2025/01/abc-poster.webp");
+  });
+
+  it("computes posterUrl with CDN public URL and image transform", () => {
+    const media = makeMedia({
+      posterKey: "media/2025/01/abc-poster.webp",
+    });
+    const view = toMediaView(media, CTX_WITH_URLS);
+    expect(view.posterUrl).toBe(
+      "https://example.com/cdn-cgi/image/width=640,quality=80,format=auto,fit=scale-down/https://cdn.example.com/media/2025/01/abc-poster.webp",
+    );
+  });
+
+  it("returns undefined posterUrl when posterKey is null", () => {
+    const media = makeMedia({ posterKey: null });
+    const view = toMediaView(media, EMPTY_CTX);
+    expect(view.posterUrl).toBeUndefined();
   });
 });
 
@@ -412,24 +491,18 @@ describe("toNavItemView", () => {
     expect(view.isActive).toBe(false);
   });
 
-  it("includes type and pageId in view", () => {
-    const view = toNavItemView(makeNavItem({ type: "page", pageId: 5 }), "/");
-    expect(view.type).toBe("page");
-    expect(view.pageId).toBe(5);
-  });
-
-  it("converts null pageId to undefined", () => {
-    const view = toNavItemView(makeNavItem({ pageId: null }), "/");
-    expect(view.pageId).toBeUndefined();
+  it("includes type in view", () => {
+    const view = toNavItemView(makeNavItem({ type: "system" }), "/");
+    expect(view.type).toBe("system");
   });
 });
 
 describe("toNavItemViews", () => {
   it("converts multiple items", () => {
     const items = [
-      makeNavItem({ id: 1, url: "/" }),
-      makeNavItem({ id: 2, url: "/archive" }),
-      makeNavItem({ id: 3, url: "https://github.com" }),
+      makeNavItem({ id: UUID_NAV_1, url: "/" }),
+      makeNavItem({ id: UUID_NAV_2, url: "/archive" }),
+      makeNavItem({ id: UUID_NAV_3, url: "https://github.com" }),
     ];
     const views = toNavItemViews(items, "/archive");
     expect(views).toHaveLength(3);
@@ -446,12 +519,12 @@ describe("toNavItemViews", () => {
 describe("toSearchResultView", () => {
   it("wraps post in PostView", () => {
     const result: SearchResult = {
-      post: makePost({ id: 42, title: "Test" }),
+      post: makePost({ id: UUID_POST, title: "Test" }),
       rank: 1.5,
       snippet: "...matching <b>text</b>...",
     };
     const view = toSearchResultView(result, EMPTY_CTX);
-    expect(view.post.id).toBe(42);
+    expect(view.post.id).toBe(UUID_POST);
     expect(view.post.title).toBe("Test");
     expect(view.post.permalink).toBeDefined();
     expect(view.rank).toBe(1.5);
@@ -461,20 +534,22 @@ describe("toSearchResultView", () => {
   it("uses new post fields in search result view", () => {
     const result: SearchResult = {
       post: makePost({
-        id: 10,
+        id: UUID_POST,
         format: "link",
         status: "published",
-        visibility: "featured",
-        pinned: 0,
+        visibility: "public",
+        pinnedAt: null,
+        featuredAt: 1706745600,
         url: "https://example.com",
-        path: "my-link",
+        slug: "my-link",
       }),
       rank: 0.8,
     };
     const view = toSearchResultView(result, EMPTY_CTX);
     expect(view.post.format).toBe("link");
     expect(view.post.status).toBe("published");
-    expect(view.post.visibility).toBe("featured");
+    expect(view.post.visibility).toBe("public");
+    expect(view.post.featured).toBe(true);
     expect(view.post.pinned).toBe(false);
     expect(view.post.url).toBe("https://example.com");
     expect(view.post.permalink).toBe("/my-link");
@@ -489,10 +564,10 @@ describe("toArchiveGroups", () => {
   it("converts grouped map to ArchiveGroup array", () => {
     const grouped = new Map<string, Post[]>();
     grouped.set("2024-02", [
-      makePost({ id: 1, publishedAt: 1706745600 }),
-      makePost({ id: 2, publishedAt: 1706832000 }),
+      makePost({ id: UUID_1, publishedAt: 1706745600 }),
+      makePost({ id: UUID_2, publishedAt: 1706832000 }),
     ]);
-    grouped.set("2024-01", [makePost({ id: 3, publishedAt: 1704067200 })]);
+    grouped.set("2024-01", [makePost({ id: UUID_3, publishedAt: 1704067200 })]);
 
     const groups = toArchiveGroups(grouped, EMPTY_CTX);
     expect(groups).toHaveLength(2);
@@ -511,7 +586,7 @@ describe("toArchiveGroups", () => {
 
   it("converts posts to PostView within groups", () => {
     const grouped = new Map<string, Post[]>();
-    grouped.set("2024-02", [makePost({ id: 1 })]);
+    grouped.set("2024-02", [makePost({ id: UUID_1 })]);
 
     const groups = toArchiveGroups(grouped, EMPTY_CTX);
     const post = groups[0]?.posts[0];

package/src/lib/blurhash-placeholder.ts

@@ -0,0 +1,102 @@
+/**
+ * Blurhash to Data URL (Workers-compatible)
+ *
+ * Decodes a blurhash to a tiny BMP image encoded as a base64 data URL.
+ * Uses raw BMP encoding (no Canvas/DOM needed) so it works in
+ * Cloudflare Workers and Node.js alike.
+ *
+ * The resulting 4×3 image is stretched by the browser via CSS
+ * `background-size: cover` with `image-rendering: auto` (default),
+ * which applies bilinear interpolation for a natural blur effect.
+ */
+
+import { decode } from "blurhash";
+
+/**
+ * Convert a blurhash string to a base64-encoded BMP data URL.
+ *
+ * @param hash - Blurhash string
+ * @param width - Decode width in pixels (default 4)
+ * @param height - Decode height in pixels (default 3)
+ * @returns data:image/bmp;base64,... string
+ *
+ * @example
+ * ```ts
+ * const url = blurhashToDataUrl("LEHV6nWB2yk8pyo0adR*.7kCMdnj");
+ * // "data:image/bmp;base64,Qk2..."
+ * ```
+ */
+export function blurhashToDataUrl(hash: string, width = 4, height = 3): string {
+  const pixels = decode(hash, width, height);
+  const bmp = encodeBMP(pixels, width, height);
+  return "data:image/bmp;base64," + uint8ToBase64(bmp);
+}
+
+/**
+ * Encode RGBA pixel data into a BMP file (24-bit, bottom-up).
+ */
+function encodeBMP(
+  pixels: Uint8ClampedArray,
+  w: number,
+  h: number,
+): Uint8Array {
+  // BMP row stride must be a multiple of 4 bytes
+  const rowSize = Math.ceil((w * 3) / 4) * 4;
+  const pixelDataSize = rowSize * h;
+  const fileSize = 54 + pixelDataSize; // 14 (file header) + 40 (DIB header) + pixels
+
+  const buf = new Uint8Array(fileSize);
+  const view = new DataView(buf.buffer);
+
+  // -- BMP File Header (14 bytes) --
+  buf[0] = 0x42; // 'B'
+  buf[1] = 0x4d; // 'M'
+  view.setUint32(2, fileSize, true);
+  view.setUint32(10, 54, true); // pixel data offset
+
+  // -- DIB Header (BITMAPINFOHEADER, 40 bytes) --
+  view.setUint32(14, 40, true); // header size
+  view.setInt32(18, w, true); // width
+  view.setInt32(22, h, true); // height (positive = bottom-up)
+  view.setUint16(26, 1, true); // color planes
+  view.setUint16(28, 24, true); // bits per pixel
+  // compression (0), image size (0), resolution, colors — all zeros (default)
+
+  // -- Pixel data (bottom-up, BGR) --
+  for (let y = 0; y < h; y++) {
+    const srcRow = (h - 1 - y) * w; // BMP is bottom-up
+    const dstRow = 54 + y * rowSize;
+    for (let x = 0; x < w; x++) {
+      const srcIdx = (srcRow + x) * 4;
+      const dstIdx = dstRow + x * 3;
+      buf[dstIdx] = pixels[srcIdx + 2] ?? 0; // B
+      buf[dstIdx + 1] = pixels[srcIdx + 1] ?? 0; // G
+      buf[dstIdx + 2] = pixels[srcIdx] ?? 0; // R
+    }
+  }
+
+  return buf;
+}
+
+/**
+ * Base64-encode a Uint8Array without relying on btoa or Buffer.
+ */
+function uint8ToBase64(bytes: Uint8Array): string {
+  const chars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  let result = "";
+  const len = bytes.length;
+
+  for (let i = 0; i < len; i += 3) {
+    const b0 = bytes[i] as number;
+    const b1 = i + 1 < len ? (bytes[i + 1] as number) : 0;
+    const b2 = i + 2 < len ? (bytes[i + 2] as number) : 0;
+
+    result += chars[b0 >> 2];
+    result += chars[((b0 & 3) << 4) | (b1 >> 4)];
+    result += i + 1 < len ? chars[((b1 & 15) << 2) | (b2 >> 6)] : "=";
+    result += i + 2 < len ? chars[b2 & 63] : "=";
+  }
+
+  return result;
+}

package/src/lib/constants.ts

@@ -12,6 +12,8 @@ export const RESERVED_PATHS = [
   "signin",
   "signout",
   "setup",
+  "settings",
+  "posts",
   "dash",
   "api",
   "feed",
@@ -20,8 +22,8 @@ export const RESERVED_PATHS = [
   "media",
   "pages",
   "reset",
-  "p",
   "c",
+  "compose",
   "static",
   "assets",
   "health",