@jant/core 0.3.24 → 0.3.26

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/{themes/threads → ui}/pages/HomePage.tsx

@@ -1,26 +1,23 @@
 /**
- * Threads Theme - Home Page
+ * Home Page
  *
- * Clean feed of posts separated by dividers.
+ * 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 as DefaultTimelineFeed } from "../timeline/TimelineFeed.js";
+import type { HomePageProps } from "../../types.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
 
 export const HomePage: FC<HomePageProps> = ({
   items,
-  hasMore,
-  nextCursor,
-  theme,
+  currentPage,
+  totalPages,
 }) => {
   const { t } = useLingui();
 
-  const Feed = theme?.TimelineFeed ?? DefaultTimelineFeed;
-
   return (
-    <>
+    <div data-page="home">
       {items.length === 0 ? (
         <p class="py-12 text-center text-muted-foreground">
           {t({
@@ -29,13 +26,12 @@ export const HomePage: FC<HomePageProps> = ({
           })}
         </p>
       ) : (
-        <Feed
+        <TimelineFeed
           items={items}
-          hasMore={hasMore}
-          nextCursor={nextCursor}
-          theme={theme}
+          currentPage={currentPage}
+          totalPages={totalPages}
         />
       )}
-    </>
+    </div>
   );
 };

package/src/{themes/threads → ui}/pages/PostPage.tsx

@@ -1,37 +1,46 @@
 /**
- * Threads Theme - Post Page
+ * 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 as DefaultMediaGallery } from "../../../theme/index.js";
+import type { PostPageProps } from "../../types.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
 
-export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
+export const PostPage: FC<PostPageProps> = ({ post }) => {
   const { t } = useLingui();
 
-  const Gallery = theme?.MediaGallery ?? DefaultMediaGallery;
-
   return (
-    <article class="h-entry py-6">
+    <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>
       )}
 
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
-      />
+      {post.bodyHtml && (
+        <div
+          class="e-content prose"
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
 
       {post.media.length > 0 && (
-        <div class="threads-media mt-4">
-          <Gallery attachments={post.media} />
+        <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">
+      <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>

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

@@ -1,13 +1,13 @@
 /**
- * Threads Theme - Search Page
+ * Search Page
  *
  * 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/index.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,10 +22,8 @@ export const SearchPage: FC<SearchPageProps> = ({
     comment: "@context: Search page title",
   });
 
-  const PaginationComponent = theme?.PagePagination ?? DefaultPagePagination;
-
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="search">
       <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
 
       {/* Search form */}
