@jant/core 0.3.21 → 0.3.23

package/src/routes/pages/home.tsx

@@ -5,20 +5,13 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { FC } from "hono/jsx";
-import type {
-  Bindings,
-  PostWithMedia,
-  TimelineItemData,
-  TimelineFeedProps,
-} from "../../types.js";
+import type { Bindings, TimelineItemView } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-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 "../../themes/minimal/pages/HomePage.js";
+import { createMediaContext, toPostView, toPostViews } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -26,31 +19,6 @@ const PAGE_SIZE = 20;
 
 export const homeRoutes = new Hono<Env>();
 
-function HomeContent({
-  FeedComponent,
-  feedProps,
-}: {
-  FeedComponent: FC<TimelineFeedProps>;
-  feedProps: TimelineFeedProps;
-}) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      {feedProps.items.length === 0 ? (
-        <p class="text-muted-foreground">
-          {t({
-            message: "No posts yet.",
-            comment: "@context: Empty state message on home page",
-          })}
-        </p>
-      ) : (
-        <FeedComponent {...feedProps} />
-      )}
-    </>
-  );
-}
-
 homeRoutes.get("/", async (c) => {
   const navData = await getNavigationData(c);
 
@@ -68,14 +36,12 @@ 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 mediaCtx = createMediaContext(c);
   const mediaMap = buildMediaMap(
     rawMediaMap,
-    r2PublicUrl,
-    imageTransformUrl,
-    s3PublicUrl,
+    mediaCtx.r2PublicUrl,
+    mediaCtx.imageTransformUrl,
+    mediaCtx.s3PublicUrl,
   );
 
   // Get reply counts to identify thread roots
@@ -99,59 +65,59 @@ homeRoutes.get("/", async (c) => {
     previewReplyIds.length > 0
       ? buildMediaMap(
           await c.var.services.media.getByPostIds(previewReplyIds),
-          r2PublicUrl,
-          imageTransformUrl,
-          s3PublicUrl,
+          mediaCtx.r2PublicUrl,
+          mediaCtx.imageTransformUrl,
+          mediaCtx.s3PublicUrl,
         )
       : new Map();
 
-  // Assemble timeline items
-  const items: TimelineItemData[] = displayPosts.map((post) => {
-    const postWithMedia: PostWithMedia = {
-      ...post,
-      mediaAttachments: mediaMap.get(post.id) ?? [],
-    };
+  // Assemble timeline items with View Models
+  const items: TimelineItemView[] = displayPosts.map((post) => {
+    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) => ({
-            ...r,
-            mediaAttachments: previewMediaMap.get(r.id) ?? [],
-          })),
+          replies: toPostViews(
+            previewReplies.map((r) => ({
+              ...r,
+              mediaAttachments: previewMediaMap.get(r.id) ?? [],
+            })),
+            mediaCtx,
+          ),
           totalReplyCount: replyCount,
         },
       };
     }
 
-    return { post: postWithMedia };
+    return { 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: TimelineFeedProps = {
-    items,
-    hasMore,
-    nextCursor,
-  };
-
-  return c.html(
-    <BaseLayout title={navData.siteName} c={c}>
-      <SiteLayout {...navData}>
-        <HomeContent FeedComponent={Feed} feedProps={feedProps} />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Resolve page component
+  const components = c.var.config.theme?.components;
+  const Page = components?.HomePage ?? DefaultHomePage;
+
+  return renderPublicPage(c, {
+    title: navData.siteName,
+    navData,
+    content: (
+      <Page
+        items={items}
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+        theme={components}
+      />
+    ),
+  });
 });

package/src/routes/pages/page.tsx

@@ -5,30 +5,17 @@
  */
 
 import { Hono } from "hono";
-import type { Bindings, Post } from "../../types.js";
+import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
+import { SinglePage as DefaultSinglePage } from "../../themes/minimal/pages/SinglePage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toPostViewFromPost } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const pageRoutes = new Hono<Env>();
 
-function PageContent({ page }: { page: Post }) {
-  return (
-    <article class="h-entry">
-      {page.title && (
-        <h1 class="p-name text-3xl font-semibold mb-6">{page.title}</h1>
-      )}
-
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
-      />
-    </article>
-  );
-}
-
 // Catch-all for custom page paths
 pageRoutes.get("/:path", async (c) => {
   const path = c.req.param("path");
@@ -48,15 +35,17 @@ pageRoutes.get("/:path", async (c) => {
 
   const navData = await getNavigationData(c);
 
-  return c.html(
-    <BaseLayout
-      title={`${page.title} - ${navData.siteName}`}
-      description={page.content?.slice(0, 160)}
-      c={c}
-    >
-      <SiteLayout {...navData}>
-        <PageContent page={page} />
-      </SiteLayout>
-    </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),
+    navData,
+    content: <Page page={pageView} theme={components} />,
+  });
 });

package/src/routes/pages/post.tsx

@@ -3,66 +3,19 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings, Post, MediaAttachment } from "../../types.js";
+import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import { MediaGallery } from "../../theme/components/index.js";
+import { PostPage as DefaultPostPage } from "../../themes/minimal/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";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const postRoutes = new Hono<Env>();
 
-function PostContent({
-  post,
-  mediaAttachments,
-}: {
-  post: Post;
-  mediaAttachments: MediaAttachment[];
-}) {
-  const { t } = useLingui();
-
-  return (
-    <article class="h-entry">
-      {post.title && (
-        <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
-      )}
-
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
-      />
-
-      {mediaAttachments.length > 0 && (
-        <MediaGallery attachments={mediaAttachments} />
-      )}
-
-      <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
-        <time
-          class="dt-published"
-          datetime={time.toISOString(post.publishedAt)}
-        >
-          {time.formatDate(post.publishedAt)}
-        </time>
-        <a href={`/p/${sqid.encode(post.id)}`} class="u-url ml-4">
-          {t({
-            message: "Permalink",
-            comment: "@context: Link to permanent URL of post",
-          })}
-        </a>
-      </footer>
-    </article>
-  );
-}
-
 postRoutes.get("/:id", async (c) => {
   const paramId = c.req.param("id");
 
@@ -87,43 +40,32 @@ postRoutes.get("/:id", async (c) => {
     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;
+  // 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,
+  );
 
-  const mediaAttachments: MediaAttachment[] = 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,
-    };
-  });
+  // 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(
-    <BaseLayout title={title} description={post.content?.slice(0, 160)} c={c}>
-      <SiteLayout {...navData}>
-        <PostContent post={post} mediaAttachments={mediaAttachments} />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  const components = c.var.config.theme?.components;
+  const Page = components?.PostPage ?? DefaultPostPage;
+
+  return renderPublicPage(c, {
+    title,
+    description: post.content?.slice(0, 160),
+    navData,
+    content: <Page post={postView} theme={components} />,
+  });
 });

