@jant/core 0.3.23 → 0.3.25

package/src/lib/timeline.ts

@@ -0,0 +1,141 @@
+/**
+ * Timeline Data Assembly
+ *
+ * Shared helper for assembling timeline items with media and thread previews.
+ * Used by page rendering with page-based pagination.
+ */
+
+import type { Context } from "hono";
+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";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+const DEFAULT_PAGE_SIZE = 20;
+
+/**
+ * Result from assembling a timeline page.
+ */
+export interface TimelineResult {
+  items: TimelineItemView[];
+  currentPage: number;
+  totalPages: number;
+}
+
+/**
+ * Assembles a page of timeline items with media attachments and thread previews.
+ *
+ * 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 page number (1-indexed, defaults to 1)
+ * @returns Assembled timeline items with pagination info
+ *
+ * @example
+ * ```ts
+ * const { items, currentPage, totalPages } = await assembleTimeline(c);
+ * const { items, currentPage, totalPages } = await assembleTimeline(c, { page: 2 });
+ * ```
+ */
+export async function assembleTimeline(
+  c: Context<Env>,
+  options?: { page?: number },
+): Promise<TimelineResult> {
+  const pageSize =
+    parseInt(c.env.PAGE_SIZE ?? String(DEFAULT_PAGE_SIZE), 10) ||
+    DEFAULT_PAGE_SIZE;
+
+  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,
+  });
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+
+  // Fetch posts for the current page
+  const posts = await c.var.services.posts.list({
+    status: "published",
+    excludeReplies: true,
+    limit: pageSize,
+    offset,
+  });
+
+  if (posts.length === 0) {
+    return { items: [], currentPage: page, totalPages };
+  }
+
+  // Batch load media attachments
+  const postIds = posts.map((p) => p.id);
+  const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
+  const mediaCtx = createMediaContext(c);
+  const mediaMap = buildMediaMap(
+    rawMediaMap,
+    mediaCtx.r2PublicUrl,
+    mediaCtx.imageTransformUrl,
+    mediaCtx.s3PublicUrl,
+  );
+
+  // Get reply counts to identify thread roots
+  const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
+  const threadRootIds = postIds.filter((id) => (replyCounts.get(id) ?? 0) > 0);
+
+  // Batch load thread previews
+  const threadPreviews = await c.var.services.posts.getThreadPreviews(
+    threadRootIds,
+    3,
+  );
+
+  // Batch load media for preview replies
+  const previewReplyIds: number[] = [];
+  for (const replies of threadPreviews.values()) {
+    for (const reply of replies) {
+      previewReplyIds.push(reply.id);
+    }
+  }
+  const previewMediaMap =
+    previewReplyIds.length > 0
+      ? buildMediaMap(
+          await c.var.services.media.getByPostIds(previewReplyIds),
+          mediaCtx.r2PublicUrl,
+          mediaCtx.imageTransformUrl,
+          mediaCtx.s3PublicUrl,
+        )
+      : new Map();
+
+  // Assemble timeline items with View Models
+  const items: TimelineItemView[] = posts.map((post) => {
+    const postView = toPostView(
+      { ...post, mediaAttachments: mediaMap.get(post.id) ?? [] },
+      mediaCtx,
+    );
+
+    const replyCount = replyCounts.get(post.id) ?? 0;
+    const previewReplies = threadPreviews.get(post.id);
+
+    if (replyCount > 0 && previewReplies) {
+      return {
+        post: postView,
+        threadPreview: {
+          replies: toPostViews(
+            previewReplies.map((r) => ({
+              ...r,
+              mediaAttachments: previewMediaMap.get(r.id) ?? [],
+            })),
+            mediaCtx,
+          ),
+          totalReplyCount: replyCount,
+        },
+      };
+    }
+
+    return { post: postView };
+  });
+
+  return { items, currentPage: page, totalPages };
+}

package/src/lib/view.ts

