@jant/core 0.3.8 → 0.3.9

package/dist/routes/dash/media.js

@@ -10,7 +10,7 @@ import { useLingui as $_useLingui } from "@jant/core/i18n";
 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";
 export const mediaRoutes = new Hono();
 /**
@@ -22,8 +22,9 @@ export const mediaRoutes = new Hono();
 }
 /**
  * Media card component for the grid
- */ function MediaCard({ media, r2PublicUrl, imageTransformUrl }) {
-    const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+ */ function MediaCard({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
+    const publicUrl = getPublicUrlForProvider(media.provider, r2PublicUrl, s3PublicUrl);
+    const fullUrl = getMediaUrl(media.id, media.storageKey, publicUrl);
     const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
         width: 300,
         quality: 80,
@@ -73,7 +74,7 @@ export const mediaRoutes = new Hono();
  * Media list page content
  *
  * Upload is handled by media-upload.ts (client module) + Datastar @post for SSE.
- */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl }) {
+ */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const processingText = $__i18n._({
         id: "k1ifdL",
@@ -161,7 +162,8 @@ export const mediaRoutes = new Hono();
                     children: mediaList.map((m)=>/*#__PURE__*/ _jsx(MediaCard, {
                             media: m,
                             r2PublicUrl: r2PublicUrl,
-                            imageTransformUrl: imageTransformUrl
+                            imageTransformUrl: imageTransformUrl,
+                            s3PublicUrl: s3PublicUrl
                         }, m.id))
                 })
             }),
@@ -181,9 +183,10 @@ export const mediaRoutes = new Hono();
 }
 /**
  * View single media content
- */ function ViewMediaContent({ media, r2PublicUrl, imageTransformUrl }) {
+ */ function ViewMediaContent({ media, r2PublicUrl, imageTransformUrl, s3PublicUrl }) {
     const { i18n: $__i18n, _: $__ } = $_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,
@@ -386,6 +389,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(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: "Media",
@@ -394,7 +398,8 @@ mediaRoutes.get("/", async (c)=>{
         children: /*#__PURE__*/ _jsx(MediaListContent, {
             mediaList: mediaList,
             r2PublicUrl: r2PublicUrl,
-            imageTransformUrl: imageTransformUrl
+            imageTransformUrl: imageTransformUrl,
+            s3PublicUrl: s3PublicUrl
         })
     }));
 });
