@jant/core 0.3.7 → 0.3.9

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

@@ -0,0 +1,66 @@
+/**
+ * Link Card Component
+ *
+ * External link emphasis for type="link" 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 LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.sourceDomain && (
+        <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+          <svg
+            class="size-3"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+          >
+            <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" />
+          </svg>
+          <span>{post.sourceDomain}</span>
+        </div>
+      )}
+      {post.title && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a
+            href={post.sourceUrl || permalink}
+            class="u-url hover:underline"
+            target={post.sourceUrl ? "_blank" : undefined}
+            rel={post.sourceUrl ? "noopener noreferrer" : undefined}
+          >
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {!compact && post.contentHtml && (
+        <div
+          class="e-content prose prose-sm text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      <footer class="mt-2 text-xs text-muted-foreground">
+        <a href={permalink} class="hover:underline">
+          <time
+            class="dt-published"
+            datetime={time.toISOString(post.publishedAt)}
+          >
+            {time.formatDate(post.publishedAt)}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

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

@@ -0,0 +1,41 @@
+/**
+ * Note Card Component
+ *
+ * Text-first, minimal card for type="note" 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 NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.contentHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : "prose-sm"}`}
+          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+        />
+      )}
+      {!compact && post.mediaAttachments.length > 0 && (
+        <MediaGallery attachments={post.mediaAttachments} />
+      )}
+      <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>
+    </article>
+  );
+};

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

@@ -0,0 +1,55 @@
+/**
+ * Quote Card Component
+ *
+ * Blockquote + attribution for type="quote" 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 QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const permalink = `/p/${sqid.encode(post.id)}`;
+
+  return (
+    <article
+      class={`h-entry timeline-card timeline-card-quote${compact ? " timeline-card-compact" : ""}`}
+    >
+      {post.contentHtml && (
+        <blockquote
+          class={`e-content italic ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+        >
+          <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
+        </blockquote>
+      )}
+      {!compact && (post.sourceName || post.sourceUrl) && (
+        <div class="mt-2 text-sm text-muted-foreground">
+          &mdash;{" "}
+          {post.sourceUrl ? (
+            <a
+              href={post.sourceUrl}
+              class="hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {post.sourceName || post.sourceDomain || "Source"}
+            </a>
+          ) : (
+            <span>{post.sourceName}</span>
+          )}
+        </div>
+      )}
+      <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>
+    </article>
+  );
+};

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

@@ -0,0 +1,49 @@
+/**
+ * Thread Preview Component
+ *
+ * Inline thread preview: root card + compact replies + "show more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { ThreadPreviewProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import * as sqid from "../../../lib/sqid.js";
+
+export const ThreadPreview: FC<ThreadPreviewProps> = ({
+  rootPost,
+  previewReplies,
+  totalReplyCount,
+}) => {
+  const { t } = useLingui();
+  const permalink = `/p/${sqid.encode(rootPost.id)}`;
+  const remainingCount = totalReplyCount - previewReplies.length;
+
+  return (
+    <div class="timeline-thread">
+      <TimelineItem item={{ post: rootPost }} />
+      {previewReplies.length > 0 && (
+        <div class="timeline-thread-replies">
+          {previewReplies.map((reply) => (
+            <div key={reply.id} class="timeline-thread-reply">
+              <TimelineItem item={{ post: reply }} compact />
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div class="timeline-thread-reply">
+              <a
+                href={permalink}
+                class="text-sm text-muted-foreground hover:text-foreground hover:underline"
+              >
+                {t({
+                  message: `Show ${remainingCount} more ${remainingCount === 1 ? "reply" : "replies"}`,
+                  comment: "@context: Link to show remaining thread replies",
+                })}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+/**
+ * Timeline Feed Component
+ *
+ * Main feed wrapper with load-more button.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { TimelineFeedProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  hasMore,
+  nextCursor,
+}) => {
+  const { t } = useLingui();
+
+  return (
+    <div>
+      <div id="timeline-feed" class="flex flex-col gap-4">
+        {items.map((item) => {
+          if (item.threadPreview) {
+            return (
+              <ThreadPreview
+                key={item.post.id}
+                rootPost={item.post}
+                previewReplies={item.threadPreview.replies}
+                totalReplyCount={item.threadPreview.totalReplyCount}
+              />
+            );
+          }
+          return <TimelineItem key={item.post.id} item={item} />;
+        })}
+      </div>
+      {hasMore && nextCursor && (
+        <div id="load-more-container" class="mt-6 text-center">
+          <button
+            class="btn btn-outline"
+            data-on:click={`@get('/api/timeline?cursor=${nextCursor}')`}
+          >
+            {t({
+              message: "Load more",
+              comment: "@context: Button to load more posts in timeline",
+            })}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,39 @@
+/**
+ * Timeline Item Component
+ *
+ * Dispatches to the correct card component based on post type.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineItemData, TimelineCardProps } from "../../../types.js";
+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";
+import type { PostType } from "../../../types.js";
+
+const CARD_MAP: Record<PostType, FC<TimelineCardProps>> = {
+  note: NoteCard,
+  article: ArticleCard,
+  link: LinkCard,
+  quote: QuoteCard,
+  image: ImageCard,
+  page: NoteCard,
+};
+
+interface TimelineItemProps {
+  item: TimelineItemData;
+  compact?: boolean;
+  /** Override card component (for theme overrides) */
+  cardOverride?: FC<TimelineCardProps>;
+}
+
+export const TimelineItem: FC<TimelineItemProps> = ({
+  item,
+  compact,
+  cardOverride,
+}) => {
+  const Card = cardOverride ?? CARD_MAP[item.post.type];
+  return <Card post={item.post} compact={compact} />;
+};