@@ -1,33 +1,44 @@
 /**
- * View Model Conversions
+ * View Model Conversions (v2)
  *
  * Transforms raw database models into render-ready View types.
- * Theme components receive only View types — no lib/ imports needed.
+ * Theme components receive only View types -- no lib/ imports needed.
  */
 
 import type { Context } from "hono";
 import type {
   Post,
   PostWithMedia,
+  Page,
   Media,
   MediaView,
   PostView,
-  NavLinkView,
-  NavigationLink,
+  PageView,
+  NavItemView,
+  NavItem,
   SearchResult,
   SearchResultView,
   ArchiveGroup,
+  Format,
+  Status,
+  NavItemType,
 } from "../types.js";
 import { encode } from "./sqid.js";
-import { toISOString, formatDate } from "./time.js";
+import {
+  toISOString,
+  formatDate,
+  formatTime,
+  formatRelativeTime,
+} from "./time.js";
 import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
+import { getHtmlExcerpt } from "./excerpt.js";
 
 // =============================================================================
 // Media Context
 // =============================================================================
 
 /**
- * Central media config — extracted once per request from env.
+ * Central media config -- extracted once per request from env.
  */
 export interface MediaContext {
   r2PublicUrl?: string;
@@ -40,12 +51,6 @@ export interface MediaContext {
  *
  * @param c - Hono context
  * @returns MediaContext with env values
- *
- * @example
- * ```ts
- * const mediaCtx = createMediaContext(c);
- * const postView = toPostView(post, mediaCtx);
- * ```
  */
 export function createMediaContext(c: Context): MediaContext {
   return {
@@ -100,25 +105,26 @@ export function toMediaView(media: Media, ctx: MediaContext): MediaView {
  * Converts a PostWithMedia to a render-ready PostView.
  *
  * @param post - Post with media attachments from database
- * @param ctx - Media context with URL configuration
+ * @param _ctx - Media context with URL configuration
  * @returns Render-ready PostView with pre-computed fields
- *
- * @example
- * ```ts
- * const mediaCtx = createMediaContext(c);
- * const postView = toPostView({ ...post, mediaAttachments: [...] }, mediaCtx);
- * ```
  */
 export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
-  const permalink = `/p/${encode(post.id)}`;
+  const permalink = post.path ? `/${post.path}` : `/p/${encode(post.id)}`;
 
-  // Pre-compute excerpt from raw content
+  // Pre-compute excerpt from raw body
   let excerpt: string | undefined;
-  if (post.content) {
+  if (post.body) {
     excerpt =
-      post.content.length > 160
-        ? post.content.slice(0, 160) + "..."
-        : post.content;
+      post.body.length > 160 ? post.body.slice(0, 160) + "..." : post.body;
+  }
+
+  // Pre-compute HTML summary for article-style posts (with title)
+  let summaryHtml: string | undefined;
+  let summaryHasMore: boolean | undefined;
+  if (post.title && post.bodyHtml) {
+    const result = getHtmlExcerpt(post.bodyHtml);
+    summaryHtml = result.excerpt;
+    summaryHasMore = result.hasMore;
   }
 
   // Convert media attachments
@@ -135,31 +141,34 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
   return {
     id: post.id,
     permalink,
+    path: post.path ?? undefined,
     title: post.title ?? undefined,
-    contentHtml: post.contentHtml ?? undefined,
+    bodyHtml: post.bodyHtml ?? undefined,
     excerpt,
-    type: post.type,
-    visibility: post.visibility,
-    path: post.path ?? undefined,
+    summaryHtml,
+    summaryHasMore,
+    url: post.url ?? undefined,
+    quoteText: post.quoteText ?? undefined,
+    format: post.format as Format,
+    status: post.status as Status,
+    featured: post.featured === 1,
+    pinned: post.pinned === 1,
+    rating: post.rating ?? undefined,
+    collectionId: post.collectionId ?? undefined,
     publishedAt: toISOString(post.publishedAt),
     publishedAtFormatted: formatDate(post.publishedAt),
+    publishedAtTime: formatTime(post.publishedAt),
+    publishedAtRelative: formatRelativeTime(post.publishedAt),
     updatedAt: toISOString(post.updatedAt),
-    sourceUrl: post.sourceUrl ?? undefined,
-    sourceName: post.sourceName ?? undefined,
-    sourceDomain: post.sourceDomain ?? undefined,
     media,
     replyToId: post.replyToId ?? undefined,
     threadRootId: post.threadId ?? undefined,
-    content: post.content ?? undefined,
+    body: post.body ?? undefined,
   };
 }
 
 /**
  * Batch converts PostWithMedia[] to PostView[].
- *
- * @param posts - Array of posts with media
- * @param ctx - Media context
- * @returns Array of PostView
  */
 export function toPostViews(
   posts: PostWithMedia[],
@@ -170,10 +179,6 @@ export function toPostViews(
 
 /**
  * Converts a bare Post (no media) to a PostView with empty media array.
- *
- * @param post - Post without media
- * @param ctx - Media context (unused but kept for consistency)
- * @returns PostView with empty media
  */
 export function toPostViewFromPost(post: Post, ctx: MediaContext): PostView {
   return toPostView({ ...post, mediaAttachments: [] }, ctx);
@@ -181,10 +186,6 @@ export function toPostViewFromPost(post: Post, ctx: MediaContext): PostView {
 
 /**
  * Batch converts Post[] (no media) to PostView[].
- *
- * @param posts - Array of posts without media
- * @param ctx - Media context
- * @returns Array of PostView
  */
 export function toPostViewsFromPosts(
   posts: Post[],
@@ -193,55 +194,65 @@ export function toPostViewsFromPosts(
   return posts.map((p) => toPostViewFromPost(p, ctx));
 }
 
+// =============================================================================
+// Page Conversions
+// =============================================================================
+
+/**
+ * Converts a Page to a render-ready PageView.
+ */
+export function toPageView(page: Page): PageView {
+  return {
+    id: page.id,
+    slug: page.slug,
+    title: page.title ?? undefined,
+    bodyHtml: page.bodyHtml ?? undefined,
+    status: page.status as Status,
+    createdAt: toISOString(page.createdAt),
+    updatedAt: toISOString(page.updatedAt),
+  };
+}
+
 // =============================================================================
 // Navigation Conversions
 // =============================================================================
 
 /**
- * Converts a NavigationLink to a NavLinkView with pre-computed state.
- *
- * @param link - Raw navigation link from database
- * @param currentPath - Current page path for active state computation
- * @returns NavLinkView with isActive and isExternal pre-computed
+ * Converts a NavItem to a NavItemView with pre-computed state.
  */
-export function toNavLinkView(
-  link: NavigationLink,
-  currentPath: string,
-): NavLinkView {
+export function toNavItemView(item: NavItem, currentPath: string): NavItemView {
   const isExternal =
-    link.url.startsWith("http://") || link.url.startsWith("https://");
+    item.url.startsWith("http://") || item.url.startsWith("https://");
 
   let isActive = false;
   if (!isExternal) {
-    if (link.url === "/") {
+    if (item.url === "/") {
       isActive = currentPath === "/";
     } else {
       isActive =
-        currentPath === link.url || currentPath.startsWith(link.url + "/");
+        currentPath === item.url || currentPath.startsWith(item.url + "/");
     }
   }
 
   return {
-    id: link.id,
-    label: link.label,
-    url: link.url,
+    id: item.id,
+    type: item.type as NavItemType,
+    label: item.label,
+    url: item.url,
+    pageId: item.pageId ?? undefined,
     isActive,
     isExternal,
   };
 }
 
 /**
- * Batch converts NavigationLink[] to NavLinkView[].
- *
- * @param links - Raw navigation links
- * @param currentPath - Current page path
- * @returns Array of NavLinkView
+ * Batch converts NavItem[] to NavItemView[].
  */
-export function toNavLinkViews(
-  links: NavigationLink[],
+export function toNavItemViews(
+  items: NavItem[],
   currentPath: string,
-): NavLinkView[] {
-  return links.map((l) => toNavLinkView(l, currentPath));
+): NavItemView[] {
+  return items.map((item) => toNavItemView(item, currentPath));
 }
 
 // =============================================================================
@@ -250,10 +261,6 @@ export function toNavLinkViews(
 
 /**
  * Converts a SearchResult to a SearchResultView with PostView.
- *
- * @param result - Raw search result
- * @param ctx - Media context
- * @returns SearchResultView with PostView
  */
 export function toSearchResultView(
   result: SearchResult,
@@ -268,10 +275,6 @@ export function toSearchResultView(
 
 /**
  * Batch converts SearchResult[] to SearchResultView[].
- *
- * @param results - Raw search results
- * @param ctx - Media context
- * @returns Array of SearchResultView
  */
 export function toSearchResultViews(
   results: SearchResult[],
@@ -286,10 +289,6 @@ export function toSearchResultViews(
 
 /**
  * Converts a grouped post map to typed ArchiveGroup[].
- *
- * @param grouped - Map of "YYYY-MM" keys to Post arrays
- * @param ctx - Media context
- * @returns Array of ArchiveGroup with pre-formatted labels
  */
 export function toArchiveGroups(
   grouped: Map<string, Post[]>,
@@ -300,7 +299,6 @@ export function toArchiveGroups(
     const [year, month] = yearMonth.split("-");
     if (!year || !month) continue;
 
-    // Format label like "February 2024"
     const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1);
     const label = date.toLocaleDateString("en-US", {
       year: "numeric",

package/src/preset.css

@@ -8,7 +8,10 @@
 @source "./";
 
 @import "basecoat-css";
+@plugin "@tailwindcss/typography";
 @import "./styles/components.css";
+@import "./styles/tokens.css";
+@import "./styles/ui.css";
 
 @theme {
   --radius-default: 0.5rem;
@@ -22,3 +25,46 @@
 .dark {
   --success: oklch(0.627 0.194 149.214);
 }
+
+/**
+ * Typography (prose) — integrate with BaseCoat theme colors.
+ *
+ * The @tailwindcss/typography plugin ships with hardcoded slate values.
+ * We override them to use BaseCoat's CSS variables so that:
+ *   - Light/dark mode switches automatically
+ *   - Prose text matches the rest of the theme
+ *   - Links are understated (same color as text, underline only)
+ *
+ * Design reference: Medium, Substack, NYT — body links inherit text
+ * color and rely on underline as the sole affordance.
+ */
+.prose {
+  --tw-prose-body: inherit;
+  --tw-prose-headings: var(--color-foreground);
+  --tw-prose-lead: var(--color-muted-foreground);
+  --tw-prose-links: inherit;
+  --tw-prose-bold: inherit;
+  --tw-prose-counters: var(--color-muted-foreground);
+  --tw-prose-bullets: var(--color-muted-foreground);
+  --tw-prose-hr: var(--color-border);
+  --tw-prose-quotes: var(--color-foreground);
+  --tw-prose-quote-borders: var(--color-border);
+  --tw-prose-captions: var(--color-muted-foreground);
+  --tw-prose-kbd: var(--color-foreground);
+  --tw-prose-code: var(--color-foreground);
+  --tw-prose-pre-code: var(--color-muted-foreground);
+  --tw-prose-pre-bg: var(--color-muted);
+  --tw-prose-th-borders: var(--color-border);
+  --tw-prose-td-borders: var(--color-border);
+
+  /* Links: same color as surrounding text, underline only, no bold */
+  a {
+    font-weight: inherit;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--color-border);
+  }
+
+  a:hover {
+    text-decoration-color: currentColor;
+  }
+}

package/src/routes/__tests__/compose.test.ts

@@ -0,0 +1,199 @@
+import { describe, it, expect } from "vitest";
+import { createTestApp } from "../../__tests__/helpers/app.js";
+import { composeRoutes } from "../compose.js";
+
+describe("Compose Routes", () => {
+  describe("POST /compose", () => {
+    it("redirects to signin when not authenticated", async () => {
+      const { app } = createTestApp({ authenticated: false });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ format: "note", body: "Hello" }),
+      });
+
+      expect(res.status).toBe(302);
+      expect(res.headers.get("Location")).toBe("/signin");
+    });
+
+    it("creates a note post and returns redirect", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ format: "note", body: "Hello world" }),
+      });
+
+      expect(res.status).toBe(200);
+      expect(res.headers.get("Content-Type")).toBe("text/html");
+
+      // Verify post was created
+      const posts = await services.posts.list();
+      expect(posts).toHaveLength(1);
+      expect(posts[0].format).toBe("note");
+      expect(posts[0].body).toBe("Hello world");
+      expect(posts[0].status).toBe("published");
+    });
+
+    it("creates a link post", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          format: "link",
+          body: "Check this out",
+          url: "https://example.com",
+        }),
+      });
+
+      expect(res.status).toBe(200);
+
+      const posts = await services.posts.list();
+      expect(posts).toHaveLength(1);
+      expect(posts[0].format).toBe("link");
+      expect(posts[0].url).toBe("https://example.com");
+    });
+
+    it("creates a quote post", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          format: "quote",
+          body: "Great insight",
+          quoteText: "The original quote",
+          url: "https://example.com/source",
+        }),
+      });
+
+      expect(res.status).toBe(200);
+
+      const posts = await services.posts.list();
+      expect(posts).toHaveLength(1);
+      expect(posts[0].format).toBe("quote");
+      expect(posts[0].quoteText).toBe("The original quote");
+    });
+
+    it("creates a draft when status is draft", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          format: "note",
+          body: "Draft content",
+          status: "draft",
+        }),
+      });
+
+      expect(res.status).toBe(200);
+
+      const posts = await services.posts.list({ includeDrafts: true });
+      expect(posts).toHaveLength(1);
+      expect(posts[0].status).toBe("draft");
+    });
+
+    it("returns error for invalid format", async () => {
+      const { app } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ format: "invalid", body: "Hello" }),
+      });
+
+      expect(res.status).toBe(200);
+      expect(res.headers.get("Content-Type")).toBe("text/html");
+      // Returns a toast error (text/html with error message)
+      const text = await res.text();
+      expect(text).toContain("toast-error");
+    });
+
+    it("attaches media IDs when provided", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      // Create media first
+      const media = await services.media.create({
+        filename: "test.jpg",
+        originalName: "test.jpg",
+        mimeType: "image/jpeg",
+        size: 1024,
+        storageKey: "media/2025/01/test.jpg",
+        width: 800,
+        height: 600,
+      });
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          format: "note",
+          body: "Post with media",
+          mediaIds: [media.id],
+        }),
+      });
+
+      expect(res.status).toBe(200);
+
+      const posts = await services.posts.list();
+      expect(posts).toHaveLength(1);
+
+      // Verify media is attached
+      const attachments = await services.media.getByPostId(posts[0].id);
+      expect(attachments).toHaveLength(1);
+      expect(attachments[0].id).toBe(media.id);
+    });
+
+    it("sets featured and pinned flags", async () => {
+      const { app, services } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          format: "note",
+          body: "Featured and pinned",
+          featured: true,
+          pinned: true,
+        }),
+      });
+
+      expect(res.status).toBe(200);
+
+      const posts = await services.posts.list();
+      expect(posts).toHaveLength(1);
+      expect(posts[0].featured).toBe(1);
+      expect(posts[0].pinned).toBe(1);
+    });
+
+    it("returns error when format is missing", async () => {
+      const { app } = createTestApp({ authenticated: true });
+      app.route("/compose", composeRoutes);
+
+      const res = await app.request("/compose", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ body: "No format" }),
+      });
+
+      expect(res.status).toBe(200);
+      const text = await res.text();
+      expect(text).toContain("toast-error");
+    });
+  });
+});