@jant/core 0.3.34 → 0.3.36

package/src/lib/tiptap-render.ts

@@ -0,0 +1,196 @@
+/**
+ * Tiptap JSON → HTML Renderer
+ *
+ * Lightweight server-side renderer that converts Tiptap JSON documents
+ * to HTML strings. Pure string concatenation — no DOM required.
+ * Works on Cloudflare Workers and any JS runtime.
+ */
+
+interface TiptapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+interface TiptapNode {
+  type: string;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: TiptapMark[];
+  attrs?: Record<string, unknown>;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function renderMarks(text: string, marks: TiptapMark[]): string {
+  let result = escapeHtml(text);
+
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+        result = `<strong>${result}</strong>`;
+        break;
+      case "italic":
+        result = `<em>${result}</em>`;
+        break;
+      case "strike":
+        result = `<s>${result}</s>`;
+        break;
+      case "code":
+        result = `<code>${result}</code>`;
+        break;
+      case "link": {
+        const href = escapeHtml(String(mark.attrs?.href ?? ""));
+        const target = mark.attrs?.target
+          ? ` target="${escapeHtml(String(mark.attrs.target))}"`
+          : "";
+        const rel = mark.attrs?.target
+          ? ' rel="noopener noreferrer nofollow"'
+          : "";
+        result = `<a href="${href}"${target}${rel}>${result}</a>`;
+        break;
+      }
+    }
+  }
+
+  return result;
+}
+
+function renderNode(node: TiptapNode): string {
+  switch (node.type) {
+    case "doc":
+      return (node.content ?? []).map(renderNode).join("");
+
+    case "paragraph":
+      return `<p>${renderChildren(node)}</p>`;
+
+    case "heading": {
+      const level = Math.min(Math.max(Number(node.attrs?.level ?? 1), 1), 6);
+      return `<h${level}>${renderChildren(node)}</h${level}>`;
+    }
+
+    case "text":
+      if (node.marks && node.marks.length > 0) {
+        return renderMarks(node.text ?? "", node.marks);
+      }
+      return escapeHtml(node.text ?? "");
+
+    case "bulletList":
+      return `<ul>${renderChildren(node)}</ul>`;
+
+    case "orderedList": {
+      const start = node.attrs?.start;
+      const startAttr = start && start !== 1 ? ` start="${start}"` : "";
+      return `<ol${startAttr}>${renderChildren(node)}</ol>`;
+    }
+
+    case "listItem":
+      return `<li>${renderChildren(node)}</li>`;
+
+    case "blockquote":
+      return `<blockquote>${renderChildren(node)}</blockquote>`;
+
+    case "codeBlock": {
+      const lang = node.attrs?.language;
+      const langClass = lang
+        ? ` class="language-${escapeHtml(String(lang))}"`
+        : "";
+      return `<pre><code${langClass}>${renderChildren(node)}</code></pre>`;
+    }
+
+    case "table":
+      return `<table>${renderChildren(node)}</table>`;
+
+    case "tableRow":
+      return `<tr>${renderChildren(node)}</tr>`;
+
+    case "tableCell": {
+      const colspan = node.attrs?.colspan;
+      const rowspan = node.attrs?.rowspan;
+      const colspanAttr =
+        colspan && colspan !== 1 ? ` colspan="${colspan}"` : "";
+      const rowspanAttr =
+        rowspan && rowspan !== 1 ? ` rowspan="${rowspan}"` : "";
+      return `<td${colspanAttr}${rowspanAttr}>${renderChildren(node)}</td>`;
+    }
+
+    case "tableHeader": {
+      const thColspan = node.attrs?.colspan;
+      const thRowspan = node.attrs?.rowspan;
+      const thColspanAttr =
+        thColspan && thColspan !== 1 ? ` colspan="${thColspan}"` : "";
+      const thRowspanAttr =
+        thRowspan && thRowspan !== 1 ? ` rowspan="${thRowspan}"` : "";
+      return `<th${thColspanAttr}${thRowspanAttr}>${renderChildren(node)}</th>`;
+    }
+
+    case "horizontalRule":
+      return "<hr>";
+
+    case "hardBreak":
+      return "<br>";
+
+    case "image": {
+      const src = escapeHtml(String(node.attrs?.src ?? ""));
+      const alt = node.attrs?.alt
+        ? ` alt="${escapeHtml(String(node.attrs.alt))}"`
+        : "";
+      const title = node.attrs?.title
+        ? ` title="${escapeHtml(String(node.attrs.title))}"`
+        : "";
+      const caption = node.attrs?.caption ? String(node.attrs.caption) : "";
+      const layout = node.attrs?.layout ?? "regular";
+      const href = node.attrs?.href ? String(node.attrs.href) : "";
+      const layoutAttr =
+        layout !== "regular"
+          ? ` data-layout="${escapeHtml(String(layout))}"`
+          : "";
+      const imgTag = `<img src="${src}"${alt}${title}>`;
+      const linkedImg = href
+        ? `<a href="${escapeHtml(href)}">${imgTag}</a>`
+        : imgTag;
+      const figcaption = caption
+        ? `<figcaption>${escapeHtml(caption)}</figcaption>`
+        : "";
+      return `<figure${layoutAttr}>${linkedImg}${figcaption}</figure>`;
+    }
+
+    case "moreBreak":
+      return "<!--more-->";
+
+    default:
+      // Unknown node: render children if any, skip otherwise
+      return node.content ? renderChildren(node) : "";
+  }
+}
+
+function renderChildren(node: TiptapNode): string {
+  return (node.content ?? []).map(renderNode).join("");
+}
+
+/**
+ * Renders a Tiptap JSON document to an HTML string.
+ *
+ * @param json - Tiptap JSON string or parsed document object
+ * @returns HTML string
+ *
+ * @example
+ * ```ts
+ * const html = renderTiptapJson('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello"}]}]}');
+ * // "<p>Hello</p>"
+ * ```
+ */
+export function renderTiptapJson(json: string): string {
+  try {
+    const doc = JSON.parse(json) as TiptapNode;
+    if (doc.type !== "doc") return "";
+    return renderNode(doc);
+  } catch {
+    return "";
+  }
+}

