@jant/core 0.3.20 → 0.3.22

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 "../../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";
 
 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 "../../theme/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/theme/components/MediaGallery.tsx

@@ -6,10 +6,10 @@
  */
 
 import type { FC } from "hono/jsx";
-import type { MediaAttachment } from "../../types.js";
+import type { MediaView } from "../../types.js";
 
 export interface MediaGalleryProps {
-  attachments: MediaAttachment[];
+  attachments: MediaView[];
 }
 
 export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
@@ -23,8 +23,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
       <div class="mt-3">
         <a href={img.url} target="_blank" rel="noopener noreferrer">
           <img
-            src={img.previewUrl}
-            alt={img.alt || ""}
+            src={img.thumbnailUrl}
+            alt={img.altText || ""}
             width={img.width ?? undefined}
             height={img.height ?? undefined}
             class="rounded-lg max-w-full h-auto"
@@ -47,8 +47,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
             class="aspect-square"
           >
             <img
-              src={img.previewUrl}
-              alt={img.alt || ""}
+              src={img.thumbnailUrl}
+              alt={img.altText || ""}
               class="w-full h-full object-cover"
               loading="lazy"
             />
@@ -70,8 +70,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
           class="row-span-2"
         >
           <img
-            src={first.previewUrl}
-            alt={first.alt || ""}
+            src={first.thumbnailUrl}
+            alt={first.altText || ""}
             class="w-full h-full object-cover"
             loading="lazy"
           />
@@ -85,8 +85,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
             class="aspect-square"
           >
             <img
-              src={img.previewUrl}
-              alt={img.alt || ""}
+              src={img.thumbnailUrl}
+              alt={img.altText || ""}
               class="w-full h-full object-cover"
               loading="lazy"
             />
@@ -111,8 +111,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
           class="relative aspect-square"
         >
           <img
-            src={img.previewUrl}
-            alt={img.alt || ""}
+            src={img.thumbnailUrl}
+            alt={img.altText || ""}
             class="w-full h-full object-cover"
             loading="lazy"
           />

package/src/theme/components/PageForm.tsx

