@jant/core 0.3.24 → 0.3.26

package/src/lib/image.ts

@@ -102,36 +102,28 @@ export function getPublicUrlForProvider(
 }
 
 /**
- * Generates a media URL using UUIDv7-based paths.
+ * Generates a media URL from a storage key.
  *
- * Returns a public URL for a media file. If `publicUrl` is set, uses that directly
- * with the storage key. Otherwise, generates a `/media/{id}.{ext}` local proxy URL.
+ * Both proxy and CDN paths use the same structure — only the domain differs.
+ * Without a public URL, returns a root-relative path for the local proxy.
+ * With a public URL, prefixes that domain.
  *
- * @param mediaId - The UUIDv7 database ID of the media
- * @param storageKey - The storage object key (used to build CDN path and extract extension)
+ * @param storageKey - The storage object key (e.g. `"media/2025/01/uuid.webp"`)
  * @param publicUrl - Optional public URL base for direct CDN access
  * @returns The public URL for the media file
  *
  * @example
  * ```ts
- * // Without public URL - uses local proxy with UUID and extension
- * getMediaUrl("01902a9f-1a2b-7c3d", "media/2025/01/01902a9f-1a2b-7c3d.webp");
- * // Returns: "/media/01902a9f-1a2b-7c3d.webp"
+ * // Without public URL - local proxy
+ * getMediaUrl("media/2025/01/01902a9f-1a2b-7c3d.webp");
+ * // Returns: "/media/2025/01/01902a9f-1a2b-7c3d.webp"
  *
- * // With public URL - uses direct CDN
- * getMediaUrl("01902a9f-1a2b-7c3d", "media/2025/01/01902a9f-1a2b-7c3d.webp", "https://cdn.example.com");
+ * // With public URL - CDN
+ * getMediaUrl("media/2025/01/01902a9f-1a2b-7c3d.webp", "https://cdn.example.com");
  * // Returns: "https://cdn.example.com/media/2025/01/01902a9f-1a2b-7c3d.webp"
  * ```
  */
