@jant/core 0.3.21 → 0.3.23

package/src/themes/minimal/pages/SearchPage.tsx

@@ -0,0 +1,122 @@
+/**
+ * Minimal Theme - Search Page
+ *
+ * Minimal search form + results with page-based pagination.
+ */
+
+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";
+
+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>
+
+      <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 && (
+        <div class="alert-destructive mb-6">
+          <h2>{error}</h2>
+        </div>
+      )}
+
+      {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="py-3">
+                    <a href={result.post.permalink} class="block group">
+                      <h2 class="font-medium group-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-1 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>
+                        <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/themes/minimal/pages/SinglePage.tsx

@@ -0,0 +1,23 @@
+/**
+ * Minimal Theme - Single Page
+ *
+ * Simple page content layout for type="page" posts.
+ */
+
+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-2xl font-semibold mb-6">{page.title}</h1>
+      )}
+
+      <div
+        class="e-content prose"
+        dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
+      />
+    </article>
+  );
+};

package/src/themes/minimal/timeline/ArticleCard.tsx

@@ -0,0 +1,37 @@
+/**
+ * Minimal Theme - Article Card
+ *
+ * Title + excerpt, borderless, for type="article" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+
+export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  return (
+    <article class={`h-entry${compact ? " text-sm" : ""}`}>
+      {post.title && (
+        <h2 class={`p-name font-semibold ${compact ? "text-sm" : "text-lg"}`}>
+          <a href={post.permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && post.excerpt && (
+        <p class="e-content text-muted-foreground mt-1 line-clamp-3">
+          {post.excerpt}
+        </p>
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:text-foreground"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/minimal/timeline/ImageCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * Minimal Theme - Image Card
+ *
+ * Inline images with no card frame for type="image" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../../../theme/components/MediaGallery.js";
+
+export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  if (compact) {
+    return (
+      <article class="h-entry text-sm">
+        {post.title && (
+          <h2 class="p-name font-medium text-sm">
+            <a href={post.permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        )}
+        {post.contentHtml && (
+          <div
+            class="e-content prose prose-sm text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          />
+        )}
+        <footer class="mt-1">
+          <a
+            href={post.permalink}
+            class="u-url text-xs text-muted-foreground hover:text-foreground"
+          >
+            <time class="dt-published" datetime={post.publishedAt}>
+              {post.publishedAtFormatted}
+            </time>
+          </a>
+        </footer>
+      </article>
+    );
+  }
+
+  return (
+    <article class="h-entry">
+      {post.contentHtml && (
+        <div
+          class="e-content prose prose-sm"
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      {post.media.length > 0 && <MediaGallery attachments={post.media} />}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:text-foreground"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/minimal/timeline/LinkCard.tsx

@@ -0,0 +1,48 @@
+/**
+ * Minimal Theme - Link Card
+ *
+ * Subtle external link indicator for type="link" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+
+export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  return (
+    <article class={`h-entry${compact ? " text-sm" : ""}`}>
+      {post.title && (
+        <h2 class={`p-name font-semibold ${compact ? "text-sm" : "text-base"}`}>
+          <a
+            href={post.sourceUrl || post.permalink}
+            class="u-url hover:underline"
+            target={post.sourceUrl ? "_blank" : undefined}
+            rel={post.sourceUrl ? "noopener noreferrer" : undefined}
+          >
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {post.sourceDomain && (
+        <div class="text-xs text-muted-foreground mt-0.5">
+          &#8599; {post.sourceDomain}
+        </div>
+      )}
+      {!compact && post.contentHtml && (
+        <div
+          class="e-content prose prose-sm text-muted-foreground mt-1"
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="text-xs text-muted-foreground hover:text-foreground"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/minimal/timeline/NoteCard.tsx

@@ -0,0 +1,35 @@
+/**
+ * Minimal Theme - Note Card
+ *
+ * Borderless, content-first card for type="note" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../../../theme/components/MediaGallery.js";
+
+export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  return (
+    <article class={`h-entry${compact ? " text-sm" : ""}`}>
+      {post.contentHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : ""}`}
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      {!compact && post.media.length > 0 && (
+        <MediaGallery attachments={post.media} />
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:text-foreground"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/{theme/components → themes/minimal}/timeline/QuoteCard.tsx

@@ -1,24 +1,18 @@
 /**
- * Quote Card Component
+ * Minimal Theme - Quote Card
  *
- * Blockquote + attribution for type="quote" posts.
+ * Subtle blockquote with left border for type="quote" posts.
  */
 
 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 QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  const permalink = `/p/${sqid.encode(post.id)}`;
