@jant/core 0.3.21 → 0.3.23

package/src/theme/components/MediaGallery.tsx

@@ -6,10 +6,10 @@
  */
 
 import type { FC } from "hono/jsx";
-import type { MediaAttachment } from "../../types.js";
+import type { MediaView } from "../../types.js";
 
 export interface MediaGalleryProps {
-  attachments: MediaAttachment[];
+  attachments: MediaView[];
 }
 
 export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
@@ -23,8 +23,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
       <div class="mt-3">
         <a href={img.url} target="_blank" rel="noopener noreferrer">
           <img
-            src={img.previewUrl}
-            alt={img.alt || ""}
+            src={img.thumbnailUrl}
+            alt={img.altText || ""}
             width={img.width ?? undefined}
             height={img.height ?? undefined}
             class="rounded-lg max-w-full h-auto"
@@ -47,8 +47,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
             class="aspect-square"
           >
             <img
-              src={img.previewUrl}
-              alt={img.alt || ""}
+              src={img.thumbnailUrl}
+              alt={img.altText || ""}
               class="w-full h-full object-cover"
               loading="lazy"
             />
@@ -70,8 +70,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
           class="row-span-2"
         >
           <img
-            src={first.previewUrl}
-            alt={first.alt || ""}
+            src={first.thumbnailUrl}
+            alt={first.altText || ""}
             class="w-full h-full object-cover"
             loading="lazy"
           />
@@ -85,8 +85,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
             class="aspect-square"
           >
             <img
-              src={img.previewUrl}
-              alt={img.alt || ""}
+              src={img.thumbnailUrl}
+              alt={img.altText || ""}
               class="w-full h-full object-cover"
               loading="lazy"
             />
@@ -111,8 +111,8 @@ export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
           class="relative aspect-square"
         >
           <img
-            src={img.previewUrl}
-            alt={img.alt || ""}
+            src={img.thumbnailUrl}
+            alt={img.altText || ""}
             class="w-full h-full object-cover"
             loading="lazy"
           />

package/src/theme/components/index.ts

@@ -21,15 +21,3 @@ export {
   VisibilityBadge,
   type VisibilityBadgeProps,
 } from "./VisibilityBadge.js";
-
-// Timeline components
-export {
-  NoteCard,
-  ArticleCard,
-  LinkCard,
-  QuoteCard,
-  ImageCard,
-  ThreadPreview,
-  TimelineItem,
-  TimelineFeed,
-} from "./timeline/index.js";

package/src/theme/index.ts

@@ -1,24 +1,22 @@
 /**
- * Jant Theme Components
+ * Jant Theme - Shared Infrastructure
  *
- * These components can be imported for wrapping/extending:
+ * Exports shared layouts, components, and color themes used by all themes.
+ * Individual theme packages (minimal, card, etc.) import from here.
  *
  * @example
  * ```typescript
- * import { PostCard } from "@jant/core/theme";
- *
- * export function MyPostCard(props) {
- *   return (
- *     <div class="my-wrapper">
- *       <PostCard {...props} />
- *     </div>
- *   );
- * }
+ * // In a theme package:
+ * import { MediaGallery, Pagination } from "@jant/core/theme";
+ * import type { ColorTheme } from "@jant/core/theme";
  * ```
  */
 
-// Layout components
+// Layout components (BaseLayout, DashLayout)
 export * from "./layouts/index.js";
 
-// UI components
+// Shared UI components (MediaGallery, Pagination, EmptyState, etc.)
 export * from "./components/index.js";
+
+// Color themes
+export * from "./color-themes.js";

package/src/theme/layouts/index.ts

@@ -4,4 +4,4 @@ export {
   type ToastProps,
 } from "./BaseLayout.js";
 export { DashLayout, type DashLayoutProps } from "./DashLayout.js";
-export { SiteLayout, type SiteLayoutProps } from "./SiteLayout.js";
+export type { SiteLayoutProps } from "../../types.js";

package/src/themes/minimal/MinimalSiteLayout.tsx

@@ -0,0 +1,100 @@
+/**
+ * Minimal Theme - Site Layout
+ *
+ * Single-column, centered layout with horizontal nav.
+ * Inspired by Tufte CSS and Manton.org.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { NavLinkView, SiteLayoutProps } from "../../types.js";
+
+function NavLinks({ links }: { links: NavLinkView[] }) {
+  return (
+    <>
+      {links.map((link) => (
+        <a
+          key={link.id}
+          href={link.url}
+          class={`text-sm ${
+            link.isActive
+              ? "text-foreground font-medium"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+          {...(link.isExternal
+            ? { target: "_blank", rel: "noopener noreferrer" }
+            : {})}
+        >
+          {link.label}
+          {link.isExternal && (
+            <span class="ml-0.5 text-xs opacity-50">&#8599;</span>
+          )}
+        </a>
+      ))}
+    </>
+  );
+}
+
+export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  links,
+  children,
+}) => {
+  return (
+    <div
+      class="max-w-2xl mx-auto px-4 py-8"
+      data-signals={JSON.stringify({ _menuOpen: false })}
+    >
+      {/* Header */}
+      <header class="mb-12">
+        <div class="flex items-center justify-between">
+          <a href="/" class="text-xl font-semibold">
+            {siteName}
+          </a>
+
+          {/* Mobile menu toggle */}
+          {links.length > 0 && (
+            <button
+              data-on:click="$_menuOpen = !$_menuOpen"
+              class="p-2 -mr-2 text-muted-foreground hover:text-foreground sm:hidden"
+              aria-label="Toggle menu"
+            >
+              <svg
+                class="size-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* Desktop nav (inline) */}
+        {links.length > 0 && (
+          <nav class="hidden sm:flex flex-wrap gap-x-4 gap-y-1 mt-3">
+            <NavLinks links={links} />
+          </nav>
+        )}
+
+        {/* Mobile nav (collapsible) */}
+        {links.length > 0 && (
+          <nav
+            class="sm:hidden flex flex-col gap-1 mt-3 overflow-hidden"
+            data-show="$_menuOpen"
+          >
+            <NavLinks links={links} />
+          </nav>
+        )}
+      </header>
+
+      {/* Main content */}
+      <main>{children}</main>
+    </div>
+  );
+};

