@jant/core 0.3.22 → 0.3.24

package/dist/{theme/components → themes/threads}/timeline/LinkCard.js

@@ -1,13 +1,22 @@
 /**
- * Link Card Component
+ * Threads Theme - Link Card
  *
- * External link emphasis for type="link" posts.
+ * Compact link preview box — date is shown at the feed level as a group header.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 export const LinkCard = ({ post, compact })=>{
+    // Extract domain from URL for display
+    let domain;
+    if (post.url) {
+        try {
+            domain = new URL(post.url).hostname.replace(/^www\./, "");
+        } catch  {
+        // Invalid URL, skip domain display
+        }
+    }
     return /*#__PURE__*/ _jsxs("article", {
-        class: `h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`,
+        class: `h-entry${compact ? " threads-compact" : ""}`,
         children: [
-            post.sourceDomain && /*#__PURE__*/ _jsxs("div", {
+            domain && /*#__PURE__*/ _jsxs("div", {
                 class: "text-xs text-muted-foreground mb-1 flex items-center gap-1",
                 children: [
                     /*#__PURE__*/ _jsx("svg", {
@@ -22,24 +31,24 @@ export const LinkCard = ({ post, compact })=>{
                         })
                     }),
                     /*#__PURE__*/ _jsx("span", {
-                        children: post.sourceDomain
+                        children: domain
                     })
                 ]
             }),
             post.title && /*#__PURE__*/ _jsx("h2", {
                 class: `p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`,
                 children: /*#__PURE__*/ _jsx("a", {
-                    href: post.sourceUrl || post.permalink,
+                    href: post.url || post.permalink,
                     class: "u-url hover:underline",
-                    target: post.sourceUrl ? "_blank" : undefined,
-                    rel: post.sourceUrl ? "noopener noreferrer" : undefined,
+                    target: post.url ? "_blank" : undefined,
+                    rel: post.url ? "noopener noreferrer" : undefined,
                     children: post.title
                 })
             }),
-            !compact && post.contentHtml && /*#__PURE__*/ _jsx("div", {
-                class: "e-content prose prose-sm text-muted-foreground",
+            !compact && post.bodyHtml && /*#__PURE__*/ _jsx("div", {
+                class: "e-content prose text-muted-foreground",
                 dangerouslySetInnerHTML: {
-                    __html: post.contentHtml
+                    __html: post.bodyHtml
                 }
             }),
             /*#__PURE__*/ _jsx("footer", {

package/dist/themes/threads/timeline/NoteCard.js

@@ -0,0 +1,53 @@
+/**
+ * Threads Theme - Note Card
+ *
+ * Without title: plain text note — date is shown at the feed level as a group header.
+ * With title: article-style rendering with summary excerpt and "Read more" link.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { MediaGallery } from "../../../theme/index.js";
+export const NoteCard = ({ post, compact })=>{
+    const isArticle = !!post.title;
+    const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+    return /*#__PURE__*/ _jsxs("article", {
+        class: `h-entry${compact ? " threads-compact" : ""}`,
+        children: [
+            isArticle && /*#__PURE__*/ _jsx("h2", {
+                class: `p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`,
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: post.permalink,
+                    class: "u-url hover:underline",
+                    children: post.title
+                })
+            }),
+            displayHtml && /*#__PURE__*/ _jsx("div", {
+                class: `e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`,
+                dangerouslySetInnerHTML: {
+                    __html: displayHtml
+                }
+            }),
+            !compact && post.media.length > 0 && /*#__PURE__*/ _jsx("div", {
+                class: "threads-media mt-3",
+                children: /*#__PURE__*/ _jsx(MediaGallery, {
+                    attachments: post.media
+                })
+            }),
+            !compact && isArticle && post.summaryHasMore && /*#__PURE__*/ _jsx("a", {
+                href: post.permalink,
+                class: "text-sm text-muted-foreground hover:underline mt-1 inline-block",
+                children: "Read more →"
+            }),
+            /*#__PURE__*/ _jsx("footer", {
+                class: "mt-2",
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: post.permalink,
+                    class: "u-url text-xs text-muted-foreground hover:underline",
+                    children: /*#__PURE__*/ _jsx("time", {
+                        class: "dt-published",
+                        datetime: post.publishedAt,
+                        children: post.publishedAtRelative
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/themes/threads/timeline/QuoteCard.js

@@ -0,0 +1,59 @@
+/**
+ * Threads Theme - Quote Card
+ *
+ * Left-border accent blockquote — date is shown at the feed level as a group header.
+ *
+ * v2 fields:
+ * - quoteText: the quoted text
+ * - title: attribution (who said it)
+ * - url: source link
+ * - bodyHtml: commentary
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+export const QuoteCard = ({ post, compact })=>{
+    return /*#__PURE__*/ _jsxs("article", {
+        class: `h-entry${compact ? " threads-compact" : ""}`,
+        children: [
+            post.quoteText && /*#__PURE__*/ _jsx("blockquote", {
+                class: "threads-quote",
+                children: /*#__PURE__*/ _jsx("div", {
+                    class: `e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`,
+                    children: post.quoteText
+                })
+            }),
+            !compact && (post.title || post.url) && /*#__PURE__*/ _jsxs("div", {
+                class: "mt-2 text-sm text-muted-foreground",
+                children: [
+                    "—",
+                    " ",
+                    post.url ? /*#__PURE__*/ _jsx("a", {
+                        href: post.url,
+                        class: "hover:underline",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: post.title || "Source"
+                    }) : /*#__PURE__*/ _jsx("span", {
+                        children: post.title
+                    })
+                ]
+            }),
+            !compact && post.bodyHtml && /*#__PURE__*/ _jsx("div", {
+                class: "mt-3 prose text-muted-foreground",
+                dangerouslySetInnerHTML: {
+                    __html: post.bodyHtml
+                }
+            }),
+            /*#__PURE__*/ _jsx("footer", {
+                class: "mt-2",
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: post.permalink,
+                    class: "u-url text-xs text-muted-foreground hover:underline",
+                    children: /*#__PURE__*/ _jsx("time", {
+                        class: "dt-published",
+                        datetime: post.publishedAt,
+                        children: post.publishedAtRelative
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/{theme/components → themes/threads}/timeline/ThreadPreview.js

@@ -1,7 +1,7 @@
 /**
- * Thread Preview Component
+ * Threads Theme - Thread Preview
  *
- * Inline thread preview: root card + compact replies + "show more" link.
+ * Root post + vertical line connector + compact replies underneath.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { TimelineItem } from "./TimelineItem.js";
@@ -10,7 +10,6 @@ export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount, theme
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const remainingCount = totalReplyCount - previewReplies.length;
     return /*#__PURE__*/ _jsxs("div", {
-        class: "timeline-thread",
         children: [
             /*#__PURE__*/ _jsx(TimelineItem, {
                 item: {
@@ -19,10 +18,10 @@ export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount, theme
                 theme: theme
             }),
             previewReplies.length > 0 && /*#__PURE__*/ _jsxs("div", {
-                class: "timeline-thread-replies",
+                class: "threads-replies",
                 children: [
                     previewReplies.map((reply)=>/*#__PURE__*/ _jsx("div", {
-                            class: "timeline-thread-reply",
+                            class: "threads-reply",
                             children: /*#__PURE__*/ _jsx(TimelineItemFromPost, {
                                 post: reply,
                                 compact: true,
@@ -30,7 +29,7 @@ export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount, theme
                             })
                         }, reply.id)),
                     remainingCount > 0 && /*#__PURE__*/ _jsx("div", {
-                        class: "timeline-thread-reply",
+                        class: "threads-reply",
                         children: /*#__PURE__*/ _jsx("a", {
                             href: rootPost.permalink,
                             class: "text-sm text-muted-foreground hover:text-foreground hover:underline",

package/dist/themes/threads/timeline/TimelineFeed.js

@@ -0,0 +1,58 @@
+/**
+ * Threads Theme - Timeline Feed
+ *
+ * Date-grouped posts separated by thin dividers.
+ * A centered date header appears above each group.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
+import { TimelineLoadMore as DefaultTimelineLoadMore } from "./TimelineLoadMore.js";
+import { groupByDate } from "./groupByDate.js";
+export const TimelineFeed = ({ items, hasMore, nextCursor, theme })=>{
+    const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+    const ResolvedLoadMore = theme?.TimelineLoadMore ?? DefaultTimelineLoadMore;
+    const groups = groupByDate(items);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                id: "timeline-feed",
+                children: groups.map((group)=>/*#__PURE__*/ _jsxs("div", {
+                        class: "threads-card",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                class: "threads-date-header",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: group.label
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                id: `date-items-${group.dateKey}`,
+                                class: "flex flex-col",
+                                children: group.items.map((item, i)=>/*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            i > 0 && /*#__PURE__*/ _jsx("hr", {
+                                                class: "border-border my-5"
+                                            }),
+                                            item.threadPreview ? /*#__PURE__*/ _jsx(ResolvedThreadPreview, {
+                                                rootPost: item.post,
+                                                previewReplies: item.threadPreview.replies,
+                                                totalReplyCount: item.threadPreview.totalReplyCount,
+                                                theme: theme
+                                            }) : /*#__PURE__*/ _jsx(TimelineItem, {
+                                                item: item,
+                                                theme: theme
+                                            })
+                                        ]
+                                    }, item.post.id))
+                            })
+                        ]
+                    }, group.dateKey))
+            }),
+            hasMore && nextCursor && /*#__PURE__*/ _jsx(ResolvedLoadMore, {
+                nextCursor: nextCursor,
+                lastDate: groups.at(-1)?.dateKey,
+                theme: theme
+            })
+        ]
+    });
+};

package/dist/{theme/components → themes/threads}/timeline/TimelineItem.js

@@ -1,43 +1,34 @@
 /**
- * Timeline Item Component
+ * Threads Theme - Timeline Item
  *
- * Dispatches to the correct card component based on post type.
- * Resolves card overrides from theme components if provided.
+ * Dispatches to the correct card component based on post format.
  */ import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 import { NoteCard } from "./NoteCard.js";
-import { ArticleCard } from "./ArticleCard.js";
 import { LinkCard } from "./LinkCard.js";
 import { QuoteCard } from "./QuoteCard.js";
-import { ImageCard } from "./ImageCard.js";
 const CARD_MAP = {
     note: NoteCard,
-    article: ArticleCard,
     link: LinkCard,
-    quote: QuoteCard,
-    image: ImageCard,
-    page: NoteCard
+    quote: QuoteCard
 };
 const THEME_KEY_MAP = {
     note: "NoteCard",
-    article: "ArticleCard",
     link: "LinkCard",
-    quote: "QuoteCard",
-    image: "ImageCard",
-    page: "NoteCard"
+    quote: "QuoteCard"
 };
 export const TimelineItem = ({ item, compact, cardOverride, theme })=>{
-    const themeKey = THEME_KEY_MAP[item.post.type];
+    const themeKey = THEME_KEY_MAP[item.post.format];
     const themeCard = theme?.[themeKey];
-    const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.type];
+    const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.format];
     return /*#__PURE__*/ _jsx(Card, {
         post: item.post,
         compact: compact
     });
 };
 export const TimelineItemFromPost = ({ post, compact, cardOverride, theme })=>{
-    const themeKey = THEME_KEY_MAP[post.type];
+    const themeKey = THEME_KEY_MAP[post.format];
     const themeCard = theme?.[themeKey];
-    const Card = cardOverride ?? themeCard ?? CARD_MAP[post.type];
+    const Card = cardOverride ?? themeCard ?? CARD_MAP[post.format];
     return /*#__PURE__*/ _jsx(Card, {
         post: post,
         compact: compact

package/dist/themes/threads/timeline/TimelineLoadMore.js

@@ -0,0 +1,23 @@
+/**
+ * Threads Theme - Timeline Load More
+ *
+ * Auto-loads more posts when scrolled into view.
+ * Passes `lastDate` to the server so it can merge date groups across pages.
+ */ import { jsx as _jsx } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+export const TimelineLoadMore = ({ nextCursor, lastDate })=>{
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const url = lastDate ? `/?cursor=${nextCursor}&lastDate=${lastDate}` : `/?cursor=${nextCursor}`;
+    return /*#__PURE__*/ _jsx("div", {
+        id: "load-more-container",
+        class: "py-6 text-center",
+        "data-on-intersect__once": `@get('${url}')`,
+        children: /*#__PURE__*/ _jsx("span", {
+            class: "text-sm text-muted-foreground",
+            children: $__i18n._({
+                id: "Z3FXyt",
+                message: "Loading..."
+            })
+        })
+    });
+};

package/dist/themes/threads/timeline/groupByDate.js

@@ -0,0 +1,22 @@
+/**
+ * Groups timeline items by their publication date (YYYY-MM-DD).
+ *
+ * Shared between TimelineFeed (initial render) and timelineMore (SSE patches)
+ * so that both produce identical date group structure.
+ */ export function groupByDate(items) {
+    const groups = [];
+    let current = null;
+    for (const item of items){
+        const dateKey = item.post.publishedAt.slice(0, 10);
+        if (!current || current.dateKey !== dateKey) {
+            current = {
+                dateKey,
+                label: item.post.publishedAtFormatted,
+                items: []
+            };
+            groups.push(current);
+        }
+        current.items.push(item);
+    }
+    return groups;
+}

package/dist/themes/threads/timeline/timelineMore.js

@@ -0,0 +1,107 @@
+/**
+ * Threads Theme - Timeline Load-More SSE Renderer
+ *
+ * Produces SSE DOM patches for incremental timeline loading.
+ * Uses date-grouped layout with threads-specific HTML (threads-card, threads-date-header)
+ * matching TimelineFeed's initial render exactly.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { groupByDate } from "./groupByDate.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
+import { TimelineLoadMore as DefaultTimelineLoadMore } from "./TimelineLoadMore.js";
+function renderItem(item, props) {
+    const theme = props.theme;
+    const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+    if (item.threadPreview) {
+        return /*#__PURE__*/ _jsx(ResolvedThreadPreview, {
+            rootPost: item.post,
+            previewReplies: item.threadPreview.replies,
+            totalReplyCount: item.threadPreview.totalReplyCount,
+            theme: theme
+        }).toString();
+    }
+    return /*#__PURE__*/ _jsx(TimelineItem, {
+        item: item,
+        theme: theme
+    }).toString();
+}
+/**
+ * Renders SSE patches for the threads theme's load-more response.
+ *
+ * @param props - Timeline more props with items, pagination, and theme
+ * @returns Array of DOM patch instructions for the SSE stream
+ */ export function timelineMore(props) {
+    const { items, lastDate, hasMore, nextCursor, theme } = props;
+    const patches = [];
+    const groups = groupByDate(items);
+    if (groups.length === 0) return patches;
+    const firstGroup = groups[0];
+    const isContinuation = lastDate === firstGroup.dateKey;
+    // Continuation items: append into the existing date group's container
+    if (isContinuation) {
+        const continuationHtml = firstGroup.items.map((item)=>{
+            const content = renderItem(item, props);
+            return `<div><hr class="border-border my-5"/>${content}</div>`;
+        }).join("");
+        if (continuationHtml) {
+            patches.push({
+                selector: `#date-items-${lastDate}`,
+                content: continuationHtml,
+                mode: "append"
+            });
+        }
+    }
+    // New date groups: append to #timeline-feed
+    const newGroups = isContinuation ? groups.slice(1) : groups;
+    if (newGroups.length > 0) {
+        const newGroupsHtml = newGroups.map((group)=>{
+            const itemsHtml = group.items.map((item, i)=>{
+                const content = renderItem(item, props);
+                return i > 0 ? `<div><hr class="border-border my-5"/>${content}</div>` : `<div>${content}</div>`;
+            }).join("");
+            return /*#__PURE__*/ _jsxs("div", {
+                class: "threads-card",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        class: "threads-date-header",
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: group.label
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        id: `date-items-${group.dateKey}`,
+                        class: "flex flex-col",
+                        dangerouslySetInnerHTML: {
+                            __html: itemsHtml
+                        }
+                    })
+                ]
+            }).toString();
+        }).join("");
+        patches.push({
+            selector: "#timeline-feed",
+            content: newGroupsHtml,
+            mode: "append"
+        });
+    }
+    // Load-more button
+    const ResolvedLoadMore = theme?.TimelineLoadMore ?? DefaultTimelineLoadMore;
+    const lastGroupDate = groups.at(-1)?.dateKey;
+    if (hasMore && nextCursor) {
+        patches.push({
+            selector: "#load-more-container",
+            content: /*#__PURE__*/ _jsx(ResolvedLoadMore, {
+                nextCursor: nextCursor,
+                lastDate: lastGroupDate,
+                theme: theme
+            }).toString()
+        });
+    } else {
+        patches.push({
+            selector: "#load-more-container",
+            content: "",
+            mode: "remove"
+        });
+    }
+    return patches;
+}

package/dist/types.js

@@ -1,53 +1,33 @@
 /**
- * Jant Type Definitions
+ * Jant Type Definitions (v2)
  */ // =============================================================================
 // Content Types
 // =============================================================================
-export const POST_TYPES = [
+export const FORMATS = [
     "note",
-    "article",
     "link",
-    "quote",
-    "image",
-    "page"
+    "quote"
+];
+export const STATUSES = [
+    "draft",
+    "published"
+];
+export const SORT_ORDERS = [
+    "newest",
+    "oldest",
+    "rating_desc",
+    "rating_asc"
+];
+export const NAV_ITEM_TYPES = [
+    "page",
+    "link"
 ];
 export const MAX_MEDIA_ATTACHMENTS = 20;
-/**
- * Media attachment rules per post type.
- * Each entry is [min, max] or null (no media allowed).
- */ export const POST_TYPE_MEDIA_RULES = {
-    note: [
-        0,
-        20
-    ],
-    article: [
-        0,
-        20
-    ],
-    image: [
-        1,
-        20
-    ],
-    link: [
-        0,
-        1
-    ],
-    quote: [
-        0,
-        20
-    ],
-    page: null
-};
+export const MAX_PINNED_POSTS = 3;
 export const STORAGE_DRIVERS = [
     "r2",
     "s3"
 ];
-export const VISIBILITY_LEVELS = [
-    "featured",
-    "quiet",
-    "unlisted",
-    "draft"
-];
 // =============================================================================
 // Configuration System
 // =============================================================================
@@ -58,8 +38,8 @@ export const VISIBILITY_LEVELS = [
  * Add new fields here, and they'll automatically work everywhere.
  *
  * Priority logic:
- * - envOnly: false → User-configurable (DB > ENV > Default)
- * - envOnly: true → Environment-only (ENV > Default)
+ * - envOnly: false -> User-configurable (DB > ENV > Default)
+ * - envOnly: true -> Environment-only (ENV > Default)
  */ export const CONFIG_FIELDS = {
     // User-configurable (can be modified in dashboard)
     SITE_NAME: {
@@ -99,6 +79,10 @@ export const VISIBILITY_LEVELS = [
         defaultValue: "",
         envOnly: true
     },
+    PAGE_SIZE: {
+        defaultValue: "20",
+        envOnly: true
+    },
     STORAGE_DRIVER: {
         defaultValue: "r2",
         envOnly: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "bin": {
@@ -33,6 +33,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.987.0",
     "@lingui/core": "^5.9.0",
+    "@tailwindcss/typography": "^0.5.19",
     "basecoat-css": "^0.3.10",
     "better-auth": "^1.4.18",
     "drizzle-orm": "^0.45.1",

package/src/__tests__/helpers/app.ts

@@ -9,11 +9,13 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { createTestDatabase } from "./db.js";
 import { createPostService } from "../../services/post.js";
+import { createPageService } from "../../services/page.js";
 import { createSettingsService } from "../../services/settings.js";
 import { createRedirectService } from "../../services/redirect.js";
 import { createMediaService } from "../../services/media.js";
 import { createCollectionService } from "../../services/collection.js";
 import { createSearchService } from "../../services/search.js";
+import { createNavItemService } from "../../services/navigation.js";
 import type { Database } from "../../db/index.js";
 import type BetterSqlite3 from "better-sqlite3";
 
@@ -40,11 +42,13 @@ export function createTestApp(options: TestAppOptions = {}) {
 
   const services = {
     posts: createPostService(db),
+    pages: createPageService(db),
     settings: createSettingsService(db),
     redirects: createRedirectService(db),
     media: createMediaService(db),
     collections: createCollectionService(db),
     search: createSearchService(mockD1),
+    navItems: createNavItemService(db),
   };
 
   const app = new Hono<Env>();