@jant/core 0.3.24 → 0.3.25

package/src/routes/pages/page.tsx

@@ -1,15 +1,16 @@
 /**
  * Custom Page Route
  *
- * Serves pages from the pages table and posts with custom slugs.
+ * Serves pages from the pages table and posts with custom paths.
  * This is a catch-all route mounted at "/" - must be registered last.
+ * Supports multi-level paths (e.g. /2024/my-post) for posts.
  */
 
 import { Hono } from "hono";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { SinglePage as DefaultSinglePage } from "../../themes/threads/pages/SinglePage.js";
-import { PostPage as DefaultPostPage } from "../../themes/threads/pages/PostPage.js";
+import { SinglePage } from "../../ui/pages/SinglePage.js";
+import { PostPage } from "../../ui/pages/PostPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
 import { buildMediaMap } from "../../lib/media-helpers.js";
@@ -19,38 +20,38 @@ type Env = { Bindings: Bindings; Variables: AppVariables };
 
 export const pageRoutes = new Hono<Env>();
 
-// Catch-all for custom page paths and post slugs
-pageRoutes.get("/:slug", async (c) => {
-  const slug = c.req.param("slug");
+// Catch-all for custom page slugs and post paths (including multi-level)
+pageRoutes.get("/*", async (c) => {
+  const fullPath = c.req.path.slice(1); // Remove leading /
+  if (!fullPath) return c.notFound();
 
-  // First, try to find a page by slug
-  const page = await c.var.services.pages.getBySlug(slug);
+  const isMultiSegment = fullPath.includes("/");
 
-  if (page) {
-    // Don't show draft pages
-    if (page.status === "draft") {
-      return c.notFound();
-    }
+  // Pages only have single-level slugs; skip page lookup for multi-segment paths
+  if (!isMultiSegment) {
+    const page = await c.var.services.pages.getBySlug(fullPath);
 
-    const navData = await getNavigationData(c);
-    const pageView = toPageView(page);
+    if (page) {
+      if (page.status === "draft") {
+        return c.notFound();
+      }
 
-    const components = c.var.config.theme?.components;
-    const Page = components?.SinglePage ?? DefaultSinglePage;
+      const navData = await getNavigationData(c);
+      const pageView = toPageView(page);
 
-    return renderPublicPage(c, {
-      title: `${page.title || slug} - ${navData.siteName}`,
-      description: page.body?.slice(0, 160),
-      navData,
-      content: <Page page={pageView} theme={components} />,
-    });
+      return renderPublicPage(c, {
+        title: `${page.title || fullPath} - ${navData.siteName}`,
+        description: page.body?.slice(0, 160),
+        navData,
+        content: <SinglePage page={pageView} />,
+      });
+    }
   }
 
-  // Then, try to find a post by slug
-  const post = await c.var.services.posts.getBySlug(slug);
+  // Posts support multi-level paths
+  const post = await c.var.services.posts.getByPath(fullPath);
 
   if (post) {
-    // Don't show draft posts
     if (post.status === "draft") {
       return c.notFound();
     }
@@ -73,14 +74,11 @@ pageRoutes.get("/:slug", async (c) => {
     const navData = await getNavigationData(c);
     const title = post.title || navData.siteName;
 
-    const components = c.var.config.theme?.components;
-    const PostPage = components?.PostPage ?? DefaultPostPage;
-
     return renderPublicPage(c, {
       title,
       description: post.body?.slice(0, 160),
       navData,
-      content: <PostPage post={postView} theme={components} />,
+      content: <PostPage post={postView} />,
     });
   }
 

package/src/routes/pages/post.tsx

@@ -5,7 +5,7 @@
 import { Hono } from "hono";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { PostPage as DefaultPostPage } from "../../themes/threads/pages/PostPage.js";
+import { PostPage } from "../../ui/pages/PostPage.js";
 import * as sqid from "../../lib/sqid.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
@@ -50,13 +50,10 @@ postRoutes.get("/:id", async (c) => {
   const navData = await getNavigationData(c);
   const title = post.title || navData.siteName;
 
-  const components = c.var.config.theme?.components;
-  const Page = components?.PostPage ?? DefaultPostPage;
-
   return renderPublicPage(c, {
     title,
     description: post.body?.slice(0, 160),
     navData,
-    content: <Page post={postView} theme={components} />,
+    content: <PostPage post={postView} />,
   });
 });

package/src/routes/pages/search.tsx

@@ -5,7 +5,7 @@
 import { Hono } from "hono";
 import type { Bindings, SearchResult } from "../../types.js";
 import type { AppVariables } from "../../app.js";
-import { SearchPage as DefaultSearchPage } from "../../themes/threads/pages/SearchPage.js";
+import { SearchPage } from "../../ui/pages/SearchPage.js";
 import { getNavigationData } from "../../lib/navigation.js";
 import { renderPublicPage } from "../../lib/render.js";
 import { createMediaContext, toSearchResultViews } from "../../lib/view.js";
@@ -52,22 +52,18 @@ searchRoutes.get("/", async (c) => {
   const mediaCtx = createMediaContext(c);
   const resultViews = toSearchResultViews(results, mediaCtx);
 
-  const components = c.var.config.theme?.components;
-  const Page = components?.SearchPage ?? DefaultSearchPage;
-
   return renderPublicPage(c, {
     title: query
       ? `Search: ${query} - ${navData.siteName}`
       : `Search - ${navData.siteName}`,
     navData,
     content: (
-      <Page
+      <SearchPage
         query={query}
         results={resultViews}
         error={error}
         hasMore={hasMore}
         page={page}
-        theme={components}
       />
     ),
   });

package/src/services/__tests__/page.test.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createTestDatabase } from "../../__tests__/helpers/db.js";
+import { createPageService } from "../page.js";
+import { createNavItemService } from "../navigation.js";
+import type { Database } from "../../db/index.js";
+
+describe("PageService", () => {
+  let db: Database;
+  let pageService: ReturnType<typeof createPageService>;
+  let navItemService: ReturnType<typeof createNavItemService>;
+
+  beforeEach(() => {
+    const testDb = createTestDatabase();
+    db = testDb.db as unknown as Database;
+    pageService = createPageService(db);
+    navItemService = createNavItemService(db);
+  });
+
+  describe("listNotInNav", () => {
+    it("returns all pages when none are in navigation", async () => {
+      await pageService.create({ slug: "about", title: "About" });
+      await pageService.create({ slug: "contact", title: "Contact" });
+
+      const pages = await pageService.listNotInNav();
+      expect(pages).toHaveLength(2);
+    });
+
+    it("excludes pages that have a nav item", async () => {
+      const aboutPage = await pageService.create({
+        slug: "about",
+        title: "About",
+      });
+      await pageService.create({ slug: "contact", title: "Contact" });
+
+      // Add "About" to navigation
+      await navItemService.create({
+        type: "page",
+        label: "About",
+        url: "/about",
+        pageId: aboutPage.id,
+      });
+
+      const pages = await pageService.listNotInNav();
+      expect(pages).toHaveLength(1);
+      expect(pages[0]?.slug).toBe("contact");
+    });
+
+    it("returns empty array when all pages are in navigation", async () => {
+      const aboutPage = await pageService.create({
+        slug: "about",
+        title: "About",
+      });
+
+      await navItemService.create({
+        type: "page",
+        label: "About",
+        url: "/about",
+        pageId: aboutPage.id,
+      });
+
+      const pages = await pageService.listNotInNav();
+      expect(pages).toHaveLength(0);
+    });
+
+    it("returns empty array when no pages exist", async () => {
+      const pages = await pageService.listNotInNav();
+      expect(pages).toHaveLength(0);
+    });
+
+    it("is not affected by link-type nav items (no pageId)", async () => {
+      await pageService.create({ slug: "about", title: "About" });
+
+      // Link-type nav items have no pageId
+      await navItemService.create({
+        type: "link",
+        label: "External",
+        url: "https://example.com",
+      });
+
+      const pages = await pageService.listNotInNav();
+      expect(pages).toHaveLength(1);
+    });
+
+    it("returns multiple pages correctly", async () => {
+      await pageService.create({ slug: "first", title: "First" });
+      await pageService.create({ slug: "second", title: "Second" });
+      await pageService.create({ slug: "third", title: "Third" });
+
+      // Add one to nav
+      const pages = await pageService.list();
+      await navItemService.create({
+        type: "page",
+        label: "Second",
+        url: "/second",
+        pageId: pages.find((p) => p.slug === "second")!.id,
+      });
+
+      const notInNav = await pageService.listNotInNav();
+      expect(notInNav).toHaveLength(2);
+      const slugs = notInNav.map((p) => p.slug);
+      expect(slugs).toContain("first");
+      expect(slugs).toContain("third");
+      expect(slugs).not.toContain("second");
+    });
+  });
+});

package/src/services/__tests__/post.test.ts

@@ -38,7 +38,7 @@ describe("PostService", () => {
         status: "published",
         featured: true,
         pinned: true,
-        slug: "my-link",
+        path: "my-link",
         url: "https://example.com/source",
         quoteText: "A notable quote",
         rating: 5,
@@ -49,7 +49,7 @@ describe("PostService", () => {
       expect(post.status).toBe("published");
       expect(post.featured).toBe(1);
       expect(post.pinned).toBe(1);
-      expect(post.slug).toBe("my-link");
+      expect(post.path).toBe("my-link");
       expect(post.url).toBe("https://example.com/source");
       expect(post.quoteText).toBe("A notable quote");
       expect(post.rating).toBe(5);
@@ -154,21 +154,21 @@ describe("PostService", () => {
     });
   });
 
-  describe("getBySlug", () => {
-    it("returns a post by slug", async () => {
+  describe("getByPath", () => {
+    it("returns a post by path", async () => {
       await postService.create({
         format: "note",
         body: "About page",
-        slug: "about",
+        path: "about",
       });
 
-      const found = await postService.getBySlug("about");
+      const found = await postService.getByPath("about");
       expect(found).not.toBeNull();
-      expect(found?.slug).toBe("about");
+      expect(found?.path).toBe("about");
     });
 
-    it("returns null for non-existent slug", async () => {
-      const found = await postService.getBySlug("nonexistent");
+    it("returns null for non-existent path", async () => {
+      const found = await postService.getByPath("nonexistent");
       expect(found).toBeNull();
     });
 
@@ -176,13 +176,25 @@ describe("PostService", () => {
       const post = await postService.create({
         format: "note",
         body: "test",
-        slug: "test-page",
+        path: "test-page",
       });
       await postService.delete(post.id);
 
-      const found = await postService.getBySlug("test-page");
+      const found = await postService.getByPath("test-page");
       expect(found).toBeNull();
     });
+
+    it("finds a post with a multi-level path", async () => {
+      await postService.create({
+        format: "note",
+        body: "Blog migration",
+        path: "2024/01/my-post",
+      });
+
+      const found = await postService.getByPath("2024/01/my-post");
+      expect(found).not.toBeNull();
+      expect(found?.path).toBe("2024/01/my-post");
+    });
   });
 
   describe("list", () => {
@@ -358,6 +370,93 @@ describe("PostService", () => {
       expect(posts).toHaveLength(1);
       expect(posts[0]?.body).toBe("root post");
     });
+
+    it("supports offset pagination", async () => {
+      for (let i = 0; i < 5; i++) {
+        await postService.create({
+          format: "note",
+          body: `post ${i}`,
+          publishedAt: 1000 + i,
+        });
+      }
+
+      // Skip the first 2 posts (newest), get 2 more
+      const posts = await postService.list({ limit: 2, offset: 2 });
+      expect(posts).toHaveLength(2);
+      expect(posts[0]?.body).toBe("post 2");
+      expect(posts[1]?.body).toBe("post 1");
+    });
+  });
+
+  describe("count", () => {
+    it("returns 0 when no posts exist", async () => {
+      const count = await postService.count();
+      expect(count).toBe(0);
+    });
+
+    it("counts all non-deleted posts", async () => {
+      await postService.create({ format: "note", body: "first" });
+      await postService.create({ format: "note", body: "second" });
+      await postService.create({ format: "note", body: "third" });
+
+      const count = await postService.count();
+      expect(count).toBe(3);
+    });
+
+    it("filters by status", async () => {
+      await postService.create({
+        format: "note",
+        body: "published",
+        status: "published",
+      });
+      await postService.create({
+        format: "note",
+        body: "draft",
+        status: "draft",
+      });
+
+      const count = await postService.count({ status: "published" });
+      expect(count).toBe(1);
+    });
+
+    it("filters by featured", async () => {
+      await postService.create({
+        format: "note",
+        body: "featured",
+        featured: true,
+      });
+      await postService.create({ format: "note", body: "normal" });
+
+      const count = await postService.count({ featured: true });
+      expect(count).toBe(1);
+    });
+
+    it("excludes deleted posts by default", async () => {
+      const post = await postService.create({
+        format: "note",
+        body: "to delete",
+      });
+      await postService.create({ format: "note", body: "keep" });
+      await postService.delete(post.id);
+
+      const count = await postService.count();
+      expect(count).toBe(1);
+    });
+
+    it("excludes replies when requested", async () => {
+      const root = await postService.create({
+        format: "note",
+        body: "root",
+      });
+      await postService.create({
+        format: "note",
+        body: "reply",
+        replyToId: root.id,
+      });
+
+      const count = await postService.count({ excludeReplies: true });
+      expect(count).toBe(1);
+    });
   });
 
   describe("update", () => {
@@ -471,18 +570,18 @@ describe("PostService", () => {
       expect(updated?.pinned).toBe(1);
     });
 
-    it("updates slug", async () => {
+    it("updates path", async () => {
       const post = await postService.create({
         format: "note",
         body: "test",
-        slug: "old-slug",
+        path: "old-path",
       });
 
       const updated = await postService.update(post.id, {
-        slug: "new-slug",
+        path: "new-path",
       });
 
-      expect(updated?.slug).toBe("new-slug");
+      expect(updated?.path).toBe("new-path");
     });
 
     it("updates quoteText and rating", async () => {

package/src/services/page.ts

@@ -4,7 +4,7 @@
  * CRUD operations for standalone pages (about, now, etc.)
  */
 
-import { eq, desc } from "drizzle-orm";
+import { eq, desc, sql } from "drizzle-orm";
 import type { Database } from "../db/index.js";
 import { pages, navItems } from "../db/schema.js";
 import { now } from "../lib/time.js";
@@ -15,6 +15,7 @@ export interface PageService {
   getById(id: number): Promise<Page | null>;
   getBySlug(slug: string): Promise<Page | null>;
   list(): Promise<Page[]>;
+  listNotInNav(): Promise<Page[]>;
   create(data: CreatePage): Promise<Page>;
   update(id: number, data: UpdatePage): Promise<Page | null>;
   delete(id: number): Promise<boolean>;
@@ -58,6 +59,17 @@ export function createPageService(db: Database): PageService {
       return rows.map(toPage);
     },
 
+    async listNotInNav() {
+      const rows = await db
+        .select()
+        .from(pages)
+        .where(
+          sql`${pages.id} NOT IN (SELECT ${navItems.pageId} FROM ${navItems} WHERE ${navItems.pageId} IS NOT NULL)`,
+        )
+        .orderBy(desc(pages.createdAt));
+      return rows.map(toPage);
+    },
+
     async create(data) {
       const timestamp = now();
 

package/src/services/post.ts

@@ -25,12 +25,15 @@ export interface PostFilters {
   threadId?: number;
   limit?: number;
   cursor?: number; // post id for cursor pagination
+  offset?: number; // offset for page-based pagination
 }
 
 export interface PostService {
   getById(id: number): Promise<Post | null>;
-  getBySlug(slug: string): Promise<Post | null>;
+  getByPath(path: string): Promise<Post | null>;
   list(filters?: PostFilters): Promise<Post[]>;
+  /** Count posts matching filters (ignores cursor, offset, limit) */
+  count(filters?: PostFilters): Promise<number>;
   create(data: CreatePost): Promise<Post>;
   update(id: number, data: UpdatePost): Promise<Post | null>;
   delete(id: number): Promise<boolean>;
@@ -57,7 +60,7 @@ export function createPostService(db: Database): PostService {
       status: row.status as Status,
       featured: row.featured,
       pinned: row.pinned,
-      slug: row.slug,
+      path: row.path,
       title: row.title,
       url: row.url,
       body: row.body,
@@ -84,11 +87,11 @@ export function createPostService(db: Database): PostService {
       return result[0] ? toPost(result[0]) : null;
     },
 
-    async getBySlug(slug) {
+    async getByPath(path) {
       const result = await db
         .select()
         .from(posts)
-        .where(and(eq(posts.slug, slug), isNull(posts.deletedAt)))
+        .where(and(eq(posts.path, path), isNull(posts.deletedAt)))
         .limit(1);
       return result[0] ? toPost(result[0]) : null;
     },
@@ -132,17 +135,64 @@ export function createPostService(db: Database): PostService {
         conditions.push(sql`${posts.id} < ${filters.cursor}`);
       }
 
-      const query = db
+      let query = db
         .select()
         .from(posts)
         .where(conditions.length > 0 ? and(...conditions) : undefined)
         .orderBy(desc(posts.publishedAt), desc(posts.id))
         .limit(filters.limit ?? 100);
 
+      if (filters.offset !== undefined) {
+        query = query.offset(filters.offset) as typeof query;
+      }
+
       const rows = await query;
       return rows.map(toPost);
     },
 
+    async count(filters = {}) {
+      const conditions = [];
+
+      if (filters.status) {
+        conditions.push(eq(posts.status, filters.status));
+      }
+
+      if (filters.featured !== undefined) {
+        conditions.push(eq(posts.featured, filters.featured ? 1 : 0));
+      }
+
+      if (filters.pinned !== undefined) {
+        conditions.push(eq(posts.pinned, filters.pinned ? 1 : 0));
+      }
+
+      if (filters.format) {
+        conditions.push(eq(posts.format, filters.format));
+      }
+
+      if (filters.collectionId !== undefined) {
+        conditions.push(eq(posts.collectionId, filters.collectionId));
+      }
+
+      if (filters.threadId) {
+        conditions.push(eq(posts.threadId, filters.threadId));
+      }
+
+      if (filters.excludeReplies) {
+        conditions.push(isNull(posts.threadId));
+      }
+
+      if (!filters.includeDeleted) {
+        conditions.push(isNull(posts.deletedAt));
+      }
+
+      const result = await db
+        .select({ count: sql<number>`count(*)`.as("count") })
+        .from(posts)
+        .where(conditions.length > 0 ? and(...conditions) : undefined);
+
+      return result[0]?.count ?? 0;
+    },
+
     async create(data) {
       const timestamp = now();
 
@@ -175,7 +225,7 @@ export function createPostService(db: Database): PostService {
           status,
           featured: featured ? 1 : 0,
           pinned: data.pinned ? 1 : 0,
-          slug: data.slug ?? null,
+          path: data.path ?? null,
           title: data.title ?? null,
           url: data.url ?? null,
           body: data.body ?? null,
@@ -205,7 +255,7 @@ export function createPostService(db: Database): PostService {
       };
 
       if (data.format !== undefined) updates.format = data.format;
-      if (data.slug !== undefined) updates.slug = data.slug;
+      if (data.path !== undefined) updates.path = data.path;
       if (data.title !== undefined) updates.title = data.title;
       if (data.url !== undefined) updates.url = data.url;
       if (data.quoteText !== undefined) updates.quoteText = data.quoteText;

package/src/services/search.ts

@@ -29,7 +29,7 @@ interface RawSearchRow {
   status: string;
   featured: number;
   pinned: number;
-  slug: string | null;
+  path: string | null;
   title: string | null;
   url: string | null;
   body: string | null;
@@ -99,7 +99,7 @@ export function createSearchService(d1: D1Database): SearchService {
           status: row.status as Post["status"],
           featured: row.featured,
           pinned: row.pinned,
-          slug: row.slug,
+          path: row.path,
           title: row.title,
           url: row.url,
           body: row.body,

package/src/styles/tokens.css

@@ -0,0 +1,47 @@
+/**
+ * Design Tokens
+ *
+ * CSS custom properties for all visual aspects of the UI.
+ * These are the stable customization API — override in custom CSS
+ * to change typography, layout, surfaces, and element sizing.
+ */
+
+:root {
+  /* Typography */
+  --font-body: system-ui, sans-serif;
+  --font-heading: var(--font-body);
+  --font-mono: ui-monospace, monospace;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1.0625rem;
+  --leading: 1.5;
+
+  /* Layout */
+  --site-width: 640px;
+  --site-padding: 1.5rem;
+  --content-gap: 1rem;
+  --space-xl: 2rem;
+
+  /* Surfaces */
+  --card-bg: var(--card);
+  --card-radius: 0;
+  --card-padding: 1rem;
+  --card-border-width: 0;
+  --card-shadow: none;
+
+  /* Elements */
+  --avatar-size: 36px;
+  --avatar-radius: 50%;
+  --media-radius: 0.5rem;
+
+  /* Derived color tokens (from BaseCoat variables) */
+  --site-column-outline: var(--border);
+  --site-threadline: var(--border);
+  --site-page-bg: var(--background);
+  --site-elevated-bg: var(--background);
+  --site-nav-hover-bg: var(--accent);
+  --site-text-primary: var(--foreground);
+  --site-text-secondary: var(--muted-foreground);
+  --site-media-outline: var(--border);
+  --site-divider: var(--border);
+}