@jant/core 0.3.7 → 0.3.9

package/src/routes/api/posts.ts

@@ -12,7 +12,11 @@ import {
   validateMediaForPostType,
 } from "../../lib/schemas.js";
 import { requireAuthApi } from "../../middleware/auth.js";
-import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../lib/image.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -25,8 +29,14 @@ function toMediaAttachment(
   m: Media,
   r2PublicUrl?: string,
   imageTransformUrl?: string,
+  s3PublicUrl?: string,
 ) {
-  const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+  const publicUrl = getPublicUrlForProvider(
+    m.provider,
+    r2PublicUrl,
+    s3PublicUrl,
+  );
+  const url = getMediaUrl(m.id, m.storageKey, publicUrl);
   const previewUrl = getImageUrl(url, imageTransformUrl, {
     width: 400,
     quality: 80,
@@ -66,13 +76,14 @@ postsApiRoutes.get("/", async (c) => {
   const mediaMap = await c.var.services.media.getByPostIds(postIds);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_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),
+        toMediaAttachment(m, r2PublicUrl, imageTransformUrl, s3PublicUrl),
       ),
     })),
 
@@ -94,12 +105,13 @@ postsApiRoutes.get("/:id", async (c) => {
   const mediaList = await c.var.services.media.getByPostId(post.id);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.json({
     ...post,
     sqid: sqid.encode(post.id),
     mediaAttachments: mediaList.map((m) =>
-      toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+      toMediaAttachment(m, r2PublicUrl, imageTransformUrl, s3PublicUrl),
     ),
   });
 });
@@ -157,13 +169,14 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
   const mediaList = await c.var.services.media.getByPostId(post.id);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.json(
     {
       ...post,
       sqid: sqid.encode(post.id),
       mediaAttachments: mediaList.map((m) =>
-        toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+        toMediaAttachment(m, r2PublicUrl, imageTransformUrl, s3PublicUrl),
       ),
     },
     201,
@@ -233,12 +246,13 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
   const mediaList = await c.var.services.media.getByPostId(post.id);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.json({
     ...post,
     sqid: sqid.encode(post.id),
     mediaAttachments: mediaList.map((m) =>
-      toMediaAttachment(m, r2PublicUrl, imageTransformUrl),
+      toMediaAttachment(m, r2PublicUrl, imageTransformUrl, s3PublicUrl),
     ),
   });
 });

package/src/routes/api/timeline.tsx