package/src/routes/pages/search.tsx

@@ -3,15 +3,12 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings } from "../../types.js";
+import type { Bindings, SearchResult } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import type { SearchResult } from "../../services/search.js";
-import { BaseLayout, SiteLayout } from "../../theme/layouts/index.js";
-import { PagePagination } from "../../theme/components/index.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
+import { SearchPage as DefaultSearchPage } from "../../themes/minimal/pages/SearchPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
+import { renderPublicPage } from "../../lib/render.js";
+import { createMediaContext, toSearchResultViews } from "../../lib/view.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -19,128 +16,6 @@ const PAGE_SIZE = 10;
 
 export const searchRoutes = new Hono<Env>();
 
-function SearchContent({
-  query,
-  results,
-  error,
-  hasMore,
-  page,
-}: {
-  query: string;
-  results: SearchResult[];
-  error: string | null;
-  hasMore: boolean;
-  page: number;
-}) {
-  const { t } = useLingui();
-  const searchTitle = t({
-    message: "Search",
-    comment: "@context: Search page title",
-  });
-
-  return (
-    <div>
-      <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
-
-      {/* Search form */}
-      <form method="get" action="/search" class="mb-8">
-        <div class="flex gap-2">
-          <input
-            type="search"
-            name="q"
-            class="input flex-1"
-            placeholder={t({
-              message: "Search posts...",
-              comment: "@context: Search input placeholder",
-            })}
-            value={query}
-            autofocus
-          />
-          <button type="submit" class="btn">
-            {t({
-              message: "Search",
-              comment: "@context: Search submit button",
-            })}
-          </button>
-        </div>
-      </form>
-
-      {/* Error */}
-      {error && (
-        <div class="alert-destructive mb-6">
-          <h2>{error}</h2>
-        </div>
-      )}
-
-      {/* Results */}
-      {query && !error && (
-        <div>
-          <p class="text-sm text-muted-foreground mb-4">
-            {results.length === 0
-              ? t({
-                  message: "No results found.",
-                  comment: "@context: Search empty results",
-                })
-              : results.length === 1
-                ? t({
-                    message: "Found 1 result",
-                    comment: "@context: Search results count - single",
-                  })
-                : t({
-                    message: "Found {count} results",
-                    comment: "@context: Search results count - multiple",
-                    values: { count: String(results.length) },
-                  })}
-          </p>
-
-          {results.length > 0 && (
-            <>
-              <div class="flex flex-col gap-4">
-                {results.map((result) => (
-                  <article
-                    key={result.post.id}
-                    class="p-4 rounded-lg border hover:border-primary"
-                  >
-                    <a href={`/p/${sqid.encode(result.post.id)}`} class="block">
-                      <h2 class="font-medium hover:underline">
-                        {result.post.title ||
-                          result.post.content?.slice(0, 60) ||
-                          `Post #${result.post.id}`}
-                      </h2>
-
-                      {result.snippet && (
-                        <p
-                          class="text-sm text-muted-foreground mt-2 line-clamp-2"
-                          dangerouslySetInnerHTML={{ __html: result.snippet }}
-                        />
-                      )}
-
-                      <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
-                        <span class="badge-outline">{result.post.type}</span>
-                        <time
-                          datetime={time.toISOString(result.post.publishedAt)}
-                        >
-                          {time.formatDate(result.post.publishedAt)}
-                        </time>
-                      </footer>
-                    </a>
-                  </article>
-                ))}
-              </div>
-
-              <PagePagination
-                baseUrl={`/search?q=${encodeURIComponent(query)}`}
-                currentPage={page}
-                hasMore={hasMore}
-              />
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
 searchRoutes.get("/", async (c) => {
   const query = c.req.query("q") || "";
   const pageParam = c.req.query("page");
@@ -149,8 +24,8 @@ searchRoutes.get("/", async (c) => {
   const navData = await getNavigationData(c);
 
   // Only search if there's a query
-  let results: Awaited<ReturnType<typeof c.var.services.search.search>> = [];
-  let error: string | null = null;
+  let results: SearchResult[] = [];
+  let error: string | undefined;
   let hasMore = false;
 
   if (query.trim()) {
@@ -173,24 +48,27 @@ searchRoutes.get("/", async (c) => {
     }
   }
 
-  return c.html(
-    <BaseLayout
-      title={
-        query
-          ? `Search: ${query} - ${navData.siteName}`
-          : `Search - ${navData.siteName}`
-      }
-      c={c}
-    >
-      <SiteLayout {...navData}>
-        <SearchContent
-          query={query}
-          results={results}
-          error={error}
-          hasMore={hasMore}
-          page={page}
-        />
-      </SiteLayout>
-    </BaseLayout>,
-  );
+  // Transform to View Models
+  const mediaCtx = createMediaContext(c);
+  const resultViews = toSearchResultViews(results, mediaCtx);
+
+  const components = c.var.config.theme?.components;
+  const Page = components?.SearchPage ?? DefaultSearchPage;
+
+  return renderPublicPage(c, {
+    title: query
+      ? `Search: ${query} - ${navData.siteName}`
+      : `Search - ${navData.siteName}`,
+    navData,
+    content: (
+      <Page
+        query={query}
+        results={resultViews}
+        error={error}
+        hasMore={hasMore}
+        page={page}
+        theme={components}
+      />
+    ),
+  });
 });

package/src/services/search.ts

@@ -4,15 +4,9 @@
  * Full-text search using FTS5
  */
 
-import type { Post, Visibility } from "../types.js";
+import type { Post, Visibility, SearchResult } from "../types.js";
 
-export interface SearchResult {
-  post: Post;
-  /** FTS5 rank score (lower is better) */
-  rank: number;
-  /** Highlighted snippet from content */
-  snippet?: string;
-}
+export type { SearchResult };
 
 export interface SearchOptions {
   /** Limit number of results */

package/src/styles/components.css

@@ -124,60 +124,6 @@
   }
 }
 
-/* Timeline cards */
-@layer components {
-  .timeline-card {
-    @apply rounded-lg border p-4;
-    border-color: var(--color-border);
-  }
-
-  .timeline-card-link {
-    border-left-width: 4px;
-    border-left-color: var(--color-primary);
-  }
-
-  .timeline-card-quote {
-    border-left-width: 4px;
-    border-left-color: var(--color-muted-foreground);
-    background-color: var(--color-muted);
-  }
-
-  .timeline-card-image {
-    @apply p-0 overflow-hidden;
-  }
-
-  .timeline-card-image-gallery {
-    /* Remove default margin from MediaGallery inside image cards */
-    > div {
-      @apply mt-0;
-    }
-  }
-
-  .timeline-card-compact {
-    @apply p-3 text-sm;
-  }
-
-  .timeline-thread-replies {
-    @apply relative ml-5;
-  }
-
-  .timeline-thread-reply {
-    @apply relative pl-5 mt-3;
-
-    &::after {
-      content: "";
-      @apply absolute left-0 top-0 bottom-0 w-px;
-      background-color: var(--color-border);
-    }
-
-    &::before {
-      content: "";
-      @apply absolute left-0 top-4 h-px w-4;
-      background-color: var(--color-border);
-    }
-  }
-}
-
 @keyframes toast-in {
   from {
     opacity: 0;