@@ -404,6 +409,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(/*#__PURE__*/ _jsx("p", {
             class: "text-muted-foreground text-sm col-span-4",
@@ -412,7 +418,8 @@ mediaRoutes.get("/picker", async (c)=>{
     }
     return c.html(/*#__PURE__*/ _jsx(_Fragment, {
         children: 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,
@@ -444,6 +451,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(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: media.originalName,
@@ -452,7 +460,8 @@ mediaRoutes.get("/:id", async (c)=>{
         children: /*#__PURE__*/ _jsx(ViewMediaContent, {
             media: media,
             r2PublicUrl: r2PublicUrl,
-            imageTransformUrl: imageTransformUrl
+            imageTransformUrl: imageTransformUrl,
+            s3PublicUrl: s3PublicUrl
         })
     }));
 });
@@ -461,13 +470,14 @@ mediaRoutes.post("/:id/delete", async (c)=>{
     const id = c.req.param("id");
     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);
         }
     }
     // Delete from database

package/dist/routes/dash/posts.js

@@ -148,7 +148,7 @@ function ViewPostContent({ post }) {
         ]
     });
 }
-function EditPostContent({ post, mediaAttachments, r2PublicUrl, imageTransformUrl, collections, postCollectionIds }) {
+function EditPostContent({ post, mediaAttachments, r2PublicUrl, imageTransformUrl, s3PublicUrl, collections, postCollectionIds }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -165,6 +165,7 @@ function EditPostContent({ post, mediaAttachments, r2PublicUrl, imageTransformUr
                 mediaAttachments: mediaAttachments,
                 r2PublicUrl: r2PublicUrl,
                 imageTransformUrl: imageTransformUrl,
+                s3PublicUrl: s3PublicUrl,
                 collections: collections,
                 postCollectionIds: postCollectionIds
             })
@@ -199,6 +200,7 @@ postsRoutes.get("/:id/edit", async (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 s3PublicUrl = c.env.S3_PUBLIC_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);
@@ -212,6 +214,7 @@ postsRoutes.get("/:id/edit", async (c)=>{
             mediaAttachments: mediaAttachments,
             r2PublicUrl: r2PublicUrl,
             imageTransformUrl: imageTransformUrl,
+            s3PublicUrl: s3PublicUrl,
             collections: collections,
             postCollectionIds: postCollectionIds
         })

package/dist/routes/feed/rss.js

@@ -3,7 +3,7 @@
  */ import { Hono } from "hono";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { getMediaUrl } from "../../lib/image.js";
+import { getMediaUrl, getPublicUrlForProvider } from "../../lib/image.js";
 export const rssRoutes = new Hono();
 // RSS 2.0 Feed - main feed at /feed
 rssRoutes.get("/", async (c)=>{
@@ -12,6 +12,7 @@ rssRoutes.get("/", async (c)=>{
     const siteDescription = all["SITE_DESCRIPTION"] ?? "";
     const siteUrl = c.env.SITE_URL;
     const r2PublicUrl = c.env.R2_PUBLIC_URL;
+    const s3PublicUrl = c.env.S3_PUBLIC_URL;
     const posts = await c.var.services.posts.list({
         visibility: [
             "featured",
@@ -29,7 +30,7 @@ rssRoutes.get("/", async (c)=>{
         // 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}"/>` : "";
+        const enclosure = firstMedia ? `\n      <enclosure url="${getMediaUrl(firstMedia.id, firstMedia.storageKey, getPublicUrlForProvider(firstMedia.provider, r2PublicUrl, s3PublicUrl))}" length="${firstMedia.size}" type="${firstMedia.mimeType}"/>` : "";
         return `
     <item>
       <title><![CDATA[${escapeXml(title)}]]></title>

package/dist/routes/pages/home.js

@@ -47,7 +47,8 @@ homeRoutes.get("/", async (c)=>{
     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);
+    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);
@@ -60,7 +61,7 @@ homeRoutes.get("/", async (c)=>{
             previewReplyIds.push(reply.id);
         }
     }
-    const previewMediaMap = previewReplyIds.length > 0 ? buildMediaMap(await c.var.services.media.getByPostIds(previewReplyIds), r2PublicUrl, imageTransformUrl) : new Map();
+    const previewMediaMap = previewReplyIds.length > 0 ? buildMediaMap(await c.var.services.media.getByPostIds(previewReplyIds), r2PublicUrl, imageTransformUrl, s3PublicUrl) : new Map();
     // Assemble timeline items
     const items = displayPosts.map((post)=>{
         const postWithMedia = {

package/dist/routes/pages/post.js

@@ -7,7 +7,7 @@ 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 { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../lib/image.js";
 import { getNavigationData } from "../../lib/navigation.js";
 export const postRoutes = new Hono();
 function PostContent({ post, mediaAttachments }) {
@@ -71,10 +71,13 @@ postRoutes.get("/:id", async (c)=>{
     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 = rawMedia.map((m)=>({
+    const s3PublicUrl = c.env.S3_PUBLIC_URL;
+    const mediaAttachments = rawMedia.map((m)=>{
+        const publicUrl = getPublicUrlForProvider(m.provider, r2PublicUrl, s3PublicUrl);
+        return {
             id: m.id,
-            url: getMediaUrl(m.id, m.r2Key, r2PublicUrl),
-            previewUrl: getImageUrl(getMediaUrl(m.id, m.r2Key, r2PublicUrl), imageTransformUrl, {
+            url: getMediaUrl(m.id, m.storageKey, publicUrl),
+            previewUrl: getImageUrl(getMediaUrl(m.id, m.storageKey, publicUrl), imageTransformUrl, {
                 width: 400,
                 quality: 80,
                 format: "auto",
@@ -86,7 +89,8 @@ postRoutes.get("/:id", async (c)=>{
             height: m.height,
             position: m.position,
             mimeType: m.mimeType
-        }));
+        };
+    });
     const navData = await getNavigationData(c);
     const title = post.title || navData.siteName;
     return c.html(/*#__PURE__*/ _jsx(BaseLayout, {

package/dist/services/media.js

@@ -1,7 +1,7 @@
 /**
  * Media Service
  *
- * Handles media upload and management with R2 storage
+ * Handles media upload and management with pluggable storage backends.
  */ import { eq, desc, inArray, asc } from "drizzle-orm";
 import { uuidv7 } from "uuidv7";
 import { media } from "../db/schema.js";
@@ -15,7 +15,8 @@ export function createMediaService(db) {
             originalName: row.originalName,
             mimeType: row.mimeType,
             size: row.size,
-            r2Key: row.r2Key,
+            storageKey: row.storageKey,
+            provider: row.provider,
             width: row.width,
             height: row.height,
             alt: row.alt,
@@ -56,8 +57,8 @@ export function createMediaService(db) {
             }
             return result;
         },
-        async getByR2Key (r2Key) {
-            const result = await db.select().from(media).where(eq(media.r2Key, r2Key)).limit(1);
+        async getByStorageKey (storageKey) {
+            const result = await db.select().from(media).where(eq(media.storageKey, storageKey)).limit(1);
             return result[0] ? toMedia(result[0]) : null;
         },
         async list (limit = 100) {
@@ -74,7 +75,8 @@ export function createMediaService(db) {
                 originalName: data.originalName,
                 mimeType: data.mimeType,
                 size: data.size,
-                r2Key: data.r2Key,
+                storageKey: data.storageKey,
+                provider: data.provider ?? "r2",
                 width: data.width ?? null,
                 height: data.height ?? null,
                 alt: data.alt ?? null,

package/dist/theme/components/PostForm.js

@@ -2,8 +2,8 @@
  * Post Creation/Edit Form
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-export const PostForm = ({ post, action, mediaAttachments, r2PublicUrl, imageTransformUrl, collections, postCollectionIds })=>{
+import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../lib/image.js";
+export const PostForm = ({ post, action, mediaAttachments, r2PublicUrl, imageTransformUrl, s3PublicUrl, collections, postCollectionIds })=>{
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const isEdit = !!post;
     const existingMediaIds = (mediaAttachments ?? []).map((m)=>m.id);
@@ -150,7 +150,8 @@ export const PostForm = ({ post, action, mediaAttachments, r2PublicUrl, imageTra
                     mediaAttachments && mediaAttachments.length > 0 && /*#__PURE__*/ _jsx("div", {
                         class: "grid grid-cols-4 sm:grid-cols-6 gap-2 mb-2",
                         children: mediaAttachments.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,

package/dist/types.js

@@ -38,6 +38,10 @@ export const MAX_MEDIA_ATTACHMENTS = 20;
     ],
     page: null
 };
+export const STORAGE_DRIVERS = [
+    "r2",
+    "s3"
+];
 export const VISIBILITY_LEVELS = [
     "featured",
     "quiet",
@@ -94,5 +98,33 @@ export const VISIBILITY_LEVELS = [
     DEMO_PASSWORD: {
         defaultValue: "",
         envOnly: true
+    },
+    STORAGE_DRIVER: {
+        defaultValue: "r2",
+        envOnly: true
+    },
+    S3_ENDPOINT: {
+        defaultValue: "",
+        envOnly: true
+    },
+    S3_BUCKET: {
+        defaultValue: "",
+        envOnly: true
+    },
+    S3_ACCESS_KEY_ID: {
+        defaultValue: "",
+        envOnly: true
+    },
+    S3_SECRET_ACCESS_KEY: {
+        defaultValue: "",
+        envOnly: true
+    },
+    S3_REGION: {
+        defaultValue: "auto",
+        envOnly: true
+    },
+    S3_PUBLIC_URL: {
+        defaultValue: "",
+        envOnly: true
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "bin": {
@@ -31,6 +31,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.987.0",
     "@lingui/core": "^5.9.0",
     "basecoat-css": "^0.3.10",
     "better-auth": "^1.4.18",

package/src/__tests__/helpers/app.ts

@@ -58,6 +58,7 @@ export function createTestApp(options: TestAppOptions = {}) {
 
     c.set("services", services as AppVariables["services"]);
     c.set("config", {});
+    c.set("storage", null);
 
     if (options.authenticated) {
       // Mock auth that always returns a session

package/src/__tests__/helpers/db.ts

@@ -99,6 +99,16 @@ export function createTestDatabase(options?: { fts?: boolean }) {
     if (trimmed) sqlite.exec(trimmed);
   }
 
+  // Apply storage provider migration
+  const migration4 = readFileSync(
+    resolve(MIGRATIONS_DIR, "0004_add_storage_provider.sql"),
+    "utf-8",
+  );
+  for (const sql of migration4.split("--> statement-breakpoint")) {
+    const trimmed = sql.trim();
+    if (trimmed) sqlite.exec(trimmed);
+  }
+
   const db = drizzle(sqlite, { schema });
 
   return { db, sqlite };

package/src/app.tsx

@@ -49,6 +49,7 @@ import { requireOnboarding } from "./middleware/onboarding.js";
 import { BaseLayout } from "./theme/layouts/index.js";
 import { dsRedirect, dsToast } from "./lib/sse.js";
 import { getAvailableThemes, buildThemeStyle } from "./lib/theme.js";
+import { createStorageDriver, type StorageDriver } from "./lib/storage.js";
 
 // Extend Hono's context variables
 export interface AppVariables {
@@ -56,6 +57,7 @@ export interface AppVariables {
   auth: Auth;
   config: JantConfig;
   themeStyle: string;
+  storage: StorageDriver | null;
 }
 
 export type App = Hono<{ Bindings: Bindings; Variables: AppVariables }>;
@@ -95,6 +97,7 @@ export function createApp(config: JantConfig = {}): App {
     const services = createServices(db, session as unknown as D1Database);
     c.set("services", services);
     c.set("config", config);
+    c.set("storage", createStorageDriver(c.env));
 
     if (c.env.AUTH_SECRET) {
       const auth = createAuth(session as unknown as D1Database, {
@@ -668,9 +671,10 @@ export function createApp(config: JantConfig = {}): App {
   app.route("/api/upload", uploadApiRoutes);
   app.route("/api/search", searchApiRoutes);
 
-  // Media files from R2 (UUIDv7-based URLs with extension)
+  // Media files from storage (UUIDv7-based URLs with extension)
   app.get("/media/:idWithExt", async (c) => {
-    if (!c.env.R2) {
+    const storage = c.var.storage;
+    if (!storage) {
       return c.notFound();
     }
 
@@ -683,16 +687,13 @@ export function createApp(config: JantConfig = {}): App {
       return c.notFound();
     }
 
-    const object = await c.env.R2.get(media.r2Key);
+    const object = await storage.get(media.storageKey);
     if (!object) {
       return c.notFound();
     }
 
     const headers = new Headers();
-    headers.set(
-      "Content-Type",
-      object.httpMetadata?.contentType || media.mimeType,
-    );
+    headers.set("Content-Type", object.contentType || media.mimeType);
     headers.set("Cache-Control", "public, max-age=31536000, immutable");
 
     return new Response(object.body, { headers });

package/src/db/migrations/0004_add_storage_provider.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `media` ADD COLUMN `provider` text NOT NULL DEFAULT 'r2';
+--> statement-breakpoint
+ALTER TABLE `media` RENAME COLUMN `r2_key` TO `storage_key`;

package/src/db/migrations/meta/_journal.json

@@ -29,6 +29,13 @@
       "when": 1770746168873,
       "tag": "0003_add_navigation_links",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "6",
+      "when": 1770946168874,
+      "tag": "0004_add_storage_provider",
+      "breakpoints": true
     }
   ]
 }

package/src/db/schema.ts

@@ -51,7 +51,8 @@ export const media = sqliteTable("media", {
   originalName: text("original_name").notNull(),
   mimeType: text("mime_type").notNull(),
   size: integer("size").notNull(),
-  r2Key: text("r2_key").notNull(),
+  storageKey: text("storage_key").notNull(),
+  provider: text("provider").notNull().default("r2"),
   width: integer("width"),
   height: integer("height"),
   alt: text("alt"),