@@ -0,0 +1,152 @@
+/**
+ * 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 s3PublicUrl = c.env.S3_PUBLIC_URL;
+  const mediaMap = buildMediaMap(
+    rawMediaMap,
+    r2PublicUrl,
+    imageTransformUrl,
+    s3PublicUrl,
+  );
+
+  // 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,
+          s3PublicUrl,
+        )
+      : 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,10 +7,15 @@
 
 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";
-import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../lib/image.js";
 import { sse, dsSignals } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -26,16 +31,16 @@ uploadApiRoutes.use("*", requireAuthApi());
 function renderMediaCard(
   media: {
     id: string;
-    r2Key: string;
+    storageKey: string;
     mimeType: string;
     originalName: string;
     alt: string | null;
     size: number;
   },
-  r2PublicUrl?: string,
+  publicUrl?: string,
   imageTransformUrl?: string,
 ): string {
-  const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+  const fullUrl = getMediaUrl(media.id, media.storageKey, publicUrl);
   const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
     width: 300,
     quality: 80,
@@ -115,11 +120,12 @@ function wantsSSE(c: {
 
 // Upload a file
 uploadApiRoutes.post("/", async (c) => {
-  if (!c.env.R2) {
+  const storage = c.var.storage;
+  if (!storage) {
     if (wantsSSE(c)) {
-      return dsSignals({ _uploadError: "R2 storage not configured" });
+      return dsSignals({ _uploadError: "Storage not configured" });
     }
-    return c.json({ error: "R2 storage not configured" }, 500);
+    return c.json({ error: "Storage not configured" }, 500);
   }
 
   const formData = await c.req.formData();
@@ -156,35 +162,43 @@ 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 storageKey = `media/${year}/${month}/${filename}`;
 
   try {
-    // Upload to R2
-    await c.env.R2.put(r2Key, file.stream(), {
-      httpMetadata: {
-        contentType: file.type,
-      },
+    // Upload to storage
+    await storage.put(storageKey, file.stream(), {
+      contentType: file.type,
     });
 
     // Save to database
     const media = await c.var.services.media.create({
+      id,
       filename,
       originalName: file.name,
       mimeType: file.type,
       size: file.size,
-      r2Key,
+      storageKey,
+      provider: c.env.STORAGE_DRIVER || "r2",
     });
 
     // SSE response for Datastar
     if (wantsSSE(c)) {
+      const provider = c.env.STORAGE_DRIVER || "r2";
+      const mediaPublicUrl = getPublicUrlForProvider(
+        provider,
+        c.env.R2_PUBLIC_URL,
+        c.env.S3_PUBLIC_URL,
+      );
       const cardHtml = renderMediaCard(
         media,
-        c.env.R2_PUBLIC_URL,
+        mediaPublicUrl,
         c.env.IMAGE_TRANSFORM_URL,
       );
 
@@ -199,7 +213,13 @@ uploadApiRoutes.post("/", async (c) => {
     }
 
     // JSON response for API clients
-    const publicUrl = getMediaUrl(media.id, r2Key, c.env.R2_PUBLIC_URL);
+    const provider = c.env.STORAGE_DRIVER || "r2";
+    const mediaPublicUrl = getPublicUrlForProvider(
+      provider,
+      c.env.R2_PUBLIC_URL,
+      c.env.S3_PUBLIC_URL,
+    );
+    const publicUrl = getMediaUrl(media.id, storageKey, mediaPublicUrl);
     return c.json({
       id: media.id,
       filename: media.filename,
@@ -225,12 +245,18 @@ uploadApiRoutes.post("/", async (c) => {
 uploadApiRoutes.get("/", async (c) => {
   const limit = parseInt(c.req.query("limit") ?? "50", 10);
   const mediaList = await c.var.services.media.list(limit);
+  const r2PublicUrl = c.env.R2_PUBLIC_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.json({
     media: mediaList.map((m) => ({
       id: m.id,
       filename: m.filename,
-      url: getMediaUrl(m.id, m.r2Key, c.env.R2_PUBLIC_URL),
+      url: getMediaUrl(
+        m.id,
+        m.storageKey,
+        getPublicUrlForProvider(m.provider, r2PublicUrl, s3PublicUrl),
+      ),
       mimeType: m.mimeType,
       size: m.size,
       createdAt: m.createdAt,
@@ -246,13 +272,14 @@ uploadApiRoutes.delete("/:id", async (c) => {
     return c.json({ error: "Not found" }, 404);
   }
 
-  // Delete from R2
-  if (c.env.R2) {
+  // Delete from storage
+  const storage = c.var.storage;
+  if (storage) {
     try {
-      await c.env.R2.delete(media.r2Key);
+      await storage.delete(media.storageKey);
     } catch (err) {
       // eslint-disable-next-line no-console -- Error logging is intentional
-      console.error("R2 delete error:", err);
+      console.error("Storage delete error:", err);
     }
   }
 

package/src/routes/dash/media.tsx

@@ -13,7 +13,11 @@ import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
-import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../lib/image.js";
 import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -36,12 +40,19 @@ function MediaCard({
   media,
   r2PublicUrl,
   imageTransformUrl,
+  s3PublicUrl,
 }: {
   media: Media;
   r2PublicUrl?: string;
   imageTransformUrl?: string;
+  s3PublicUrl?: string;
 }) {
-  const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+  const publicUrl = getPublicUrlForProvider(
+    media.provider,
+    r2PublicUrl,
+    s3PublicUrl,
+  );
+  const fullUrl = getMediaUrl(media.id, media.storageKey, publicUrl);
   const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
     width: 300,
     quality: 80,
@@ -96,10 +107,12 @@ function MediaListContent({
   mediaList,
   r2PublicUrl,
   imageTransformUrl,
+  s3PublicUrl,
 }: {
   mediaList: Media[];
   r2PublicUrl?: string;
   imageTransformUrl?: string;
+  s3PublicUrl?: string;
 }) {
   const { t } = useLingui();
 
@@ -187,6 +200,7 @@ function MediaListContent({
                 media={m}
                 r2PublicUrl={r2PublicUrl}
                 imageTransformUrl={imageTransformUrl}
+                s3PublicUrl={s3PublicUrl}
               />
             ))}
           </div>
@@ -217,13 +231,20 @@ function ViewMediaContent({
   media,
   r2PublicUrl,
   imageTransformUrl,
+  s3PublicUrl,
 }: {
   media: Media;
   r2PublicUrl?: string;
   imageTransformUrl?: string;
+  s3PublicUrl?: string;
 }) {
   const { t } = useLingui();
-  const url = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+  const publicUrl = getPublicUrlForProvider(
+    media.provider,
+    r2PublicUrl,
+    s3PublicUrl,
+  );
+  const url = getMediaUrl(media.id, media.storageKey, publicUrl);
   const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
     width: 600,
     quality: 85,
@@ -401,6 +422,7 @@ mediaRoutes.get("/", async (c) => {
   const siteName = await getSiteName(c);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.html(
     <DashLayout
@@ -413,6 +435,7 @@ mediaRoutes.get("/", async (c) => {
         mediaList={mediaList}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
+        s3PublicUrl={s3PublicUrl}
       />
     </DashLayout>,
   );
@@ -424,6 +447,7 @@ 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;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   if (mediaList.length === 0) {
     return c.html(
@@ -438,7 +462,12 @@ mediaRoutes.get("/picker", async (c) => {
       {mediaList
         .filter((m) => m.mimeType.startsWith("image/"))
         .map((m) => {
-          const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+          const pUrl = getPublicUrlForProvider(
+            m.provider,
+            r2PublicUrl,
+            s3PublicUrl,
+          );
+          const url = getMediaUrl(m.id, m.storageKey, pUrl);
           const thumbUrl = getImageUrl(url, imageTransformUrl, {
             width: 150,
             quality: 80,
@@ -477,6 +506,7 @@ mediaRoutes.get("/:id", async (c) => {
   const siteName = await getSiteName(c);
   const r2PublicUrl = c.env.R2_PUBLIC_URL;
   const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+  const s3PublicUrl = c.env.S3_PUBLIC_URL;
 
   return c.html(
     <DashLayout
@@ -489,6 +519,7 @@ mediaRoutes.get("/:id", async (c) => {
         media={media}
         r2PublicUrl={r2PublicUrl}
         imageTransformUrl={imageTransformUrl}
+        s3PublicUrl={s3PublicUrl}
       />
     </DashLayout>,
   );
@@ -500,13 +531,14 @@ mediaRoutes.post("/:id/delete", async (c) => {
   const media = await c.var.services.media.getById(id);
   if (!media) return c.notFound();
 
-  // Delete from R2
-  if (c.env.R2) {
+  // Delete from storage
+  const storage = c.var.storage;
+  if (storage) {
     try {
-      await c.env.R2.delete(media.r2Key);
+      await storage.delete(media.storageKey);
     } catch (err) {
       // eslint-disable-next-line no-console -- Error logging is intentional
-      console.error("R2 delete error:", err);
+      console.error("Storage delete error:", err);
     }
   }