@jant/core 0.3.22 → 0.3.23

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/{theme → themes/minimal}/pages/ArchivePage.tsx

@@ -1,15 +1,14 @@
 /**
- * Default Archive Page Component
+ * Minimal Theme - Archive Page
  *
- * Renders posts grouped by year-month with type filter and cursor pagination.
- * Theme authors can replace this entirely via ThemeComponents.ArchivePage.
+ * 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 "../components/Pagination.js";
+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();
@@ -83,11 +82,10 @@ export const ArchivePage: FC<ArchivePageProps> = ({
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{title}</h1>
 
-        {/* Type filter */}
         <nav class="flex flex-wrap gap-2 mt-4">
           <a
             href="/archive"
-            class={`badge ${!type ? "badge-primary" : "badge-outline"}`}
+            class={`text-sm ${!type ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
           >
             {t({
               message: "All",
@@ -98,7 +96,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
             <a
               key={typeKey}
               href={`/archive?type=${typeKey}`}
-              class={`badge ${type === typeKey ? "badge-primary" : "badge-outline"}`}
+              class={`text-sm ${type === typeKey ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"}`}
             >
               {getTypeLabelPlural(typeKey)}
             </a>
@@ -136,7 +134,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                           `Post #${post.id}`}
                       </a>
                       {!type && (
-                        <span class="ml-2 badge-outline text-xs">
+                        <span class="ml-2 text-xs text-muted-foreground">
                           {getTypeLabel(post.type)}
                         </span>
                       )}
@@ -149,7 +147,6 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         )}
       </main>
 
-      {/* Pagination */}
       <PaginationComponent
         baseUrl={type ? `/archive?type=${type}` : "/archive"}
         hasMore={hasMore}

package/src/{theme → themes/minimal}/pages/CollectionPage.tsx

@@ -1,13 +1,12 @@
 /**
- * Default Collection Page Component
+ * Minimal Theme - Collection Page
  *
- * Renders a collection with its posts.
- * Theme authors can replace this entirely via ThemeComponents.CollectionPage.
+ * 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";
+import type { CollectionPageProps } from "../../../types.js";
 
 export const CollectionPage: FC<CollectionPageProps> = ({
   collection,
@@ -24,7 +23,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
         )}
       </header>
 
-      <main class="flex flex-col gap-6">
+      <main class="flex flex-col">
         {posts.length === 0 ? (
           <p class="text-muted-foreground">
             {t({
@@ -33,8 +32,9 @@ export const CollectionPage: FC<CollectionPageProps> = ({
             })}
           </p>
         ) : (
-          posts.map((post) => (
+          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">

package/src/{theme → themes/minimal}/pages/HomePage.tsx

@@ -1,14 +1,13 @@
 /**
- * Default Home Page Component
+ * Minimal Theme - Home Page
  *
  * Renders the timeline feed with thread previews.
- * Theme authors can replace this entirely via ThemeComponents.HomePage.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { HomePageProps } from "../../types.js";
-import { TimelineFeed as DefaultTimelineFeed } from "../components/timeline/TimelineFeed.js";
+import type { HomePageProps } from "../../../types.js";
+import { TimelineFeed as DefaultTimelineFeed } from "../timeline/TimelineFeed.js";
 
 export const HomePage: FC<HomePageProps> = ({
   items,

package/src/{theme → themes/minimal}/pages/PostPage.tsx

@@ -1,14 +1,13 @@
 /**
- * Default Post Page Component
+ * Minimal Theme - Post Page
  *
- * Renders a single post with media gallery.
- * Theme authors can replace this entirely via ThemeComponents.PostPage.
+ * 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 "../components/MediaGallery.js";
+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();
@@ -28,11 +27,11 @@ export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
 
       {post.media.length > 0 && <Gallery attachments={post.media} />}
 
-      <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
+      <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">
+        <a href={post.permalink} class="u-url ml-4 hover:underline">
           {t({
             message: "Permalink",
             comment: "@context: Link to permanent URL of post",

package/src/{theme → themes/minimal}/pages/SearchPage.tsx

@@ -1,14 +1,13 @@
 /**
- * Default Search Page Component
+ * Minimal Theme - Search Page
  *
- * Renders search form and results with page-based pagination.
- * Theme authors can replace this entirely via ThemeComponents.SearchPage.
+ * 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 "../components/Pagination.js";
+import type { SearchPageProps } from "../../../types.js";
+import { PagePagination as DefaultPagePagination } from "../../../theme/components/Pagination.js";
 
 export const SearchPage: FC<SearchPageProps> = ({
   query,
@@ -30,7 +29,6 @@ export const SearchPage: FC<SearchPageProps> = ({
     <div>
       <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
 
-      {/* Search form */}
       <form method="get" action="/search" class="mb-8">
         <div class="flex gap-2">
           <input
@@ -53,14 +51,12 @@ export const SearchPage: FC<SearchPageProps> = ({
         </div>
       </form>
 
-      {/* Error */}
       {error && (
         <div class="alert-destructive mb-6">
           <h2>{error}</h2>
         </div>
       )}
 
-      {/* Results */}
       {query && !error && (
         <div>
           <p class="text-sm text-muted-foreground mb-4">
@@ -85,12 +81,9 @@ export const SearchPage: FC<SearchPageProps> = ({
             <>
               <div class="flex flex-col gap-4">
                 {results.map((result) => (
-                  <article
-                    key={result.post.id}
-                    class="p-4 rounded-lg border hover:border-primary"
-                  >
-                    <a href={result.post.permalink} class="block">
-                      <h2 class="font-medium hover:underline">
+                  <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}`}
@@ -98,13 +91,14 @@ export const SearchPage: FC<SearchPageProps> = ({
 
                       {result.snippet && (
                         <p
-                          class="text-sm text-muted-foreground mt-2 line-clamp-2"
+                          class="text-sm text-muted-foreground mt-1 line-clamp-2"
                           dangerouslySetInnerHTML={{ __html: result.snippet }}
                         />
                       )}
 
-                      <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
-                        <span class="badge-outline">{result.post.type}</span>
+                      <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>

package/src/{theme → themes/minimal}/pages/SinglePage.tsx

@@ -1,18 +1,17 @@
 /**
- * Default Single Page Component
+ * Minimal Theme - Single Page
  *
- * Renders a custom page (type "page").
- * Theme authors can replace this entirely via ThemeComponents.SinglePage.
+ * Simple page content layout for type="page" posts.
  */
 
 import type { FC } from "hono/jsx";
-import type { SinglePageProps } from "../../types.js";
+import type { SinglePageProps } from "../../../types.js";
 
 export const SinglePage: FC<SinglePageProps> = ({ page }) => {
   return (
     <article class="h-entry">
       {page.title && (
-        <h1 class="p-name text-3xl font-semibold mb-6">{page.title}</h1>
+        <h1 class="p-name text-2xl font-semibold mb-6">{page.title}</h1>
       )}
 
       <div

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/{theme/components → themes/minimal}/timeline/NoteCard.tsx

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

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

@@ -1,7 +1,7 @@
 /**
- * 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";
@@ -9,12 +9,10 @@ import type { TimelineCardProps } from "../../../types.js";
 
 export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   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>
@@ -36,8 +34,11 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           )}
         </div>
       )}
-      <footer class="mt-2 text-xs text-muted-foreground">
-        <a href={post.permalink} class="u-url hover:underline">
+      <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>