@jant/core 0.3.24 → 0.3.25

package/src/themes/threads/index.ts

@@ -1,100 +0,0 @@
-/**
- * Threads Theme
- *
- * A clean, centered timeline theme inspired by Threads.net.
- * Posts separated by thin dividers, no cards, with thread connector lines.
- *
- * This is the default theme for Jant.
- */
-
-import type { JantTheme, ThemeComponents } from "../../types.js";
-import type { ColorTheme } from "../../theme/color-themes.js";
-
-// Layout
-import { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
-
-// Pages
-import { HomePage } from "./pages/HomePage.js";
-import { PostPage } from "./pages/PostPage.js";
-import { SinglePage } from "./pages/SinglePage.js";
-import { ArchivePage } from "./pages/ArchivePage.js";
-import { SearchPage } from "./pages/SearchPage.js";
-import { CollectionPage } from "./pages/CollectionPage.js";
-
-// Timeline
-import { NoteCard } from "./timeline/NoteCard.js";
-import { LinkCard } from "./timeline/LinkCard.js";
-import { QuoteCard } from "./timeline/QuoteCard.js";
-import { ThreadPreview } from "./timeline/ThreadPreview.js";
-import { TimelineFeed } from "./timeline/TimelineFeed.js";
-import { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
-import { timelineMore } from "./timeline/timelineMore.js";
-
-export interface ThemeOptions {
-  /** Override individual components */
-  components?: Partial<ThemeComponents>;
-  /** CSS variable overrides */
-  cssVariables?: Record<string, string>;
-  /** Custom color themes */
-  colorThemes?: ColorTheme[];
-}
-
-/**
- * Create the threads theme configuration.
- *
- * @param options - Optional overrides for components, CSS variables, or color themes
- * @returns A JantTheme configuration object
- *
- * @example
- * ```typescript
- * import { createApp } from "@jant/core";
- * import { threadsTheme } from "@jant/core";
- *
- * export default createApp({
- *   theme: threadsTheme(),
- * });
- * ```
- */
-export function theme(options?: ThemeOptions): JantTheme {
-  return {
-    name: "threads",
-    components: {
-      SiteLayout: ThreadsSiteLayout,
-      HomePage,
-      PostPage,
-      SinglePage,
-      ArchivePage,
-      SearchPage,
-      CollectionPage,
-      NoteCard,
-      LinkCard,
-      QuoteCard,
-      ThreadPreview,
-      TimelineFeed,
-      TimelineLoadMore,
-      ...options?.components,
-    },
-    timelineMore,
-    cssVariables: {
-      ...options?.cssVariables,
-    },
-    colorThemes: options?.colorThemes,
-  };
-}
-
-// Re-export individual components for wrapping/extending
-export { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
-export { HomePage } from "./pages/HomePage.js";
-export { PostPage } from "./pages/PostPage.js";
-export { SinglePage } from "./pages/SinglePage.js";
-export { ArchivePage } from "./pages/ArchivePage.js";
-export { SearchPage } from "./pages/SearchPage.js";
-export { CollectionPage } from "./pages/CollectionPage.js";
-export { NoteCard } from "./timeline/NoteCard.js";
-export { LinkCard } from "./timeline/LinkCard.js";
-export { QuoteCard } from "./timeline/QuoteCard.js";
-export { ThreadPreview } from "./timeline/ThreadPreview.js";
-export { TimelineFeed } from "./timeline/TimelineFeed.js";
-export { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
-export { TimelineItem, TimelineItemFromPost } from "./timeline/TimelineItem.js";
-export { timelineMore } from "./timeline/timelineMore.js";

package/src/themes/threads/style.css

@@ -1,336 +0,0 @@
-/**
- * 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/TimelineFeed.tsx

@@ -1,62 +0,0 @@
-/**
- * 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/threads/timeline/TimelineItem.tsx

@@ -1,67 +0,0 @@
-/**
- * Threads Theme - Timeline Item
- *
- * Dispatches to the correct card component based on post format.
- */
-
-import type { FC } from "hono/jsx";
-import type {
-  TimelineItemView,
-  TimelineCardProps,
-  ThemeComponents,
-  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,
-};
-
-const THEME_KEY_MAP: Record<Format, keyof ThemeComponents> = {
-  note: "NoteCard",
-  link: "LinkCard",
-  quote: "QuoteCard",
-};
-
-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.format];
-  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.format];
-  return <Card post={item.post} compact={compact} />;
-};
-
-export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
-  post,
-  compact,
-  cardOverride,
-  theme,
-}) => {
-  const themeKey = THEME_KEY_MAP[post.format];
-  const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.format];
-  return <Card post={post} compact={compact} />;
-};

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

@@ -1,35 +0,0 @@
-/**
- * Threads Theme - Timeline Load More
- *
- * Auto-loads more posts when scrolled into view.
- * Passes `lastDate` to the server so it can merge date groups across pages.
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { TimelineLoadMoreProps } from "../../../types.js";
-
-export const TimelineLoadMore: FC<TimelineLoadMoreProps> = ({
-  nextCursor,
-  lastDate,
-}) => {
-  const { t } = useLingui();
-  const url = lastDate
-    ? `/?cursor=${nextCursor}&lastDate=${lastDate}`
-    : `/?cursor=${nextCursor}`;
-
-  return (
-    <div
-      id="load-more-container"
-      class="py-6 text-center"
-      data-on-intersect__once={`@get('${url}')`}
-    >
-      <span class="text-sm text-muted-foreground">
-        {t({
-          message: "Loading...",
-          comment: "@context: Loading indicator while fetching more posts",
-        })}
-      </span>
-    </div>
-  );
-};

package/src/themes/threads/timeline/groupByDate.ts

@@ -1,30 +0,0 @@
-/**
- * Groups timeline items by their publication date (YYYY-MM-DD).
- *
- * Shared between TimelineFeed (initial render) and timelineMore (SSE patches)
- * so that both produce identical date group structure.
- */
-
-import type { TimelineItemView } from "../../../types.js";
-
-export interface DateGroup {
-  dateKey: string;
-  label: string;
-  items: TimelineItemView[];
-}
-
-export function groupByDate(items: TimelineItemView[]): DateGroup[] {
-  const groups: DateGroup[] = [];
-  let current: DateGroup | null = null;
-
-  for (const item of items) {
-    const dateKey = item.post.publishedAt.slice(0, 10);
-    if (!current || current.dateKey !== dateKey) {
-      current = { dateKey, label: item.post.publishedAtFormatted, items: [] };
-      groups.push(current);
-    }
-    current.items.push(item);
-  }
-
-  return groups;
-}