@jant/core 0.3.7 → 0.3.8

package/src/lib/media-helpers.ts

@@ -0,0 +1,54 @@
+/**
+ * Media Helper Utilities
+ *
+ * Shared logic for building MediaAttachment maps from raw media data.
+ */
+
+import type { Media, MediaAttachment } from "../types.js";
+import { getMediaUrl, getImageUrl } from "./image.js";
+
+/**
+ * Builds a map of post IDs to MediaAttachment arrays from raw media data.
+ *
+ * Transforms raw Media objects (with R2 keys) into MediaAttachment objects
+ * (with public URLs and preview URLs) suitable for rendering.
+ *
+ * @param rawMediaMap - Map of post IDs to raw Media arrays from the media service
+ * @param r2PublicUrl - Optional R2 public URL for direct CDN access
+ * @param imageTransformUrl - Optional image transformation service URL
+ * @returns Map of post IDs to MediaAttachment arrays
+ *
+ * @example
+ * ```ts
+ * const rawMediaMap = await services.media.getByPostIds(postIds);
+ * const mediaMap = buildMediaMap(rawMediaMap, c.env.R2_PUBLIC_URL, c.env.IMAGE_TRANSFORM_URL);
+ * ```
+ */
+export function buildMediaMap(
+  rawMediaMap: Map<number, Media[]>,
+  r2PublicUrl?: string,
+  imageTransformUrl?: string,
+): Map<number, MediaAttachment[]> {
+  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 mediaMap;
+}

package/src/lib/nav-reorder.ts

@@ -0,0 +1,26 @@
+/**
+ * Navigation Link Reorder
+ *
+ * Initializes SortableJS on the navigation links list in the dashboard.
+ * Auto-detects the list element and only activates when present.
+ */
+
+import Sortable from "sortablejs";
+
+const list = document.getElementById("nav-links-list");
+if (list) {
+  Sortable.create(list, {
+    animation: 150,
+    handle: "[data-id]",
+    onEnd() {
+      const ids = [...list.querySelectorAll<HTMLElement>("[data-id]")].map(
+        (el) => Number(el.dataset.id),
+      );
+      fetch("/dash/navigation/reorder", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids }),
+      });
+    },
+  });
+}

package/src/lib/navigation.ts

@@ -0,0 +1,46 @@
+/**
+ * Navigation Helper
+ *
+ * Provides shared data fetching for public page navigation.
+ */
+
+import type { Context } from "hono";
+import { getSiteName } from "./config.js";
+import type { NavigationLink } from "../types.js";
+
+/**
+ * Navigation data needed by SiteLayout
+ */
+export interface NavigationData {
+  navigationLinks: NavigationLink[];
+  currentPath: string;
+  siteName: string;
+}
+
+/**
+ * Fetch navigation data for public pages.
+ *
+ * Ensures default links exist (Home, Archive, RSS) and returns
+ * the current path and site name alongside the links.
+ *
+ * @param c - Hono context
+ * @returns Navigation data for SiteLayout
+ *
+ * @example
+ * ```typescript
+ * const navData = await getNavigationData(c);
+ * return c.html(
+ *   <BaseLayout c={c}>
+ *     <SiteLayout {...navData}>
+ *       <MyContent />
+ *     </SiteLayout>
+ *   </BaseLayout>
+ * );
+ * ```
+ */
+export async function getNavigationData(c: Context): Promise<NavigationData> {
+  const navigationLinks = await c.var.services.navigationLinks.ensureDefaults();
+  const currentPath = new URL(c.req.url).pathname;
+  const siteName = await getSiteName(c);
+  return { navigationLinks, currentPath, siteName };
+}

package/src/lib/theme-components.ts

