@jant/core 0.3.23 → 0.3.24

package/src/themes/threads/style.css

@@ -0,0 +1,336 @@
+/**
+ * Threads theme styles
+ *
+ * Design tokens extracted from threads.com source CSS.
+ * Key variables from Threads' --barcelona-* system:
+ *   --barcelona-side-navigation-width: 76px
+ *   --barcelona-column-layout-max-width: 640px
+ *   --barcelona-columns-item-horizontal-padding: 24px
+ *   --barcelona-primary-column-outline: rgb(213,213,213) / rgb(45,45,45)
+ *   --barcelona-threadline: rgb(229,229,229) / rgb(51,54,56)
+ *   --barcelona-navigation-icon: rgb(77,77,77) / rgb(184,184,184)
+ *   --barcelona-navigation-item-hover-background: rgba(0,0,0,0.035)
+ */
+
+/* Tell Tailwind to scan threads theme source files for class usage */
+@source "./";
+
+/* =========================================================================
+ * Threads Design Tokens (as CSS custom properties)
+ * ========================================================================= */
+
+:root {
+  --threads-sidebar-width: 76px;
+  --threads-column-max-width: 640px;
+  --threads-column-padding: 24px;
+  --threads-column-outline: rgb(213, 213, 213);
+  --threads-threadline: rgb(229, 229, 229);
+  --threads-page-bg: rgb(250, 250, 250);
+  --threads-elevated-bg: rgb(255, 255, 255);
+  --threads-nav-icon: rgb(77, 77, 77);
+  --threads-nav-icon-active: rgb(0, 0, 0);
+  --threads-nav-hover-bg: rgba(0, 0, 0, 0.035);
+  --threads-text-primary: rgb(0, 0, 0);
+  --threads-text-secondary: rgb(119, 119, 119);
+  --threads-media-outline: rgba(0, 0, 0, 0.15);
+  --threads-divider: rgba(0, 0, 0, 0.15);
+  --threads-container-radius: 24px;
+  --threads-mobile-header-height: 60px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --threads-column-outline: rgb(45, 45, 45);
+    --threads-threadline: rgb(51, 54, 56);
+    --threads-page-bg: rgb(10, 10, 10);
+    --threads-elevated-bg: rgb(24, 24, 24);
+    --threads-nav-icon: rgb(184, 184, 184);
+    --threads-nav-icon-active: rgb(243, 245, 247);
+    --threads-nav-hover-bg: rgba(255, 255, 255, 0.08);
+    --threads-text-primary: rgb(243, 245, 247);
+    --threads-text-secondary: rgb(153, 153, 153);
+    --threads-media-outline: rgba(243, 245, 247, 0.2);
+    --threads-divider: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.dark {
+  --threads-column-outline: rgb(45, 45, 45);
+  --threads-threadline: rgb(51, 54, 56);
+  --threads-page-bg: rgb(10, 10, 10);
+  --threads-elevated-bg: rgb(24, 24, 24);
+  --threads-nav-icon: rgb(184, 184, 184);
+  --threads-nav-icon-active: rgb(243, 245, 247);
+  --threads-nav-hover-bg: rgba(255, 255, 255, 0.08);
+  --threads-text-primary: rgb(243, 245, 247);
+  --threads-text-secondary: rgb(153, 153, 153);
+  --threads-media-outline: rgba(243, 245, 247, 0.2);
+  --threads-divider: rgba(255, 255, 255, 0.15);
+}
+
+@layer components {
+  /* =========================================================================
+   * Page Layout
+   * ========================================================================= */
+
+  .threads-page {
+    min-height: 100vh;
+    min-height: 100dvh;
+    background-color: var(--threads-page-bg);
+  }
+
+  /* --- Left sidebar (desktop only) ---------------------------------------- */
+
+  .threads-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 30;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    width: var(--threads-sidebar-width);
+    padding: 12px 0;
+    background-color: var(--threads-page-bg);
+  }
+
+  @media (min-width: 700px) {
+    .threads-sidebar {
+      display: flex;
+    }
+  }
+
+  .threads-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 4px;
+    color: var(--threads-nav-icon-active);
+  }
+
+  .threads-sidebar-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    color: var(--threads-nav-icon);
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+  }
+
+  .threads-sidebar-link:hover {
+    color: var(--threads-nav-icon-active);
+    background-color: var(--threads-nav-hover-bg);
+  }
+
+  .threads-sidebar-link-active {
+    color: var(--threads-nav-icon-active);
+  }
+
+  /* --- Main content area -------------------------------------------------- */
+
+  .threads-main {
+    padding-bottom: var(--threads-mobile-header-height);
+  }
+
+  @media (min-width: 700px) {
+    .threads-main {
+      padding-bottom: 0;
+      padding-left: var(--threads-sidebar-width);
+    }
+  }
+
+  .threads-container {
+    max-width: var(--threads-column-max-width);
+    margin: 0 auto;
+  }
+
+  /* Mobile: full-bleed white, no border-radius */
+  .threads-content {
+    background-color: var(--threads-elevated-bg);
+    padding: 0 var(--threads-column-padding);
+  }
+
+  /* Desktop: rounded white card on gray background */
+  @media (min-width: 700px) {
+    .threads-container {
+      padding: 16px 24px 0;
+    }
+
+    .threads-content {
+      border-radius: var(--threads-container-radius);
+      border: 0.5px solid var(--threads-column-outline);
+      padding: 0 var(--threads-column-padding);
+      min-height: calc(100vh - 32px);
+    }
+  }
+
+  /* --- Home page: each date group as its own card ------------------------ */
+
+  .threads-content:has(#timeline-feed) {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .threads-content #timeline-feed {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .threads-content #timeline-feed > div {
+    background-color: var(--threads-elevated-bg);
+    padding: 0 var(--threads-column-padding) 16px;
+  }
+
+  @media (min-width: 700px) {
+    .threads-content:has(#timeline-feed) {
+      border: none;
+      border-radius: 0;
+      min-height: auto;
+    }
+
+    .threads-content #timeline-feed {
+      gap: 16px;
+    }
+
+    .threads-content #timeline-feed > div {
+      border-radius: var(--threads-container-radius);
+      border: 0.5px solid var(--threads-column-outline);
+    }
+  }
+
+  /* --- Mobile bottom tab bar ---------------------------------------------- */
+
+  .threads-mobile-tabs {
+    position: fixed;
+    inset: auto 0 0 0;
+    z-index: 30;
+    display: flex;
+    height: var(--threads-mobile-header-height);
+    background-color: var(--threads-elevated-bg);
+    border-top: 0.5px solid var(--threads-column-outline);
+  }
+
+  @media (min-width: 700px) {
+    .threads-mobile-tabs {
+      display: none;
+    }
+  }
+
+  .threads-mobile-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: var(--threads-nav-icon);
+    transition: color 0.15s;
+  }
+
+  .threads-mobile-tab-active {
+    color: var(--threads-nav-icon-active);
+  }
+
+  /* =========================================================================
+   * Timeline & Post Components
+   * ========================================================================= */
+
+  /* Date group header — centered, muted label at top of each card */
+  .threads-date-header {
+    padding: 16px 0 8px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--threads-text-secondary);
+  }
+
+  /* Post divider — full-width 0.5px line matching Threads.
+   * Targets the <hr class="border-border my-5"> used by both
+   * TimelineFeed (initial render) and the SSE load-more handler. */
+  .threads-content hr.border-border {
+    border: none;
+    border-top: 0.5px solid var(--threads-divider);
+    margin-left: calc(-1 * var(--threads-column-padding));
+    margin-right: calc(-1 * var(--threads-column-padding));
+  }
+
+  /* Thread reply container with vertical connector line */
+  .threads-replies {
+    position: relative;
+    margin-left: 16px;
+    padding-left: 16px;
+    margin-top: 8px;
+  }
+
+  .threads-replies::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--threads-threadline);
+  }
+
+  /* Individual reply in thread */
+  .threads-reply {
+    padding: 12px 0;
+  }
+
+  .threads-reply + .threads-reply {
+    border-top: 0.5px solid var(--threads-divider);
+  }
+
+  /* Compact text for thread replies */
+  .threads-compact {
+    @apply text-sm;
+  }
+
+  /* Media — rounded corners + subtle outline like Threads */
+  .threads-media img {
+    border-radius: 8px;
+    outline: 1px solid var(--threads-media-outline);
+    outline-offset: -1px;
+  }
+
+  /* Image carousel — horizontal scroll like Threads.net */
+  .threads-carousel-track {
+    display: flex;
+    overflow-x: auto;
+    gap: 4px;
+    margin-inline: calc(-1 * var(--threads-column-padding));
+    padding-inline: var(--threads-column-padding);
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+  .threads-carousel-track::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+  .threads-carousel-item {
+    flex: 0 0 auto;
+    width: 224px;
+    height: 280px;
+  }
+  .threads-carousel-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Link preview styling */
+  .threads-link-preview {
+    border-radius: 12px;
+    border: 0.5px solid var(--threads-column-outline);
+    padding: 12px 16px;
+    margin-top: 8px;
+  }
+
+  /* Quote block styling */
+  .threads-quote {
+    padding-left: 12px;
+    border-left: 2px solid var(--threads-text-secondary);
+  }
+}

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

