@jant/core 0.3.20 → 0.3.22

package/dist/routes/pages/archive.js

@@ -1,191 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Archive Page Route
  *
  * Shows all posts, optionally filtered by type
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import { Pagination } from "../../theme/components/index.js";
 import { POST_TYPES } from "../../types.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
+import { ArchivePage as DefaultArchivePage } from "../../theme/pages/ArchivePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toArchiveGroups } from "../../lib/view.js";
 const PAGE_SIZE = 50;
 export const archiveRoutes = new Hono();
-function getTypeLabel(type) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const labels = {
-        note: $__i18n._({
-            id: "KiJn9B",
-            message: "Note"
-        }),
-        article: $__i18n._({
-            id: "f6e0Ry",
-            message: "Article"
-        }),
-        link: $__i18n._({
-            id: "yzF66j",
-            message: "Link"
-        }),
-        quote: $__i18n._({
-            id: "ZhhOwV",
-            message: "Quote"
-        }),
-        image: $__i18n._({
-            id: "hG89Ed",
-            message: "Image"
-        }),
-        page: $__i18n._({
-            id: "6WdDG7",
-            message: "Page"
-        })
-    };
-    return labels[type] ?? type;
-}
-function getTypeLabelPlural(type) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const labels = {
-        note: $__i18n._({
-            id: "1DBGsz",
-            message: "Notes"
-        }),
-        article: $__i18n._({
-            id: "Tt5T6+",
-            message: "Articles"
-        }),
-        link: $__i18n._({
-            id: "Rj01Fz",
-            message: "Links"
-        }),
-        quote: $__i18n._({
-            id: "eWLklq",
-            message: "Quotes"
-        }),
-        image: $__i18n._({
-            id: "an5hVd",
-            message: "Images"
-        }),
-        page: $__i18n._({
-            id: "wRR604",
-            message: "Pages"
-        })
-    };
-    return labels[type] ?? `${type}s`;
-}
-function formatYearMonth(yearMonth) {
-    const [year, month] = yearMonth.split("-");
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- yearMonth format YYYY-MM guarantees both year and month exist
-    const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1);
-    return date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long"
-    });
-}
-function ArchiveContent({ displayPosts, hasMore, nextCursor, type, grouped, replyCounts }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    const title = type ? getTypeLabelPlural(type) : $__i18n._({
-        id: "B495Gs",
-        message: "Archive"
-    });
-    return /*#__PURE__*/ _jsxs("div", {
-        children: [
-            /*#__PURE__*/ _jsxs("header", {
-                class: "mb-8",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        class: "text-2xl font-semibold",
-                        children: title
-                    }),
-                    /*#__PURE__*/ _jsxs("nav", {
-                        class: "flex flex-wrap gap-2 mt-4",
-                        children: [
-                            /*#__PURE__*/ _jsx("a", {
-                                href: "/archive",
-                                class: `badge ${!type ? "badge-primary" : "badge-outline"}`,
-                                children: $__i18n._({
-                                    id: "N40H+G",
-                                    message: "All"
-                                })
-                            }),
-                            POST_TYPES.filter((t)=>t !== "page").map((typeKey)=>/*#__PURE__*/ _jsx("a", {
-                                    href: `/archive?type=${typeKey}`,
-                                    class: `badge ${type === typeKey ? "badge-primary" : "badge-outline"}`,
-                                    children: getTypeLabelPlural(typeKey)
-                                }, typeKey))
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("main", {
-                children: displayPosts.length === 0 ? /*#__PURE__*/ _jsx("p", {
-                    class: "text-muted-foreground",
-                    children: $__i18n._({
-                        id: "Hzi9AA",
-                        message: "No posts found."
-                    })
-                }) : Array.from(grouped.entries()).map(([yearMonth, monthPosts])=>/*#__PURE__*/ _jsxs("section", {
-                        class: "mb-8",
-                        children: [
-                            /*#__PURE__*/ _jsx("h2", {
-                                class: "text-lg font-medium mb-4 text-muted-foreground",
-                                children: formatYearMonth(yearMonth)
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                class: "flex flex-col gap-3",
-                                children: monthPosts.map((post)=>{
-                                    const replyCount = replyCounts.get(post.id);
-                                    return /*#__PURE__*/ _jsxs("article", {
-                                        class: "flex items-baseline gap-4",
-                                        children: [
-                                            /*#__PURE__*/ _jsx("time", {
-                                                class: "text-sm text-muted-foreground w-12 shrink-0",
-                                                datetime: time.toISOString(post.publishedAt),
-                                                children: new Date(post.publishedAt * 1000).getDate()
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                class: "flex-1 min-w-0",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("a", {
-                                                        href: `/p/${sqid.encode(post.id)}`,
-                                                        class: "hover:underline",
-                                                        children: post.title || post.content?.slice(0, 80) || `Post #${post.id}`
-                                                    }),
-                                                    !type && /*#__PURE__*/ _jsx("span", {
-                                                        class: "ml-2 badge-outline text-xs",
-                                                        children: getTypeLabel(post.type)
-                                                    }),
-                                                    replyCount && replyCount > 0 && /*#__PURE__*/ _jsxs("span", {
-                                                        class: "ml-2 text-xs text-muted-foreground",
-                                                        children: [
-                                                            "(",
-                                                            replyCount === 1 ? $__i18n._({
-                                                                id: "TxE+Mj",
-                                                                message: "1 reply"
-                                                            }) : $__i18n._({
-                                                                id: "90Luob",
-                                                                message: "{count} replies"
-                                                            }),
-                                                            ")"
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    }, post.id);
-                                })
-                            })
-                        ]
-                    }, yearMonth))
-            }),
-            /*#__PURE__*/ _jsx(Pagination, {
-                baseUrl: type ? `/archive?type=${type}` : "/archive",
-                hasMore: hasMore,
-                nextCursor: nextCursor
-            })
-        ]
-    });
-}
 // Archive page - all posts
 archiveRoutes.get("/", async (c)=>{
     const typeParam = c.req.query("type");
@@ -207,9 +32,6 @@ archiveRoutes.get("/", async (c)=>{
     });
     const hasMore = posts.length > PAGE_SIZE;
     const displayPosts = hasMore ? posts.slice(0, PAGE_SIZE) : posts;
-    // Get reply counts for thread indicators
-    const postIds = displayPosts.map((p)=>p.id);
-    const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
     // Get next cursor
     const nextCursor = hasMore && displayPosts.length > 0 ? displayPosts[displayPosts.length - 1].id : undefined;
     // Group posts by year-month
@@ -223,19 +45,20 @@ archiveRoutes.get("/", async (c)=>{
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Map.set() above guarantees key exists
         grouped.get(key).push(post);
     }
-    return c.html(/*#__PURE__*/ _jsx(BaseLayout, {
+    // Transform to View Models
+    const mediaCtx = createMediaContext(c);
+    const groups = toArchiveGroups(grouped, mediaCtx);
+    const components = c.var.config.theme?.components;
+    const Page = components?.ArchivePage ?? DefaultArchivePage;
+    return renderPublicPage(c, {
         title: `Archive - ${navData.siteName}`,
-        c: c,
-        children: /*#__PURE__*/ _jsx(SiteLayout, {
-            ...navData,
-            children: /*#__PURE__*/ _jsx(ArchiveContent, {
-                displayPosts: displayPosts,
-                hasMore: hasMore,
-                nextCursor: nextCursor,
-                type: type,
-                grouped: grouped,
-                replyCounts: replyCounts
-            })
+        navData,
+        content: /*#__PURE__*/ _jsx(Page, {
+            groups: groups,
+            hasMore: hasMore,
+            nextCursor: nextCursor,
+            type: type,
+            theme: components
         })
-    }));
+    });
 });

package/dist/routes/pages/collection.js

@@ -1,85 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Collection Page Route
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
+import { CollectionPage as DefaultCollectionPage } from "../../theme/pages/CollectionPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewsFromPosts } from "../../lib/view.js";
 export const collectionRoutes = new Hono();
-function CollectionContent({ collection, posts }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    return /*#__PURE__*/ _jsxs("div", {
-        children: [
-            /*#__PURE__*/ _jsxs("header", {
-                class: "mb-8",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        class: "text-2xl font-semibold",
-                        children: collection.title
-                    }),
-                    collection.description && /*#__PURE__*/ _jsx("p", {
-                        class: "text-muted-foreground mt-2",
-                        children: collection.description
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("main", {
-                class: "flex flex-col gap-6",
-                children: posts.length === 0 ? /*#__PURE__*/ _jsx("p", {
-                    class: "text-muted-foreground",
-                    children: $__i18n._({
-                        id: "J4FNfC",
-                        message: "No posts in this collection."
-                    })
-                }) : posts.map((post)=>/*#__PURE__*/ _jsxs("article", {
-                        class: "h-entry",
-                        children: [
-                            post.title && /*#__PURE__*/ _jsx("h2", {
-                                class: "p-name text-lg font-medium mb-2",
-                                children: /*#__PURE__*/ _jsx("a", {
-                                    href: `/p/${sqid.encode(post.id)}`,
-                                    class: "u-url hover:underline",
-                                    children: post.title
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                class: "e-content prose prose-sm",
-                                dangerouslySetInnerHTML: {
-                                    __html: post.contentHtml || ""
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx("footer", {
-                                class: "mt-2 text-sm text-muted-foreground",
-                                children: /*#__PURE__*/ _jsx("time", {
-                                    class: "dt-published",
-                                    datetime: time.toISOString(post.publishedAt),
-                                    children: time.formatDate(post.publishedAt)
-                                })
-                            })
-                        ]
-                    }, post.id))
-            })
-        ]
-    });
-}
 collectionRoutes.get("/:path", async (c)=>{
     const path = c.req.param("path");
     const collection = await c.var.services.collections.getByPath(path);
     if (!collection) return c.notFound();
     const posts = await c.var.services.collections.getPosts(collection.id);
     const navData = await getNavigationData(c);
-    return c.html(/*#__PURE__*/ _jsx(BaseLayout, {
+    // Transform to View Models
+    const mediaCtx = createMediaContext(c);
+    const postViews = toPostViewsFromPosts(posts, mediaCtx);
+    const components = c.var.config.theme?.components;
+    const Page = components?.CollectionPage ?? DefaultCollectionPage;
+    return renderPublicPage(c, {
         title: `${collection.title} - ${navData.siteName}`,
         description: collection.description ?? undefined,
-        c: c,
-        children: /*#__PURE__*/ _jsx(SiteLayout, {
-            ...navData,
-            children: /*#__PURE__*/ _jsx(CollectionContent, {
-                collection: collection,
-                posts: posts
-            })
+        navData,
+        content: /*#__PURE__*/ _jsx(Page, {
+            collection: collection,
+            posts: postViews,
+            theme: components
         })
-    }));
+    });
 });

package/dist/routes/pages/home.js

@@ -1,31 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Home Page Route
  *
  * Timeline feed with per-type card components and thread previews.
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
 import { buildMediaMap } from "../../lib/media-helpers.js";
-import { resolveTimelineFeed } from "../../lib/theme-components.js";
-import { TimelineFeed as DefaultTimelineFeed } from "../../theme/components/timeline/TimelineFeed.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { HomePage as DefaultHomePage } from "../../theme/pages/HomePage.js";
+import { createMediaContext, toPostView, toPostViews } from "../../lib/view.js";
 const PAGE_SIZE = 20;
 export const homeRoutes = new Hono();
-function HomeContent({ FeedComponent, feedProps }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: feedProps.items.length === 0 ? /*#__PURE__*/ _jsx("p", {
-            class: "text-muted-foreground",
-            children: $__i18n._({
-                id: "ODiSoW",
-                message: "No posts yet."
-            })
-        }) : /*#__PURE__*/ _jsx(FeedComponent, {
-            ...feedProps
-        })
-    });
-}
 homeRoutes.get("/", async (c)=>{
     const navData = await getNavigationData(c);
     // Fetch one extra to determine if there are more
@@ -45,10 +30,8 @@ homeRoutes.get("/", async (c)=>{
     // Batch load media attachments
     const postIds = displayPosts.map((p)=>p.id);
     const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
-    const r2PublicUrl = c.env.R2_PUBLIC_URL;
-    const imageTransformUrl = c.env.IMAGE_TRANSFORM_URL;
-    const s3PublicUrl = c.env.S3_PUBLIC_URL;
-    const mediaMap = buildMediaMap(rawMediaMap, r2PublicUrl, imageTransformUrl, s3PublicUrl);
+    const mediaCtx = createMediaContext(c);
+    const mediaMap = buildMediaMap(rawMediaMap, mediaCtx.r2PublicUrl, mediaCtx.imageTransformUrl, mediaCtx.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);
@@ -61,50 +44,45 @@ homeRoutes.get("/", async (c)=>{
             previewReplyIds.push(reply.id);
         }
     }
-    const previewMediaMap = previewReplyIds.length > 0 ? buildMediaMap(await c.var.services.media.getByPostIds(previewReplyIds), r2PublicUrl, imageTransformUrl, s3PublicUrl) : new Map();
-    // Assemble timeline items
+    const previewMediaMap = previewReplyIds.length > 0 ? buildMediaMap(await c.var.services.media.getByPostIds(previewReplyIds), mediaCtx.r2PublicUrl, mediaCtx.imageTransformUrl, mediaCtx.s3PublicUrl) : new Map();
+    // Assemble timeline items with View Models
     const items = displayPosts.map((post)=>{
-        const postWithMedia = {
+        const postView = toPostView({
             ...post,
             mediaAttachments: mediaMap.get(post.id) ?? []
-        };
+        }, mediaCtx);
         const replyCount = replyCounts.get(post.id) ?? 0;
         const previewReplies = threadPreviews.get(post.id);
         if (replyCount > 0 && previewReplies) {
             return {
-                post: postWithMedia,
+                post: postView,
                 threadPreview: {
-                    replies: previewReplies.map((r)=>({
+                    replies: toPostViews(previewReplies.map((r)=>({
                             ...r,
                             mediaAttachments: previewMediaMap.get(r.id) ?? []
-                        })),
+                        })), mediaCtx),
                     totalReplyCount: replyCount
                 }
             };
         }
         return {
-            post: postWithMedia
+            post: postView
         };
     });
     // Determine next cursor
     const lastPost = displayPosts[displayPosts.length - 1];
     const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
-    // Resolve theme components
-    const Feed = resolveTimelineFeed(DefaultTimelineFeed, c.var.config.theme?.components);
-    const feedProps = {
-        items,
-        hasMore,
-        nextCursor
-    };
-    return c.html(/*#__PURE__*/ _jsx(BaseLayout, {
+    // Resolve page component
+    const components = c.var.config.theme?.components;
+    const Page = components?.HomePage ?? DefaultHomePage;
+    return renderPublicPage(c, {
         title: navData.siteName,
-        c: c,
-        children: /*#__PURE__*/ _jsx(SiteLayout, {
-            ...navData,
-            children: /*#__PURE__*/ _jsx(HomeContent, {
-                FeedComponent: Feed,
-                feedProps: feedProps
-            })
+        navData,
+        content: /*#__PURE__*/ _jsx(Page, {
+            items: items,
+            hasMore: hasMore,
+            nextCursor: nextCursor,
+            theme: components
         })
-    }));
+    });
 });

package/dist/routes/pages/page.js

@@ -1,29 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Custom Page Route
  *
  * Catch-all route for custom pages accessible via their path field
  */ import { Hono } from "hono";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
+import { SinglePage as DefaultSinglePage } from "../../theme/pages/SinglePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewFromPost } from "../../lib/view.js";
 export const pageRoutes = new Hono();
-function PageContent({ page }) {
-    return /*#__PURE__*/ _jsxs("article", {
-        class: "h-entry",
-        children: [
-            page.title && /*#__PURE__*/ _jsx("h1", {
-                class: "p-name text-3xl font-semibold mb-6",
-                children: page.title
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                class: "e-content prose",
-                dangerouslySetInnerHTML: {
-                    __html: page.contentHtml || ""
-                }
-            })
-        ]
-    });
-}
 // Catch-all for custom page paths
 pageRoutes.get("/:path", async (c)=>{
     const path = c.req.param("path");
@@ -38,15 +23,18 @@ pageRoutes.get("/:path", async (c)=>{
         return c.notFound();
     }
     const navData = await getNavigationData(c);
-    return c.html(/*#__PURE__*/ _jsx(BaseLayout, {
+    // Transform to View Model
+    const mediaCtx = createMediaContext(c);
+    const pageView = toPostViewFromPost(page, mediaCtx);
+    const components = c.var.config.theme?.components;
+    const Page = components?.SinglePage ?? DefaultSinglePage;
+    return renderPublicPage(c, {
         title: `${page.title} - ${navData.siteName}`,
         description: page.content?.slice(0, 160),
-        c: c,
-        children: /*#__PURE__*/ _jsx(SiteLayout, {
-            ...navData,
-            children: /*#__PURE__*/ _jsx(PageContent, {
-                page: page
-            })
+        navData,
+        content: /*#__PURE__*/ _jsx(Page, {
+            page: pageView,
+            theme: components
         })
-    }));
+    });
 });

package/dist/routes/pages/post.js

@@ -1,54 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx } from "hono/jsx/jsx-runtime";
 /**
  * Single Post Page Route
  */ import { Hono } from "hono";
-import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import { MediaGallery } from "../../theme/components/index.js";
+import { PostPage as DefaultPostPage } from "../../theme/pages/PostPage.js";
 import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
-import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "../../lib/image.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { buildMediaMap } from "../../lib/media-helpers.js";
+import { createMediaContext, toPostView } from "../../lib/view.js";
 export const postRoutes = new Hono();
-function PostContent({ post, mediaAttachments }) {
-    const { i18n: $__i18n, _: $__ } = $_useLingui();
-    return /*#__PURE__*/ _jsxs("article", {
-        class: "h-entry",
-        children: [
-            post.title && /*#__PURE__*/ _jsx("h1", {
-                class: "p-name text-2xl font-semibold mb-4",
-                children: post.title
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                class: "e-content prose",
-                dangerouslySetInnerHTML: {
-                    __html: post.contentHtml || ""
-                }
-            }),
-            mediaAttachments.length > 0 && /*#__PURE__*/ _jsx(MediaGallery, {
-                attachments: mediaAttachments
-            }),
-            /*#__PURE__*/ _jsxs("footer", {
-                class: "mt-6 pt-4 border-t text-sm text-muted-foreground",
-                children: [
-                    /*#__PURE__*/ _jsx("time", {
-                        class: "dt-published",
-                        datetime: time.toISOString(post.publishedAt),
-                        children: time.formatDate(post.publishedAt)
-                    }),
-                    /*#__PURE__*/ _jsx("a", {
-                        href: `/p/${sqid.encode(post.id)}`,
-                        class: "u-url ml-4",
-                        children: $__i18n._({
-                            id: "D9Oea+",
-                            message: "Permalink"
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}
 postRoutes.get("/:id", async (c)=>{
     const paramId = c.req.param("id");
     // Try to decode as sqid first
@@ -67,42 +27,28 @@ postRoutes.get("/:id", async (c)=>{
     if (post.visibility === "draft") {
         return c.notFound();
     }
-    // Load media attachments
-    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 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.storageKey, publicUrl),
-            previewUrl: getImageUrl(getMediaUrl(m.id, m.storageKey, publicUrl), imageTransformUrl, {
-                width: 400,
-                quality: 80,
-                format: "auto",
-                fit: "cover"
-            }),
-            alt: m.alt,
-            blurhash: m.blurhash,
-            width: m.width,
-            height: m.height,
-            position: m.position,
-            mimeType: m.mimeType
-        };
-    });
+    // Batch load media attachments
+    const rawMediaMap = await c.var.services.media.getByPostIds([
+        post.id
+    ]);
+    const mediaCtx = createMediaContext(c);
+    const mediaMap = buildMediaMap(rawMediaMap, mediaCtx.r2PublicUrl, mediaCtx.imageTransformUrl, mediaCtx.s3PublicUrl);
+    // Transform to View Model
+    const postView = toPostView({
+        ...post,
+        mediaAttachments: mediaMap.get(post.id) ?? []
+    }, mediaCtx);
     const navData = await getNavigationData(c);
     const title = post.title || navData.siteName;
-    return c.html(/*#__PURE__*/ _jsx(BaseLayout, {
-        title: title,
+    const components = c.var.config.theme?.components;
+    const Page = components?.PostPage ?? DefaultPostPage;
+    return renderPublicPage(c, {
+        title,
         description: post.content?.slice(0, 160),
-        c: c,
-        children: /*#__PURE__*/ _jsx(SiteLayout, {
-            ...navData,
-            children: /*#__PURE__*/ _jsx(PostContent, {
-                post: post,
-                mediaAttachments: mediaAttachments
-            })
+        navData,
+        content: /*#__PURE__*/ _jsx(Page, {
+            post: postView,
+            theme: components
         })
-    }));
+    });
 });