@jant/core 0.3.21 → 0.3.22

package/src/theme/pages/ArchivePage.tsx

@@ -0,0 +1,160 @@
+/**
+ * Default Archive Page Component
+ *
+ * Renders posts grouped by year-month with type filter and cursor pagination.
+ * Theme authors can replace this entirely via ThemeComponents.ArchivePage.
+ */
+
+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 "../components/Pagination.js";
+
+function getTypeLabel(type: 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" }),
+    quote: t({
+      message: "Quote",
+      comment: "@context: Post type label - quote",
+    }),
+    image: t({
+      message: "Image",
+      comment: "@context: Post type label - image",
+    }),
+    page: t({ message: "Page", comment: "@context: Post type label - page" }),
+  };
+  return labels[type] ?? type;
+}
+
+function getTypeLabelPlural(type: 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",
+    }),
+    link: t({
+      message: "Links",
+      comment: "@context: Post type 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",
+    }),
+  };
+  return labels[type] ?? `${type}s`;
+}
+
+export const ArchivePage: FC<ArchivePageProps> = ({
+  groups,
+  hasMore,
+  nextCursor,
+  type,
+  theme,
+}) => {
+  const { t } = useLingui();
+  const title = type
+    ? getTypeLabelPlural(type)
+    : t({ message: "Archive", comment: "@context: Archive page title" });
+
+  const PaginationComponent = theme?.Pagination ?? DefaultPagination;
+
+  return (
+    <div>
+      <header class="mb-8">
+        <h1 class="text-2xl font-semibold">{title}</h1>
+
+        {/* Type filter */}
+        <nav class="flex flex-wrap gap-2 mt-4">
+          <a
+            href="/archive"
+            class={`badge ${!type ? "badge-primary" : "badge-outline"}`}
+          >
+            {t({
+              message: "All",
+              comment: "@context: Archive filter - all types",
+            })}
+          </a>
+          {POST_TYPES.filter((t) => t !== "page").map((typeKey) => (
+            <a
+              key={typeKey}
+              href={`/archive?type=${typeKey}`}
+              class={`badge ${type === typeKey ? "badge-primary" : "badge-outline"}`}
+            >
+              {getTypeLabelPlural(typeKey)}
+            </a>
+          ))}
+        </nav>
+      </header>
+
+      <main>
+        {groups.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No posts found.",
+              comment: "@context: Archive empty state",
+            })}
+          </p>
+        ) : (
+          groups.map((group) => (
+            <section key={`${group.year}-${group.month}`} class="mb-8">
+              <h2 class="text-lg font-medium mb-4 text-muted-foreground">
+                {group.label}
+              </h2>
+              <div class="flex flex-col gap-3">
+                {group.posts.map((post) => (
+                  <article key={post.id} class="flex items-baseline gap-4">
+                    <time
+                      class="text-sm text-muted-foreground w-12 shrink-0"
+                      datetime={post.publishedAt}
+                    >
+                      {new Date(post.publishedAt).getUTCDate()}
+                    </time>
+                    <div class="flex-1 min-w-0">
+                      <a href={post.permalink} class="hover:underline">
+                        {post.title ||
+                          post.content?.slice(0, 80) ||
+                          `Post #${post.id}`}
+                      </a>
+                      {!type && (
+                        <span class="ml-2 badge-outline text-xs">
+                          {getTypeLabel(post.type)}
+                        </span>
+                      )}
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </section>
+          ))
+        )}
+      </main>
+
+      {/* Pagination */}
+      <PaginationComponent
+        baseUrl={type ? `/archive?type=${type}` : "/archive"}
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+      />
+    </div>
+  );
+};

package/src/theme/pages/CollectionPage.tsx

@@ -0,0 +1,60 @@
+/**
+ * Default Collection Page Component
+ *
+ * Renders a collection with its posts.
+ * Theme authors can replace this entirely via ThemeComponents.CollectionPage.
+ */
+
+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>
+      <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 class="flex flex-col gap-6">
+        {posts.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No posts in this collection.",
+              comment: "@context: Empty state message",
+            })}
+          </p>
+        ) : (
+          posts.map((post) => (
+            <article key={post.id} class="h-entry">
+              {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.contentHtml || "" }}
+              />
+              <footer class="mt-2 text-sm text-muted-foreground">
+                <time class="dt-published" datetime={post.publishedAt}>
+                  {post.publishedAtFormatted}
+                </time>
+              </footer>
+            </article>
+          ))
+        )}
+      </main>
+    </div>
+  );
+};