package/src/themes/minimal/index.ts

@@ -0,0 +1,83 @@
+/**
+ * Minimal Theme
+ *
+ * A content-first, borderless theme inspired by Tufte CSS and Manton.org.
+ * Single-column layout with serif-friendly typography and generous whitespace.
+ *
+ * This is the default theme for Jant.
+ */
+
+import type { JantTheme, ThemeComponents } from "../../types.js";
+import type { ColorTheme } from "../../theme/color-themes.js";
+
+// Layout
+import { SiteLayout } from "./MinimalSiteLayout.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 { ArticleCard } from "./timeline/ArticleCard.js";
+import { LinkCard } from "./timeline/LinkCard.js";
+import { QuoteCard } from "./timeline/QuoteCard.js";
+import { ImageCard } from "./timeline/ImageCard.js";
+import { ThreadPreview } from "./timeline/ThreadPreview.js";
+import { TimelineFeed } from "./timeline/TimelineFeed.js";
+
+export interface ThemeOptions {
+  /** Override individual components */
+  components?: Partial<ThemeComponents>;
+  /** CSS variable overrides */
+  cssVariables?: Record<string, string>;
+  /** Custom color themes */
+  colorThemes?: ColorTheme[];
+}
+
+/**
+ * Create the minimal 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 { minimalTheme } from "@jant/core";
+ *
+ * export default createApp({
+ *   theme: minimalTheme(),  // re-exported as minimalTheme from @jant/core
+ * });
+ * ```
+ */
+export function theme(options?: ThemeOptions): JantTheme {
+  return {
+    name: "minimal",
+    components: {
+      SiteLayout,
+      HomePage,
+      PostPage,
+      SinglePage,
+      ArchivePage,
+      SearchPage,
+      CollectionPage,
+      NoteCard,
+      ArticleCard,
+      LinkCard,
+      QuoteCard,
+      ImageCard,
+      ThreadPreview,
+      TimelineFeed,
+      ...options?.components,
+    },
+    cssVariables: {
+      ...options?.cssVariables,
+    },
+    colorThemes: options?.colorThemes,
+  };
+}

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

@@ -0,0 +1,157 @@
+/**
+ * Minimal Theme - Archive Page
+ *
+ * Date-first list with type filter and cursor pagination.
+ */
+
+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 "../../../theme/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>
+
+        <nav class="flex flex-wrap gap-2 mt-4">
+          <a
+            href="/archive"
+            class={`text-sm ${!type ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+          >
+            {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={`text-sm ${type === typeKey ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
+            >
+              {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 text-xs text-muted-foreground">
+                          {getTypeLabel(post.type)}
+                        </span>
+                      )}
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </section>
+          ))
+        )}
+      </main>
+
+      <PaginationComponent
+        baseUrl={type ? `/archive?type=${type}` : "/archive"}
+        hasMore={hasMore}
+        nextCursor={nextCursor}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,60 @@
+/**
+ * Minimal Theme - Collection Page
+ *
+ * Simple list of posts in a collection.
+ */
+
+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">
+        {posts.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No posts in this collection.",
+              comment: "@context: Empty state message",
+            })}
+          </p>
+        ) : (
+          posts.map((post, i) => (
+            <article key={post.id} class="h-entry">
+              {i > 0 && <hr class="my-6 border-border" />}
+              {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/themes/minimal/pages/HomePage.tsx

@@ -0,0 +1,41 @@
+/**
+ * Minimal Theme - Home Page
+ *
+ * Renders the timeline feed with thread previews.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { HomePageProps } from "../../../types.js";
+import { TimelineFeed as DefaultTimelineFeed } from "../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/themes/minimal/pages/PostPage.tsx

@@ -0,0 +1,43 @@
+/**
+ * Minimal Theme - Post Page
+ *
+ * Clean article layout for a single post.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { PostPageProps } from "../../../types.js";
+import { MediaGallery as DefaultMediaGallery } from "../../../theme/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-8 pt-4 border-t border-border text-sm text-muted-foreground">
+        <time class="dt-published" datetime={post.publishedAt}>
+          {post.publishedAtFormatted}
+        </time>
+        <a href={post.permalink} class="u-url ml-4 hover:underline">
+          {t({
+            message: "Permalink",
+            comment: "@context: Link to permanent URL of post",
+          })}
+        </a>
+      </footer>
+    </article>
+  );
+};