@@ -0,0 +1,67 @@
+/**
+ * Threads Theme - Link Card
+ *
+ * Compact link preview box — date is shown at the feed level as a group header.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+
+export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  // Extract domain from URL for display
+  let domain: string | undefined;
+  if (post.url) {
+    try {
+      domain = new URL(post.url).hostname.replace(/^www\./, "");
+    } catch {
+      // Invalid URL, skip domain display
+    }
+  }
+
+  return (
+    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+      {domain && (
+        <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+          <svg
+            class="size-3"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+          >
+            <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+          <span>{domain}</span>
+        </div>
+      )}
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a
+            href={post.url || post.permalink}
+            class="u-url hover:underline"
+            target={post.url ? "_blank" : undefined}
+            rel={post.url ? "noopener noreferrer" : undefined}
+          >
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && post.bodyHtml && (
+        <div
+          class="e-content prose text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={post.permalink} class="hover:underline">
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtFormatted}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

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

@@ -0,0 +1,58 @@
+/**
+ * Threads Theme - Note Card
+ *
+ * Without title: plain text note — date is shown at the feed level as a group header.
+ * With title: article-style rendering with summary excerpt and "Read more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../../../theme/index.js";
+
+export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const isArticle = !!post.title;
+  const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+
+  return (
+    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+      {isArticle && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a href={post.permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {displayHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
+        />
+      )}
+      {!compact && post.media.length > 0 && (
+        <div class="threads-media mt-3">
+          <MediaGallery attachments={post.media} />
+        </div>
+      )}
+      {!compact && isArticle && post.summaryHasMore && (
+        <a
+          href={post.permalink}
+          class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
+        >
+          Read more →
+        </a>
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtRelative}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/threads/timeline/QuoteCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * Threads Theme - Quote Card
+ *
+ * Left-border accent blockquote — date is shown at the feed level as a group header.
+ *
+ * v2 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 ? " threads-compact" : ""}`}>
+      {post.quoteText && (
+        <blockquote class="threads-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"
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtRelative}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/{minimal → threads}/timeline/ThreadPreview.tsx

@@ -1,7 +1,7 @@
 /**
- * Minimal Theme - Thread Preview
+ * Threads Theme - Thread Preview
  *
- * Minimal thread indicator: root post + compact replies + "show more" link.
+ * Root post + vertical line connector + compact replies underneath.
  */
 
 import type { FC } from "hono/jsx";