@@ -84,12 +81,17 @@ export const SearchPage: FC<SearchPageProps> = ({
             <>
               <div class="divide-y divide-border">
                 {results.map((result) => (
-                  <article key={result.post.id} class="py-4">
+                  <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.excerpt?.slice(0, 60) ||
-                          `Post #${result.post.id}`}
+                          "Post #" + result.post.id}
                       </h2>
 
                       {result.snippet && (
@@ -110,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/threads → ui}/pages/SinglePage.tsx

@@ -1,15 +1,15 @@
 /**
- * Threads Theme - Single Page
+ * Single Page (Custom Page)
  *
- * Custom page (type "page") view — clean centered content.
+ * 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 py-6">
+    <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>
       )}

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

@@ -2,7 +2,7 @@
  * Media Gallery Component
  *
  * Renders media attachments in a horizontal scrollable row,
- * similar to Threads.net's image carousel.
+ * similar to an image carousel.
  */
 
 import type { FC } from "hono/jsx";

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

@@ -35,7 +35,7 @@ const ThreadPost: FC<{
       {post.title && (
         <h2 class="p-name text-lg font-medium mb-2">
           <a
-            href={`${post.slug ? `/${post.slug}` : `/p/${sqid.encode(post.id)}`}`}
+            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
             class="u-url hover:underline"
           >
             {post.title}
@@ -65,7 +65,7 @@ const ThreadPost: FC<{
         )}
         {!isCurrent && (
           <a
-            href={`${post.slug ? `/${post.slug}` : `/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";

package/bin/jant.js

@@ -1,185 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Jant CLI
- *
- * Commands:
- *   swizzle <component> [--wrap|--eject]  - Override a theme component
- */
-
-import {  writeFileSync, mkdirSync, existsSync } from "fs";
-import { resolve } from "path";
-
-
-// Available components that can be swizzled
-const SWIZZLABLE_COMPONENTS = {
-  PostCard: {
-    file: "PostCard.tsx",
-    props: "PostCardProps",
-  },
-  PostList: {
-    file: "PostList.tsx",
-    props: "PostListProps",
-  },
-  Pagination: {
-    file: "Pagination.tsx",
-    props: "PaginationProps",
-  },
-  EmptyState: {
-    file: "EmptyState.tsx",
-    props: "EmptyStateProps",
-  },
-  BaseLayout: {
-    file: "BaseLayout.tsx",
-    props: "BaseLayoutProps",
-    isLayout: true,
-  },
-};
-
-function showHelp() {
-  console.log(`
-Jant CLI
-
-Usage:
-  jant swizzle <component> [options]
-
-Commands:
-  swizzle <component>   Override a theme component
-
-Options:
-  --wrap     Create a wrapper around the original component (default)
-  --eject    Copy the full component source for complete customization
-  --list     List available components
-
-Examples:
-  jant swizzle PostCard           # Wrap PostCard component
-  jant swizzle PostCard --eject   # Copy PostCard source
-  jant swizzle --list             # List all swizzlable components
-`);
-}
-
-function listComponents() {
-  console.log("\nAvailable components to swizzle:\n");
-  for (const [name, info] of Object.entries(SWIZZLABLE_COMPONENTS)) {
-    const type = info.isLayout ? "[Layout]" : "[Component]";
-    console.log(`  ${name.padEnd(15)} ${type}`);
-  }
-  console.log("\nUsage: jant swizzle <component> [--wrap|--eject]\n");
-}
-
-function generateWrapperCode(componentName, info) {
-  const importPath = info.isLayout
-    ? "@jant/core/theme/layouts"
-    : "@jant/core/theme/components";
-
-  return `/**
- * Custom ${componentName} component
- *
- * This is a wrapper around the original ${componentName}.
- * You can customize the rendering while keeping the original functionality.
- */
-
-import type { ${info.props} } from "@jant/core";
-import { ${componentName} as Original${componentName} } from "${importPath}";
-
-export function ${componentName}(props: ${info.props}) {
-  // Add your customizations here
-  return (
-    <div class="custom-${componentName.toLowerCase()}-wrapper">
-      <Original${componentName} {...props} />
-    </div>
-  );
-}
-`;
-}
-
-function swizzle(componentName, mode) {
-  const info = SWIZZLABLE_COMPONENTS[componentName];
-  if (!info) {
-    console.error(`Error: Unknown component "${componentName}"`);
-    console.log("\nAvailable components:");
-    listComponents();
-    process.exit(1);
-  }
-
-  const targetDir = info.isLayout
-    ? resolve(process.cwd(), "src/theme/layouts")
-    : resolve(process.cwd(), "src/theme/components");
-
-  const targetFile = resolve(targetDir, info.file);
-
-  // Check if file already exists
-  if (existsSync(targetFile)) {
-    console.error(`Error: ${targetFile} already exists`);
-    console.log("Remove it first if you want to re-swizzle.");
-    process.exit(1);
-  }
-
-  // Create directory if needed
-  mkdirSync(targetDir, { recursive: true });
-
-  if (mode === "eject") {
-    // For eject mode, we'd need to copy the actual source
-    // For now, show a message about where to find it
-    console.log(`
-To eject ${componentName}, copy the source from:
-  node_modules/@jant/core/src/theme/${info.isLayout ? "layouts" : "components"}/${info.file}
-
-Then modify it as needed.
-`);
-    return;
-  }
-
-  // Generate wrapper code
-  const code = generateWrapperCode(componentName, info);
-  writeFileSync(targetFile, code, "utf-8");
-
-  console.log(`
-✓ Created ${targetFile}
-
-Next steps:
-1. Customize the component in the generated file
-2. Import it in your src/index.ts:
-
-   import { ${componentName} } from "./theme/${info.isLayout ? "layouts" : "components"}/${componentName}";
-
-   export default createApp({
-     theme: {
-       components: {
-         ${componentName},
-       },
-     },
-   });
-`);
-}
-
-// Parse arguments
-const args = process.argv.slice(2);
-
-if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
-  showHelp();
-  process.exit(0);
-}
-
-const command = args[0];
-
-if (command === "swizzle") {
-  if (args.includes("--list")) {
-    listComponents();
-    process.exit(0);
-  }
-
-  const componentName = args[1];
-  if (!componentName) {
-    console.error("Error: Component name required");
-    console.log("Usage: jant swizzle <component> [--wrap|--eject]");
-    process.exit(1);
-  }
-
-  const mode = args.includes("--eject") ? "eject" : "wrap";
-  swizzle(componentName, mode);
-} else {
-  console.error(`Unknown command: ${command}`);
-  showHelp();
-  process.exit(1);
-}