@jant/core 0.3.22 → 0.3.24

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)}`;
+export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
+  const permalink = post.slug ? `/${post.slug}` : `/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,
+    slug: post.slug ?? 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,9 @@
 @source "./";
 
 @import "basecoat-css";
+@plugin "@tailwindcss/typography";
 @import "./styles/components.css";
+@import "./themes/threads/style.css";
 
 @theme {
   --radius-default: 0.5rem;
@@ -22,3 +24,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;
+  }
+}