@@ -23,22 +23,24 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
     <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">
+        <div class="threads-replies">
           {previewReplies.map((reply) => (
-            <div key={reply.id}>
+            <div key={reply.id} class="threads-reply">
               <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 class="threads-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>
       )}

package/src/themes/threads/timeline/TimelineFeed.tsx

@@ -0,0 +1,62 @@
+/**
+ * Threads Theme - Timeline Feed
+ *
+ * Date-grouped posts separated by thin dividers.
+ * A centered date header appears above each group.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineFeedProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
+import { TimelineLoadMore as DefaultTimelineLoadMore } from "./TimelineLoadMore.js";
+import { groupByDate } from "./groupByDate.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  hasMore,
+  nextCursor,
+  theme,
+}) => {
+  const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+  const ResolvedLoadMore = theme?.TimelineLoadMore ?? DefaultTimelineLoadMore;
+  const groups = groupByDate(items);
+
+  return (
+    <div>
+      <div id="timeline-feed">
+        {groups.map((group) => (
+          <div key={group.dateKey} class="threads-card">
+            <div class="threads-date-header">
+              <span>{group.label}</span>
+            </div>
+            <div id={`date-items-${group.dateKey}`} class="flex flex-col">
+              {group.items.map((item, i) => (
+                <div key={item.post.id}>
+                  {i > 0 && <hr class="border-border my-5" />}
+                  {item.threadPreview ? (
+                    <ResolvedThreadPreview
+                      rootPost={item.post}
+                      previewReplies={item.threadPreview.replies}
+                      totalReplyCount={item.threadPreview.totalReplyCount}
+                      theme={theme}
+                    />
+                  ) : (
+                    <TimelineItem item={item} theme={theme} />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      {hasMore && nextCursor && (
+        <ResolvedLoadMore
+          nextCursor={nextCursor}
+          lastDate={groups.at(-1)?.dateKey}
+          theme={theme}
+        />
+      )}
+    </div>
+  );
+};

package/src/themes/{minimal → threads}/timeline/TimelineItem.tsx

@@ -1,7 +1,7 @@
 /**
- * Minimal Theme - Timeline Item
+ * Threads Theme - Timeline Item
  *
- * Dispatches to the correct card component based on post type.
+ * Dispatches to the correct card component based on post format.
  */
 
 import type { FC } from "hono/jsx";
@@ -10,30 +10,22 @@ import type {
   TimelineCardProps,
   ThemeComponents,
   PostView,
+  Format,
 } 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>> = {
+const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
   note: NoteCard,
-  article: ArticleCard,
   link: LinkCard,
   quote: QuoteCard,
-  image: ImageCard,
-  page: NoteCard,
 };
 
-const THEME_KEY_MAP: Record<PostType, keyof ThemeComponents> = {
+const THEME_KEY_MAP: Record<Format, keyof ThemeComponents> = {
   note: "NoteCard",
-  article: "ArticleCard",
   link: "LinkCard",
   quote: "QuoteCard",
-  image: "ImageCard",
-  page: "NoteCard",
 };
 
 interface TimelineItemProps {
@@ -56,9 +48,9 @@ export const TimelineItem: FC<TimelineItemProps> = ({
   cardOverride,
   theme,
 }) => {
-  const themeKey = THEME_KEY_MAP[item.post.type];
+  const themeKey = THEME_KEY_MAP[item.post.format];
   const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.type];
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.format];
   return <Card post={item.post} compact={compact} />;
 };
 
@@ -68,8 +60,8 @@ export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
   cardOverride,
   theme,
 }) => {
-  const themeKey = THEME_KEY_MAP[post.type];
+  const themeKey = THEME_KEY_MAP[post.format];
   const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.type];
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.format];
   return <Card post={post} compact={compact} />;
 };