package/src/lib/upload.ts

@@ -6,8 +6,8 @@
 
 import { uuidv7 } from "uuidv7";
 
-/** MIME types allowed for upload */
-const ALLOWED_UPLOAD_TYPES = [
+/** MIME types allowed for upload — images */
+const IMAGE_MIME_TYPES = [
   "image/jpeg",
   "image/png",
   "image/gif",
@@ -15,30 +15,118 @@ const ALLOWED_UPLOAD_TYPES = [
   "image/svg+xml",
 ] as const;
 
-/** Maximum file size in bytes (10MB) */
-const MAX_UPLOAD_SIZE = 10 * 1024 * 1024;
+/** MIME types allowed for upload — video */
+const VIDEO_MIME_TYPES = [
+  "video/mp4",
+  "video/webm",
+  "video/quicktime",
+] as const;
+
+/** MIME types allowed for upload — audio */
+const AUDIO_MIME_TYPES = [
+  "audio/mpeg",
+  "audio/ogg",
+  "audio/wav",
+  "audio/mp4",
+  "audio/x-m4a",
+] as const;
+
+/** MIME types allowed for upload — documents */
+const DOCUMENT_MIME_TYPES = ["application/pdf"] as const;
+
+/** All allowed MIME types */
+const ALLOWED_UPLOAD_TYPES = [
+  ...IMAGE_MIME_TYPES,
+  ...VIDEO_MIME_TYPES,
+  ...AUDIO_MIME_TYPES,
+  ...DOCUMENT_MIME_TYPES,
+] as const;
+
+/**
+ * Accept string for file inputs, covering all allowed upload types.
+ *
+ * @example
+ * ```ts
+ * <input type="file" accept={UPLOAD_ACCEPT} />
+ * ```
+ */
+export const UPLOAD_ACCEPT = (ALLOWED_UPLOAD_TYPES as readonly string[]).join(
+  ",",
+);
+
+export type MediaCategory = "image" | "video" | "audio" | "document";
+
+/**
+ * Returns the media category for a given MIME type.
+ *
+ * @param mimeType - The MIME type to classify
+ * @returns The media category, or null if the MIME type is not supported
+ * @example
+ * ```ts
+ * getMediaCategory("video/mp4"); // "video"
+ * getMediaCategory("text/plain"); // null
+ * ```
+ */
+export function getMediaCategory(mimeType: string): MediaCategory | null {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType === "application/pdf") return "document";
+  return null;
+}
+
+/**
+ * Returns true if the given MIME type is an image type.
+ *
+ * @param mimeType - The MIME type to check
+ * @returns Whether the MIME type is an image
+ * @example
+ * ```ts
+ * isImageMimeType("image/jpeg"); // true
+ * isImageMimeType("video/mp4"); // false
+ * ```
+ */
+export function isImageMimeType(mimeType: string): boolean {
+  return mimeType.startsWith("image/");
+}
+
+export interface ValidateUploadOptions {
+  /** When true, only image MIME types are accepted (e.g. for avatar uploads). */
+  imagesOnly?: boolean;
+  /** Max file size in MB. */
+  maxFileSizeMB: number;
+}
 
 /**
  * Validates an uploaded file's type and size.
  *
  * @param file - The uploaded File object
+ * @param options - Validation constraints
  * @returns null if valid, error message string if invalid
  * @example
  * ```ts
- * const error = validateUploadFile(file);
+ * const error = validateUploadFile(file, { maxFileSizeMB: 500 });
  * if (error) return dsToast(error, "error");
  * ```
  */
-export function validateUploadFile(file: File): string | null {
-  if (
+export function validateUploadFile(
+  file: File,
+  options: ValidateUploadOptions,
+): string | null {
+  if (options?.imagesOnly) {
+    if (!isImageMimeType(file.type)) {
+      return "File type not allowed.";
+    }
+  } else if (
     !ALLOWED_UPLOAD_TYPES.includes(
       file.type as (typeof ALLOWED_UPLOAD_TYPES)[number],
     )
   ) {
     return "File type not allowed.";
   }
-  if (file.size > MAX_UPLOAD_SIZE) {
-    return "File too large (max 10MB).";
+  const maxMB = options.maxFileSizeMB;
+  if (file.size > maxMB * 1024 * 1024) {
+    return `File too large (max ${maxMB}MB).`;
   }
   return null;
 }

package/src/lib/url.ts

@@ -2,7 +2,7 @@
  * URL Utilities
  */
 
-import { pinyin } from "pinyin-pro";
+import limax from "limax";
 
 /**
  * Extracts the hostname (domain) from a URL string.
@@ -79,37 +79,21 @@ export function isFullUrl(str: string): boolean {
 /**
  * Converts text to a URL-friendly slug.
  *
- * Transforms text into a lowercase, hyphen-separated slug by:
- * - Converting to lowercase
- * - Removing special characters (keeping only word characters, spaces, and hyphens)
- * - Replacing whitespace and underscores with hyphens
- * - Removing leading and trailing hyphens
- *
- * Used for generating clean URLs from titles and names.
+ * Transforms text into a lowercase, hyphen-separated slug using limax for
+ * i18n-aware transliteration (CJK → Pinyin, Japanese → Romaji, accented → ASCII).
  *
  * @param text - The text to convert to a slug
  * @returns The slugified string
  *
  * @example
  * ```ts
- * const slug = slugify("Hello World! This is a Test.");
+ * slugify("Hello World! This is a Test.");
  * // Returns: "hello-world-this-is-a-test"
  *
- * const slug = slugify("  Multiple   Spaces  ");
- * // Returns: "multiple-spaces"
+ * slugify("书评");
+ * // Returns: "shu-ping"
  * ```
  */
 export function slugify(text: string): string {
-  // Replace CJK characters with their pinyin equivalents, preserving non-CJK text
-  const converted = text.replace(
-    /[\u4e00-\u9fff\u3400-\u4dbf]+/g,
-    (match) => ` ${pinyin(match, { toneType: "none", separator: " " })} `,
-  );
-
-  return converted
-    .toLowerCase()
-    .trim()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/[\s_-]+/g, "-")
-    .replace(/^-+|-+$/g, "");
+  return limax(text, { tone: false }).replace(/_/g, "-");
 }

package/src/lib/view.ts

@@ -78,13 +78,17 @@ export function toMediaView(media: Media, ctx: MediaContext): MediaView {
     ctx.s3PublicUrl,
   );
   const url = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(url, ctx.imageTransformUrl, {
-    width: 1200,
-    height: 768,
-    quality: 80,
-    format: "auto",
-    fit: "scale-down",
-  });
+
+  // Only apply image transforms for image MIME types
+  const thumbnailUrl = media.mimeType.startsWith("image/")
+    ? getImageUrl(url, ctx.imageTransformUrl, {
+        width: 1200,
+        height: 768,
+        quality: 80,
+        format: "auto",
+        fit: "scale-down",
+      })
+    : url;
 
   return {
     id: media.id,
@@ -124,17 +128,27 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
   let summaryHasMore: boolean | undefined;
   let bodyHtmlWithAnchor = post.bodyHtml;
   if (post.title && post.bodyHtml) {
-    const result = getHtmlExcerpt(post.bodyHtml);
-    summaryHtml = result.excerpt;
-    summaryHasMore = result.hasMore;
-
-    // Inject #continue anchor at the excerpt boundary for scroll targeting
-    if (result.hasMore) {
-      const pos = result.excerptEnd;
-      bodyHtmlWithAnchor =
-        post.bodyHtml.slice(0, pos) +
-        '<span id="continue"></span>' +
-        post.bodyHtml.slice(pos);
+    if (post.summary) {
+      // Use stored summary (generated from Tiptap JSON)
+      summaryHtml = post.summary
+        .split("\n\n")
+        .map((p) => `<p>${p}</p>`)
+        .join("");
+      summaryHasMore = true;
+    } else {
+      // Fallback: extract from rendered HTML
+      const result = getHtmlExcerpt(post.bodyHtml);
+      summaryHtml = result.excerpt;
+      summaryHasMore = result.hasMore;
+
+      // Inject #continue anchor at the excerpt boundary for scroll targeting
+      if (result.hasMore) {
+        const pos = result.excerptEnd;
+        bodyHtmlWithAnchor =
+          post.bodyHtml.slice(0, pos) +
+          '<span id="continue"></span>' +
+          post.bodyHtml.slice(pos);
+      }
     }
   }
 
@@ -162,7 +176,7 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
     quoteText: post.quoteText ?? undefined,
     format: post.format as Format,
     status: post.status as Status,
-    featured: post.featured === 1,
+    visibility: post.visibility,
     pinned: post.pinned === 1,
     rating: post.rating ?? undefined,
     publishedAt: toISOString(post.publishedAt),

package/src/middleware/error-handler.ts

@@ -33,7 +33,7 @@ export const errorHandler: ErrorHandler<Env> = (err, c) => {
     // Unknown API error
     // eslint-disable-next-line no-console -- Server error logging is intentional
     console.error("[Jant] Unhandled error:", err);
-    return c.json({ error: "Internal server error" }, 500);
+    return c.json({ error: "Something went wrong on our end" }, 500);
   }
 
   // Datastar requests: return toast
@@ -43,7 +43,7 @@ export const errorHandler: ErrorHandler<Env> = (err, c) => {
     }
     // eslint-disable-next-line no-console -- Server error logging is intentional
     console.error("[Jant] Unhandled error:", err);
-    return dsToast("An unexpected error occurred", "error");
+    return dsToast("Something went wrong. Try refreshing the page.", "error");
   }
 
   // JSON-accepting requests (Lit bridges)
@@ -59,7 +59,7 @@ export const errorHandler: ErrorHandler<Env> = (err, c) => {
     }
     // eslint-disable-next-line no-console -- Server error logging is intentional
     console.error("[Jant] Unhandled error:", err);
-    return c.json({ error: "Internal server error" }, 500);
+    return c.json({ error: "Something went wrong on our end" }, 500);
   }
 
   // Non-API routes: map NotFoundError to Hono's built-in 404

package/src/preset.css

@@ -73,4 +73,42 @@
   :where(h1, h2, h3, h4, h5, h6) {
     font-family: var(--font-heading);
   }
+
+  /* Image figures */
+  figure {
+    margin: 1.5em 0;
+  }
+
+  figure img {
+    width: 100%;
+    max-height: 500px;
+    object-fit: contain;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  figcaption {
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--tw-prose-captions);
+    margin-top: 0.5em;
+  }
+
+  /* Layout variants — center-breakout via margin+transform (no scrollbars) */
+  figure[data-layout="wide"] {
+    width: 1200px;
+    max-width: 100vw;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  figure[data-layout="full"] {
+    width: 100vw;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  figure[data-layout="full"] img {
+    border-radius: 0;
+  }
 }

package/src/routes/api/collections.ts

@@ -36,19 +36,36 @@ const PostAssignSchema = z.object({
   postId: z.number().int().positive(),
 });
 
-// List collections (includes post counts)
+// List collections (includes post counts and dividers)
 collectionsApiRoutes.get("/", async (c) => {
-  const collections = await c.var.services.collections.list();
-  const postCounts = await c.var.services.collections.getPostCounts();
+  const [collections, dividers, postCounts] = await Promise.all([
+    c.var.services.collections.list(),
+    c.var.services.collections.listDividers(),
+    c.var.services.collections.getPostCounts(),
+  ]);
 
   return c.json({
     collections: collections.map((col) => ({
       ...col,
       postCount: postCounts.get(col.id) ?? 0,
     })),
+    dividers,
   });
 });
 
+// Create divider (requires auth) — must be before /:id
+collectionsApiRoutes.post("/dividers", requireAuthApi(), async (c) => {
+  const divider = await c.var.services.collections.createDivider();
+  return c.json(divider, 201);
+});
+
+// Delete divider (requires auth) — must be before /:id
+collectionsApiRoutes.delete("/dividers/:id", requireAuthApi(), async (c) => {
+  const id = parseIntParam(c.req.param("id"));
+  await c.var.services.collections.deleteDivider(id);
+  return c.json({ success: true });
+});
+
 // Get single collection
 collectionsApiRoutes.get("/:id", async (c) => {
   const id = parseIntParam(c.req.param("id"));

package/src/routes/api/posts.ts

@@ -126,23 +126,31 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
     await c.var.services.media.validateIds(body.mediaIds);
   }
 
-  const post = await c.var.services.posts.create({
-    format: body.format,
-    title: body.title,
-    body: body.body,
-    path: body.path || undefined,
-    status: body.status,
-    featured: body.featured,
-    pinned: body.pinned,
-    url: body.url || undefined,
-    quoteText: body.quoteText,
-    rating: body.rating || undefined,
-    collectionIds: body.collectionIds?.length ? body.collectionIds : undefined,
-    replyToId: body.replyToId
-      ? (sqid.decode(body.replyToId) ?? undefined)
-      : undefined,
-    publishedAt: body.publishedAt,
-  });
+  const post = await c.var.services.posts.create(
+    {
+      format: body.format,
+      title: body.title,
+      body: body.body,
+      path: body.path || undefined,
+      status: body.status,
+      visibility: body.visibility,
+      pinned: body.pinned,
+      url: body.url || undefined,
+      quoteText: body.quoteText,
+      rating: body.rating || undefined,
+      collectionIds: body.collectionIds?.length
+        ? body.collectionIds
+        : undefined,
+      replyToId: body.replyToId
+        ? (sqid.decode(body.replyToId) ?? undefined)
+        : undefined,
+      publishedAt: body.publishedAt,
+    },
+    {
+      maxParagraphs: c.var.appConfig.summaryMaxParagraphs,
+      maxChars: c.var.appConfig.summaryMaxChars,
+    },
+  );
 
   // Attach media
   if (body.mediaIds && body.mediaIds.length > 0) {
@@ -177,22 +185,29 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
   }
 
   const post = assertFound(
-    await c.var.services.posts.update(id, {
-      format: body.format,
-      title: body.title,
-      body: body.body,
-      path: body.path,
-      status: body.status,
-      featured: body.featured,
-      pinned: body.pinned,
-      url: body.url,
-      quoteText: body.quoteText,
-      rating: body.rating || undefined,
-      collectionIds: body.collectionIds?.length
-        ? body.collectionIds
-        : undefined,
-      publishedAt: body.publishedAt,
-    }),
+    await c.var.services.posts.update(
+      id,
+      {
+        format: body.format,
+        title: body.title,
+        body: body.body,
+        path: body.path,
+        status: body.status,
+        visibility: body.visibility,
+        pinned: body.pinned,
+        url: body.url,
+        quoteText: body.quoteText,
+        rating: body.rating || undefined,
+        collectionIds: body.collectionIds?.length
+          ? body.collectionIds
+          : undefined,
+        publishedAt: body.publishedAt,
+      },
+      {
+        maxParagraphs: c.var.appConfig.summaryMaxParagraphs,
+        maxChars: c.var.appConfig.summaryMaxChars,
+      },
+    ),
     "Post",
   );