@jant/core 0.2.12 → 0.2.13

package/src/routes/pages/home.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { BaseLayout } from "../../theme/layouts/index.js";
@@ -22,8 +22,14 @@ function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
       <header class="mb-8 flex items-center justify-between">
         <h1 class="text-2xl font-semibold">{siteName}</h1>
         <nav class="flex items-center gap-4 text-sm">
-          <a href="/archive" class="text-muted-foreground hover:text-foreground">
-            {t({ message: "Archive", comment: "@context: Navigation link to archive page" })}
+          <a
+            href="/archive"
+            class="text-muted-foreground hover:text-foreground"
+          >
+            {t({
+              message: "Archive",
+              comment: "@context: Navigation link to archive page",
+            })}
           </a>
           <a href="/feed" class="text-muted-foreground hover:text-foreground">
             RSS
@@ -34,14 +40,20 @@ function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
       <main class="flex flex-col gap-6">
         {posts.length === 0 ? (
           <p class="text-muted-foreground">
-            {t({ message: "No posts yet.", comment: "@context: Empty state message on home page" })}
+            {t({
+              message: "No posts yet.",
+              comment: "@context: Empty state message on home page",
+            })}
           </p>
         ) : (
           posts.map((post) => (
             <article key={post.id} class="h-entry">
               {post.title && (
                 <h2 class="p-name text-lg font-medium mb-2">
-                  <a href={`/p/${sqid.encode(post.id)}`} class="u-url hover:underline">
+                  <a
+                    href={`/p/${sqid.encode(post.id)}`}
+                    class="u-url hover:underline"
+                  >
                     {post.title}
                   </a>
                 </h2>
@@ -51,12 +63,18 @@ function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
                 dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
               />
               <footer class="mt-2 text-sm text-muted-foreground">
-                <time class="dt-published" datetime={time.toISOString(post.publishedAt)}>
+                <time
+                  class="dt-published"
+                  datetime={time.toISOString(post.publishedAt)}
+                >
                   {time.formatDate(post.publishedAt)}
                 </time>
                 {post.visibility === "featured" && (
                   <span class="ml-2 text-xs">
-                    {t({ message: "Featured", comment: "@context: Post visibility badge" })}
+                    {t({
+                      message: "Featured",
+                      comment: "@context: Post visibility badge",
+                    })}
                   </span>
                 )}
               </footer>
@@ -67,7 +85,10 @@ function HomeContent({ siteName, posts }: { siteName: string; posts: Post[] }) {
 
       {posts.length >= 20 && (
         <nav class="mt-8 text-center">
-          <a href="/archive" class="text-sm text-muted-foreground hover:text-foreground">
+          <a
+            href="/archive"
+            class="text-sm text-muted-foreground hover:text-foreground"
+          >
             {t({
               message: "View all posts →",
               comment: "@context: Link to view all posts on archive page",
@@ -95,6 +116,6 @@ homeRoutes.get("/", async (c) => {
   return c.html(
     <BaseLayout title={siteName} c={c}>
       <HomeContent siteName={siteName} posts={posts} />
-    </BaseLayout>
+    </BaseLayout>,
   );
 });

package/src/routes/pages/page.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { BaseLayout } from "../../theme/layouts/index.js";
@@ -20,14 +20,23 @@ function PageContent({ page }: { page: Post }) {
   return (
     <div class="container py-8 max-w-2xl">
       <article class="h-entry">
-        {page.title && <h1 class="p-name text-3xl font-semibold mb-6">{page.title}</h1>}
+        {page.title && (
+          <h1 class="p-name text-3xl font-semibold mb-6">{page.title}</h1>
+        )}
 
-        <div class="e-content prose" dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }} />
+        <div
+          class="e-content prose"
+          dangerouslySetInnerHTML={{ __html: page.contentHtml || "" }}
+        />
       </article>
 
       <nav class="mt-8 pt-6 border-t">
         <a href="/" class="text-sm hover:underline">
-          ← {t({ message: "Back to home", comment: "@context: Navigation link back to home page" })}
+          ←{" "}
+          {t({
+            message: "Back to home",
+            comment: "@context: Navigation link back to home page",
+          })}
         </a>
       </nav>
     </div>
@@ -60,6 +69,6 @@ pageRoutes.get("/:path", async (c) => {
       c={c}
     >
       <PageContent page={page} />
-    </BaseLayout>
+    </BaseLayout>,
   );
 });

package/src/routes/pages/post.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { BaseLayout } from "../../theme/layouts/index.js";
@@ -20,23 +20,37 @@ function PostContent({ post }: { post: Post }) {
   return (
     <div class="container py-8">
       <article class="h-entry">
-        {post.title && <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>}
+        {post.title && (
+          <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
+        )}
 
-        <div class="e-content prose" dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }} />
+        <div
+          class="e-content prose"
+          dangerouslySetInnerHTML={{ __html: post.contentHtml || "" }}
+        />
 
         <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
-          <time class="dt-published" datetime={time.toISOString(post.publishedAt)}>
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
             {time.formatDate(post.publishedAt)}
           </time>
           <a href={`/p/${sqid.encode(post.id)}`} class="u-url ml-4">
-            {t({ message: "Permalink", comment: "@context: Link to permanent URL of post" })}
+            {t({
+              message: "Permalink",
+              comment: "@context: Link to permanent URL of post",
+            })}
           </a>
         </footer>
       </article>
 
       <nav class="mt-8">
         <a href="/" class="text-sm hover:underline">
-          {t({ message: "← Back to home", comment: "@context: Navigation link" })}
+          {t({
+            message: "← Back to home",
+            comment: "@context: Navigation link",
+          })}
         </a>
       </nav>
     </div>
@@ -73,6 +87,6 @@ postRoutes.get("/:id", async (c) => {
   return c.html(
     <BaseLayout title={title} description={post.content?.slice(0, 160)} c={c}>
       <PostContent post={post} />
-    </BaseLayout>
+    </BaseLayout>,
   );
 });

package/src/routes/pages/search.tsx

@@ -3,7 +3,7 @@
  */
 
 import { Hono } from "hono";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import type { SearchResult } from "../../services/search.js";
@@ -32,7 +32,10 @@ function SearchContent({
   page: number;
 }) {
   const { t } = useLingui();
-  const searchTitle = t({ message: "Search", comment: "@context: Search page title" });
+  const searchTitle = t({
+    message: "Search",
+    comment: "@context: Search page title",
+  });
 
   return (
     <div class="container py-8 max-w-2xl">
@@ -53,20 +56,30 @@ function SearchContent({
             autofocus
           />
           <button type="submit" class="btn">
-            {t({ message: "Search", comment: "@context: Search submit button" })}
+            {t({
+              message: "Search",
+              comment: "@context: Search submit button",
+            })}
           </button>
         </div>
       </form>
 
       {/* Error */}
-      {error && <div class="p-4 rounded-lg bg-destructive/10 text-destructive mb-6">{error}</div>}
+      {error && (
+        <div class="p-4 rounded-lg bg-destructive/10 text-destructive mb-6">
+          {error}
+        </div>
+      )}
 
       {/* Results */}
       {query && !error && (
         <div>
           <p class="text-sm text-muted-foreground mb-4">
             {results.length === 0
-              ? t({ message: "No results found.", comment: "@context: Search empty results" })
+              ? t({
+                  message: "No results found.",
+                  comment: "@context: Search empty results",
+                })
               : results.length === 1
                 ? t({
                     message: "Found 1 result",
@@ -83,7 +96,10 @@ function SearchContent({
             <>
               <div class="flex flex-col gap-4">
                 {results.map((result) => (
-                  <article key={result.post.id} class="p-4 rounded-lg border hover:border-primary">
+                  <article
+                    key={result.post.id}
+                    class="p-4 rounded-lg border hover:border-primary"
+                  >
                     <a href={`/p/${sqid.encode(result.post.id)}`} class="block">
                       <h2 class="font-medium hover:underline">
                         {result.post.title ||
@@ -100,7 +116,9 @@ function SearchContent({
 
                       <footer class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
                         <span class="badge-outline">{result.post.type}</span>
-                        <time datetime={time.toISOString(result.post.publishedAt)}>
+                        <time
+                          datetime={time.toISOString(result.post.publishedAt)}
+                        >
                           {time.formatDate(result.post.publishedAt)}
                         </time>
                       </footer>
@@ -121,7 +139,11 @@ function SearchContent({
 
       <nav class="mt-8 pt-6 border-t">
         <a href="/" class="text-sm hover:underline">
-          ← {t({ message: "Back to home", comment: "@context: Navigation link back to home page" })}
+          ←{" "}
+          {t({
+            message: "Back to home",
+            comment: "@context: Navigation link back to home page",
+          })}
         </a>
       </nav>
     </div>
@@ -161,8 +183,17 @@ searchRoutes.get("/", async (c) => {
   }
 
   return c.html(
-    <BaseLayout title={query ? `Search: ${query} - ${siteName}` : `Search - ${siteName}`} c={c}>
-      <SearchContent query={query} results={results} error={error} hasMore={hasMore} page={page} />
-    </BaseLayout>
+    <BaseLayout
+      title={query ? `Search: ${query} - ${siteName}` : `Search - ${siteName}`}
+      c={c}
+    >
+      <SearchContent
+        query={query}
+        results={results}
+        error={error}
+        hasMore={hasMore}
+        page={page}
+      />
+    </BaseLayout>,
   );
 });

package/src/services/collection.ts

@@ -70,17 +70,28 @@ export function createCollectionService(db: Database): CollectionService {
 
   return {
     async getById(id) {
-      const result = await db.select().from(collections).where(eq(collections.id, id)).limit(1);
+      const result = await db
+        .select()
+        .from(collections)
+        .where(eq(collections.id, id))
+        .limit(1);
       return result[0] ? toCollection(result[0]) : null;
     },
 
     async getByPath(path) {
-      const result = await db.select().from(collections).where(eq(collections.path, path)).limit(1);
+      const result = await db
+        .select()
+        .from(collections)
+        .where(eq(collections.path, path))
+        .limit(1);
       return result[0] ? toCollection(result[0]) : null;
     },
 
     async list() {
-      const rows = await db.select().from(collections).orderBy(desc(collections.createdAt));
+      const rows = await db
+        .select()
+        .from(collections)
+        .orderBy(desc(collections.createdAt));
       return rows.map(toCollection);
     },
 
@@ -107,11 +118,14 @@ export function createCollectionService(db: Database): CollectionService {
       if (!existing) return null;
 
       const timestamp = now();
-      const updates: Partial<typeof collections.$inferInsert> = { updatedAt: timestamp };
+      const updates: Partial<typeof collections.$inferInsert> = {
+        updatedAt: timestamp,
+      };
 
       if (data.title !== undefined) updates.title = data.title;
       if (data.path !== undefined) updates.path = data.path;
-      if (data.description !== undefined) updates.description = data.description;
+      if (data.description !== undefined)
+        updates.description = data.description;
 
       const result = await db
         .update(collections)
@@ -124,9 +138,14 @@ export function createCollectionService(db: Database): CollectionService {
 
     async delete(id) {
       // Delete all post-collection relationships first
-      await db.delete(postCollections).where(eq(postCollections.collectionId, id));
+      await db
+        .delete(postCollections)
+        .where(eq(postCollections.collectionId, id));
 
-      const result = await db.delete(collections).where(eq(collections.id, id)).returning();
+      const result = await db
+        .delete(collections)
+        .where(eq(collections.id, id))
+        .returning();
       return result.length > 0;
     },
 
@@ -148,7 +167,10 @@ export function createCollectionService(db: Database): CollectionService {
       await db
         .delete(postCollections)
         .where(
-          and(eq(postCollections.collectionId, collectionId), eq(postCollections.postId, postId))
+          and(
+            eq(postCollections.collectionId, collectionId),
+            eq(postCollections.postId, postId),
+          ),
         );
     },
 
@@ -167,7 +189,10 @@ export function createCollectionService(db: Database): CollectionService {
       const rows = await db
         .select({ collection: collections })
         .from(postCollections)
-        .innerJoin(collections, eq(postCollections.collectionId, collections.id))
+        .innerJoin(
+          collections,
+          eq(postCollections.collectionId, collections.id),
+        )
         .where(eq(postCollections.postId, postId));
 
       return rows.map((r) => toCollection(r.collection));

package/src/services/index.ts

@@ -9,7 +9,10 @@ import { createSettingsService, type SettingsService } from "./settings.js";
 import { createPostService, type PostService } from "./post.js";
 import { createRedirectService, type RedirectService } from "./redirect.js";
 import { createMediaService, type MediaService } from "./media.js";
-import { createCollectionService, type CollectionService } from "./collection.js";
+import {
+  createCollectionService,
+  type CollectionService,
+} from "./collection.js";
 import { createSearchService, type SearchService } from "./search.js";
 
 export interface Services {

package/src/services/media.ts

@@ -50,17 +50,29 @@ export function createMediaService(db: Database): MediaService {
 
   return {
     async getById(id) {
-      const result = await db.select().from(media).where(eq(media.id, id)).limit(1);
+      const result = await db
+        .select()
+        .from(media)
+        .where(eq(media.id, id))
+        .limit(1);
       return result[0] ? toMedia(result[0]) : null;
     },
 
     async getByR2Key(r2Key) {
-      const result = await db.select().from(media).where(eq(media.r2Key, r2Key)).limit(1);
+      const result = await db
+        .select()
+        .from(media)
+        .where(eq(media.r2Key, r2Key))
+        .limit(1);
       return result[0] ? toMedia(result[0]) : null;
     },
 
     async list(limit = 100) {
-      const rows = await db.select().from(media).orderBy(desc(media.createdAt)).limit(limit);
+      const rows = await db
+        .select()
+        .from(media)
+        .orderBy(desc(media.createdAt))
+        .limit(limit);
       return rows.map(toMedia);
     },
 

package/src/services/post.ts

@@ -10,7 +10,13 @@ import { posts } from "../db/schema.js";
 import { now } from "../lib/time.js";
 import { extractDomain } from "../lib/url.js";
 import { render as renderMarkdown } from "../lib/markdown.js";
-import type { PostType, Visibility, Post, CreatePost, UpdatePost } from "../types.js";
+import type {
+  PostType,
+  Visibility,
+  Post,
+  CreatePost,
+  UpdatePost,
+} from "../types.js";
 
 export interface PostFilters {
   type?: PostType;
@@ -133,7 +139,9 @@ export function createPostService(db: Database): PostService {
       const contentHtml = data.content ? renderMarkdown(data.content) : null;
 
       // Extract domain from source URL
-      const sourceDomain = data.sourceUrl ? extractDomain(data.sourceUrl) : null;
+      const sourceDomain = data.sourceUrl
+        ? extractDomain(data.sourceUrl)
+        : null;
 
       // Handle thread relationship
       let threadId: number | null = null;
@@ -145,7 +153,9 @@ export function createPostService(db: Database): PostService {
           // thread_id = parent's thread_id or parent's id (if parent is root)
           threadId = parent.threadId ?? parent.id;
           // Inherit visibility from root
-          const root = parent.threadId ? await this.getById(parent.threadId) : parent;
+          const root = parent.threadId
+            ? await this.getById(parent.threadId)
+            : parent;
           if (root) {
             visibility = root.visibility;
           }
@@ -181,25 +191,35 @@ export function createPostService(db: Database): PostService {
       if (!existing) return null;
 
       const timestamp = now();
-      const updates: Partial<typeof posts.$inferInsert> = { updatedAt: timestamp };
+      const updates: Partial<typeof posts.$inferInsert> = {
+        updatedAt: timestamp,
+      };
 
       if (data.type !== undefined) updates.type = data.type;
       if (data.title !== undefined) updates.title = data.title;
       if (data.path !== undefined) updates.path = data.path;
-      if (data.publishedAt !== undefined) updates.publishedAt = data.publishedAt;
+      if (data.publishedAt !== undefined)
+        updates.publishedAt = data.publishedAt;
       if (data.sourceUrl !== undefined) {
         updates.sourceUrl = data.sourceUrl;
-        updates.sourceDomain = data.sourceUrl ? extractDomain(data.sourceUrl) : null;
+        updates.sourceDomain = data.sourceUrl
+          ? extractDomain(data.sourceUrl)
+          : null;
       }
       if (data.sourceName !== undefined) updates.sourceName = data.sourceName;
 
       if (data.content !== undefined) {
         updates.content = data.content;
-        updates.contentHtml = data.content ? renderMarkdown(data.content) : null;
+        updates.contentHtml = data.content
+          ? renderMarkdown(data.content)
+          : null;
       }
 
       // Handle visibility change - cascade to thread if this is root
-      if (data.visibility !== undefined && data.visibility !== existing.visibility) {
+      if (
+        data.visibility !== undefined &&
+        data.visibility !== existing.visibility
+      ) {
         updates.visibility = data.visibility;
         // If this is a root post, cascade visibility to all thread posts
         if (!existing.threadId) {
@@ -207,7 +227,11 @@ export function createPostService(db: Database): PostService {
         }
       }
 
-      const result = await db.update(posts).set(updates).where(eq(posts.id, id)).returning();
+      const result = await db
+        .update(posts)
+        .set(updates)
+        .where(eq(posts.id, id))
+        .returning();
 
       return result[0] ? toPost(result[0]) : null;
     },
@@ -239,7 +263,12 @@ export function createPostService(db: Database): PostService {
       const rows = await db
         .select()
         .from(posts)
-        .where(and(or(eq(posts.id, rootId), eq(posts.threadId, rootId)), isNull(posts.deletedAt)))
+        .where(
+          and(
+            or(eq(posts.id, rootId), eq(posts.threadId, rootId)),
+            isNull(posts.deletedAt),
+          ),
+        )
         .orderBy(posts.createdAt);
 
       return rows.map(toPost);

package/src/services/redirect.ts

@@ -62,7 +62,10 @@ export function createRedirectService(db: Database): RedirectService {
     },
 
     async delete(id) {
-      const result = await db.delete(redirects).where(eq(redirects.id, id)).returning();
+      const result = await db
+        .delete(redirects)
+        .where(eq(redirects.id, id))
+        .returning();
       return result.length > 0;
     },
 

package/src/services/settings.ts

@@ -8,7 +8,11 @@ import { eq } from "drizzle-orm";
 import type { Database } from "../db/index.js";
 import { settings } from "../db/schema.js";
 import { now } from "../lib/time.js";
-import { SETTINGS_KEYS, ONBOARDING_STATUS, type SettingsKey } from "../lib/constants.js";
+import {
+  SETTINGS_KEYS,
+  ONBOARDING_STATUS,
+  type SettingsKey,
+} from "../lib/constants.js";
 
 export interface SettingsService {
   get(key: SettingsKey): Promise<string | null>;
@@ -22,7 +26,11 @@ export interface SettingsService {
 export function createSettingsService(db: Database): SettingsService {
   return {
     async get(key) {
-      const result = await db.select().from(settings).where(eq(settings.key, key)).limit(1);
+      const result = await db
+        .select()
+        .from(settings)
+        .where(eq(settings.key, key))
+        .limit(1);
       return result[0]?.value ?? null;
     },
 
@@ -70,7 +78,10 @@ export function createSettingsService(db: Database): SettingsService {
     },
 
     async completeOnboarding() {
-      await this.set(SETTINGS_KEYS.ONBOARDING_STATUS, ONBOARDING_STATUS.COMPLETED);
+      await this.set(
+        SETTINGS_KEYS.ONBOARDING_STATUS,
+        ONBOARDING_STATUS.COMPLETED,
+      );
     },
   };
 }

package/src/theme/components/ActionButtons.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 
 export interface ActionButtonsProps {
   /**
@@ -19,7 +19,7 @@ export interface ActionButtonsProps {
   viewHref?: string;
 
   /**
-   * Delete button form action
+   * Delete action URL (sends POST via Datastar @post)
    */
   deleteAction?: string;
 
@@ -65,14 +65,28 @@ export const ActionButtons: FC<ActionButtonsProps> = ({
   const editClass = size === "sm" ? "btn-sm-outline" : "btn-outline";
   const viewClass = size === "sm" ? "btn-sm-ghost" : "btn-ghost";
   const deleteClass =
-    size === "sm" ? "btn-sm-ghost text-destructive" : "btn-ghost text-destructive";
+    size === "sm"
+      ? "btn-sm-ghost text-destructive"
+      : "btn-ghost text-destructive";
 
-  const defaultEditLabel = t({ message: "Edit", comment: "@context: Button to edit item" });
+  const defaultEditLabel = t({
+    message: "Edit",
+    comment: "@context: Button to edit item",
+  });
   const defaultViewLabel = t({
     message: "View",
     comment: "@context: Button to view item on public site",
   });
-  const defaultDeleteLabel = t({ message: "Delete", comment: "@context: Button to delete item" });
+  const defaultDeleteLabel = t({
+    message: "Delete",
+    comment: "@context: Button to delete item",
+  });
+
+  const deleteClickHandler = deleteAction
+    ? deleteConfirm
+      ? `confirm('${deleteConfirm}') && @post('${deleteAction}')`
+      : `@post('${deleteAction}')`
+    : undefined;
 
   return (
     <>
@@ -87,15 +101,13 @@ export const ActionButtons: FC<ActionButtonsProps> = ({
         </a>
       )}
       {deleteAction && (
-        <form method="post" action={deleteAction} style="display: inline">
-          <button
-            type="submit"
-            class={deleteClass}
-            onclick={deleteConfirm ? `return confirm('${deleteConfirm}')` : undefined}
-          >
-            {deleteLabel || defaultDeleteLabel}
-          </button>
-        </form>
+        <button
+          type="button"
+          class={deleteClass}
+          data-on:click__prevent={deleteClickHandler}
+        >
+          {deleteLabel || defaultDeleteLabel}
+        </button>
       )}
     </>
   );