@@ -33,6 +33,7 @@ export const PageForm: FC<PageFormProps> = ({
     <form
       data-signals={signals}
       data-on:submit__prevent={`@post('${action}')`}
+      data-indicator="_loading"
       class="flex flex-col gap-4"
     >
       <div id="page-form-message"></div>
@@ -146,16 +147,25 @@ export const PageForm: FC<PageFormProps> = ({
 
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn">
-          {isEdit
-            ? t({
-                message: "Update Page",
-                comment: "@context: Button to update existing page",
-              })
-            : t({
-                message: "Create Page",
-                comment: "@context: Button to create new page",
-              })}
+        <button type="submit" class="btn" data-attr-disabled="$_loading">
+          <span data-show="!$_loading">
+            {isEdit
+              ? t({
+                  message: "Update Page",
+                  comment: "@context: Button to update existing page",
+                })
+              : t({
+                  message: "Create Page",
+                  comment: "@context: Button to create new page",
+                })}
+          </span>
+          <span data-show="$_loading">
+            {t({
+              message: "Processing...",
+              comment:
+                "@context: Loading text shown on submit button while request is in progress",
+            })}
+          </span>
         </button>
         <a href={cancelUrl} class="btn-outline">
           {t({

package/src/theme/components/PostForm.tsx

@@ -53,6 +53,7 @@ export const PostForm: FC<PostFormProps> = ({
     <form
       data-signals={signals}
       data-on:submit__prevent={`@post('${action}')`}
+      data-indicator="_loading"
       class="flex flex-col gap-4"
     >
       <div id="post-form-message"></div>
@@ -308,16 +309,25 @@ export const PostForm: FC<PostFormProps> = ({
 
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn">
-          {isEdit
-            ? t({
-                message: "Update",
-                comment: "@context: Button to update existing post",
-              })
-            : t({
-                message: "Publish",
-                comment: "@context: Button to publish new post",
-              })}
+        <button type="submit" class="btn" data-attr-disabled="$_loading">
+          <span data-show="!$_loading">
+            {isEdit
+              ? t({
+                  message: "Update",
+                  comment: "@context: Button to update existing post",
+                })
+              : t({
+                  message: "Publish",
+                  comment: "@context: Button to publish new post",
+                })}
+          </span>
+          <span data-show="$_loading">
+            {t({
+              message: "Processing...",
+              comment:
+                "@context: Loading text shown on submit button while request is in progress",
+            })}
+          </span>
         </button>
         <a href="/dash/posts" class="btn-outline">
           {t({ message: "Cancel", comment: "@context: Button to cancel form" })}

package/src/theme/components/index.ts

@@ -31,5 +31,6 @@ export {
   ImageCard,
   ThreadPreview,
   TimelineItem,
+  TimelineItemFromPost,
   TimelineFeed,
 } from "./timeline/index.js";

package/src/theme/components/timeline/ArticleCard.tsx

@@ -6,17 +6,8 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-  const excerpt = post.content
-    ? post.content.length > 160
-      ? post.content.slice(0, 160) + "..."
-      : post.content
-    : null;
-
   return (
     <article
       class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
@@ -25,28 +16,25 @@ export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
         <h2
           class={`p-name font-semibold ${compact ? "text-sm" : "text-lg"} mb-1`}
         >
-          <a href={permalink} class="u-url hover:underline">
+          <a href={post.permalink} class="u-url hover:underline">
             {post.title}
           </a>
         </h2>
       )}
-      {!compact && excerpt && (
+      {!compact && post.excerpt && (
         <p class="e-content text-sm text-muted-foreground line-clamp-3">
-          {excerpt}
+          {post.excerpt}
         </p>
       )}
       <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={permalink} class="u-url hover:underline">
-          <time
-            class="dt-published"
-            datetime={time.toISOString(post.publishedAt)}
-          >
-            {time.formatDate(post.publishedAt)}
+        <a href={post.permalink} class="u-url hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
         {!compact && (
           <span class="ml-2">
-            <a href={permalink} class="hover:underline">
+            <a href={post.permalink} class="hover:underline">
               Read more &rarr;
             </a>
           </span>

package/src/theme/components/timeline/ImageCard.tsx

@@ -7,18 +7,14 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
 import { MediaGallery } from "../MediaGallery.js";
-import * as sqid from "../../../lib/sqid.js";
-import * as time from "../../../lib/time.js";
 
 export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   if (compact) {
     return (
       <article class="h-entry timeline-card timeline-card-compact">
         {post.title && (
           <h2 class="p-name text-sm font-medium mb-1">
-            <a href={permalink} class="u-url hover:underline">
+            <a href={post.permalink} class="u-url hover:underline">
               {post.title}
             </a>
           </h2>
@@ -30,12 +26,9 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
           />
         )}
         <footer class="mt-1 text-xs text-muted-foreground">
-          <a href={permalink} class="u-url hover:underline">
-            <time
-              class="dt-published"
-              datetime={time.toISOString(post.publishedAt)}
-            >
-              {time.formatDate(post.publishedAt)}
+          <a href={post.permalink} class="u-url hover:underline">
+            <time class="dt-published" datetime={post.publishedAt}>
+              {post.publishedAtFormatted}
             </time>
           </a>
         </footer>
@@ -45,15 +38,15 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
 
   return (
     <article class="h-entry timeline-card timeline-card-image">
-      {post.mediaAttachments.length > 0 && (
+      {post.media.length > 0 && (
         <div class="timeline-card-image-gallery">
-          <MediaGallery attachments={post.mediaAttachments} />
+          <MediaGallery attachments={post.media} />
         </div>
       )}
       <div class="p-4">
         {post.title && (
           <h2 class="p-name font-medium mb-1">
-            <a href={permalink} class="u-url hover:underline">
+            <a href={post.permalink} class="u-url hover:underline">
               {post.title}
             </a>
           </h2>
@@ -65,12 +58,9 @@ export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
           />
         )}
         <footer class="mt-2 text-xs text-muted-foreground">
-          <a href={permalink} class="u-url hover:underline">
-            <time
-              class="dt-published"
-              datetime={time.toISOString(post.publishedAt)}
-            >
-              {time.formatDate(post.publishedAt)}
+          <a href={post.permalink} class="u-url hover:underline">
+            <time class="dt-published" datetime={post.publishedAt}>
+              {post.publishedAtFormatted}
             </time>
           </a>
         </footer>