-
   return (
-    <article
-      class={`h-entry timeline-card timeline-card-quote${compact ? " timeline-card-compact" : ""}`}
-    >
+    <article class={`h-entry${compact ? " text-sm" : ""}`}>
       {post.contentHtml && (
         <blockquote
-          class={`e-content italic ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+          class={`e-content border-l-2 border-muted-foreground/30 pl-4 italic ${compact ? "text-sm" : ""} leading-relaxed`}
         >
           <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
         </blockquote>
@@ -40,13 +34,13 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           )}
         </div>
       )}
-      <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)}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:text-foreground"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
           </time>
         </a>
       </footer>

package/src/themes/minimal/timeline/ThreadPreview.tsx

@@ -0,0 +1,47 @@
+/**
+ * Minimal Theme - Thread Preview
+ *
+ * Minimal thread indicator: root post + compact replies + "show more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { ThreadPreviewProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { TimelineItemFromPost } from "./TimelineItem.js";
+
+export const ThreadPreview: FC<ThreadPreviewProps> = ({
+  rootPost,
+  previewReplies,
+  totalReplyCount,
+  theme,
+}) => {
+  const { t } = useLingui();
+  const remainingCount = totalReplyCount - previewReplies.length;
+
+  return (
+    <div>
+      <TimelineItem item={{ post: rootPost }} theme={theme} />
+      {previewReplies.length > 0 && (
+        <div class="ml-4 mt-2 border-l border-border pl-4 flex flex-col gap-3">
+          {previewReplies.map((reply) => (
+            <div key={reply.id}>
+              <TimelineItemFromPost post={reply} compact theme={theme} />
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <a
+              href={rootPost.permalink}
+              class="text-sm text-muted-foreground hover:text-foreground hover:underline"
+            >
+              {t({
+                message: `Show ${remainingCount} more ${remainingCount === 1 ? "reply" : "replies"}`,
+                comment: "@context: Link to show remaining thread replies",
+              })}
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/{theme/components → themes/minimal}/timeline/TimelineFeed.tsx

@@ -1,43 +1,48 @@
 /**
- * Timeline Feed Component
+ * Minimal Theme - Timeline Feed
  *
- * Main feed wrapper with load-more button.
+ * Divider-separated stream of posts with load-more button.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { TimelineFeedProps } from "../../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
-import { ThreadPreview } from "./ThreadPreview.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
 
 export const TimelineFeed: FC<TimelineFeedProps> = ({
   items,
   hasMore,
   nextCursor,
+  theme,
 }) => {
   const { t } = useLingui();
 
+  const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+
   return (
     <div>
-      <div id="timeline-feed" class="flex flex-col gap-4">
-        {items.map((item) => {
-          if (item.threadPreview) {
-            return (
-              <ThreadPreview
-                key={item.post.id}
+      <div id="timeline-feed" class="flex flex-col">
+        {items.map((item, i) => (
+          <div key={item.post.id}>
+            {i > 0 && <hr class="my-6 border-border" />}
+            {item.threadPreview ? (
+              <ResolvedThreadPreview
                 rootPost={item.post}
                 previewReplies={item.threadPreview.replies}
                 totalReplyCount={item.threadPreview.totalReplyCount}
+                theme={theme}
               />
-            );
-          }
-          return <TimelineItem key={item.post.id} item={item} />;
-        })}
+            ) : (
+              <TimelineItem item={item} theme={theme} />
+            )}
+          </div>
+        ))}
       </div>
       {hasMore && nextCursor && (
-        <div id="load-more-container" class="mt-6 text-center">
+        <div id="load-more-container" class="mt-8 text-center">
           <button
-            class="btn btn-outline"
+            class="text-sm text-muted-foreground hover:text-foreground hover:underline"
             data-on:click={`@get('/api/timeline?cursor=${nextCursor}')`}
           >
             {t({

package/src/themes/minimal/timeline/TimelineItem.tsx

@@ -0,0 +1,75 @@
+/**
+ * Minimal Theme - Timeline Item
+ *
+ * Dispatches to the correct card component based on post type.
+ */
+
+import type { FC } from "hono/jsx";
+import type {
+  TimelineItemView,
+  TimelineCardProps,
+  ThemeComponents,
+  PostView,
+} from "../../../types.js";
+import { NoteCard } from "./NoteCard.js";
+import { ArticleCard } from "./ArticleCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+import { ImageCard } from "./ImageCard.js";
+import type { PostType } from "../../../types.js";
+
+const CARD_MAP: Record<PostType, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  article: ArticleCard,
+  link: LinkCard,
+  quote: QuoteCard,
+  image: ImageCard,
+  page: NoteCard,
+};
+
+const THEME_KEY_MAP: Record<PostType, keyof ThemeComponents> = {
+  note: "NoteCard",
+  article: "ArticleCard",
+  link: "LinkCard",
+  quote: "QuoteCard",
+  image: "ImageCard",
+  page: "NoteCard",
+};
+
+interface TimelineItemProps {
+  item: TimelineItemView;
+  compact?: boolean;
+  cardOverride?: FC<TimelineCardProps>;
+  theme?: ThemeComponents;
+}
+
+interface TimelineItemFromPostProps {
+  post: PostView;
+  compact?: boolean;
+  cardOverride?: FC<TimelineCardProps>;
+  theme?: ThemeComponents;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({
+  item,
+  compact,
+  cardOverride,
+  theme,
+}) => {
+  const themeKey = THEME_KEY_MAP[item.post.type];
+  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.type];
+  return <Card post={item.post} compact={compact} />;
+};
+
+export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
+  post,
+  compact,
+  cardOverride,
+  theme,
+}) => {
+  const themeKey = THEME_KEY_MAP[post.type];
+  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.type];
+  return <Card post={post} compact={compact} />;
+};