-export function getMediaUrl(
-  mediaId: string,
-  storageKey: string,
-  publicUrl?: string,
-): string {
-  if (publicUrl) {
-    return `${publicUrl.replace(/\/+$/, "")}/${storageKey}`;
-  }
-  // Extract extension from storage key
-  const ext = storageKey.split(".").pop() || "bin";
-  return `/media/${mediaId}.${ext}`;
+export function getMediaUrl(storageKey: string, publicUrl?: string): string {
+  const base = publicUrl ? publicUrl.replace(/\/+$/, "") : "";
+  return `${base}/${storageKey}`;
 }

package/src/lib/media-helpers.ts

@@ -45,9 +45,9 @@ export function buildMediaMap(
         );
         return {
           id: m.id,
-          url: getMediaUrl(m.id, m.storageKey, publicUrl),
+          url: getMediaUrl(m.storageKey, publicUrl),
           previewUrl: getImageUrl(
-            getMediaUrl(m.id, m.storageKey, publicUrl),
+            getMediaUrl(m.storageKey, publicUrl),
             imageTransformUrl,
             { width: 400, quality: 80, format: "auto", fit: "cover" },
           ),

package/src/lib/nav-reorder.ts

@@ -16,7 +16,7 @@ if (list) {
       const ids = [...list.querySelectorAll<HTMLElement>("[data-id]")].map(
         (el) => Number(el.dataset.id),
       );
-      fetch("/dash/navigation/reorder", {
+      fetch("/dash/pages/reorder", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ ids }),

package/src/lib/navigation.ts

@@ -5,9 +5,11 @@
  */
 
 import type { Context } from "hono";
-import { getSiteName } from "./config.js";
-import type { NavItemView } from "../types.js";
+import { getSiteName, getHomeDefaultView, getSiteFooter } from "./config.js";
+import type { Collection, NavItemView } from "../types.js";
 import { toNavItemViews } from "./view.js";
+import { getMediaUrl, getPublicUrlForProvider } from "./image.js";
+import { render as renderMarkdown } from "./markdown.js";
 
 /**
  * Navigation data needed by SiteLayout
@@ -16,12 +18,20 @@ export interface NavigationData {
   links: NavItemView[];
   currentPath: string;
   siteName: string;
+  siteDescription: string;
+  isAuthenticated: boolean;
+  collections: Collection[];
+  homeDefaultView: string;
+  siteAvatarUrl?: string;
+  showHeaderAvatar?: boolean;
+  siteFooterHtml?: string;
 }
 
 /**
  * Fetch navigation data for public pages.
  *
  * Returns NavItemView[] with pre-computed isActive/isExternal state.
+ * Also checks authentication status and loads collections for authenticated users.
  *
  * @param c - Hono context
  * @returns Navigation data for SiteLayout
@@ -39,7 +49,66 @@ export interface NavigationData {
 export async function getNavigationData(c: Context): Promise<NavigationData> {
   const items = await c.var.services.navItems.list();
   const currentPath = new URL(c.req.url).pathname;
-  const siteName = await getSiteName(c);
+  const [siteName, homeDefaultView, siteFooter] = await Promise.all([
+    getSiteName(c),
+    getHomeDefaultView(c),
+    getSiteFooter(c),
+  ]);
+
+  // Only include description if explicitly set (DB or env), not the default
+  const dbDescription = await c.var.services.settings.get("SITE_DESCRIPTION");
+  const envDescription = c.env.SITE_DESCRIPTION;
+  const siteDescription =
+    dbDescription || (typeof envDescription === "string" ? envDescription : "");
+
+  // Resolve avatar URL from storage key
+  const avatarKey = await c.var.services.settings.get("SITE_AVATAR");
+  const showHeaderAvatar =
+    (await c.var.services.settings.get("SHOW_HEADER_AVATAR")) === "true";
+  let siteAvatarUrl: string | undefined;
+  if (avatarKey) {
+    const publicUrl = getPublicUrlForProvider(
+      c.env.STORAGE_DRIVER || "r2",
+      c.env.R2_PUBLIC_URL,
+      c.env.S3_PUBLIC_URL,
+    );
+    siteAvatarUrl = getMediaUrl(avatarKey, publicUrl);
+  }
+
+  // Render footer markdown
+  const siteFooterHtml = siteFooter ? renderMarkdown(siteFooter) : undefined;
+
   const links = toNavItemViews(items, currentPath);
-  return { links, currentPath, siteName };
+
+  // Check auth status for compose button
+  let isAuthenticated = false;
+  let collections: Collection[] = [];
+  if (c.var.auth) {
+    try {
+      const session = await c.var.auth.api.getSession({
+        headers: c.req.raw.headers,
+      });
+      isAuthenticated = !!session?.user;
+    } catch {
+      // Not authenticated
+    }
+  }
+
+  // Only load collections when authenticated (for compose dialog)
+  if (isAuthenticated) {
+    collections = await c.var.services.collections.list();
+  }
+
+  return {
+    links,
+    currentPath,
+    siteName,
+    siteDescription,
+    isAuthenticated,
+    collections,
+    homeDefaultView,
+    siteAvatarUrl,
+    showHeaderAvatar: showHeaderAvatar && !!siteAvatarUrl,
+    siteFooterHtml,
+  };
 }

package/src/lib/pagination.ts

@@ -0,0 +1,50 @@
+/**
+ * Pagination Utilities
+ *
+ * Pure utility functions for page-based pagination.
+ */
+
+/**
+ * Computes which page numbers to display in a numbered pagination control.
+ * Always includes: first page, last page, current page, and 1 page on each side of current.
+ * Gaps between non-consecutive pages are represented by 0 (ellipsis marker).
+ *
+ * @param currentPage - The current active page (1-indexed)
+ * @param totalPages - Total number of pages
+ * @returns Array of page numbers, with 0 representing ellipsis gaps
+ *
+ * @example
+ * ```ts
+ * getPageNumbers(1, 5)    // [1, 2, 3, 4, 5]
+ * getPageNumbers(1, 20)   // [1, 2, 0, 20]
+ * getPageNumbers(10, 20)  // [1, 0, 9, 10, 11, 0, 20]
+ * ```
+ */
+export function getPageNumbers(
+  currentPage: number,
+  totalPages: number,
+): number[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pages = new Set<number>();
+  pages.add(1);
+  pages.add(totalPages);
+  pages.add(currentPage);
+  if (currentPage > 1) pages.add(currentPage - 1);
+  if (currentPage < totalPages) pages.add(currentPage + 1);
+
+  const sorted = [...pages].sort((a, b) => a - b);
+
+  // Insert 0 for gaps
+  const result: number[] = [];
+  for (let i = 0; i < sorted.length; i++) {
+    if (i > 0 && sorted[i]! - sorted[i - 1]! > 1) {
+      result.push(0); // ellipsis marker
+    }
+    result.push(sorted[i]!);
+  }
+
+  return result;
+}

package/src/lib/render.tsx

@@ -3,16 +3,13 @@
  *
  * Provides a single entry point for rendering public pages with the
  * correct layout stack: BaseLayout > SiteLayout > content.
- *
- * BaseLayout is always the built-in implementation (handles Vite assets,
- * I18nProvider, toast). SiteLayout is resolved from theme components.
  */
 
 import type { Context } from "hono";
 import type { Child } from "hono/jsx";
-import type { ThemeComponents, SiteLayoutProps } from "../types.js";
-import { BaseLayout } from "../theme/layouts/BaseLayout.js";
-import { ThreadsSiteLayout as DefaultSiteLayout } from "../themes/threads/ThreadsSiteLayout.js";
+import type { SiteLayoutProps } from "../types.js";
+import { BaseLayout } from "../ui/layouts/BaseLayout.js";
+import { SiteLayout } from "../ui/layouts/SiteLayout.js";
 import type { NavigationData } from "./navigation.js";
 
 export interface RenderPublicPageOptions {
@@ -29,8 +26,6 @@ export interface RenderPublicPageOptions {
 /**
  * Render a public page with the standard layout stack.
  *
- * Always uses the built-in BaseLayout, resolves SiteLayout from theme config.
- *
  * @param c - Hono context
  * @param options - Page rendering options
  * @returns Hono HTML response
@@ -48,20 +43,32 @@ export interface RenderPublicPageOptions {
 export function renderPublicPage(c: Context, options: RenderPublicPageOptions) {
   const { title, description, navData, content } = options;
 
-  const components = c.var.config?.theme?.components as
-    | ThemeComponents
-    | undefined;
-  const Layout = components?.SiteLayout ?? DefaultSiteLayout;
-
   const layoutProps: SiteLayoutProps = {
     siteName: navData.siteName,
+    siteDescription: navData.siteDescription,
     links: navData.links,
     currentPath: navData.currentPath,
+    isAuthenticated: navData.isAuthenticated,
+    collections: navData.collections,
+    homeDefaultView: navData.homeDefaultView,
+    siteAvatarUrl: navData.siteAvatarUrl,
+    showHeaderAvatar: navData.showHeaderAvatar,
+    siteFooterHtml: navData.siteFooterHtml,
   };
 
+  // Read favicon and noindex from context (set by theme middleware)
+  const faviconUrl = c.get("faviconUrl") as string | undefined;
+  const noindex = c.get("noindex") as boolean | undefined;
+
   return c.html(
-    <BaseLayout title={title} description={description} c={c}>
-      <Layout {...layoutProps}>{content}</Layout>
+    <BaseLayout
+      title={title}
+      description={description}
+      c={c}
+      faviconUrl={faviconUrl}
+      noindex={noindex}
+    >
+      <SiteLayout {...layoutProps}>{content}</SiteLayout>
     </BaseLayout>,
   );
 }

package/src/lib/schemas.ts

@@ -51,19 +51,20 @@ export const RedirectTypeSchema = z.enum(["301", "302"]);
 export const RatingSchema = z.coerce
   .number()
   .int()
-  .min(1)
+  .min(0)
   .max(5)
   .optional()
-  .or(z.literal("").transform(() => undefined));
+  .or(z.literal("").transform(() => undefined))
+  .transform((v) => (v === 0 ? undefined : v));
 
 /**
  * API request body schema for creating a post
  */
 export const CreatePostSchema = z.object({
   format: FormatSchema,
-  slug: z
+  path: z
     .string()
-    .regex(/^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/)
+    .regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\/[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/)
     .optional()
     .or(z.literal("").transform(() => undefined)),
   title: z.string().optional(),
@@ -81,9 +82,10 @@ export const CreatePostSchema = z.object({
   collectionId: z.coerce
     .number()
     .int()
-    .positive()
+    .min(0)
     .optional()
-    .or(z.literal("").transform(() => undefined)),
+    .or(z.literal("").transform(() => undefined))
+    .transform((v) => (v === 0 ? undefined : v)),
   replyToId: z.string().optional(), // Sqid format
   publishedAt: z.number().int().positive().optional(),
   mediaIds: z.array(z.string()).max(MAX_MEDIA_ATTACHMENTS).optional(),
@@ -151,6 +153,45 @@ export const CreateCollectionSchema = z.object({
  */
 export const UpdateCollectionSchema = CreateCollectionSchema.partial();
 
+// =============================================================================
+// Auth Schemas
+// =============================================================================
+
+/**
+ * Setup form validation schema
+ */
+export const SetupSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+/**
+ * Sign-in form validation schema
+ */
+export const SigninSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+/**
+ * Password reset form validation schema
+ */
+export const ResetPasswordSchema = z
+  .object({
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string().min(1),
+    token: z.string().min(1),
+  })
+  .refine((d) => d.password === d.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+
+// =============================================================================
+// Form Data Helpers
+// =============================================================================
+
 /**
  * Form data helper: safely parse a FormData value with a schema
  *

package/src/lib/theme.ts

@@ -4,14 +4,14 @@
  * Resolves the active color theme and builds CSS for injection into `<head>`.
  */
 
-import type { ColorTheme } from "../theme/color-themes.js";
-import { BUILTIN_COLOR_THEMES } from "../theme/color-themes.js";
+import type { ColorTheme } from "../ui/color-themes.js";
+import { BUILTIN_COLOR_THEMES } from "../ui/color-themes.js";
 import type { JantConfig } from "../types.js";
 
 /**
  * Get the list of available color themes.
  *
- * Returns `config.theme.colorThemes` if provided, otherwise the built-in list.
+ * Returns `config.colorThemes` if provided, otherwise the built-in list.
  *
  * @param config - The Jant configuration
  * @returns Array of available color themes
@@ -22,7 +22,7 @@ import type { JantConfig } from "../types.js";
  * ```
  */
 export function getAvailableThemes(config: JantConfig): ColorTheme[] {
-  return config.theme?.colorThemes ?? BUILTIN_COLOR_THEMES;
+  return config.colorThemes ?? BUILTIN_COLOR_THEMES;
 }
 
 /**
@@ -32,7 +32,7 @@ export function getAvailableThemes(config: JantConfig): ColorTheme[] {
  *   BaseCoat defaults → selected theme → cssVariables
  *
  * @param theme - The active color theme (undefined = no theme overrides)
- * @param cssVariables - Extra CSS variable overrides from `createApp({ theme: { cssVariables } })`
+ * @param cssVariables - Extra CSS variable overrides from `createApp({ cssVariables })`
  * @returns CSS string to inject in `<head>`, or empty string if nothing to inject
  *
  * Uses `:root:root` and `:root.dark` selectors for higher specificity than

package/src/lib/timeline.ts

@@ -2,11 +2,11 @@
  * Timeline Data Assembly
  *
  * Shared helper for assembling timeline items with media and thread previews.
- * Used by both full-page rendering and load-more SSE responses.
+ * Used by page rendering with page-based pagination.
  */
 
 import type { Context } from "hono";
-import type { Bindings, TimelineItemView, DateGroup } from "../types.js";
+import type { Bindings, TimelineItemView } from "../types.js";
 import type { AppVariables } from "../app.js";
 import { buildMediaMap } from "./media-helpers.js";
 import { createMediaContext, toPostView, toPostViews } from "./view.js";
@@ -20,51 +20,58 @@ const DEFAULT_PAGE_SIZE = 20;
  */
 export interface TimelineResult {
   items: TimelineItemView[];
-  hasMore: boolean;
-  nextCursor?: number;
+  currentPage: number;
+  totalPages: number;
 }
 
 /**
  * Assembles a page of timeline items with media attachments and thread previews.
  *
- * Fetches posts, batch-loads media, identifies threads, and returns
- * render-ready `TimelineItemView[]` with pagination info.
+ * Fetches posts using offset-based pagination, batch-loads media, identifies
+ * threads, and returns render-ready `TimelineItemView[]` with page info.
  *
  * @param c - Hono context (provides services + env)
- * @param options - Optional cursor for pagination
+ * @param options - Optional page number (1-indexed, defaults to 1)
  * @returns Assembled timeline items with pagination info
  *
  * @example
  * ```ts
- * const { items, hasMore, nextCursor } = await assembleTimeline(c);
- * const { items, hasMore, nextCursor } = await assembleTimeline(c, { cursor: 42 });
+ * const { items, currentPage, totalPages } = await assembleTimeline(c);
+ * const { items, currentPage, totalPages } = await assembleTimeline(c, { page: 2 });
  * ```
  */
 export async function assembleTimeline(
   c: Context<Env>,
-  options?: { cursor?: number },
+  options?: { page?: number },
 ): Promise<TimelineResult> {
   const pageSize =
     parseInt(c.env.PAGE_SIZE ?? String(DEFAULT_PAGE_SIZE), 10) ||
     DEFAULT_PAGE_SIZE;
 
-  // Fetch one extra to determine if there are more
-  const posts = await c.var.services.posts.list({
+  const page = Math.max(1, options?.page ?? 1);
+  const offset = (page - 1) * pageSize;
+
+  // Get total count for pagination
+  const totalCount = await c.var.services.posts.count({
     status: "published",
     excludeReplies: true,
-    limit: pageSize + 1,
-    cursor: options?.cursor,
   });
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
 
-  const hasMore = posts.length > pageSize;
-  const displayPosts = hasMore ? posts.slice(0, pageSize) : posts;
+  // Fetch posts for the current page
+  const posts = await c.var.services.posts.list({
+    status: "published",
+    excludeReplies: true,
+    limit: pageSize,
+    offset,
+  });
 
-  if (displayPosts.length === 0) {
-    return { items: [], hasMore: false };
+  if (posts.length === 0) {
+    return { items: [], currentPage: page, totalPages };
   }
 
   // Batch load media attachments
-  const postIds = displayPosts.map((p) => p.id);
+  const postIds = posts.map((p) => p.id);
   const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
   const mediaCtx = createMediaContext(c);
   const mediaMap = buildMediaMap(
@@ -102,7 +109,7 @@ export async function assembleTimeline(
       : new Map();
 
   // Assemble timeline items with View Models
-  const items: TimelineItemView[] = displayPosts.map((post) => {
+  const items: TimelineItemView[] = posts.map((post) => {
     const postView = toPostView(
       { ...post, mediaAttachments: mediaMap.get(post.id) ?? [] },
       mediaCtx,
@@ -130,41 +137,5 @@ export async function assembleTimeline(
     return { post: postView };
   });
 
-  // Determine next cursor
-  const lastPost = displayPosts[displayPosts.length - 1];
-  const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
-
-  return { items, hasMore, nextCursor };
-}
-
-/**
- * Groups timeline items by their publication date (YYYY-MM-DD).
- *
- * @param items - Timeline items to group
- * @returns Array of date groups, each containing items published on the same day
- *
- * @example
- * ```ts
- * const groups = groupByDate(items);
- * // [{ dateKey: "2024-02-01", label: "Feb 1, 2024", items: [...] }, ...]
- * ```
- */
-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;
+  return { items, currentPage: page, totalPages };
 }