@jant/core 0.3.7 → 0.3.8

package/dist/theme/components/timeline/LinkCard.js

@@ -0,0 +1,62 @@
+/**
+ * Link Card Component
+ *
+ * External link emphasis for type="link" posts.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+export const LinkCard = ({ post, compact })=>{
+    const permalink = `/p/${sqid.encode(post.id)}`;
+    return /*#__PURE__*/ _jsxs("article", {
+        class: `h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`,
+        children: [
+            post.sourceDomain && /*#__PURE__*/ _jsxs("div", {
+                class: "text-xs text-muted-foreground mb-1 flex items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("svg", {
+                        class: "size-3",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        "stroke-width": "2",
+                        stroke: "currentColor",
+                        children: /*#__PURE__*/ _jsx("path", {
+                            d: "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: post.sourceDomain
+                    })
+                ]
+            }),
+            post.title && /*#__PURE__*/ _jsx("h2", {
+                class: `p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`,
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: post.sourceUrl || permalink,
+                    class: "u-url hover:underline",
+                    target: post.sourceUrl ? "_blank" : undefined,
+                    rel: post.sourceUrl ? "noopener noreferrer" : undefined,
+                    children: post.title
+                })
+            }),
+            !compact && post.contentHtml && /*#__PURE__*/ _jsx("div", {
+                class: "e-content prose prose-sm text-muted-foreground",
+                dangerouslySetInnerHTML: {
+                    __html: post.contentHtml
+                }
+            }),
+            /*#__PURE__*/ _jsx("footer", {
+                class: "mt-2 text-xs text-muted-foreground",
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: permalink,
+                    class: "hover:underline",
+                    children: /*#__PURE__*/ _jsx("time", {
+                        class: "dt-published",
+                        datetime: time.toISOString(post.publishedAt),
+                        children: time.formatDate(post.publishedAt)
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/theme/components/timeline/NoteCard.js

@@ -0,0 +1,37 @@
+/**
+ * Note Card Component
+ *
+ * Text-first, minimal card for type="note" posts.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { MediaGallery } from "../MediaGallery.js";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+export const NoteCard = ({ post, compact })=>{
+    const permalink = `/p/${sqid.encode(post.id)}`;
+    return /*#__PURE__*/ _jsxs("article", {
+        class: `h-entry timeline-card${compact ? " timeline-card-compact" : ""}`,
+        children: [
+            post.contentHtml && /*#__PURE__*/ _jsx("div", {
+                class: `e-content prose ${compact ? "prose-sm" : "prose-sm"}`,
+                dangerouslySetInnerHTML: {
+                    __html: post.contentHtml
+                }
+            }),
+            !compact && post.mediaAttachments.length > 0 && /*#__PURE__*/ _jsx(MediaGallery, {
+                attachments: post.mediaAttachments
+            }),
+            /*#__PURE__*/ _jsx("footer", {
+                class: "mt-2 text-xs text-muted-foreground",
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: permalink,
+                    class: "u-url hover:underline",
+                    children: /*#__PURE__*/ _jsx("time", {
+                        class: "dt-published",
+                        datetime: time.toISOString(post.publishedAt),
+                        children: time.formatDate(post.publishedAt)
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/theme/components/timeline/QuoteCard.js

@@ -0,0 +1,51 @@
+/**
+ * Quote Card Component
+ *
+ * Blockquote + attribution for type="quote" posts.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import * as sqid from "../../../lib/sqid.js";
+import * as time from "../../../lib/time.js";
+export const QuoteCard = ({ post, compact })=>{
+    const permalink = `/p/${sqid.encode(post.id)}`;
+    return /*#__PURE__*/ _jsxs("article", {
+        class: `h-entry timeline-card timeline-card-quote${compact ? " timeline-card-compact" : ""}`,
+        children: [
+            post.contentHtml && /*#__PURE__*/ _jsx("blockquote", {
+                class: `e-content italic ${compact ? "text-sm" : "text-base"} leading-relaxed`,
+                children: /*#__PURE__*/ _jsx("div", {
+                    dangerouslySetInnerHTML: {
+                        __html: post.contentHtml
+                    }
+                })
+            }),
+            !compact && (post.sourceName || post.sourceUrl) && /*#__PURE__*/ _jsxs("div", {
+                class: "mt-2 text-sm text-muted-foreground",
+                children: [
+                    "—",
+                    " ",
+                    post.sourceUrl ? /*#__PURE__*/ _jsx("a", {
+                        href: post.sourceUrl,
+                        class: "hover:underline",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: post.sourceName || post.sourceDomain || "Source"
+                    }) : /*#__PURE__*/ _jsx("span", {
+                        children: post.sourceName
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("footer", {
+                class: "mt-2 text-xs text-muted-foreground",
+                children: /*#__PURE__*/ _jsx("a", {
+                    href: permalink,
+                    class: "u-url hover:underline",
+                    children: /*#__PURE__*/ _jsx("time", {
+                        class: "dt-published",
+                        datetime: time.toISOString(post.publishedAt),
+                        children: time.formatDate(post.publishedAt)
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/theme/components/timeline/ThreadPreview.js

@@ -0,0 +1,52 @@
+/**
+ * Thread Preview Component
+ *
+ * Inline thread preview: root card + compact replies + "show more" link.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { TimelineItem } from "./TimelineItem.js";
+import * as sqid from "../../../lib/sqid.js";
+export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount })=>{
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const permalink = `/p/${sqid.encode(rootPost.id)}`;
+    const remainingCount = totalReplyCount - previewReplies.length;
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "timeline-thread",
+        children: [
+            /*#__PURE__*/ _jsx(TimelineItem, {
+                item: {
+                    post: rootPost
+                }
+            }),
+            previewReplies.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                class: "timeline-thread-replies",
+                children: [
+                    previewReplies.map((reply)=>/*#__PURE__*/ _jsx("div", {
+                            class: "timeline-thread-reply",
+                            children: /*#__PURE__*/ _jsx(TimelineItem, {
+                                item: {
+                                    post: reply
+                                },
+                                compact: true
+                            })
+                        }, reply.id)),
+                    remainingCount > 0 && /*#__PURE__*/ _jsx("div", {
+                        class: "timeline-thread-reply",
+                        children: /*#__PURE__*/ _jsx("a", {
+                            href: permalink,
+                            class: "text-sm text-muted-foreground hover:text-foreground hover:underline",
+                            children: $__i18n._({
+                                id: "smzF8S",
+                                message: "Show {remainingCount} more {0}",
+                                values: {
+                                    remainingCount: remainingCount,
+                                    0: remainingCount === 1 ? "reply" : "replies"
+                                }
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/theme/components/timeline/TimelineFeed.js

@@ -0,0 +1,43 @@
+/**
+ * Timeline Feed Component
+ *
+ * Main feed wrapper with load-more button.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+export const TimelineFeed = ({ items, hasMore, nextCursor })=>{
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                id: "timeline-feed",
+                class: "flex flex-col gap-4",
+                children: items.map((item)=>{
+                    if (item.threadPreview) {
+                        return /*#__PURE__*/ _jsx(ThreadPreview, {
+                            rootPost: item.post,
+                            previewReplies: item.threadPreview.replies,
+                            totalReplyCount: item.threadPreview.totalReplyCount
+                        }, item.post.id);
+                    }
+                    return /*#__PURE__*/ _jsx(TimelineItem, {
+                        item: item
+                    }, item.post.id);
+                })
+            }),
+            hasMore && nextCursor && /*#__PURE__*/ _jsx("div", {
+                id: "load-more-container",
+                class: "mt-6 text-center",
+                children: /*#__PURE__*/ _jsx("button", {
+                    class: "btn btn-outline",
+                    "data-on:click": `@get('/api/timeline?cursor=${nextCursor}')`,
+                    children: $__i18n._({
+                        id: "yQ2kGp",
+                        message: "Load more"
+                    })
+                })
+            })
+        ]
+    });
+};

package/dist/theme/components/timeline/TimelineItem.js

@@ -0,0 +1,25 @@
+/**
+ * Timeline Item Component
+ *
+ * Dispatches to the correct card component based on post type.
+ */ import { jsx as _jsx } from "hono/jsx/jsx-runtime";
+import { NoteCard } from "./NoteCard.js";
+import { ArticleCard } from "./ArticleCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+import { ImageCard } from "./ImageCard.js";
+const CARD_MAP = {
+    note: NoteCard,
+    article: ArticleCard,
+    link: LinkCard,
+    quote: QuoteCard,
+    image: ImageCard,
+    page: NoteCard
+};
+export const TimelineItem = ({ item, compact, cardOverride })=>{
+    const Card = cardOverride ?? CARD_MAP[item.post.type];
+    return /*#__PURE__*/ _jsx(Card, {
+        post: item.post,
+        compact: compact
+    });
+};

package/dist/theme/components/timeline/index.js

@@ -0,0 +1,8 @@
+export { NoteCard } from "./NoteCard.js";
+export { ArticleCard } from "./ArticleCard.js";
+export { LinkCard } from "./LinkCard.js";
+export { QuoteCard } from "./QuoteCard.js";
+export { ImageCard } from "./ImageCard.js";
+export { ThreadPreview } from "./ThreadPreview.js";
+export { TimelineItem } from "./TimelineItem.js";
+export { TimelineFeed } from "./TimelineFeed.js";

package/dist/theme/layouts/DashLayout.js

@@ -107,6 +107,14 @@ function DashLayoutContent({ siteName, currentPath, children }) {
                                         message: "Redirects"
                                     })
                                 }),
+                                /*#__PURE__*/ _jsx("a", {
+                                    href: "/dash/navigation",
+                                    class: navClass("/dash/navigation", /^\/dash\/navigation/),
+                                    children: $__i18n._({
+                                        id: "UxKoFf",
+                                        message: "Navigation"
+                                    })
+                                }),
                                 /*#__PURE__*/ _jsx("a", {
                                     href: "/dash/settings",
                                     class: navClass("/dash/settings", /^\/dash\/settings/),

package/dist/theme/layouts/SiteLayout.js

@@ -0,0 +1,160 @@
+/**
+ * Site Layout
+ *
+ * Two-column layout for public pages with sidebar navigation.
+ * On mobile, uses a slide-out drawer menu.
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+/**
+ * Determine if a navigation link is active based on the current path.
+ *
+ * @param linkUrl - The link's URL
+ * @param currentPath - The current page path
+ * @returns Whether the link should be shown as active
+ */ function isLinkActive(linkUrl, currentPath) {
+    // External links are never active
+    if (linkUrl.startsWith("http://") || linkUrl.startsWith("https://")) {
+        return false;
+    }
+    // Exact match for home
+    if (linkUrl === "/") {
+        return currentPath === "/";
+    }
+    // Prefix match for other internal links
+    return currentPath === linkUrl || currentPath.startsWith(linkUrl + "/");
+}
+/**
+ * Check if a URL is external
+ */ function isExternalUrl(url) {
+    return url.startsWith("http://") || url.startsWith("https://");
+}
+/**
+ * Render navigation links with dot indicator for active state.
+ */ function NavLinks({ navigationLinks, currentPath }) {
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: navigationLinks.map((link)=>{
+            const active = isLinkActive(link.url, currentPath);
+            const external = isExternalUrl(link.url);
+            return /*#__PURE__*/ _jsxs("a", {
+                href: link.url,
+                class: `text-sm flex items-center gap-2 py-0.5 ${active ? "text-primary font-medium" : "text-muted-foreground hover:text-foreground"}`,
+                ...external ? {
+                    target: "_blank",
+                    rel: "noopener noreferrer"
+                } : {},
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        class: `size-1.5 rounded-full shrink-0 ${active ? "bg-primary" : "bg-transparent"}`
+                    }),
+                    link.label,
+                    external && /*#__PURE__*/ _jsx("span", {
+                        class: "ml-1 text-xs opacity-50",
+                        children: "↗"
+                    })
+                ]
+            }, link.id);
+        })
+    });
+}
+export const SiteLayout = ({ siteName, navigationLinks, currentPath, children })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "container py-8 md:flex md:gap-12",
+        "data-signals": JSON.stringify({
+            _drawerOpen: false
+        }),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex items-center justify-between mb-6 md:hidden",
+                children: [
+                    /*#__PURE__*/ _jsx("a", {
+                        href: "/",
+                        class: "text-xl font-semibold",
+                        children: siteName
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        "data-on:click": "$_drawerOpen = true",
+                        class: "p-2 -mr-2 text-muted-foreground hover:text-foreground",
+                        "aria-label": "Open menu",
+                        children: /*#__PURE__*/ _jsx("svg", {
+                            class: "size-5",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            "stroke-width": "1.5",
+                            stroke: "currentColor",
+                            children: /*#__PURE__*/ _jsx("path", {
+                                "stroke-linecap": "round",
+                                "stroke-linejoin": "round",
+                                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                class: "fixed inset-0 bg-black/50 z-40 opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out md:hidden",
+                "data-class": "{'opacity-100 pointer-events-auto': $_drawerOpen, 'opacity-0 pointer-events-none': !$_drawerOpen}",
+                "data-on:click": "$_drawerOpen = false"
+            }),
+            /*#__PURE__*/ _jsxs("aside", {
+                class: "fixed inset-y-0 left-0 w-64 bg-background z-50 p-6 overflow-y-auto shadow-lg -translate-x-full transition-transform duration-300 ease-in-out md:hidden",
+                "data-class": "{'translate-x-0': $_drawerOpen, '-translate-x-full': !$_drawerOpen}",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        class: "flex items-center justify-between mb-8",
+                        children: [
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "/",
+                                class: "text-xl font-semibold",
+                                children: siteName
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                "data-on:click": "$_drawerOpen = false",
+                                class: "p-2 -mr-2 text-muted-foreground hover:text-foreground",
+                                "aria-label": "Close menu",
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    class: "size-5",
+                                    fill: "none",
+                                    viewBox: "0 0 24 24",
+                                    "stroke-width": "1.5",
+                                    stroke: "currentColor",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                        d: "M6 18L18 6M6 6l12 12"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("nav", {
+                        class: "flex flex-col gap-0.5",
+                        children: /*#__PURE__*/ _jsx(NavLinks, {
+                            navigationLinks: navigationLinks,
+                            currentPath: currentPath
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("aside", {
+                class: "hidden md:block md:w-48 md:shrink-0 md:sticky md:top-8 md:self-start",
+                children: [
+                    /*#__PURE__*/ _jsx("a", {
+                        href: "/",
+                        class: "text-xl font-semibold block mb-20",
+                        children: siteName
+                    }),
+                    /*#__PURE__*/ _jsx("nav", {
+                        class: "flex flex-col gap-0.5",
+                        children: /*#__PURE__*/ _jsx(NavLinks, {
+                            navigationLinks: navigationLinks,
+                            currentPath: currentPath
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("main", {
+                class: "flex-1 min-w-0",
+                children: children
+            })
+        ]
+    });
+};

package/dist/theme/layouts/index.js

@@ -1,2 +1,3 @@
 export { BaseLayout } from "./BaseLayout.js";
 export { DashLayout } from "./DashLayout.js";
+export { SiteLayout } from "./SiteLayout.js";

package/dist/types/sortablejs.d.js

@@ -0,0 +1,5 @@
+/**
+ * Minimal type declarations for sortablejs
+ *
+ * Only covers the API surface used by nav-reorder.ts.
+ */ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "bin": {
@@ -37,6 +37,7 @@
     "drizzle-orm": "^0.45.1",
     "hono": "^4.11.7",
     "marked": "^17.0.1",
+    "sortablejs": "^1.15.6",
     "sqids": "^0.3.0",
     "uuidv7": "^1.1.0",
     "vite-ssr-components": "^0.5.2",
@@ -90,7 +91,7 @@
     "build": "pnpm build:lib",
     "build:lib": "swc src -d dist --strip-leading-paths --ignore '**/__tests__/**' && pnpm build:types",
     "build:types": "tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit && tsc -p tsconfig.client.json",
+    "typecheck": "tsc --noEmit",
     "db:generate": "drizzle-kit generate",
     "i18n:extract": "lingui extract",
     "i18n:compile": "lingui compile --typescript",

package/src/__tests__/helpers/db.ts

@@ -89,6 +89,16 @@ export function createTestDatabase(options?: { fts?: boolean }) {
     if (trimmed) sqlite.exec(trimmed);
   }
 
+  // Apply navigation links migration
+  const migration3 = readFileSync(
+    resolve(MIGRATIONS_DIR, "0003_add_navigation_links.sql"),
+    "utf-8",
+  );
+  for (const sql of migration3.split("--> statement-breakpoint")) {
+    const trimmed = sql.trim();
+    if (trimmed) sqlite.exec(trimmed);
+  }
+
   const db = drizzle(sqlite, { schema });
 
   return { db, sqlite };

package/src/app.tsx

@@ -29,11 +29,13 @@ import { mediaRoutes as dashMediaRoutes } from "./routes/dash/media.js";
 import { settingsRoutes as dashSettingsRoutes } from "./routes/dash/settings.js";
 import { redirectsRoutes as dashRedirectsRoutes } from "./routes/dash/redirects.js";
 import { collectionsRoutes as dashCollectionsRoutes } from "./routes/dash/collections.js";
+import { navigationRoutes as dashNavigationRoutes } from "./routes/dash/navigation.js";
 
 // Routes - API
 import { postsApiRoutes } from "./routes/api/posts.js";
 import { uploadApiRoutes } from "./routes/api/upload.js";
 import { searchApiRoutes } from "./routes/api/search.js";
+import { timelineApiRoutes } from "./routes/api/timeline.js";
 
 // Routes - Feed
 import { rssRoutes } from "./routes/feed/rss.js";
@@ -168,6 +170,7 @@ export function createApp(config: JantConfig = {}): App {
 
   // API Routes
   app.route("/api/posts", postsApiRoutes);
+  app.route("/api/timeline", timelineApiRoutes);
 
   // Setup page component
   const SetupContent: FC = () => {
@@ -660,6 +663,7 @@ export function createApp(config: JantConfig = {}): App {
   app.route("/dash/settings", dashSettingsRoutes);
   app.route("/dash/redirects", dashRedirectsRoutes);
   app.route("/dash/collections", dashCollectionsRoutes);
+  app.route("/dash/navigation", dashNavigationRoutes);
   // API routes
   app.route("/api/upload", uploadApiRoutes);
   app.route("/api/search", searchApiRoutes);

package/src/client.ts

@@ -11,3 +11,4 @@ import "./vendor/datastar.js";
 import "basecoat-css/all";
 import "./lib/image-processor.js";
 import "./lib/media-upload.js";
+import "./lib/nav-reorder.js";

package/src/db/migrations/0003_add_navigation_links.sql

@@ -0,0 +1,8 @@
+CREATE TABLE `navigation_links` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`label` text NOT NULL,
+	`url` text NOT NULL,
+	`position` integer DEFAULT 0 NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL
+);