@@ -0,0 +1,76 @@
+/**
+ * Theme Component Resolution
+ *
+ * Resolves theme-overridable components, falling back to defaults.
+ */
+
+import type { FC } from "hono/jsx";
+import type {
+  PostType,
+  ThemeComponents,
+  TimelineCardProps,
+  ThreadPreviewProps,
+  TimelineFeedProps,
+} from "../types.js";
+
+const THEME_KEY_MAP: Record<PostType, keyof ThemeComponents> = {
+  note: "NoteCard",
+  article: "ArticleCard",
+  link: "LinkCard",
+  quote: "QuoteCard",
+  image: "ImageCard",
+  page: "NoteCard",
+};
+
+/**
+ * Resolves the card component for a given post type.
+ *
+ * Checks theme overrides first, then falls back to the provided default card component.
+ *
+ * @param type - The post type to resolve a card for
+ * @param defaults - Map of post type to default card component
+ * @param themeComponents - Optional theme component overrides
+ * @returns The resolved card component
+ *
+ * @example
+ * ```ts
+ * const Card = resolveCardComponent("article", DEFAULT_CARD_MAP, c.var.config.theme?.components);
+ * ```
+ */
+export function resolveCardComponent(
+  type: PostType,
+  defaults: Record<PostType, FC<TimelineCardProps>>,
+  themeComponents?: ThemeComponents,
+): FC<TimelineCardProps> {
+  const key = THEME_KEY_MAP[type];
+  const override = themeComponents?.[key] as FC<TimelineCardProps> | undefined;
+  return override ?? defaults[type];
+}
+
+/**
+ * Resolves the ThreadPreview component.
+ *
+ * @param defaultComponent - The default ThreadPreview component
+ * @param themeComponents - Optional theme component overrides
+ * @returns The resolved ThreadPreview component
+ */
+export function resolveThreadPreview(
+  defaultComponent: FC<ThreadPreviewProps>,
+  themeComponents?: ThemeComponents,
+): FC<ThreadPreviewProps> {
+  return themeComponents?.ThreadPreview ?? defaultComponent;
+}
+
+/**
+ * Resolves the TimelineFeed component.
+ *
+ * @param defaultComponent - The default TimelineFeed component
+ * @param themeComponents - Optional theme component overrides
+ * @returns The resolved TimelineFeed component
+ */
+export function resolveTimelineFeed(
+  defaultComponent: FC<TimelineFeedProps>,
+  themeComponents?: ThemeComponents,
+): FC<TimelineFeedProps> {
+  return themeComponents?.TimelineFeed ?? defaultComponent;
+}

package/src/routes/api/__tests__/posts.test.ts

@@ -50,7 +50,7 @@ describe("Posts API Routes", () => {
         originalName: "test.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/test.jpg",
+        r2Key: "media/2025/01/test.jpg",
         width: 800,
         height: 600,
       });
@@ -145,7 +145,7 @@ describe("Posts API Routes", () => {
         originalName: "test.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/test.jpg",
+        r2Key: "media/2025/01/test.jpg",
       });
 
       await services.media.attachToPost(post.id, [media.id]);
