@jant/core 0.3.23 → 0.3.25

package/src/ui/pages/CollectionsPage.tsx

@@ -0,0 +1,73 @@
+/**
+ * Collections Listing Page
+ *
+ * Lists all collections with titles, descriptions, and post counts.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { CollectionsPageProps } from "../../types.js";
+
+export const CollectionsPage: FC<CollectionsPageProps> = ({ collections }) => {
+  const { t } = useLingui();
+
+  return (
+    <div class="py-6" data-page="collections">
+      <header class="mb-8">
+        <h1 class="text-2xl font-semibold">
+          {t({
+            message: "Collections",
+            comment: "@context: Collections page heading",
+          })}
+        </h1>
+      </header>
+
+      <main>
+        {collections.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No collections yet.",
+              comment: "@context: Empty state message on collections page",
+            })}
+          </p>
+        ) : (
+          <div class="divide-y divide-border">
+            {collections.map((collection) => (
+              <a
+                key={collection.id}
+                href={"/c/" + collection.slug}
+                class="block py-4 hover:bg-accent/50 -mx-4 px-4 rounded-md transition-colors"
+              >
+                <div class="flex items-center gap-3">
+                  {collection.icon && (
+                    <span class="text-2xl">{collection.icon}</span>
+                  )}
+                  <div class="flex-1 min-w-0">
+                    <h2 class="font-medium">{collection.title}</h2>
+                    {collection.description && (
+                      <p class="text-sm text-muted-foreground mt-1">
+                        {collection.description}
+                      </p>
+                    )}
+                  </div>
+                  <span class="text-sm text-muted-foreground shrink-0">
+                    {collection.postCount}{" "}
+                    {collection.postCount === 1
+                      ? t({
+                          message: "post",
+                          comment: "@context: Singular post count label",
+                        })
+                      : t({
+                          message: "posts",
+                          comment: "@context: Plural post count label",
+                        })}
+                  </span>
+                </div>
+              </a>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};

package/src/ui/pages/FeaturedPage.tsx

@@ -0,0 +1,31 @@
+/**
+ * Featured Page
+ *
+ * Shows featured posts as a timeline feed.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { FeaturedPageProps } from "../../types.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
+
+export const FeaturedPage: FC<FeaturedPageProps> = ({ items }) => {
+  const { t } = useLingui();
+
+  return (
+    <div data-page="featured">
+      <main>
+        {items.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No featured posts yet.",
+              comment: "@context: Empty state message on featured page",
+            })}
+          </p>
+        ) : (
+          <TimelineFeed items={items} />
+        )}
+      </main>
+    </div>
+  );
+};

package/src/ui/pages/HomePage.tsx

@@ -0,0 +1,37 @@
+/**
+ * Home Page
+ *
+ * Timeline feed with per-type card components and thread previews.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { HomePageProps } from "../../types.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
+
+export const HomePage: FC<HomePageProps> = ({
+  items,
+  currentPage,
+  totalPages,
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <div data-page="home">
+      {items.length === 0 ? (
+        <p class="py-12 text-center text-muted-foreground">
+          {t({
+            message: "No posts yet.",
+            comment: "@context: Empty state message on home page",
+          })}
+        </p>
+      ) : (
+        <TimelineFeed
+          items={items}
+          currentPage={currentPage}
+          totalPages={totalPages}
+        />
+      )}
+    </div>
+  );
+};

package/src/ui/pages/PostPage.tsx

@@ -0,0 +1,56 @@
+/**
+ * Single Post Page
+ *
+ * Single post view — clean, no card border, with divider footer.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { PostPageProps } from "../../types.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
+
+export const PostPage: FC<PostPageProps> = ({ post }) => {
+  const { t } = useLingui();
+
+  return (
+    <article
+      class="h-entry py-6"
+      data-page="post"
+      data-post
+      data-format={post.format}
+    >
+      {post.title && (
+        <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
+      )}
+
+      {post.bodyHtml && (
+        <div
+          class="e-content prose"
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+
+      {post.media.length > 0 && (
+        <div class="mt-4" data-post-media>
+          <MediaGallery attachments={post.media} />
+        </div>
+      )}
+
+      <footer
+        class="mt-6 pt-4 border-t text-sm text-muted-foreground"
+        data-post-meta
+      >
+        <time class="dt-published" datetime={post.publishedAt}>
+          {post.publishedAtFormatted}
+        </time>
+        <a href={post.permalink} class="u-url ml-4">
+          {t({
+            message: "Permalink",
+            comment: "@context: Link to permanent URL of post",
+          })}
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/{themes/minimal → ui}/pages/SearchPage.tsx

@@ -1,13 +1,13 @@
 /**
- * Minimal Theme - Search Page
+ * Search Page
  *
- * Minimal search form + results with page-based pagination.
+ * Search form and results — divider-separated instead of bordered cards.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { SearchPageProps } from "../../../types.js";
-import { PagePagination as DefaultPagePagination } from "../../../theme/components/Pagination.js";
+import type { SearchPageProps } from "../../types.js";
+import { PagePagination } from "../shared/Pagination.js";
 
 export const SearchPage: FC<SearchPageProps> = ({
   query,
@@ -15,7 +15,6 @@ export const SearchPage: FC<SearchPageProps> = ({
   error,
   hasMore,
   page,
-  theme,
 }) => {
   const { t } = useLingui();
   const searchTitle = t({
@@ -23,12 +22,11 @@ export const SearchPage: FC<SearchPageProps> = ({
     comment: "@context: Search page title",
   });
 
-  const PaginationComponent = theme?.PagePagination ?? DefaultPagePagination;
-
   return (
-    <div>
+    <div class="py-6" data-page="search">
       <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
@@ -51,12 +49,14 @@ export const SearchPage: FC<SearchPageProps> = ({
         </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">
@@ -79,26 +79,30 @@ export const SearchPage: FC<SearchPageProps> = ({
 
           {results.length > 0 && (
             <>
-              <div class="flex flex-col gap-4">
+              <div class="divide-y divide-border">
                 {results.map((result) => (
-                  <article key={result.post.id} class="py-3">
-                    <a href={result.post.permalink} class="block group">
-                      <h2 class="font-medium group-hover:underline">
+                  <article
+                    key={result.post.id}
+                    class="py-4"
+                    data-post
+                    data-format={result.post.format}
+                  >
+                    <a href={result.post.permalink} class="block">
+                      <h2 class="font-medium hover:underline">
                         {result.post.title ||
-                          result.post.content?.slice(0, 60) ||
-                          `Post #${result.post.id}`}
+                          result.post.excerpt?.slice(0, 60) ||
+                          "Post #" + result.post.id}
                       </h2>
 
                       {result.snippet && (
                         <p
-                          class="text-sm text-muted-foreground mt-1 line-clamp-2"
+                          class="text-sm text-muted-foreground mt-2 line-clamp-2"
                           dangerouslySetInnerHTML={{ __html: result.snippet }}
                         />
                       )}
 
-                      <footer class="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
-                        <span>{result.post.type}</span>
-                        <span>&middot;</span>
+                      <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+                        <span class="badge-outline">{result.post.format}</span>
                         <time datetime={result.post.publishedAt}>
                           {result.post.publishedAtFormatted}
                         </time>
@@ -108,8 +112,8 @@ export const SearchPage: FC<SearchPageProps> = ({
                 ))}
               </div>
 
-              <PaginationComponent
-                baseUrl={`/search?q=${encodeURIComponent(query)}`}
+              <PagePagination
+                baseUrl={"/search?q=" + encodeURIComponent(query)}
                 currentPage={page}
                 hasMore={hasMore}
               />

package/src/{themes/minimal → ui}/pages/SinglePage.tsx

@@ -1,22 +1,22 @@
 /**
- * Minimal Theme - Single Page
+ * Single Page (Custom Page)
  *
- * Simple page content layout for type="page" posts.
+ * Custom page view — clean centered content.
  */
 
 import type { FC } from "hono/jsx";
