@jant/core 0.3.23 → 0.3.24

package/src/themes/{minimal → threads}/pages/ArchivePage.tsx

@@ -1,106 +1,96 @@
 /**
- * Minimal Theme - Archive Page
+ * Threads Theme - Archive Page
  *
- * Date-first list with type filter and cursor pagination.
+ * Posts grouped by year-month with format filter and cursor pagination.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { ArchivePageProps } from "../../../types.js";
-import { POST_TYPES } from "../../../types.js";
-import { Pagination as DefaultPagination } from "../../../theme/components/Pagination.js";
+import { FORMATS } from "../../../types.js";
+import { Pagination as DefaultPagination } from "../../../theme/index.js";
 
-function getTypeLabel(type: string): string {
+function getFormatLabel(format: string): string {
   const { t } = useLingui();
   const labels: Record<string, string> = {
-    note: t({ message: "Note", comment: "@context: Post type label - note" }),
-    article: t({
-      message: "Article",
-      comment: "@context: Post type label - article",
-    }),
-    link: t({ message: "Link", comment: "@context: Post type label - link" }),
+    note: t({ message: "Note", comment: "@context: Post format label - note" }),
+    link: t({ message: "Link", comment: "@context: Post format label - link" }),
     quote: t({
       message: "Quote",
-      comment: "@context: Post type label - quote",
-    }),
-    image: t({
-      message: "Image",
-      comment: "@context: Post type label - image",
+      comment: "@context: Post format label - quote",
     }),
-    page: t({ message: "Page", comment: "@context: Post type label - page" }),
   };
-  return labels[type] ?? type;
+  return labels[format] ?? format;
 }
 
-function getTypeLabelPlural(type: string): string {
+function getFormatLabelPlural(format: string): string {
   const { t } = useLingui();
   const labels: Record<string, string> = {
     note: t({
       message: "Notes",
-      comment: "@context: Post type label plural - notes",
-    }),
-    article: t({
-      message: "Articles",
-      comment: "@context: Post type label plural - articles",
+      comment: "@context: Post format label plural - notes",
     }),
     link: t({
       message: "Links",
-      comment: "@context: Post type label plural - links",
+      comment: "@context: Post format label plural - links",
     }),
     quote: t({
       message: "Quotes",
-      comment: "@context: Post type label plural - quotes",
-    }),
-    image: t({
-      message: "Images",
-      comment: "@context: Post type label plural - images",
-    }),
-    page: t({
-      message: "Pages",
-      comment: "@context: Post type label plural - pages",
+      comment: "@context: Post format label plural - quotes",
     }),
   };
-  return labels[type] ?? `${type}s`;
+  return labels[format] ?? `${format}s`;
 }
 
 export const ArchivePage: FC<ArchivePageProps> = ({
   groups,
   hasMore,
   nextCursor,
-  type,
+  format,
+  featured,
   theme,
 }) => {
   const { t } = useLingui();
-  const title = type
-    ? getTypeLabelPlural(type)
+  const title = format
+    ? getFormatLabelPlural(format)
     : t({ message: "Archive", comment: "@context: Archive page title" });
 
   const PaginationComponent = theme?.Pagination ?? DefaultPagination;
 
   return (
-    <div>
+    <div class="py-6">
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{title}</h1>
 
+        {/* Format filter */}
         <nav class="flex flex-wrap gap-2 mt-4">
           <a
             href="/archive"
-            class={`text-sm ${!type ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+            class={`badge ${!format && !featured ? "badge-primary" : "badge-outline"}`}
           >
             {t({
               message: "All",
-              comment: "@context: Archive filter - all types",
+              comment: "@context: Archive filter - all formats",
             })}
           </a>
-          {POST_TYPES.filter((t) => t !== "page").map((typeKey) => (
+          {FORMATS.map((formatKey) => (
             <a
-              key={typeKey}
-              href={`/archive?type=${typeKey}`}
-              class={`text-sm ${type === typeKey ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+              key={formatKey}
+              href={`/archive?format=${formatKey}`}
+              class={`badge ${format === formatKey ? "badge-primary" : "badge-outline"}`}
             >
-              {getTypeLabelPlural(typeKey)}
+              {getFormatLabelPlural(formatKey)}
             </a>
           ))}
+          <a
+            href="/archive?featured=true"
+            class={`badge ${featured ? "badge-primary" : "badge-outline"}`}
+          >
+            {t({
+              message: "Featured",
+              comment: "@context: Archive filter - featured posts",
+            })}
+          </a>
         </nav>
       </header>
 
