@jant/core 0.3.7 → 0.3.9

package/src/services/index.ts

@@ -14,6 +14,10 @@ import {
   type CollectionService,
 } from "./collection.js";
 import { createSearchService, type SearchService } from "./search.js";
+import {
+  createNavigationLinkService,
+  type NavigationLinkService,
+} from "./navigation.js";
 
 export interface Services {
   settings: SettingsService;
@@ -22,6 +26,7 @@ export interface Services {
   media: MediaService;
   collections: CollectionService;
   search: SearchService;
+  navigationLinks: NavigationLinkService;
 }
 
 export function createServices(db: Database, d1: D1Database): Services {
@@ -32,6 +37,7 @@ export function createServices(db: Database, d1: D1Database): Services {
     media: createMediaService(db),
     collections: createCollectionService(db),
     search: createSearchService(d1),
+    navigationLinks: createNavigationLinkService(db),
   };
 }
 
@@ -41,3 +47,4 @@ export type { RedirectService } from "./redirect.js";
 export type { MediaService } from "./media.js";
 export type { CollectionService } from "./collection.js";
 export type { SearchService, SearchResult, SearchOptions } from "./search.js";
+export type { NavigationLinkService } from "./navigation.js";

package/src/services/media.ts

@@ -1,7 +1,7 @@
 /**
  * Media Service
  *
- * Handles media upload and management with R2 storage
+ * Handles media upload and management with pluggable storage backends.
  */
 
 import { eq, desc, inArray, asc } from "drizzle-orm";
@@ -19,18 +19,20 @@ export interface MediaService {
   list(limit?: number): Promise<Media[]>;
   create(data: CreateMediaData): Promise<Media>;
   delete(id: string): Promise<boolean>;
-  getByR2Key(r2Key: string): Promise<Media | null>;
+  getByStorageKey(storageKey: string): Promise<Media | null>;
   attachToPost(postId: number, mediaIds: string[]): Promise<void>;
   detachFromPost(postId: number): Promise<void>;
 }
 
 export interface CreateMediaData {
+  id?: string;
   postId?: number;
   filename: string;
   originalName: string;
   mimeType: string;
   size: number;
-  r2Key: string;
+  storageKey: string;
+  provider?: string;
   width?: number;
   height?: number;
   alt?: string;
@@ -47,7 +49,8 @@ export function createMediaService(db: Database): MediaService {
       originalName: row.originalName,
       mimeType: row.mimeType,
       size: row.size,
-      r2Key: row.r2Key,
+      storageKey: row.storageKey,
+      provider: row.provider,
       width: row.width,
       height: row.height,
       alt: row.alt,
@@ -106,11 +109,11 @@ export function createMediaService(db: Database): MediaService {
       return result;
     },
 
-    async getByR2Key(r2Key) {
+    async getByStorageKey(storageKey) {
       const result = await db
         .select()
         .from(media)
-        .where(eq(media.r2Key, r2Key))
+        .where(eq(media.storageKey, storageKey))
         .limit(1);
       return result[0] ? toMedia(result[0]) : null;
     },
@@ -125,7 +128,7 @@ export function createMediaService(db: Database): MediaService {
     },
 
     async create(data) {
-      const id = uuidv7();
+      const id = data.id ?? uuidv7();
       const timestamp = now();
 
       const result = await db
@@ -137,7 +140,8 @@ export function createMediaService(db: Database): MediaService {
           originalName: data.originalName,
           mimeType: data.mimeType,
           size: data.size,
-          r2Key: data.r2Key,
+          storageKey: data.storageKey,
+          provider: data.provider ?? "r2",
           width: data.width ?? null,
           height: data.height ?? null,
           alt: data.alt ?? null,

package/src/services/navigation.ts

@@ -0,0 +1,165 @@
+/**
+ * Navigation Link Service
+ *
+ * Manages navigation links displayed on public pages
+ */
+
+import { eq, asc, sql } from "drizzle-orm";
+import type { Database } from "../db/index.js";
+import { navigationLinks } from "../db/schema.js";
+import { now } from "../lib/time.js";
+import type {
+  NavigationLink,
+  CreateNavigationLink,
+  UpdateNavigationLink,
+} from "../types.js";
+
+export interface NavigationLinkService {
+  list(): Promise<NavigationLink[]>;
+  getById(id: number): Promise<NavigationLink | null>;
+  create(data: CreateNavigationLink): Promise<NavigationLink>;
+  update(
+    id: number,
+    data: UpdateNavigationLink,
+  ): Promise<NavigationLink | null>;
+  delete(id: number): Promise<boolean>;
+  reorder(ids: number[]): Promise<void>;
+  ensureDefaults(): Promise<NavigationLink[]>;
+}
+
+export function createNavigationLinkService(
+  db: Database,
+): NavigationLinkService {
+  function toNavigationLink(
+    row: typeof navigationLinks.$inferSelect,
+  ): NavigationLink {
+    return {
+      id: row.id,
+      label: row.label,
+      url: row.url,
+      position: row.position,
+      createdAt: row.createdAt,
+      updatedAt: row.updatedAt,
+    };
+  }
+
+  return {
+    async list() {
+      const rows = await db
+        .select()
+        .from(navigationLinks)
+        .orderBy(asc(navigationLinks.position));
+      return rows.map(toNavigationLink);
+    },
+
+    async getById(id) {
+      const result = await db
+        .select()
+        .from(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .limit(1);
+      return result[0] ? toNavigationLink(result[0]) : null;
+    },
+
+    async create(data) {
+      const timestamp = now();
+
+      let position = data.position;
+      if (position === undefined) {
+        const maxResult = await db
+          .select({ maxPos: sql<number>`COALESCE(MAX(position), -1)` })
+          .from(navigationLinks);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- aggregate always returns one row
+        position = maxResult[0]!.maxPos + 1;
+      }
+
+      const result = await db
+        .insert(navigationLinks)
+        .values({
+          label: data.label,
+          url: data.url,
+          position,
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        })
+        .returning();
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- DB insert with .returning() always returns inserted row
+      return toNavigationLink(result[0]!);
+    },
+
+    async update(id, data) {
+      const existing = await db
+        .select()
+        .from(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .limit(1);
+      if (!existing[0]) return null;
+
+      const timestamp = now();
+      const result = await db
+        .update(navigationLinks)
+        .set({
+          ...(data.label !== undefined && { label: data.label }),
+          ...(data.url !== undefined && { url: data.url }),
+          ...(data.position !== undefined && { position: data.position }),
+          updatedAt: timestamp,
+        })
+        .where(eq(navigationLinks.id, id))
+        .returning();
+
+      return result[0] ? toNavigationLink(result[0]) : null;
+    },
+
+    async delete(id) {
+      const result = await db
+        .delete(navigationLinks)
+        .where(eq(navigationLinks.id, id))
+        .returning();
+      return result.length > 0;
+    },
+
+    async reorder(ids) {
+      const timestamp = now();
+      for (let i = 0; i < ids.length; i++) {
+        await db
+          .update(navigationLinks)
+          .set({ position: i, updatedAt: timestamp })
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- loop index guarantees element exists
+          .where(eq(navigationLinks.id, ids[i]!));
+      }
+    },
+
+    async ensureDefaults() {
+      const existing = await db.select().from(navigationLinks).limit(1);
+      if (existing.length > 0) {
+        const rows = await db
+          .select()
+          .from(navigationLinks)
+          .orderBy(asc(navigationLinks.position));
+        return rows.map(toNavigationLink);
+      }
+
+      const timestamp = now();
+      const defaults = [
+        { label: "Home", url: "/", position: 0 },
+        { label: "Archive", url: "/archive", position: 1 },
+        { label: "RSS", url: "/feed", position: 2 },
+      ];
+
+      for (const link of defaults) {
+        await db.insert(navigationLinks).values({
+          ...link,
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        });
+      }
+
+      const rows = await db
+        .select()
+        .from(navigationLinks)
+        .orderBy(asc(navigationLinks.position));
+      return rows.map(toNavigationLink);
+    },
+  };
+}

package/src/services/post.ts

@@ -4,7 +4,16 @@
  * CRUD operations for posts with Thread support
  */
 
-import { eq, and, isNull, desc, or, inArray, sql } from "drizzle-orm";
+import {
+  eq,
+  and,
+  isNull,
+  desc,
+  or,
+  inArray,
+  notInArray,
+  sql,
+} from "drizzle-orm";
 import type { Database } from "../db/index.js";
 import { posts } from "../db/schema.js";
 import { now } from "../lib/time.js";
@@ -20,6 +29,8 @@ import type {
 
 export interface PostFilters {
   type?: PostType;
+  /** Exclude specific post types (e.g. ["page"]) */
+  excludeTypes?: PostType[];
   visibility?: Visibility | Visibility[];
   includeDeleted?: boolean;
   threadId?: number;
@@ -40,6 +51,11 @@ export interface PostService {
   updateThreadVisibility(rootId: number, visibility: Visibility): Promise<void>;
   /** Get reply counts for multiple posts */
   getReplyCounts(postIds: number[]): Promise<Map<number, number>>;
+  /** Get preview replies for multiple thread roots */
+  getThreadPreviews(
+    rootIds: number[],
+    previewCount?: number,
+  ): Promise<Map<number, Post[]>>;
 }
 
 export function createPostService(db: Database): PostService {
@@ -101,6 +117,11 @@ export function createPostService(db: Database): PostService {
         conditions.push(eq(posts.type, filters.type));
       }
 
+      // Exclude types filter
+      if (filters.excludeTypes && filters.excludeTypes.length > 0) {
+        conditions.push(notInArray(posts.type, filters.excludeTypes));
+      }
+
       // Thread filter
       if (filters.threadId) {
         conditions.push(eq(posts.threadId, filters.threadId));
@@ -302,5 +323,31 @@ export function createPostService(db: Database): PostService {
       }
       return counts;
     },
+
+    async getThreadPreviews(rootIds, previewCount = 3) {
+      if (rootIds.length === 0) return new Map();
+
+      const rows = await db
+        .select()
+        .from(posts)
+        .where(and(inArray(posts.threadId, rootIds), isNull(posts.deletedAt)))
+        .orderBy(posts.threadId, posts.createdAt);
+
+      // Partition by threadId, take first previewCount per thread
+      const result = new Map<number, Post[]>();
+      for (const row of rows) {
+        const post = toPost(row);
+        if (post.threadId === null) continue;
+        const list = result.get(post.threadId);
+        if (list) {
+          if (list.length < previewCount) {
+            list.push(post);
+          }
+        } else {
+          result.set(post.threadId, [post]);
+        }
+      }
+      return result;
+    },
   };
 }

package/src/styles/components.css

@@ -10,6 +10,11 @@
   .container {
     @apply mx-auto max-w-2xl px-4;
   }
+
+  .container-timeline {
+    @apply mx-auto px-4;
+    max-width: 600px;
+  }
 }
 
 /* Alert variants */
@@ -119,6 +124,60 @@
   }
 }
 
+/* Timeline cards */
+@layer components {
+  .timeline-card {
+    @apply rounded-lg border p-4;
+    border-color: var(--color-border);
+  }
+
+  .timeline-card-link {
+    border-left-width: 4px;
+    border-left-color: var(--color-primary);
+  }
+
+  .timeline-card-quote {
+    border-left-width: 4px;
+    border-left-color: var(--color-muted-foreground);
+    background-color: var(--color-muted);
+  }
+
+  .timeline-card-image {
+    @apply p-0 overflow-hidden;
+  }
+
+  .timeline-card-image-gallery {
+    /* Remove default margin from MediaGallery inside image cards */
+    > div {
+      @apply mt-0;
+    }
+  }
+
+  .timeline-card-compact {
+    @apply p-3 text-sm;
+  }
+
+  .timeline-thread-replies {
+    @apply relative ml-5;
+  }
+
+  .timeline-thread-reply {
+    @apply relative pl-5 mt-3;
+
+    &::after {
+      content: "";
+      @apply absolute left-0 top-0 bottom-0 w-px;
+      background-color: var(--color-border);
+    }
+
+    &::before {
+      content: "";
+      @apply absolute left-0 top-4 h-px w-4;
+      background-color: var(--color-border);
+    }
+  }
+}
+
 @keyframes toast-in {
   from {
     opacity: 0;

package/src/theme/components/PostForm.tsx

@@ -5,7 +5,11 @@
 import type { FC } from "hono/jsx";
 import type { Post, Media, Collection } from "../../types.js";
 import { useLingui } from "@lingui/react/macro";
-import { getMediaUrl, getImageUrl } from "../../lib/image.js";
+import {
+  getMediaUrl,
+  getImageUrl,
+  getPublicUrlForProvider,
+} from "../../lib/image.js";
 
 export interface PostFormProps {
   post?: Post;
@@ -13,6 +17,7 @@ export interface PostFormProps {
   mediaAttachments?: Media[];
   r2PublicUrl?: string;
   imageTransformUrl?: string;
+  s3PublicUrl?: string;
   collections?: Collection[];
   postCollectionIds?: number[];
 }
@@ -23,6 +28,7 @@ export const PostForm: FC<PostFormProps> = ({
   mediaAttachments,
   r2PublicUrl,
   imageTransformUrl,
+  s3PublicUrl,
   collections,
   postCollectionIds,
 }) => {
@@ -135,7 +141,12 @@ export const PostForm: FC<PostFormProps> = ({
         {mediaAttachments && mediaAttachments.length > 0 && (
           <div class="grid grid-cols-4 sm:grid-cols-6 gap-2 mb-2">
             {mediaAttachments.map((m) => {
-              const url = getMediaUrl(m.id, m.r2Key, r2PublicUrl);
+              const pUrl = getPublicUrlForProvider(
+                m.provider,
+                r2PublicUrl,
+                s3PublicUrl,
+              );
+              const url = getMediaUrl(m.id, m.storageKey, pUrl);
               const thumbUrl = getImageUrl(url, imageTransformUrl, {
                 width: 150,
                 quality: 80,

package/src/theme/components/PostList.tsx

@@ -52,6 +52,13 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
                 message: "View",
                 comment: "@context: Button to view post on public site",
               })}
+              deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
+              deleteConfirm={t({
+                message:
+                  "Are you sure you want to delete this post? This cannot be undone.",
+                comment:
+                  "@context: Confirmation dialog when deleting a post from the list",
+              })}
             />
           }
         >

package/src/theme/components/index.ts

@@ -21,3 +21,15 @@ export {
   VisibilityBadge,
   type VisibilityBadgeProps,
 } from "./VisibilityBadge.js";
+
+// Timeline components
+export {
+  NoteCard,
+  ArticleCard,
+  LinkCard,
+  QuoteCard,
+  ImageCard,
+  ThreadPreview,
+  TimelineItem,
+  TimelineFeed,
+} from "./timeline/index.js";

package/src/theme/components/timeline/ArticleCard.tsx

@@ -0,0 +1,57 @@
+/**
+ * Article Card Component
+ *
+ * Prominent title + excerpt for type="article" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const ArticleCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+  const excerpt = post.content
+    ? post.content.length > 160
+      ? post.content.slice(0, 160) + "..."
+      : post.content
+    : null;
+
+  return (
+    <article
+      class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-lg"} mb-1`}
+        >
+          <a href={permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && excerpt && (
+        <p class="e-content text-sm text-muted-foreground line-clamp-3">
+          {excerpt}
+        </p>
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="u-url hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+        {!compact && (
+          <span class="ml-2">
+            <a href={permalink} class="hover:underline">
+              Read more &rarr;
+            </a>
+          </span>
+        )}
+      </footer>
+    </article>
+  );
+};

package/src/theme/components/timeline/ImageCard.tsx

@@ -0,0 +1,80 @@
+/**
+ * Image Card Component
+ *
+ * Image-first layout for type="image" posts.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../MediaGallery.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+
+export const ImageCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  if (compact) {
+    return (
+      <article class="h-entry timeline-card timeline-card-compact">
+        {post.title && (
+          <h2 class="p-name text-sm font-medium mb-1">
+            <a href={permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        )}
+        {post.contentHtml && (
+          <div
+            class="e-content prose prose-sm text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          />
+        )}
+        <footer class="mt-1 text-xs text-muted-foreground">
+          <a href={permalink} class="u-url hover:underline">
+            <time
+              class="dt-published"
+              datetime={time.toISOString(post.publishedAt)}
+            >
+              {time.formatDate(post.publishedAt)}
+            </time>
+          </a>
+        </footer>
+      </article>
+    );
+  }
+
+  return (
+    <article class="h-entry timeline-card timeline-card-image">
+      {post.mediaAttachments.length > 0 && (
+        <div class="timeline-card-image-gallery">
+          <MediaGallery attachments={post.mediaAttachments} />
+        </div>
+      )}
+      <div class="p-4">
+        {post.title && (
+          <h2 class="p-name font-medium mb-1">
+            <a href={permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        )}
+        {post.contentHtml && (
+          <div
+            class="e-content prose prose-sm"
+            dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          />
+        )}
+        <footer class="mt-2 text-xs text-muted-foreground">
+          <a href={permalink} class="u-url hover:underline">
+            <time
+              class="dt-published"
+              datetime={time.toISOString(post.publishedAt)}
+            >
+              {time.formatDate(post.publishedAt)}
+            </time>
+          </a>
+        </footer>
+      </div>
+    </article>
+  );
+};