-import type { SinglePageProps } from "../../../types.js";
+import type { SinglePageProps } from "../../types.js";
 
 export const SinglePage: FC<SinglePageProps> = ({ page }) => {
   return (
-    <article class="h-entry">
+    <article class="h-entry py-6" data-page="single-page">
       {page.title && (
         <h1 class="p-name text-2xl font-semibold mb-6">{page.title}</h1>
       )}
 
       <div
         class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
+        dangerouslySetInnerHTML={{ __html: page.bodyHtml || "" }}
       />
     </article>
   );

package/src/ui/shared/MediaGallery.tsx

@@ -0,0 +1,59 @@
+/**
+ * Media Gallery Component
+ *
+ * Renders media attachments in a horizontal scrollable row,
+ * similar to an image carousel.
+ */
+
+import type { FC } from "hono/jsx";
+import type { MediaView } from "../../types.js";
+
+export interface MediaGalleryProps {
+  attachments: MediaView[];
+}
+
+export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
+  const images = attachments.filter((a) => a.mimeType.startsWith("image/"));
+  if (images.length === 0) return null;
+
+  const single = images.length === 1;
+
+  return (
+    <div
+      class={`mt-3 flex gap-2 ${single ? "" : "overflow-x-auto scroll-smooth snap-x snap-mandatory"}`}
+      style={
+        single ? undefined : "scrollbar-width: none; -ms-overflow-style: none;"
+      }
+    >
+      {images.map((img) => {
+        const aspectRatio =
+          img.width && img.height ? img.width / img.height : 4 / 3;
+        const itemWidth = single
+          ? undefined
+          : `${Math.round(320 * Math.min(Math.max(aspectRatio, 0.6), 1.6))}px`;
+
+        return (
+          <a
+            key={img.id}
+            href={img.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={`${single ? "" : "shrink-0 snap-start"} block rounded-lg overflow-hidden`}
+            style={single ? undefined : { width: itemWidth, maxWidth: "85%" }}
+          >
+            <img
+              src={img.thumbnailUrl}
+              alt={img.altText || ""}
+              class={
+                single
+                  ? "rounded-lg max-w-full max-h-96 h-auto object-contain"
+                  : "h-80 w-full object-cover"
+              }
+              loading="lazy"
+            />
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/{theme/components → ui/shared}/Pagination.tsx

@@ -6,6 +6,7 @@
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
+import { getPageNumbers } from "../../lib/pagination.js";
 
 export interface PaginationProps {
   /** Base URL for pagination links (e.g., "/archive", "/search?q=test") */
@@ -115,15 +116,20 @@ export const LoadMore: FC<LoadMoreProps> = ({ href, hasMore, text }) => {
 };
 
 /**
- * Page-based pagination (for search results etc.)
+ * Page-based pagination with optional numbered pages.
+ *
+ * When `totalPages` is provided, renders numbered page links with ellipsis.
+ * Otherwise falls back to simple Previous/Next navigation.
  */
 export interface PagePaginationProps {
   /** Base URL (query params will be added) */
   baseUrl: string;
   /** Current page (1-indexed) */
   currentPage: number;
-  /** Whether there are more pages */
-  hasMore: boolean;
+  /** Whether there are more pages (used when totalPages is unknown) */
+  hasMore?: boolean;
+  /** Total number of pages (enables numbered pagination) */
+  totalPages?: number;
   /** Page parameter name (default: "page") */
   pageParam?: string;
 }
@@ -132,11 +138,12 @@ export const PagePagination: FC<PagePaginationProps> = ({
   baseUrl,
   currentPage,
   hasMore,
+  totalPages,
   pageParam = "page",
 }) => {
   const { t } = useLingui();
   const hasPrev = currentPage > 1;
-  const hasNext = hasMore;
+  const hasNext = totalPages ? currentPage < totalPages : (hasMore ?? false);
 
   if (!hasPrev && !hasNext) {
     return null;
@@ -161,6 +168,62 @@ export const PagePagination: FC<PagePaginationProps> = ({
     message: "Next",
     comment: "@context: Pagination button - next page",
   });
+
+  // Numbered pagination when totalPages is known
+  if (totalPages && totalPages > 1) {
+    const pageNumbers = getPageNumbers(currentPage, totalPages);
+
+    return (
+      <nav
+        class="flex items-center justify-center gap-4 py-6 text-sm"
+        aria-label="Pagination"
+      >
+        {hasPrev ? (
+          <a
+            href={buildUrl(currentPage - 1)}
+            class="underline text-muted-foreground hover:text-foreground"
+          >
+            {prevText}
+          </a>
+        ) : (
+          <span class="text-muted-foreground/50">{prevText}</span>
+        )}
+
+        {pageNumbers.map((page, i) =>
+          page === 0 ? (
+            <span key={`ellipsis-${i}`} class="text-muted-foreground">
+              ...
+            </span>
+          ) : page === currentPage ? (
+            <span key={page} aria-current="page">
+              {page}
+            </span>
+          ) : (
+            <a
+              key={page}
+              href={buildUrl(page)}
+              class="underline text-muted-foreground hover:text-foreground"
+            >
+              {page}
+            </a>
+          ),
+        )}
+
+        {hasNext ? (
+          <a
+            href={buildUrl(currentPage + 1)}
+            class="underline text-muted-foreground hover:text-foreground"
+          >
+            {nextText}
+          </a>
+        ) : (
+          <span class="text-muted-foreground/50">{nextText}</span>
+        )}
+      </nav>
+    );
+  }
+
+  // Simple prev/next fallback when totalPages is unknown
   const pageText = t({
     message: "Page {page}",
     comment: "@context: Pagination - current page indicator",

package/src/{theme/components → ui/shared}/ThreadView.tsx

@@ -34,7 +34,10 @@ const ThreadPost: FC<{
     >
       {post.title && (
         <h2 class="p-name text-lg font-medium mb-2">
-          <a href={`/p/${sqid.encode(post.id)}`} class="u-url hover:underline">
+          <a
+            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
+            class="u-url hover:underline"
+          >
             {post.title}
           </a>
         </h2>
@@ -42,7 +45,7 @@ const ThreadPost: FC<{
 
       <div
         class="e-content prose prose-sm"
-        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
       />
 
       <footer class="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
@@ -62,7 +65,7 @@ const ThreadPost: FC<{
         )}
         {!isCurrent && (
           <a
-            href={`/p/${sqid.encode(post.id)}`}
+            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
             class="text-xs hover:underline"
           >
             {t({

package/src/ui/shared/__tests__/pagination.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { getPageNumbers } from "../../../lib/pagination.js";
+
+describe("getPageNumbers", () => {
+  it("returns all pages when totalPages <= 7", () => {
+    expect(getPageNumbers(1, 1)).toEqual([1]);
+    expect(getPageNumbers(1, 5)).toEqual([1, 2, 3, 4, 5]);
+    expect(getPageNumbers(3, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it("shows ellipsis for gaps in large page ranges", () => {
+    // Page 1 of 20: 1, 2, ..., 20
+    const result = getPageNumbers(1, 20);
+    expect(result).toEqual([1, 2, 0, 20]);
+  });
+
+  it("shows ellipsis on both sides for middle pages", () => {
+    // Page 10 of 20: 1, ..., 9, 10, 11, ..., 20
+    const result = getPageNumbers(10, 20);
+    expect(result).toEqual([1, 0, 9, 10, 11, 0, 20]);
+  });
+
+  it("shows ellipsis only on right for early pages", () => {
+    // Page 3 of 20: 1, 2, 3, 4, ..., 20
+    const result = getPageNumbers(3, 20);
+    expect(result).toEqual([1, 2, 3, 4, 0, 20]);
+  });
+
+  it("shows ellipsis only on left for late pages", () => {
+    // Page 18 of 20: 1, ..., 17, 18, 19, 20
+    const result = getPageNumbers(18, 20);
+    expect(result).toEqual([1, 0, 17, 18, 19, 20]);
+  });
+
+  it("handles last page", () => {
+    // Page 20 of 20: 1, ..., 19, 20
+    const result = getPageNumbers(20, 20);
+    expect(result).toEqual([1, 0, 19, 20]);
+  });
+
+  it("handles page 2 of large range", () => {
+    // Page 2 of 20: 1, 2, 3, ..., 20
+    const result = getPageNumbers(2, 20);
+    expect(result).toEqual([1, 2, 3, 0, 20]);
+  });
+});

package/src/ui/shared/index.ts

@@ -0,0 +1,12 @@
+export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { MediaGallery, type MediaGalleryProps } from "./MediaGallery.js";
+export {
+  Pagination,
+  LoadMore,
+  PagePagination,
+  type PaginationProps,
+  type LoadMoreProps,
+  type PagePaginationProps,
+} from "./Pagination.js";
+export { getPageNumbers } from "../../lib/pagination.js";
+export { ThreadView, type ThreadViewProps } from "./ThreadView.js";