@jant/core 0.3.23 → 0.3.25

package/src/ui/feed/QuoteCard.tsx

@@ -0,0 +1,68 @@
+/**
+ * Quote Card
+ *
+ * Left-border accent blockquote with full date in footer.
+ *
+ * Fields:
+ * - quoteText: the quoted text
+ * - title: attribution (who said it)
+ * - url: source link
+ * - bodyHtml: commentary
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../types.js";
+
+export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  return (
+    <article
+      class={`h-entry${compact ? " feed-compact" : ""}`}
+      data-post
+      data-format="quote"
+    >
+      {post.quoteText && (
+        <blockquote class="feed-quote">
+          <div
+            class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+          >
+            {post.quoteText}
+          </div>
+        </blockquote>
+      )}
+      {!compact && (post.title || post.url) && (
+        <div class="mt-2 text-sm text-muted-foreground">
+          &mdash;{" "}
+          {post.url ? (
+            <a
+              href={post.url}
+              class="hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {post.title || "Source"}
+            </a>
+          ) : (
+            <span>{post.title}</span>
+          )}
+        </div>
+      )}
+      {!compact && post.bodyHtml && (
+        <div
+          class="mt-3 prose text-muted-foreground"
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+      <footer class="mt-2" data-post-meta>
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/ui/feed/ThreadPreview.tsx

@@ -0,0 +1,48 @@
+/**
+ * Thread Preview
+ *
+ * Root post + vertical line connector + compact replies underneath.
+ */
+
+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,
+}) => {
+  const { t } = useLingui();
+  const remainingCount = totalReplyCount - previewReplies.length;
+
+  return (
+    <div>
+      <TimelineItem item={{ post: rootPost }} />
+      {previewReplies.length > 0 && (
+        <div class="feed-replies">
+          {previewReplies.map((reply) => (
+            <div key={reply.id} class="feed-reply">
+              <TimelineItemFromPost post={reply} compact />
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div class="feed-reply">
+              <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>
+      )}
+    </div>
+  );
+};

package/src/ui/feed/TimelineFeed.tsx

@@ -0,0 +1,49 @@
+/**
+ * Timeline Feed
+ *
+ * Flat list of posts separated by simple dividers.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineFeedProps } from "../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+import { PagePagination } from "../shared/Pagination.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  currentPage,
+  totalPages,
+}) => {
+  return (
+    <div data-feed>
+      <div id="timeline-feed">
+        <div id="timeline-items" class="flex flex-col">
+          {items.map((item, i) => (
+            <div key={item.post.id}>
+              {i > 0 && <hr class="feed-divider" />}
+              {item.threadPreview ? (
+                <ThreadPreview
+                  rootPost={item.post}
+                  previewReplies={item.threadPreview.replies}
+                  totalReplyCount={item.threadPreview.totalReplyCount}
+                />
+              ) : (
+                <TimelineItem item={item} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      {currentPage !== undefined &&
+        totalPages !== undefined &&
+        totalPages > 1 && (
+          <PagePagination
+            baseUrl="/"
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        )}
+    </div>
+  );
+};

package/src/ui/feed/TimelineItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * Timeline Item
+ *
+ * Dispatches to the correct card component based on post format.
+ */
+
+import type { FC } from "hono/jsx";
+import type {
+  TimelineItemView,
+  TimelineCardProps,
+  PostView,
+  Format,
+} from "../../types.js";
+import { NoteCard } from "./NoteCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+
+const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  link: LinkCard,
+  quote: QuoteCard,
+};
+
+interface TimelineItemProps {
+  item: TimelineItemView;
+  compact?: boolean;
+}
+
+interface TimelineItemFromPostProps {
+  post: PostView;
+  compact?: boolean;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({ item, compact }) => {
+  const Card = CARD_MAP[item.post.format];
+  return <Card post={item.post} compact={compact} />;
+};
+
+export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
+  post,
+  compact,
+}) => {
+  const Card = CARD_MAP[post.format];
+  return <Card post={post} compact={compact} />;
+};

package/src/{theme → ui}/layouts/BaseLayout.tsx

@@ -42,6 +42,12 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
   // Read theme style from Hono context if available
   const themeStyle = c ? c.get("themeStyle") : undefined;
 
+  // Read custom CSS from Hono context if available
+  const customCSS = c ? c.get("customCSS") : undefined;
+
+  // Check authentication status for data attribute
+  const isAuthenticated = c ? c.get("isAuthenticated") : false;
+
   return (
     <html lang={resolvedLang}>
       <head>
@@ -52,9 +58,13 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         <ViteClient />
         <Link href="/src/style.css" rel="stylesheet" />
         {themeStyle && <style>{themeStyle}</style>}
+        {customCSS && <style>{customCSS}</style>}
         <Script src="/src/client.ts" />
       </head>
-      <body class="bg-background text-foreground antialiased">
+      <body
+        class="bg-background text-foreground antialiased"
+        {...(isAuthenticated ? { "data-authenticated": true } : {})}
+      >
         {content}
         <div id="toast-container" class="toast-container">
           {toast && (

package/src/{theme → ui}/layouts/DashLayout.tsx

@@ -126,16 +126,6 @@ function DashLayoutContent({
                 comment: "@context: Dashboard navigation - URL redirects",
               })}
             </a>
-            <a
-              href="/dash/navigation"
-              class={navClass("/dash/navigation", /^\/dash\/navigation/)}
-            >
-              {t({
-                message: "Navigation",
-                comment:
-                  "@context: Dashboard navigation - navigation links management",
-              })}
-            </a>
             <a
               href="/dash/settings"
               class={navClass("/dash/settings", /^\/dash\/settings/)}

package/src/ui/layouts/SiteLayout.tsx

@@ -0,0 +1,150 @@
+/**
+ * Site Layout
+ *
+ * Vertical header: site name on top, custom nav links below, description under nav.
+ * Content area with browse filter tabs and compose prompt/dialog for authenticated users.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { NavItemView, SiteLayoutProps } from "../../types.js";
+import { ComposeDialog } from "../compose/ComposeDialog.js";
+import { ComposePrompt } from "../compose/ComposePrompt.js";
+
+function HeaderLink({ link }: { link: NavItemView }) {
+  return (
+    <a
+      href={link.url}
+      class={`site-header-link ${link.isActive ? "site-header-link-active" : ""}`}
+      {...(link.isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {})}
+    >
+      {link.label}
+    </a>
+  );
+}
+
+export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  siteDescription,
+  links,
+  currentPath,
+  isAuthenticated,
+  collections,
+  children,
+}) => {
+  const { t } = useLingui();
+
+  const browseLinks = [
+    {
+      href: "/",
+      label: t({
+        message: "Latest",
+        comment: "@context: Browse filter for latest posts",
+      }),
+    },
+    {
+      href: "/featured",
+      label: t({
+        message: "Featured",
+        comment: "@context: Browse filter for featured posts",
+      }),
+    },
+    // {
+    //   href: "/collections",
+    //   label: t({
+    //     message: "Collections",
+    //     comment: "@context: Browse filter for collections",
+    //   }),
+    // },
+    // {
+    //   href: "/archive",
+    //   label: t({
+    //     message: "Archive",
+    //     comment: "@context: Browse filter for archive",
+    //   }),
+    // },
+  ];
+
+  const searchLabel = t({
+    message: "Search",
+    comment: "@context: Search icon link in browse nav",
+  });
+
+  const isHomePage = currentPath === "/" || currentPath === "/featured";
+
+  return (
+    <div class="site-page">
+      <header class="site-header">
+        <div class="site-header-inner">
+          <div class="site-header-top site-header-top-bordered">
+            <a href="/" class="site-logo">
+              {siteName}
+            </a>
+            <div class="site-header-right">
+              {links.length > 0 && (
+                <nav class="site-header-nav">
+                  {links.map((link) => (
+                    <HeaderLink key={link.id} link={link} />
+                  ))}
+                </nav>
+              )}
+              <a
+                href="/search"
+                class={`site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`}
+                aria-label={searchLabel}
+                title={searchLabel}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.35-4.35" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          {isHomePage && siteDescription && (
+            <p class="site-description">{siteDescription}</p>
+          )}
+        </div>
+      </header>
+
+      <main class="site-main">
+        <div class="site-container">
+          <div class="site-content">
+            {isHomePage && (
+              <nav class="site-browse-nav">
+                {browseLinks.map((link, i) => (
+                  <>
+                    {i > 0 && <span class="site-browse-sep">/</span>}
+                    <a
+                      key={link.href}
+                      href={link.href}
+                      class={`site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`}
+                    >
+                      {link.label}
+                    </a>
+                  </>
+                ))}
+              </nav>
+            )}
+            {isHomePage && isAuthenticated && <ComposePrompt />}
+            {children}
+          </div>
+        </div>
+      </main>
+
+      {isAuthenticated && <ComposeDialog collections={collections} />}
+    </div>
+  );
+};

package/src/ui/pages/ArchivePage.tsx

@@ -0,0 +1,162 @@
+/**
+ * Archive Page
+ *
+ * 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 { FORMATS } from "../../types.js";
+import { Pagination } from "../shared/Pagination.js";
+
+function getFormatLabel(format: string): string {
+  const { t } = useLingui();
+  const labels: Record<string, string> = {
+    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 format label - quote",
+    }),
+  };
+  return labels[format] ?? format;
+}
+
+function getFormatLabelPlural(format: string): string {
+  const { t } = useLingui();
+  const labels: Record<string, string> = {
+    note: t({
+      message: "Notes",
+      comment: "@context: Post format label plural - notes",
+    }),
+    link: t({
+      message: "Links",
+      comment: "@context: Post format label plural - links",
+    }),
+    quote: t({
+      message: "Quotes",
+      comment: "@context: Post format label plural - quotes",
+    }),
+  };
+  return labels[format] ?? format + "s";
+}
+
+export const ArchivePage: FC<ArchivePageProps> = ({
+  groups,
+  hasMore,
+  nextCursor,
+  format,
+  featured,
+}) => {
+  const { t } = useLingui();
+  const title = format
+    ? getFormatLabelPlural(format)
+    : t({ message: "Archive", comment: "@context: Archive page title" });
+
+  return (
+    <div class="py-6" data-page="archive">
+      <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={
+              "badge " +
+              (!format && !featured ? "badge-primary" : "badge-outline")
+            }
+          >
+            {t({
+              message: "All",
+              comment: "@context: Archive filter - all formats",
+            })}
+          </a>
+          {FORMATS.map((formatKey) => (
+            <a
+              key={formatKey}
+              href={"/archive?format=" + formatKey}
+              class={
+                "badge " +
+                (format === formatKey ? "badge-primary" : "badge-outline")
+              }
+            >
+              {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>
+
+      <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="divide-y divide-border">
+                {group.posts.map((post) => (
+                  <article
+                    key={post.id}
+                    class="flex items-baseline gap-4 py-2.5"
+                    data-post
+                    data-format={post.format}
+                  >
+                    <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.excerpt?.slice(0, 80) ||
+                          "Post #" + post.id}
+                      </a>
+                      {!format && (
+                        <span class="ml-2 badge-outline text-xs">
+                          {getFormatLabel(post.format)}
+                        </span>
+                      )}
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </section>
+          ))
+        )}
+      </main>
+
+      {/* Pagination */}
+      <Pagination
+        baseUrl={
+          format
+            ? "/archive?format=" + format
+            : featured
+              ? "/archive?featured=true"
+              : "/archive"
+        }
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+      />
+    </div>
+  );
+};

package/src/ui/pages/CollectionPage.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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" data-page="collection">
+      <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"
+                data-post
+                data-format={post.format}
+              >
+                {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"
+                  data-post-body
+                  dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
+                />
+                <footer
+                  class="mt-2 text-sm text-muted-foreground"
+                  data-post-meta
+                >
+                  <time class="dt-published" datetime={post.publishedAt}>
+                    {post.publishedAtFormatted}
+                  </time>
+                </footer>
+              </article>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};