@jant/core 0.0.1

package/src/theme/components/ThreadView.tsx

@@ -0,0 +1,118 @@
+/**
+ * Thread View Component
+ *
+ * Displays a thread of posts with reply chain visualization
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+import type { Post } from "../../types.js";
+import * as sqid from "../../lib/sqid.js";
+import * as time from "../../lib/time.js";
+
+export interface ThreadViewProps {
+  /** All posts in the thread, ordered by createdAt */
+  posts: Post[];
+  /** ID of the currently viewed post (to highlight) */
+  currentPostId: number;
+}
+
+const ThreadPost: FC<{
+  post: Post;
+  isCurrent: boolean;
+  isRoot: boolean;
+}> = ({ post, isCurrent, isRoot }) => {
+  const { t } = useLingui();
+  return (
+    <article
+      id={`post-${post.id}`}
+      class={`h-entry p-4 rounded-lg border ${
+        isCurrent
+          ? "border-primary bg-primary/5 ring-2 ring-primary/20"
+          : "border-border hover:border-muted-foreground/30"
+      }`}
+    >
+      {post.title && (
+        <h2 class="p-name text-lg font-medium mb-2">
+          <a href={`/p/${sqid.encode(post.id)}`} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+
+      <div
+        class="e-content prose prose-sm"
+        dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+      />
+
+      <footer class="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
+        <time class="dt-published" datetime={time.toISOString(post.publishedAt)}>
+          {time.formatDate(post.publishedAt)}
+        </time>
+        {isRoot && (
+          <span class="text-xs">
+            {t({ message: "Thread start", comment: "@context: Thread view indicator - first post in thread" })}
+          </span>
+        )}
+        {!isCurrent && (
+          <a
+            href={`/p/${sqid.encode(post.id)}`}
+            class="text-xs hover:underline"
+          >
+            {t({ message: "Permalink", comment: "@context: Link to individual post in thread" })}
+          </a>
+        )}
+      </footer>
+    </article>
+  );
+};
+
+export const ThreadView: FC<ThreadViewProps> = ({ posts, currentPostId }) => {
+  const { t } = useLingui();
+  if (posts.length === 0) {
+    return null;
+  }
+
+  const rootPost = posts[0];
+  const isThread = posts.length > 1;
+
+  // Single post, no thread
+  if (!isThread) {
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Early return for empty array at line 73 guarantees posts[0] exists
+      <ThreadPost post={rootPost!} isCurrent={true} isRoot={false} />
+    );
+  }
+
+  const threadLabel = posts.length === 1
+    ? t({ message: "Thread with 1 post", comment: "@context: Thread view header - single post" })
+    : t({ message: "Thread with {count} posts", comment: "@context: Thread view header - multiple posts", values: { count: String(posts.length) } });
+
+  return (
+    <div class="thread-view">
+      <div class="mb-4 text-sm text-muted-foreground">
+        {threadLabel}
+      </div>
+
+      <div class="flex flex-col gap-3">
+        {posts.map((post, index) => (
+          <div key={post.id} class="relative">
+            {/* Connection line */}
+            {index > 0 && (
+              <div class="absolute left-6 -top-3 w-0.5 h-3 bg-border" />
+            )}
+            {index < posts.length - 1 && (
+              <div class="absolute left-6 -bottom-3 w-0.5 h-3 bg-border" />
+            )}
+
+            <ThreadPost
+              post={post}
+              isCurrent={post.id === currentPostId}
+              isRoot={index === 0}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/theme/components/TypeBadge.tsx

@@ -0,0 +1,28 @@
+/**
+ * Type Badge Component
+ *
+ * Displays a badge indicating the type of a post (note, article, link, etc.)
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+import type { PostType } from "../../types.js";
+
+export interface TypeBadgeProps {
+  type: PostType;
+}
+
+export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
+  const { t } = useLingui();
+
+  const labels: Record<PostType, string> = {
+    note: t({ message: "Note", comment: "@context: Post type badge - note" }),
+    article: t({ message: "Article", comment: "@context: Post type badge - article" }),
+    link: t({ message: "Link", comment: "@context: Post type badge - link" }),
+    quote: t({ message: "Quote", comment: "@context: Post type badge - quote" }),
+    image: t({ message: "Image", comment: "@context: Post type badge - image" }),
+    page: t({ message: "Page", comment: "@context: Post type badge - page" }),
+  };
+
+  return <span class="badge-outline">{labels[type]}</span>;
+};

package/src/theme/components/VisibilityBadge.tsx

@@ -0,0 +1,33 @@
+/**
+ * Visibility Badge Component
+ *
+ * Displays a badge indicating the visibility level of a post
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/index.js";
+import type { Visibility } from "../../types.js";
+
+export interface VisibilityBadgeProps {
+  visibility: Visibility;
+}
+
+export const VisibilityBadge: FC<VisibilityBadgeProps> = ({ visibility }) => {
+  const { t } = useLingui();
+
+  const variants: Record<Visibility, string> = {
+    featured: "badge-primary",
+    quiet: "badge-secondary",
+    unlisted: "badge-outline",
+    draft: "badge-outline",
+  };
+
+  const labels: Record<Visibility, string> = {
+    featured: t({ message: "Featured", comment: "@context: Post visibility badge - featured" }),
+    quiet: t({ message: "Quiet", comment: "@context: Post visibility badge - normal" }),
+    unlisted: t({ message: "Unlisted", comment: "@context: Post visibility badge - unlisted" }),
+    draft: t({ message: "Draft", comment: "@context: Post visibility badge - draft" }),
+  };
+
+  return <span class={variants[visibility]}>{labels[visibility]}</span>;
+};

package/src/theme/components/index.ts

@@ -0,0 +1,12 @@
+export { ActionButtons, type ActionButtonsProps } from "./ActionButtons.js";
+export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
+export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
+export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
+export { PageForm, type PageFormProps } from "./PageForm.js";
+export { Pagination, LoadMore, PagePagination, type PaginationProps, type LoadMoreProps, type PagePaginationProps } from "./Pagination.js";
+export { PostForm, type PostFormProps } from "./PostForm.js";
+export { PostList, type PostListProps } from "./PostList.js";
+export { ThreadView, type ThreadViewProps } from "./ThreadView.js";
+export { TypeBadge, type TypeBadgeProps } from "./TypeBadge.js";
+export { VisibilityBadge, type VisibilityBadgeProps } from "./VisibilityBadge.js";

package/src/theme/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Jant Theme Components
+ *
+ * These components can be imported for wrapping/extending:
+ *
+ * @example
+ * ```typescript
+ * import { PostCard } from "@jant/core/theme";
+ *
+ * export function MyPostCard(props) {
+ *   return (
+ *     <div class="my-wrapper">
+ *       <PostCard {...props} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+// Layout components
+export * from "./layouts/index.js";
+
+// UI components
+export * from "./components/index.js";

package/src/theme/layouts/BaseLayout.tsx

@@ -0,0 +1,49 @@
+/**
+ * Base HTML Layout
+ *
+ * Provides the HTML shell with meta tags, styles, and scripts.
+ * If Context is provided, automatically wraps children with I18nProvider.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { Context } from "hono";
+import { getAssets } from "../../lib/assets.js";
+import { I18nProvider } from "../../i18n/index.js";
+
+export interface BaseLayoutProps {
+  title: string;
+  description?: string;
+  lang?: string;
+  c?: Context;
+}
+
+export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
+  title,
+  description,
+  lang = "en",
+  c,
+  children,
+}) => {
+  // Get assets at render time (supports runtime manifest loading)
+  const assets = getAssets();
+
+  // Automatically wrap with I18nProvider if Context is provided
+  const content = c ? <I18nProvider c={c}>{children}</I18nProvider> : children;
+
+  return (
+    <html lang={lang}>
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        {description && <meta name="description" content={description} />}
+        <link rel="stylesheet" href={assets.styles} />
+        <script type="module" src={assets.client} defer />
+        <script type="module" src={assets.datastar} defer />
+      </head>
+      <body class="bg-background text-foreground antialiased">
+        {content}
+      </body>
+    </html>
+  );
+};

package/src/theme/layouts/DashLayout.tsx

@@ -0,0 +1,108 @@
+/**
+ * Dashboard Layout
+ *
+ * Layout for admin dashboard pages
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { Context } from "hono";
+import { useLingui } from "../../i18n/index.js";
+import { BaseLayout } from "./BaseLayout.js";
+
+export interface DashLayoutProps {
+  c: Context;
+  title: string;
+  siteName: string;
+  currentPath?: string;
+}
+
+function DashLayoutContent({
+  siteName,
+  currentPath,
+  children,
+}: PropsWithChildren<Omit<DashLayoutProps, "c" | "title">>) {
+  const { t } = useLingui();
+
+  const isActive = (path: string, match?: RegExp) => {
+    if (!currentPath) return false;
+    if (match) return match.test(currentPath);
+    return currentPath === path;
+  };
+
+  const navClass = (path: string, match?: RegExp) =>
+    `justify-start px-3 py-2 text-sm rounded-md ${
+      isActive(path, match)
+        ? "bg-accent text-accent-foreground font-medium"
+        : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+    }`;
+
+  return (
+    <div class="min-h-screen">
+      {/* Header */}
+      <header class="border-b bg-card">
+        <div class="container flex h-14 items-center justify-between">
+          <a href="/dash" class="font-semibold">
+            {siteName}
+          </a>
+          <nav class="flex items-center gap-4">
+            <a href="/" class="text-sm text-muted-foreground hover:text-foreground">
+              {t({ message: "View Site", comment: "@context: Dashboard header link to view the public site" })}
+            </a>
+            <a href="/signout" class="text-sm text-muted-foreground hover:text-foreground">
+              {t({ message: "Sign Out", comment: "@context: Dashboard header link to sign out" })}
+            </a>
+          </nav>
+        </div>
+      </header>
+
+      {/* Sidebar + Main */}
+      <div class="container flex gap-8 py-8">
+        {/* Sidebar */}
+        <aside class="w-48 shrink-0">
+          <nav class="flex flex-col gap-1">
+            <a href="/dash" class={navClass("/dash", /^\/dash$/)}>
+              {t({ message: "Dashboard", comment: "@context: Dashboard navigation - main dashboard page" })}
+            </a>
+            <a href="/dash/posts" class={navClass("/dash/posts", /^\/dash\/posts/)}>
+              {t({ message: "Posts", comment: "@context: Dashboard navigation - posts management" })}
+            </a>
+            <a href="/dash/pages" class={navClass("/dash/pages", /^\/dash\/pages/)}>
+              {t({ message: "Pages", comment: "@context: Dashboard navigation - pages management" })}
+            </a>
+            <a href="/dash/media" class={navClass("/dash/media", /^\/dash\/media/)}>
+              {t({ message: "Media", comment: "@context: Dashboard navigation - media library" })}
+            </a>
+            <a href="/dash/collections" class={navClass("/dash/collections", /^\/dash\/collections/)}>
+              {t({ message: "Collections", comment: "@context: Dashboard navigation - collections management" })}
+            </a>
+            <a href="/dash/redirects" class={navClass("/dash/redirects", /^\/dash\/redirects/)}>
+              {t({ message: "Redirects", comment: "@context: Dashboard navigation - URL redirects" })}
+            </a>
+            <a href="/dash/settings" class={navClass("/dash/settings", /^\/dash\/settings/)}>
+              {t({ message: "Settings", comment: "@context: Dashboard navigation - site settings" })}
+            </a>
+          </nav>
+        </aside>
+
+        {/* Main content */}
+        <main class="flex-1 min-w-0">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+export const DashLayout: FC<PropsWithChildren<DashLayoutProps>> = ({
+  c,
+  title,
+  siteName,
+  currentPath,
+  children,
+}) => {
+  return (
+    <BaseLayout title={`${title} - ${siteName}`} c={c}>
+      <DashLayoutContent siteName={siteName} currentPath={currentPath}>
+        {children}
+      </DashLayoutContent>
+    </BaseLayout>
+  );
+};

package/src/theme/layouts/index.ts

@@ -0,0 +1,2 @@
+export { BaseLayout, type BaseLayoutProps } from "./BaseLayout.js";
+export { DashLayout, type DashLayoutProps } from "./DashLayout.js";

package/src/theme/styles/main.css

@@ -0,0 +1,52 @@
+@import "tailwindcss";
+@import "basecoat-css";
+
+/* Scan source files for Tailwind classes */
+@source "../../**/*.tsx";
+@source "../../**/*.ts";
+
+/* Custom theme variables */
+:root {
+  --radius: 0.5rem;
+}
+
+/* Custom utilities */
+@layer utilities {
+  .container {
+    @apply mx-auto max-w-2xl px-4;
+  }
+}
+
+/* Badge component */
+@layer components {
+  .badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .badge-primary {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  .badge-secondary {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .badge-outline {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    @apply border bg-transparent;
+    border-color: var(--color-border);
+    color: var(--color-foreground);
+  }
+
+  .badge-destructive {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    background-color: var(--color-destructive);
+    color: white;
+  }
+}

package/src/types.ts

@@ -0,0 +1,222 @@
+/**
+ * Jant Type Definitions
+ */
+
+// =============================================================================
+// Content Types
+// =============================================================================
+
+export const POST_TYPES = ["note", "article", "link", "quote", "image", "page"] as const;
+export type PostType = (typeof POST_TYPES)[number];
+
+export const VISIBILITY_LEVELS = ["featured", "quiet", "unlisted", "draft"] as const;
+export type Visibility = (typeof VISIBILITY_LEVELS)[number];
+
+
+// =============================================================================
+// Cloudflare Bindings
+// =============================================================================
+
+export interface Bindings {
+  DB: D1Database;
+  R2?: R2Bucket;
+  SITE_URL: string;
+  AUTH_SECRET?: string;
+  R2_PUBLIC_URL?: string;
+  IMAGE_TRANSFORM_URL?: string;
+}
+
+
+// =============================================================================
+// Entity Types
+// =============================================================================
+
+export interface Post {
+  id: number;
+  type: PostType;
+  visibility: Visibility;
+  title: string | null;
+  path: string | null;
+  content: string | null;
+  contentHtml: string | null;
+  sourceUrl: string | null;
+  sourceName: string | null;
+  sourceDomain: string | null;
+  replyToId: number | null;
+  threadId: number | null;
+  deletedAt: number | null;
+  publishedAt: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface Media {
+  id: string; // UUIDv7
+  postId: number | null;
+  filename: string;
+  originalName: string;
+  mimeType: string;
+  size: number;
+  r2Key: string;
+  width: number | null;
+  height: number | null;
+  alt: string | null;
+  createdAt: number;
+}
+
+export interface Collection {
+  id: number;
+  title: string;
+  path: string | null;
+  description: string | null;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface PostCollection {
+  postId: number;
+  collectionId: number;
+  addedAt: number;
+}
+
+export interface Redirect {
+  id: number;
+  fromPath: string;
+  toPath: string;
+  type: 301 | 302;
+  createdAt: number;
+}
+
+export interface Setting {
+  key: string;
+  value: string;
+  updatedAt: number;
+}
+
+// =============================================================================
+// Operation Types
+// =============================================================================
+
+export interface CreatePost {
+  type: PostType;
+  visibility?: Visibility;
+  title?: string;
+  path?: string;
+  content?: string;
+  sourceUrl?: string;
+  sourceName?: string;
+  replyToId?: number;
+  publishedAt?: number;
+}
+
+export interface UpdatePost {
+  type?: PostType;
+  visibility?: Visibility;
+  title?: string | null;
+  path?: string | null;
+  content?: string | null;
+  sourceUrl?: string | null;
+  sourceName?: string | null;
+  publishedAt?: number;
+}
+
+// =============================================================================
+// Configuration Types
+// =============================================================================
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+
+/**
+ * Props for overridable theme components
+ */
+export interface BaseLayoutProps extends PropsWithChildren {
+  title?: string;
+  description?: string;
+}
+
+export interface PostCardProps {
+  post: Post;
+  showExcerpt?: boolean;
+  showDate?: boolean;
+}
+
+export interface PostListProps {
+  posts: Post[];
+  emptyMessage?: string;
+}
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  basePath: string;
+}
+
+export interface EmptyStateProps {
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  actionHref?: string;
+}
+
+/**
+ * Theme component overrides
+ */
+export interface ThemeComponents {
+  BaseLayout?: FC<BaseLayoutProps>;
+  PostCard?: FC<PostCardProps>;
+  PostList?: FC<PostListProps>;
+  Pagination?: FC<PaginationProps>;
+  EmptyState?: FC<EmptyStateProps>;
+}
+
+/**
+ * Theme configuration
+ */
+export interface JantTheme {
+  /** Theme name */
+  name?: string;
+  /** Component overrides */
+  components?: ThemeComponents;
+  /** CSS variable overrides */
+  cssVariables?: Record<string, string>;
+}
+
+/**
+ * Site configuration
+ */
+export interface SiteConfig {
+  /** Site name */
+  name?: string;
+  /** Site description */
+  description?: string;
+  /** Default language */
+  language?: string;
+  /** Site URL (usually set via env) */
+  url?: string;
+}
+
+/**
+ * Feature toggles
+ */
+export interface FeatureConfig {
+  /** Enable search (default: true) */
+  search?: boolean;
+  /** Enable RSS feed (default: true) */
+  rss?: boolean;
+  /** Enable sitemap (default: true) */
+  sitemap?: boolean;
+  /** Enable i18n (default: true) */
+  i18n?: boolean;
+}
+
+/**
+ * Main Jant configuration
+ */
+export interface JantConfig {
+  /** Site configuration */
+  site?: SiteConfig;
+  /** Theme configuration */
+  theme?: JantTheme;
+  /** Feature toggles */
+  features?: FeatureConfig;
+}