@jant/core 0.1.2 → 0.2.0

package/dist/routes/dash/media.js

@@ -0,0 +1,589 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+/**
+ * Dashboard Media Routes
+ *
+ * Media management with Datastar-powered uploads.
+ * Uses SSE for real-time UI updates without page reloads.
+ */ import { Hono } from "hono";
+import { useLingui } from "../../i18n/index.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 { getAssets } from "../../lib/assets.js";
+export const mediaRoutes = new Hono();
+/**
+ * Format file size for display
+ */ function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Media card component for the grid
+ */ function MediaCard({ media, r2PublicUrl, imageTransformUrl }) {
+    const fullUrl = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+    const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
+        width: 300,
+        quality: 80,
+        format: "auto",
+        fit: "cover"
+    });
+    const isImage = media.mimeType.startsWith("image/");
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "group relative",
+        "data-media-id": media.id,
+        children: [
+            isImage ? /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                class: "block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer",
+                onclick: `document.getElementById('lightbox-img').src = '${fullUrl}'; document.getElementById('lightbox').showModal()`,
+                children: /*#__PURE__*/ _jsx("img", {
+                    src: thumbnailUrl,
+                    alt: media.alt || media.originalName,
+                    class: "w-full h-full object-cover",
+                    loading: "lazy"
+                })
+            }) : /*#__PURE__*/ _jsx("a", {
+                href: `/dash/media/${media.id}`,
+                class: "block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary",
+                children: /*#__PURE__*/ _jsx("div", {
+                    class: "w-full h-full flex items-center justify-center text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx("span", {
+                        class: "text-xs",
+                        children: media.mimeType
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                href: `/dash/media/${media.id}`,
+                class: "block mt-2 text-xs truncate hover:underline",
+                title: media.originalName,
+                children: media.originalName
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                class: "text-xs text-muted-foreground",
+                children: formatSize(media.size)
+            })
+        ]
+    });
+}
+/**
+ * Media list page content
+ *
+ * Uses plain JavaScript for upload state management (more reliable than Datastar signals
+ * for complex async flows like file uploads with SSE responses).
+ */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl, imageProcessorUrl }) {
+    const { t } = useLingui();
+    const processingText = t({
+        message: "Processing...",
+        comment: "@context: Upload status - processing"
+    });
+    const uploadingText = t({
+        message: "Uploading...",
+        comment: "@context: Upload status - uploading"
+    });
+    const uploadText = t({
+        message: "Upload",
+        comment: "@context: Button to upload media file"
+    });
+    const errorText = t({
+        message: "Upload failed. Please try again.",
+        comment: "@context: Upload error message"
+    });
+    // Plain JavaScript upload handler - shows progress in the list
+    const uploadScript = `
+async function handleMediaUpload(input) {
+  if (!input.files || !input.files[0]) return;
+
+  const file = input.files[0];
+  const errorBox = document.getElementById('upload-error');
+  errorBox.classList.add('hidden');
+
+  // Ensure grid exists (remove empty state if needed)
+  let grid = document.getElementById('media-grid');
+  if (!grid) {
+    document.getElementById('empty-state')?.remove();
+    grid = document.createElement('div');
+    grid.id = 'media-grid';
+    grid.className = 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4';
+    document.getElementById('media-content').appendChild(grid);
+  }
+
+  // Create placeholder card showing progress
+  const placeholder = document.createElement('div');
+  placeholder.id = 'upload-placeholder';
+  placeholder.className = 'group relative';
+  placeholder.innerHTML = \`
+    <div class="aspect-square bg-muted rounded-lg overflow-hidden border flex items-center justify-center">
+      <div class="text-center px-2">
+        <svg class="animate-spin h-6 w-6 text-muted-foreground mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span id="upload-status" class="text-xs text-muted-foreground">${processingText}</span>
+      </div>
+    </div>
+    <div class="mt-2 text-xs truncate" title="\${file.name}">\${file.name}</div>
+    <div class="text-xs text-muted-foreground">\${formatFileSize(file.size)}</div>
+  \`;
+  grid.prepend(placeholder);
+
+  try {
+    if (typeof ImageProcessor === 'undefined') {
+      throw new Error('ImageProcessor not loaded');
+    }
+
+    // Process image client-side
+    const processed = await ImageProcessor.processToFile(file);
+    document.getElementById('upload-status').textContent = '${uploadingText}';
+
+    // Upload with SSE response
+    const fd = new FormData();
+    fd.append('file', processed);
+
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: fd,
+      headers: { 'Accept': 'text/event-stream' }
+    });
+
+    if (!response.ok) throw new Error('Upload failed: ' + response.status);
+
+    // Parse SSE stream - will replace placeholder with real card
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const events = buffer.split('\\n\\n');
+      buffer = events.pop() || '';
+
+      for (const event of events) {
+        if (!event.trim()) continue;
+        processSSEEvent(event);
+      }
+    }
+
+  } catch (err) {
+    console.error('Upload error:', err);
+    // Show error in placeholder
+    placeholder.innerHTML = \`
+      <div class="aspect-square bg-destructive/10 rounded-lg overflow-hidden border border-destructive flex items-center justify-center">
+        <div class="text-center px-2">
+          <span class="text-xs text-destructive">\${err.message || '${errorText}'}</span>
+        </div>
+      </div>
+      <div class="mt-2 text-xs truncate text-destructive">\${file.name}</div>
+      <button type="button" class="text-xs text-muted-foreground hover:underline" onclick="this.closest('.group').remove()">Remove</button>
+    \`;
+  }
+
+  input.value = '';
+}
+
+function formatFileSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+function processSSEEvent(event) {
+  const lines = event.split('\\n');
+  let eventType = '';
+  const data = {};
+  let elementsLines = [];
+  let inElements = false;
+
+  for (const line of lines) {
+    if (line.startsWith('event: ')) {
+      eventType = line.slice(7);
+    } else if (line.startsWith('data: ')) {
+      const content = line.slice(6);
+      if (content.startsWith('mode ')) {
+        data.mode = content.slice(5);
+        inElements = false;
+      } else if (content.startsWith('selector ')) {
+        data.selector = content.slice(9);
+        inElements = false;
+      } else if (content.startsWith('elements ')) {
+        elementsLines = [content.slice(9)];
+        inElements = true;
+      } else if (inElements) {
+        // Continuation of elements content
+        elementsLines.push(content);
+      }
+    }
+  }
+
+  if (elementsLines.length > 0) {
+    data.elements = elementsLines.join('\\n');
+  }
+
+  if (eventType === 'datastar-patch-elements') {
+    if (data.mode === 'remove' && data.selector) {
+      document.querySelector(data.selector)?.remove();
+    } else if (data.mode === 'outer' && data.selector && data.elements) {
+      // Replace element entirely (used for placeholder -> real card)
+      const target = document.querySelector(data.selector);
+      if (target) {
+        const temp = document.createElement('div');
+        temp.innerHTML = data.elements;
+        const newElement = temp.firstElementChild;
+        if (newElement) {
+          target.replaceWith(newElement);
+          if (window.Datastar) Datastar.apply(newElement);
+        }
+      }
+    }
+  }
+}
+`.trim();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("script", {
+                src: imageProcessorUrl
+            }),
+            /*#__PURE__*/ _jsx("script", {
+                dangerouslySetInnerHTML: {
+                    __html: uploadScript
+                }
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex items-center justify-between mb-6",
+                children: [
+                    /*#__PURE__*/ _jsx("h1", {
+                        class: "text-2xl font-semibold",
+                        children: t({
+                            message: "Media",
+                            comment: "@context: Media main heading"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
+                        class: "btn cursor-pointer",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: uploadText
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "file",
+                                class: "hidden",
+                                accept: "image/*",
+                                onchange: "handleMediaUpload(this)"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                id: "upload-error",
+                class: "hidden"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                class: "card mb-6",
+                children: /*#__PURE__*/ _jsx("section", {
+                    class: "text-sm text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx("p", {
+                        children: t({
+                            message: "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
+                            comment: "@context: Media upload instructions - auto optimization"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                id: "media-content",
+                children: mediaList.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                    id: "empty-state",
+                    children: /*#__PURE__*/ _jsx(EmptyState, {
+                        message: t({
+                            message: "No media uploaded yet.",
+                            comment: "@context: Empty state message when no media exists"
+                        })
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    id: "media-grid",
+                    class: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4",
+                    children: mediaList.map((m)=>/*#__PURE__*/ _jsx(MediaCard, {
+                            media: m,
+                            r2PublicUrl: r2PublicUrl,
+                            imageTransformUrl: imageTransformUrl
+                        }, m.id))
+                })
+            }),
+            /*#__PURE__*/ _jsx("dialog", {
+                id: "lightbox",
+                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
+                onclick: "event.target === this && this.close()",
+                children: /*#__PURE__*/ _jsx("img", {
+                    id: "lightbox-img",
+                    src: "",
+                    alt: "",
+                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                })
+            })
+        ]
+    });
+}
+/**
+ * View single media content
+ */ function ViewMediaContent({ media, r2PublicUrl, imageTransformUrl }) {
+    const { t } = useLingui();
+    const url = getMediaUrl(media.id, media.r2Key, r2PublicUrl);
+    const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
+        width: 600,
+        quality: 85,
+        format: "auto"
+    });
+    const isImage = media.mimeType.startsWith("image/");
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex items-center justify-between mb-6",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                class: "text-2xl font-semibold",
+                                children: media.originalName
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                class: "text-muted-foreground mt-1",
+                                children: [
+                                    formatSize(media.size),
+                                    " · ",
+                                    media.mimeType,
+                                    " · ",
+                                    time.formatDate(media.createdAt)
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("a", {
+                        href: "/dash/media",
+                        class: "btn-outline",
+                        children: t({
+                            message: "Back",
+                            comment: "@context: Button to go back to media list"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                class: "grid gap-6 md:grid-cols-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "card",
+                        children: [
+                            /*#__PURE__*/ _jsx("header", {
+                                children: /*#__PURE__*/ _jsx("h2", {
+                                    children: t({
+                                        message: "Preview",
+                                        comment: "@context: Media detail section - preview"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("section", {
+                                children: isImage ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            class: "cursor-pointer",
+                                            onclick: `document.getElementById('lightbox-img').src = '${url}'; document.getElementById('lightbox').showModal()`,
+                                            children: /*#__PURE__*/ _jsx("img", {
+                                                src: thumbnailUrl,
+                                                alt: media.alt || media.originalName,
+                                                class: "max-w-full rounded-lg hover:opacity-90 transition-opacity"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            class: "text-xs text-muted-foreground mt-2",
+                                            children: t({
+                                                message: "Click image to view full size",
+                                                comment: "@context: Hint to click image for lightbox"
+                                            })
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ _jsx("div", {
+                                    class: "aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        children: media.mimeType
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "space-y-6",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: t({
+                                                message: "URL",
+                                                comment: "@context: Media detail section - URL"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("section", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                class: "flex items-center gap-2",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "text",
+                                                        class: "input flex-1 font-mono text-sm",
+                                                        value: url,
+                                                        readonly: true
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        class: "btn-outline",
+                                                        onclick: `navigator.clipboard.writeText('${url}')`,
+                                                        children: t({
+                                                            message: "Copy",
+                                                            comment: "@context: Button to copy URL to clipboard"
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                class: "text-xs text-muted-foreground mt-2",
+                                                children: t({
+                                                    message: "Use this URL to embed the media in your posts.",
+                                                    comment: "@context: Media URL helper text"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: t({
+                                                message: "Markdown",
+                                                comment: "@context: Media detail section - Markdown snippet"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("section", {
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            class: "flex items-center gap-2",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "text",
+                                                    class: "input flex-1 font-mono text-sm",
+                                                    value: `![${media.alt || media.originalName}](${url})`,
+                                                    readonly: true
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    class: "btn-outline",
+                                                    onclick: `navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`,
+                                                    children: t({
+                                                        message: "Copy",
+                                                        comment: "@context: Button to copy Markdown to clipboard"
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DangerZone, {
+                                actionLabel: t({
+                                    message: "Delete Media",
+                                    comment: "@context: Button to delete media"
+                                }),
+                                formAction: `/dash/media/${media.id}/delete`,
+                                confirmMessage: "Are you sure you want to delete this media?",
+                                description: t({
+                                    message: "Deleting this media will remove it permanently from storage.",
+                                    comment: "@context: Warning message before deleting media"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isImage && /*#__PURE__*/ _jsx("dialog", {
+                id: "lightbox",
+                class: "p-0 m-auto bg-transparent backdrop:bg-black/80",
+                onclick: "event.target === this && this.close()",
+                children: /*#__PURE__*/ _jsx("img", {
+                    id: "lightbox-img",
+                    src: "",
+                    alt: "",
+                    class: "max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
+                })
+            })
+        ]
+    });
+}
+// List media
+mediaRoutes.get("/", async (c)=>{
+    const mediaList = await c.var.services.media.list(100);
+    const siteName = await c.var.services.settings.get("SITE_NAME") ?? "Jant";
+    const r2PublicUrl = c.env.R2_PUBLIC_URL;
+    const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+    const assets = getAssets();
+    return c.html(/*#__PURE__*/ _jsx(DashLayout, {
+        c: c,
+        title: "Media",
+        siteName: siteName,
+        currentPath: "/dash/media",
+        children: /*#__PURE__*/ _jsx(MediaListContent, {
+            mediaList: mediaList,
+            r2PublicUrl: r2PublicUrl,
+            imageTransformUrl: imageTransformUrl,
+            imageProcessorUrl: assets.imageProcessor
+        })
+    }));
+});
+// View single media
+mediaRoutes.get("/:id", async (c)=>{
+    const id = c.req.param("id");
+    const media = await c.var.services.media.getById(id);
+    if (!media) return c.notFound();
+    const siteName = await c.var.services.settings.get("SITE_NAME") ?? "Jant";
+    const r2PublicUrl = c.env.R2_PUBLIC_URL;
+    const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
+    return c.html(/*#__PURE__*/ _jsx(DashLayout, {
+        c: c,
+        title: media.originalName,
+        siteName: siteName,
+        currentPath: "/dash/media",
+        children: /*#__PURE__*/ _jsx(ViewMediaContent, {
+            media: media,
+            r2PublicUrl: r2PublicUrl,
+            imageTransformUrl: imageTransformUrl
+        })
+    }));
+});
+// Delete media
+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) {
+        try {
+            await c.env.R2.delete(media.r2Key);
+        } catch (err) {
+            // eslint-disable-next-line no-console -- Error logging is intentional
+            console.error("R2 delete error:", err);
+        }
+    }
+    // Delete from database
+    await c.var.services.media.delete(id);
+    return c.redirect("/dash/media");
+});

package/dist/routes/dash/pages.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Dashboard Pages Routes
+ *
+ * Management for custom pages (posts with type="page")
+ */
+import { Hono } from "hono";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+type Env = {
+    Bindings: Bindings;
+    Variables: AppVariables;
+};
+export declare const pagesRoutes: Hono<Env, import("hono/types").BlankSchema, "/">;
+export {};
+//# sourceMappingURL=pages.d.ts.map

package/dist/routes/dash/pages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/pages.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAOjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,WAAW,kDAAkB,CAAC"}