@@ -118,9 +108,12 @@ export const ArchivePage: FC<ArchivePageProps> = ({
               <h2 class="text-lg font-medium mb-4 text-muted-foreground">
                 {group.label}
               </h2>
-              <div class="flex flex-col gap-3">
+              <div class="divide-y divide-border">
                 {group.posts.map((post) => (
-                  <article key={post.id} class="flex items-baseline gap-4">
+                  <article
+                    key={post.id}
+                    class="flex items-baseline gap-4 py-2.5"
+                  >
                     <time
                       class="text-sm text-muted-foreground w-12 shrink-0"
                       datetime={post.publishedAt}
@@ -130,12 +123,12 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                     <div class="flex-1 min-w-0">
                       <a href={post.permalink} class="hover:underline">
                         {post.title ||
-                          post.content?.slice(0, 80) ||
+                          post.excerpt?.slice(0, 80) ||
                           `Post #${post.id}`}
                       </a>
-                      {!type && (
-                        <span class="ml-2 text-xs text-muted-foreground">
-                          {getTypeLabel(post.type)}
+                      {!format && (
+                        <span class="ml-2 badge-outline text-xs">
+                          {getFormatLabel(post.format)}
                         </span>
                       )}
                     </div>
@@ -147,8 +140,15 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         )}
       </main>
 
+      {/* Pagination */}
       <PaginationComponent
-        baseUrl={type ? `/archive?type=${type}` : "/archive"}
+        baseUrl={
+          format
+            ? `/archive?format=${format}`
+            : featured
+              ? "/archive?featured=true"
+              : "/archive"
+        }
         hasMore={hasMore}
         nextCursor={nextCursor}
       />

package/src/themes/threads/pages/CollectionPage.tsx

@@ -0,0 +1,61 @@
+/**
+ * Threads Theme - Collection Page
+ *
+ * Collection header with divider-separated post list.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { CollectionPageProps } from "../../../types.js";
+
+export const CollectionPage: FC<CollectionPageProps> = ({
+  collection,
+  posts,
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <div class="py-6">
+      <header class="mb-8">
+        <h1 class="text-2xl font-semibold">{collection.title}</h1>
+        {collection.description && (
+          <p class="text-muted-foreground mt-2">{collection.description}</p>
+        )}
+      </header>
+
+      <main>
+        {posts.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No posts in this collection.",
+              comment: "@context: Empty state message",
+            })}
+          </p>
+        ) : (
+          <div class="divide-y divide-border">
+            {posts.map((post) => (
+              <article key={post.id} class="h-entry py-4">
+                {post.title && (
+                  <h2 class="p-name text-lg font-medium mb-2">
+                    <a href={post.permalink} class="u-url hover:underline">
+                      {post.title}
+                    </a>
+                  </h2>
+                )}
+                <div
+                  class="e-content prose prose-sm"
+                  dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
+                />
+                <footer class="mt-2 text-sm text-muted-foreground">
+                  <time class="dt-published" datetime={post.publishedAt}>
+                    {post.publishedAtFormatted}
+                  </time>
+                </footer>
+              </article>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};

package/src/themes/{minimal → threads}/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 /**
- * Minimal Theme - Home Page
+ * Threads Theme - Home Page
  *
- * Renders the timeline feed with thread previews.
+ * Clean feed of posts separated by dividers.
  */
 
 import type { FC } from "hono/jsx";
@@ -22,7 +22,7 @@ export const HomePage: FC<HomePageProps> = ({
   return (
     <>
       {items.length === 0 ? (
-        <p class="text-muted-foreground">
+        <p class="py-12 text-center text-muted-foreground">
           {t({
             message: "No posts yet.",
             comment: "@context: Empty state message on home page",

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

@@ -1,13 +1,13 @@
 /**
- * Minimal Theme - Post Page
+ * Threads Theme - Post Page
  *
- * Clean article layout for a single post.
+ * 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/components/MediaGallery.js";
+import { MediaGallery as DefaultMediaGallery } from "../../../theme/index.js";
 
 export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
   const { t } = useLingui();
@@ -15,23 +15,27 @@ export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
   const Gallery = theme?.MediaGallery ?? DefaultMediaGallery;
 
   return (
-    <article class="h-entry">
+    <article class="h-entry py-6">
       {post.title && (
         <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
       )}
 
       <div
         class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
       />
 
-      {post.media.length > 0 && <Gallery attachments={post.media} />}
+      {post.media.length > 0 && (
+        <div class="threads-media mt-4">
+          <Gallery attachments={post.media} />
+        </div>
+      )}
 
-      <footer class="mt-8 pt-4 border-t border-border text-sm text-muted-foreground">
+      <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
         <time class="dt-published" datetime={post.publishedAt}>
           {post.publishedAtFormatted}
         </time>
-        <a href={post.permalink} class="u-url ml-4 hover:underline">
+        <a href={post.permalink} class="u-url ml-4">
           {t({
             message: "Permalink",
             comment: "@context: Link to permanent URL of post",

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

@@ -1,13 +1,13 @@
 /**
- * Minimal Theme - Search Page
+ * Threads Theme - 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 { PagePagination as DefaultPagePagination } from "../../../theme/index.js";
 
 export const SearchPage: FC<SearchPageProps> = ({
   query,
@@ -26,9 +26,10 @@ export const SearchPage: FC<SearchPageProps> = ({
   const PaginationComponent = theme?.PagePagination ?? DefaultPagePagination;
 
   return (
-    <div>
+    <div class="py-6">
       <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 +52,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 +82,25 @@ 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">
+                    <a href={result.post.permalink} class="block">
+                      <h2 class="font-medium hover:underline">
                         {result.post.title ||
-                          result.post.content?.slice(0, 60) ||
+                          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>

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

@@ -1,7 +1,7 @@
 /**
- * Minimal Theme - Single Page
+ * Threads Theme - Single Page
  *
- * Simple page content layout for type="page" posts.
+ * Custom page (type "page") view — clean centered content.
  */
 
 import type { FC } from "hono/jsx";
@@ -9,14 +9,14 @@ import type { SinglePageProps } from "../../../types.js";
 
 export const SinglePage: FC<SinglePageProps> = ({ page }) => {
   return (
-    <article class="h-entry">
+    <article class="h-entry py-6">
       {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>
   );