@@ -223,14 +223,14 @@ describe("Posts API Routes", () => {
         originalName: "a.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/a.jpg",
+        r2Key: "media/2025/01/a.jpg",
       });
       const m2 = await services.media.create({
         filename: "b.jpg",
         originalName: "b.jpg",
         mimeType: "image/jpeg",
         size: 2048,
-        r2Key: "uploads/b.jpg",
+        r2Key: "media/2025/01/b.jpg",
       });
 
       const res = await app.request("/api/posts", {
@@ -282,7 +282,7 @@ describe("Posts API Routes", () => {
         originalName: "a.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/a.jpg",
+        r2Key: "media/2025/01/a.jpg",
       });
 
       const res = await app.request("/api/posts", {
@@ -404,7 +404,7 @@ describe("Posts API Routes", () => {
         originalName: "a.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/a.jpg",
+        r2Key: "media/2025/01/a.jpg",
       });
 
       await services.media.attachToPost(post.id, [m1.id]);
@@ -414,7 +414,7 @@ describe("Posts API Routes", () => {
         originalName: "b.jpg",
         mimeType: "image/jpeg",
         size: 2048,
-        r2Key: "uploads/b.jpg",
+        r2Key: "media/2025/01/b.jpg",
       });
 
       const res = await app.request(`/api/posts/${sqid.encode(post.id)}`, {
@@ -443,7 +443,7 @@ describe("Posts API Routes", () => {
         originalName: "a.jpg",
         mimeType: "image/jpeg",
         size: 1024,
-        r2Key: "uploads/a.jpg",
+        r2Key: "media/2025/01/a.jpg",
       });
 
       await services.media.attachToPost(post.id, [m1.id]);

package/src/routes/api/__tests__/timeline.test.ts

@@ -0,0 +1,242 @@
+/**
+ * Timeline API Tests
+ *
+ * Tests the timeline data assembly logic via the service layer.
+ * The actual route handler renders JSX components which require the Lingui SWC
+ * plugin (not available in vitest). We test the underlying service operations
+ * that power the timeline API instead.
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../../__tests__/helpers/db.js";
+import { createPostService } from "../../../services/post.js";
+import { createMediaService } from "../../../services/media.js";
+import { buildMediaMap } from "../../../lib/media-helpers.js";
+import type { Database } from "../../../db/index.js";
+import type { PostWithMedia, TimelineItemData } from "../../../types.js";
+
+describe("Timeline data assembly", () => {
+  let db: Database;
+  let postService: ReturnType<typeof createPostService>;
+  let mediaService: ReturnType<typeof createMediaService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    postService = createPostService(db);
+    mediaService = createMediaService(db);
+  });
+
+  it("assembles timeline items with media attachments", async () => {
+    const post = await postService.create({
+      type: "note",
+      content: "Hello",
+      visibility: "featured",
+    });
+
+    const posts = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 21,
+    });
+
+    expect(posts).toHaveLength(1);
+    expect(posts[0]?.id).toBe(post.id);
+
+    // Build media map
+    const postIds = posts.map((p) => p.id);
+    const rawMediaMap = await mediaService.getByPostIds(postIds);
+    const mediaMap = buildMediaMap(rawMediaMap);
+
+    // Assemble items
+    const items: TimelineItemData[] = posts.map((p) => ({
+      post: { ...p, mediaAttachments: mediaMap.get(p.id) ?? [] },
+    }));
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.post.mediaAttachments).toEqual([]);
+  });
+
+  it("identifies thread roots and builds thread previews", async () => {
+    const root = await postService.create({
+      type: "note",
+      content: "Thread root",
+      visibility: "featured",
+    });
+    await postService.create({
+      type: "note",
+      content: "Reply 1",
+      replyToId: root.id,
+    });
+    await postService.create({
+      type: "note",
+      content: "Reply 2",
+      replyToId: root.id,
+    });
+
+    const posts = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 21,
+    });
+
+    expect(posts).toHaveLength(1);
+
+    const postIds = posts.map((p) => p.id);
+    const replyCounts = await postService.getReplyCounts(postIds);
+    const threadRootIds = postIds.filter(
+      (id) => (replyCounts.get(id) ?? 0) > 0,
+    );
+
+    expect(threadRootIds).toEqual([root.id]);
+    expect(replyCounts.get(root.id)).toBe(2);
+
+    const threadPreviews = await postService.getThreadPreviews(threadRootIds);
+    const replies = threadPreviews.get(root.id);
+    expect(replies).toHaveLength(2);
+    expect(replies?.[0]?.content).toBe("Reply 1");
+
+    // Assemble items
+    const rawMediaMap = await mediaService.getByPostIds(postIds);
+    const mediaMap = buildMediaMap(rawMediaMap);
+
+    const items: TimelineItemData[] = posts.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: [],
+            })),
+            totalReplyCount: replyCount,
+          },
+        };
+      }
+
+      return { post: postWithMedia };
+    });
+
+    expect(items).toHaveLength(1);
+    expect(items[0]?.threadPreview).toBeDefined();
+    expect(items[0]?.threadPreview?.replies).toHaveLength(2);
+    expect(items[0]?.threadPreview?.totalReplyCount).toBe(2);
+  });
+
+  it("excludes pages from timeline", async () => {
+    await postService.create({
+      type: "note",
+      content: "A note",
+      visibility: "quiet",
+    });
+    await postService.create({
+      type: "page",
+      content: "A page",
+      visibility: "quiet",
+    });
+
+    const posts = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 21,
+    });
+
+    expect(posts).toHaveLength(1);
+    expect(posts[0]?.type).toBe("note");
+  });
+
+  it("excludes replies from top-level list", async () => {
+    const root = await postService.create({
+      type: "note",
+      content: "Root",
+      visibility: "quiet",
+    });
+    await postService.create({
+      type: "note",
+      content: "Reply",
+      replyToId: root.id,
+    });
+
+    const posts = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 21,
+    });
+
+    expect(posts).toHaveLength(1);
+    expect(posts[0]?.content).toBe("Root");
+  });
+
+  it("supports cursor pagination for load more", async () => {
+    const posts = [];
+    for (let i = 0; i < 5; i++) {
+      posts.push(
+        await postService.create({
+          type: "note",
+          content: `Post ${i}`,
+          visibility: "quiet",
+          publishedAt: 1000 + i,
+        }),
+      );
+    }
+
+    // First page
+    const page1 = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 3,
+    });
+    expect(page1).toHaveLength(3);
+
+    // Second page using cursor
+    const lastPost = page1[page1.length - 1];
+    expect(lastPost).toBeDefined();
+    const page2 = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: 3,
+      cursor: lastPost?.id,
+    });
+    expect(page2).toHaveLength(2);
+    expect(page2.every((p) => p.id < (lastPost?.id ?? 0))).toBe(true);
+  });
+
+  it("correctly determines hasMore flag", async () => {
+    for (let i = 0; i < 3; i++) {
+      await postService.create({
+        type: "note",
+        content: `Post ${i}`,
+        visibility: "quiet",
+      });
+    }
+
+    // Request limit + 1 to check for more
+    const pageSize = 2;
+    const posts = await postService.list({
+      visibility: ["featured", "quiet"],
+      excludeReplies: true,
+      excludeTypes: ["page"],
+      limit: pageSize + 1,
+    });
+
+    const hasMore = posts.length > pageSize;
+    expect(hasMore).toBe(true);
+
+    const displayPosts = posts.slice(0, pageSize);
+    expect(displayPosts).toHaveLength(2);
+  });
+});

package/src/routes/api/timeline.tsx

@@ -0,0 +1,145 @@
+/**
+ * Timeline API Routes
+ *
+ * Provides load-more functionality for the timeline feed via SSE.
+ */
+
+import { Hono } from "hono";
+import type { Bindings, PostWithMedia, TimelineItemData } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { sse } from "../../lib/sse.js";
+import { buildMediaMap } from "../../lib/media-helpers.js";
+import { TimelineItem } from "../../theme/components/timeline/TimelineItem.js";
+import { ThreadPreview } from "../../theme/components/timeline/ThreadPreview.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+const PAGE_SIZE = 20;
+
+export const timelineApiRoutes = new Hono<Env>();
+
+timelineApiRoutes.get("/", async (c) => {
+  const cursorParam = c.req.query("cursor");
+  const cursor = cursorParam ? parseInt(cursorParam, 10) : undefined;
+
+  if (!cursor || isNaN(cursor)) {
+    return c.json({ error: "cursor parameter required" }, 400);
+  }
+
+  // Fetch one extra to determine if there are more
+  const posts = await c.var.services.posts.list({
+    visibility: ["featured", "quiet"],
+    excludeReplies: true,
+    excludeTypes: ["page"],
+    limit: PAGE_SIZE + 1,
+    cursor,
+  });
+
+  const hasMore = posts.length > PAGE_SIZE;
+  const displayPosts = hasMore ? posts.slice(0, PAGE_SIZE) : posts;
+
+  if (displayPosts.length === 0) {
+    return sse(c, async (stream) => {
+      stream.remove("#load-more-container");
+    });
+  }
+
+  // Build media map
+  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);
+
+  // Get thread previews
+  const threadPreviews = await c.var.services.posts.getThreadPreviews(
+    threadRootIds,
+    3,
+  );
+
+  // 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 };
+  });
+
+  // Render items to HTML
+  const itemsHtml = items
+    .map((item) => {
+      if (item.threadPreview) {
+        return (
+          <ThreadPreview
+            rootPost={item.post}
+            previewReplies={item.threadPreview.replies}
+            totalReplyCount={item.threadPreview.totalReplyCount}
+          />
+        );
+      }
+      return <TimelineItem item={item} />;
+    })
+    .map((jsx) => jsx.toString())
+    .join("");
+
+  // Determine next cursor
+  const lastPost = displayPosts[displayPosts.length - 1];
+  const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
+
+  // Build load-more button HTML
+  const loadMoreHtml = nextCursor
+    ? `<div id="load-more-container" class="mt-6 text-center"><button class="btn btn-outline" data-on:click="@get('/api/timeline?cursor=${nextCursor}')">Load more</button></div>`
+    : "";
+
+  return sse(c, async (stream) => {
+    // Append new items to the feed
+    stream.patchElements(itemsHtml, {
+      mode: "append",
+      selector: "#timeline-feed",
+    });
+    // Replace or remove the load-more container
+    if (loadMoreHtml) {
+      stream.patchElements(loadMoreHtml);
+    } else {
+      stream.remove("#load-more-container");
+    }
+  });
+});

package/src/routes/api/upload.ts

@@ -7,6 +7,7 @@
 
 import { Hono } from "hono";
 import { html } from "hono/html";
+import { uuidv7 } from "uuidv7";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { requireAuthApi } from "../../middleware/auth.js";
@@ -156,12 +157,14 @@ uploadApiRoutes.post("/", async (c) => {
     return c.json({ error: "File too large (max 10MB)" }, 400);
   }
 
-  // Generate unique filename
+  // Generate unique filename using UUIDv7
   const ext = file.name.split(".").pop() || "bin";
-  const timestamp = Date.now();
-  const random = Math.random().toString(36).substring(2, 8);
-  const filename = `${timestamp}-${random}.${ext}`;
-  const r2Key = `uploads/${filename}`;
+  const id = uuidv7();
+  const date = new Date();
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const filename = `${id}.${ext}`;
+  const r2Key = `media/${year}/${month}/${filename}`;
 
   try {
     // Upload to R2
@@ -173,6 +176,7 @@ uploadApiRoutes.post("/", async (c) => {
 
     // Save to database
     const media = await c.var.services.media.create({
+      id,
       filename,
       originalName: file.name,
       mimeType: file.type,