@jant/core 0.3.23 → 0.3.25

package/src/themes/minimal/MinimalSiteLayout.tsx

@@ -1,100 +0,0 @@
-/**
- * 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

@@ -1,83 +0,0 @@
-/**
- * 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

@@ -1,157 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/**
- * 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>
-  );
-};

package/src/themes/minimal/timeline/ArticleCard.tsx

@@ -1,37 +0,0 @@
-/**
- * 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

@@ -1,63 +0,0 @@
-/**
- * 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

@@ -1,48 +0,0 @@
-/**
- * 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/themes/minimal/timeline/NoteCard.tsx

@@ -1,35 +0,0 @@
-/**
- * Minimal Theme - Note Card
- *
- * Borderless, content-first card for type="note" posts.
- */
-
-import type { FC } from "hono/jsx";
-import type { TimelineCardProps } from "../../../types.js";
-import { MediaGallery } from "../../../theme/components/MediaGallery.js";
-
-export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  return (
-    <article class={`h-entry${compact ? " text-sm" : ""}`}>
-      {post.contentHtml && (
-        <div
-          class={`e-content prose ${compact ? "prose-sm" : ""}`}
-          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
-        />
-      )}
-      {!compact && 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>
-  );
-};