package/src/theme/components/timeline/index.ts

@@ -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/src/theme/layouts/DashLayout.tsx

@@ -126,6 +126,16 @@ function DashLayoutContent({
                 comment: "@context: Dashboard navigation - URL redirects",
               })}
             </a>
+            <a
+              href="/dash/navigation"
+              class={navClass("/dash/navigation", /^\/dash\/navigation/)}
+            >
+              {t({
+                message: "Navigation",
+                comment:
+                  "@context: Dashboard navigation - navigation links management",
+              })}
+            </a>
             <a
               href="/dash/settings"
               class={navClass("/dash/settings", /^\/dash\/settings/)}

package/src/theme/layouts/SiteLayout.tsx

@@ -0,0 +1,184 @@
+/**
+ * Site Layout
+ *
+ * Two-column layout for public pages with sidebar navigation.
+ * On mobile, uses a slide-out drawer menu.
+ */
+
+import type { FC, PropsWithChildren } from "hono/jsx";
+import type { NavigationLink } from "../../types.js";
+
+export interface SiteLayoutProps {
+  siteName: string;
+  navigationLinks: NavigationLink[];
+  currentPath: string;
+}
+
+/**
+ * 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: string, currentPath: string): boolean {
+  // 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: string): boolean {
+  return url.startsWith("http://") || url.startsWith("https://");
+}
+
+/**
+ * Render navigation links with dot indicator for active state.
+ */
+function NavLinks({
+  navigationLinks,
+  currentPath,
+}: {
+  navigationLinks: NavigationLink[];
+  currentPath: string;
+}) {
+  return (
+    <>
+      {navigationLinks.map((link) => {
+        const active = isLinkActive(link.url, currentPath);
+        const external = isExternalUrl(link.url);
+        return (
+          <a
+            key={link.id}
+            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" }
+              : {})}
+          >
+            <span
+              class={`size-1.5 rounded-full shrink-0 ${active ? "bg-primary" : "bg-transparent"}`}
+            />
+            {link.label}
+            {external && <span class="ml-1 text-xs opacity-50">↗</span>}
+          </a>
+        );
+      })}
+    </>
+  );
+}
+
+export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
+  siteName,
+  navigationLinks,
+  currentPath,
+  children,
+}) => {
+  return (
+    <div
+      class="container py-8 md:flex md:gap-12"
+      data-signals={JSON.stringify({ _drawerOpen: false })}
+    >
+      {/* Mobile header with hamburger */}
+      <div class="flex items-center justify-between mb-6 md:hidden">
+        <a href="/" class="text-xl font-semibold">
+          {siteName}
+        </a>
+        <button
+          data-on:click="$_drawerOpen = true"
+          class="p-2 -mr-2 text-muted-foreground hover:text-foreground"
+          aria-label="Open menu"
+        >
+          <svg
+            class="size-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Mobile drawer backdrop */}
+      <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"
+      />
+
+      {/* Mobile drawer panel */}
+      <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}"
+      >
+        <div class="flex items-center justify-between mb-8">
+          <a href="/" class="text-xl font-semibold">
+            {siteName}
+          </a>
+          <button
+            data-on:click="$_drawerOpen = false"
+            class="p-2 -mr-2 text-muted-foreground hover:text-foreground"
+            aria-label="Close menu"
+          >
+            <svg
+              class="size-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <nav class="flex flex-col gap-0.5">
+          <NavLinks
+            navigationLinks={navigationLinks}
+            currentPath={currentPath}
+          />
+        </nav>
+      </aside>
+
+      {/* Desktop sidebar */}
+      <aside class="hidden md:block md:w-48 md:shrink-0 md:sticky md:top-8 md:self-start">
+        <a href="/" class="text-xl font-semibold block mb-20">
+          {siteName}
+        </a>
+        <nav class="flex flex-col gap-0.5">
+          <NavLinks
+            navigationLinks={navigationLinks}
+            currentPath={currentPath}
+          />
+        </nav>
+      </aside>
+
+      {/* Main content */}
+      <main class="flex-1 min-w-0">{children}</main>
+    </div>
+  );
+};

package/src/theme/layouts/index.ts

@@ -4,3 +4,4 @@ export {
   type ToastProps,
 } from "./BaseLayout.js";
 export { DashLayout, type DashLayoutProps } from "./DashLayout.js";
+export { SiteLayout, type SiteLayoutProps } from "./SiteLayout.js";

package/src/types/sortablejs.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Minimal type declarations for sortablejs
+ *
+ * Only covers the API surface used by nav-reorder.ts.
+ */
+
+declare module "sortablejs" {
+  interface SortableOptions {
+    animation?: number;
+    handle?: string;
+    onEnd?: (event: { oldIndex?: number; newIndex?: number }) => void;
+  }
+
+  interface SortableInstance {
+    destroy(): void;
+  }
+
+  const Sortable: {
+    create(el: HTMLElement, options?: SortableOptions): SortableInstance;
+  };
+
+  export default Sortable;
+}