package/src/theme/pages/HomePage.tsx

@@ -0,0 +1,42 @@
+/**
+ * Default Home Page Component
+ *
+ * Renders the timeline feed with thread previews.
+ * Theme authors can replace this entirely via ThemeComponents.HomePage.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { HomePageProps } from "../../types.js";
+import { TimelineFeed as DefaultTimelineFeed } from "../components/timeline/TimelineFeed.js";
+
+export const HomePage: FC<HomePageProps> = ({
+  items,
+  hasMore,
+  nextCursor,
+  theme,
+}) => {
+  const { t } = useLingui();
+
+  const Feed = theme?.TimelineFeed ?? DefaultTimelineFeed;
+
+  return (
+    <>
+      {items.length === 0 ? (
+        <p class="text-muted-foreground">
+          {t({
+            message: "No posts yet.",
+            comment: "@context: Empty state message on home page",
+          })}
+        </p>
+      ) : (
+        <Feed
+          items={items}
+          hasMore={hasMore}
+          nextCursor={nextCursor}
+          theme={theme}
+        />
+      )}
+    </>
+  );
+};

package/src/theme/pages/PostPage.tsx

@@ -0,0 +1,44 @@
+/**
+ * Default Post Page Component
+ *
+ * Renders a single post with media gallery.
+ * Theme authors can replace this entirely via ThemeComponents.PostPage.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { PostPageProps } from "../../types.js";
+import { MediaGallery as DefaultMediaGallery } from "../components/MediaGallery.js";
+
+export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
+  const { t } = useLingui();
+
+  const Gallery = theme?.MediaGallery ?? DefaultMediaGallery;
+
+  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 || "" }}
+      />
+
+      {post.media.length > 0 && <Gallery attachments={post.media} />}
+
+      <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">
+          {t({
+            message: "Permalink",
+            comment: "@context: Link to permanent URL of post",
+          })}
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/theme/pages/SearchPage.tsx

@@ -0,0 +1,128 @@
+/**
+ * Default Search Page Component
+ *
+ * Renders search form and results with page-based pagination.
+ * Theme authors can replace this entirely via ThemeComponents.SearchPage.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { SearchPageProps } from "../../types.js";
+import { PagePagination as DefaultPagePagination } from "../components/Pagination.js";
+
+export const SearchPage: FC<SearchPageProps> = ({
+  query,
+  results,
+  error,
+  hasMore,
+  page,
+  theme,
+}) => {
+  const { t } = useLingui();
+  const searchTitle = t({
+    message: "Search",
+    comment: "@context: Search page title",
+  });
+
+  const PaginationComponent = theme?.PagePagination ?? DefaultPagePagination;
+
+  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={result.post.permalink} 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={result.post.publishedAt}>
+                          {result.post.publishedAtFormatted}
+                        </time>
+                      </footer>
+                    </a>
+                  </article>
+                ))}
+              </div>
+
+              <PaginationComponent
+                baseUrl={`/search?q=${encodeURIComponent(query)}`}
+                currentPage={page}
+                hasMore={hasMore}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/theme/pages/SinglePage.tsx

@@ -0,0 +1,24 @@
+/**
+ * Default Single Page Component
+ *
+ * Renders a custom page (type "page").
+ * Theme authors can replace this entirely via ThemeComponents.SinglePage.
+ */
+
+import type { FC } from "hono/jsx";
+import type { SinglePageProps } from "../../types.js";
+
+export const SinglePage: FC<SinglePageProps> = ({ page }) => {
+  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>
+  );
+};

package/src/theme/pages/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Default Page Components
+ *
+ * These are the built-in page components that render each public page.
+ * Theme authors can import these to wrap/extend them.
+ */
+
+export { HomePage } from "./HomePage.js";
+export { PostPage } from "./PostPage.js";
+export { SinglePage } from "./SinglePage.js";
+export { ArchivePage } from "./ArchivePage.js";
+export { SearchPage } from "./SearchPage.js";
+export { CollectionPage } from "./CollectionPage.js";