@jant/core 0.3.23 → 0.3.25

package/src/routes/dash/navigation.tsx

@@ -1,316 +0,0 @@
-import { getSiteName } from "../../lib/config.js";
-/**
- * Dashboard Navigation Links Routes
- */
-
-import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings, NavigationLink } from "../../types.js";
-import type { AppVariables } from "../../app.js";
-import { DashLayout } from "../../theme/layouts/index.js";
-import {
-  EmptyState,
-  ListItemRow,
-  ActionButtons,
-  CrudPageHeader,
-} from "../../theme/components/index.js";
-import { dsRedirect, dsToast } from "../../lib/sse.js";
-
-type Env = { Bindings: Bindings; Variables: AppVariables };
-
-export const navigationRoutes = new Hono<Env>();
-
-function NavigationListContent({ links }: { links: NavigationLink[] }) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      <CrudPageHeader
-        title={t({
-          message: "Navigation",
-          comment: "@context: Dashboard heading",
-        })}
-        ctaLabel={t({
-          message: "New Link",
-          comment: "@context: Button to create new navigation link",
-        })}
-        ctaHref="/dash/navigation/new"
-      />
-
-      {links.length === 0 ? (
-        <EmptyState
-          message={t({
-            message: "No navigation links configured.",
-            comment: "@context: Empty state message",
-          })}
-          ctaText={t({
-            message: "New Link",
-            comment: "@context: Button to create new navigation link",
-          })}
-          ctaHref="/dash/navigation/new"
-        />
-      ) : (
-        <>
-          <div id="nav-links-list" class="flex flex-col divide-y">
-            {links.map((link) => (
-              <ListItemRow
-                key={link.id}
-                actions={
-                  <ActionButtons
-                    editHref={`/dash/navigation/${link.id}/edit`}
-                    editLabel={t({
-                      message: "Edit",
-                      comment: "@context: Button to edit navigation link",
-                    })}
-                    deleteAction={`/dash/navigation/${link.id}/delete`}
-                    deleteLabel={t({
-                      message: "Delete",
-                      comment: "@context: Button to delete navigation link",
-                    })}
-                  />
-                }
-              >
-                <div
-                  class="flex items-center gap-3 cursor-grab"
-                  data-id={link.id}
-                >
-                  <span class="text-muted-foreground select-none">⠿</span>
-                  <div class="flex items-center gap-2">
-                    <span class="font-medium">{link.label}</span>
-                    <code class="text-sm text-muted-foreground bg-muted px-1 rounded">
-                      {link.url}
-                    </code>
-                  </div>
-                </div>
-              </ListItemRow>
-            ))}
-          </div>
-
-          {/* SortableJS is initialized by client.ts via lib/nav-reorder.ts */}
-        </>
-      )}
-    </>
-  );
-}
-
-function NavigationFormContent({
-  link,
-  isEdit,
-}: {
-  link?: NavigationLink;
-  isEdit?: boolean;
-}) {
-  const { t } = useLingui();
-  const title = isEdit
-    ? t({ message: "Edit Link", comment: "@context: Page heading" })
-    : t({ message: "New Link", comment: "@context: Page heading" });
-
-  const signals = JSON.stringify({
-    label: link?.label ?? "",
-    url: link?.url ?? "",
-  }).replace(/</g, "\\u003c");
-
-  const action = isEdit ? `/dash/navigation/${link?.id}` : "/dash/navigation";
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-6">{title}</h1>
-
-      <form
-        data-signals={signals}
-        data-on:submit__prevent={`@post('${action}')`}
-        data-indicator="_loading"
-        class="flex flex-col gap-4 max-w-lg"
-      >
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "Label",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="label"
-            class="input"
-            placeholder="Home"
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message: "Display text for the link",
-              comment: "@context: Navigation label help text",
-            })}
-          </p>
-        </div>
-
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "URL",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="url"
-            class="input"
-            placeholder="/archive or https://..."
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message:
-                "Path (e.g. /archive) or full URL (e.g. https://example.com)",
-              comment: "@context: Navigation URL help text",
-            })}
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <button type="submit" class="btn" data-attr-disabled="$_loading">
-            <span data-show="!$_loading">
-              {isEdit
-                ? t({
-                    message: "Save Changes",
-                    comment: "@context: Button to save edited navigation link",
-                  })
-                : t({
-                    message: "Create Link",
-                    comment: "@context: Button to save new navigation link",
-                  })}
-            </span>
-            <span data-show="$_loading">
-              {t({
-                message: "Processing...",
-                comment:
-                  "@context: Loading text shown on submit button while request is in progress",
-              })}
-            </span>
-          </button>
-          <a href="/dash/navigation" class="btn-outline">
-            {t({
-              message: "Cancel",
-              comment: "@context: Button to cancel form",
-            })}
-          </a>
-        </div>
-      </form>
-    </>
-  );
-}
-
-// List navigation links
-navigationRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
-  const links = await c.var.services.navigationLinks.list();
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Navigation"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationListContent links={links} />
-    </DashLayout>,
-  );
-});
-
-// New link form
-navigationRoutes.get("/new", async (c) => {
-  const siteName = await getSiteName(c);
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="New Link"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationFormContent />
-    </DashLayout>,
-  );
-});
-
-// Create link
-navigationRoutes.post("/", async (c) => {
-  const body = await c.req.json<{ label: string; url: string }>();
-
-  if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
-  }
-
-  await c.var.services.navigationLinks.create({
-    label: body.label,
-    url: body.url,
-  });
-
-  return dsRedirect("/dash/navigation");
-});
-
-// Reorder links (must be before /:id to avoid "reorder" matching as :id)
-navigationRoutes.post("/reorder", async (c) => {
-  const body = await c.req.json<{ ids: number[] }>();
-
-  if (!Array.isArray(body.ids)) {
-    return dsToast("Invalid request", "error");
-  }
-
-  await c.var.services.navigationLinks.reorder(body.ids);
-
-  return dsToast("Order saved");
-});
-
-// Edit link form
-navigationRoutes.get("/:id/edit", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (isNaN(id)) return c.notFound();
-
-  const link = await c.var.services.navigationLinks.getById(id);
-  if (!link) return c.notFound();
-
-  const siteName = await getSiteName(c);
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Edit Link"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationFormContent link={link} isEdit />
-    </DashLayout>,
-  );
-});
-
-// Update link
-navigationRoutes.post("/:id", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (isNaN(id)) return c.notFound();
-
-  const body = await c.req.json<{ label: string; url: string }>();
-
-  if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
-  }
-
-  const updated = await c.var.services.navigationLinks.update(id, {
-    label: body.label,
-    url: body.url,
-  });
-
-  if (!updated) return c.notFound();
-
-  return dsRedirect("/dash/navigation");
-});
-
-// Delete link
-navigationRoutes.post("/:id/delete", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (!isNaN(id)) {
-    await c.var.services.navigationLinks.delete(id);
-  }
-
-  return dsRedirect("/dash/navigation");
-});

package/src/theme/components/MediaGallery.tsx

@@ -1,128 +0,0 @@
-/**
- * Media Gallery Component
- *
- * Renders media attachments on public post pages.
- * Layout adapts based on the number of images.
- */
-
-import type { FC } from "hono/jsx";
-import type { MediaView } from "../../types.js";
-
-export interface MediaGalleryProps {
-  attachments: MediaView[];
-}
-
-export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
-  const images = attachments.filter((a) => a.mimeType.startsWith("image/"));
-  if (images.length === 0) return null;
-
-  if (images.length === 1) {
-    const [img] = images;
-    if (!img) return null;
-    return (
-      <div class="mt-3">
-        <a href={img.url} target="_blank" rel="noopener noreferrer">
-          <img
-            src={img.thumbnailUrl}
-            alt={img.altText || ""}
-            width={img.width ?? undefined}
-            height={img.height ?? undefined}
-            class="rounded-lg max-w-full h-auto"
-            loading="lazy"
-          />
-        </a>
-      </div>
-    );
-  }
-
-  if (images.length === 2) {
-    return (
-      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
-        {images.map((img) => (
-          <a
-            key={img.id}
-            href={img.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="aspect-square"
-          >
-            <img
-              src={img.thumbnailUrl}
-              alt={img.altText || ""}
-              class="w-full h-full object-cover"
-              loading="lazy"
-            />
-          </a>
-        ))}
-      </div>
-    );
-  }
-
-  if (images.length === 3) {
-    const [first, ...rest] = images;
-    if (!first) return null;
-    return (
-      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
-        <a
-          href={first.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="row-span-2"
-        >
-          <img
-            src={first.thumbnailUrl}
-            alt={first.altText || ""}
-            class="w-full h-full object-cover"
-            loading="lazy"
-          />
-        </a>
-        {rest.map((img) => (
-          <a
-            key={img.id}
-            href={img.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="aspect-square"
-          >
-            <img
-              src={img.thumbnailUrl}
-              alt={img.altText || ""}
-              class="w-full h-full object-cover"
-              loading="lazy"
-            />
-          </a>
-        ))}
-      </div>
-    );
-  }
-
-  // 4+ images: 2-column grid, show first 4 with remaining count
-  const shown = images.slice(0, 4);
-  const remaining = images.length - 4;
-
-  return (
-    <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
-      {shown.map((img, i) => (
-        <a
-          key={img.id}
-          href={img.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="relative aspect-square"
-        >
-          <img
-            src={img.thumbnailUrl}
-            alt={img.altText || ""}
-            class="w-full h-full object-cover"
-            loading="lazy"
-          />
-          {i === 3 && remaining > 0 && (
-            <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white text-xl font-semibold">
-              +{remaining}
-            </div>
-          )}
-        </a>
-      ))}
-    </div>
-  );
-};

package/src/theme/components/PostList.tsx

@@ -1,92 +0,0 @@
-/**
- * Post List Component
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { Post } from "../../types.js";
-import * as sqid from "../../lib/sqid.js";
-import * as time from "../../lib/time.js";
-import { VisibilityBadge } from "./VisibilityBadge.js";
-import { TypeBadge } from "./TypeBadge.js";
-import { EmptyState } from "./EmptyState.js";
-import { ListItemRow } from "./ListItemRow.js";
-import { ActionButtons } from "./ActionButtons.js";
-
-export interface PostListProps {
-  posts: Post[];
-}
-
-export const PostList: FC<PostListProps> = ({ posts }) => {
-  const { t } = useLingui();
-  if (posts.length === 0) {
-    return (
-      <EmptyState
-        message={t({
-          message: "No posts yet.",
-          comment: "@context: Empty state message when no posts exist",
-        })}
-        ctaText={t({
-          message: "Create your first post",
-          comment: "@context: Button in empty state to create first post",
-        })}
-        ctaHref="/dash/posts/new"
-      />
-    );
-  }
-
-  return (
-    <div class="flex flex-col divide-y">
-      {posts.map((post) => (
-        <ListItemRow
-          key={post.id}
-          actions={
-            <ActionButtons
-              editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-              editLabel={t({
-                message: "Edit",
-                comment: "@context: Button to edit post",
-              })}
-              viewHref={`/p/${sqid.encode(post.id)}`}
-              viewLabel={t({
-                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",
-              })}
-            />
-          }
-        >
-          <div class="flex items-center gap-2 mb-1">
-            <TypeBadge type={post.type} />
-            <VisibilityBadge visibility={post.visibility} />
-            <span class="text-xs text-muted-foreground">
-              {time.formatDate(post.publishedAt)}
-            </span>
-          </div>
-          <a
-            href={`/dash/posts/${sqid.encode(post.id)}`}
-            class="font-medium hover:underline"
-          >
-            {post.title ||
-              post.content?.slice(0, 60) ||
-              t({
-                message: "Untitled",
-                comment: "@context: Default title for untitled post",
-              })}
-          </a>
-          {post.content && !post.title && (
-            <p class="text-sm text-muted-foreground mt-1 line-clamp-2">
-              {post.content.slice(0, 120)}
-            </p>
-          )}
-        </ListItemRow>
-      ))}
-    </div>
-  );
-};

package/src/theme/components/TypeBadge.tsx

@@ -1,37 +0,0 @@
-/**
- * Type Badge Component
- *
- * Displays a badge indicating the type of a post (note, article, link, etc.)
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { PostType } from "../../types.js";
-
-export interface TypeBadgeProps {
-  type: PostType;
-}
-
-export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
-  const { t } = useLingui();
-
-  const labels: Record<PostType, string> = {
-    note: t({ message: "Note", comment: "@context: Post type badge - note" }),
-    article: t({
-      message: "Article",
-      comment: "@context: Post type badge - article",
-    }),
-    link: t({ message: "Link", comment: "@context: Post type badge - link" }),
-    quote: t({
-      message: "Quote",
-      comment: "@context: Post type badge - quote",
-    }),
-    image: t({
-      message: "Image",
-      comment: "@context: Post type badge - image",
-    }),
-    page: t({ message: "Page", comment: "@context: Post type badge - page" }),
-  };
-
-  return <span class="badge-outline">{labels[type]}</span>;
-};

package/src/theme/components/VisibilityBadge.tsx

@@ -1,45 +0,0 @@
-/**
- * Visibility Badge Component
- *
- * Displays a badge indicating the visibility level of a post
- */
-
-import type { FC } from "hono/jsx";
-import { useLingui } from "@lingui/react/macro";
-import type { Visibility } from "../../types.js";
-
-export interface VisibilityBadgeProps {
-  visibility: Visibility;
-}
-
-export const VisibilityBadge: FC<VisibilityBadgeProps> = ({ visibility }) => {
-  const { t } = useLingui();
-
-  const variants: Record<Visibility, string> = {
-    featured: "badge-primary",
-    quiet: "badge-secondary",
-    unlisted: "badge-outline",
-    draft: "badge-outline",
-  };
-
-  const labels: Record<Visibility, string> = {
-    featured: t({
-      message: "Featured",
-      comment: "@context: Post visibility badge - featured",
-    }),
-    quiet: t({
-      message: "Quiet",
-      comment: "@context: Post visibility badge - normal",
-    }),
-    unlisted: t({
-      message: "Unlisted",
-      comment: "@context: Post visibility badge - unlisted",
-    }),
-    draft: t({
-      message: "Draft",
-      comment: "@context: Post visibility badge - draft",
-    }),
-  };
-
-  return <span class={variants[visibility]}>{labels[visibility]}</span>;
-};

package/src/theme/components/index.ts

@@ -1,23 +0,0 @@
-export { ActionButtons, type ActionButtonsProps } from "./ActionButtons.js";
-export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
-export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
-export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
-export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
-export { MediaGallery, type MediaGalleryProps } from "./MediaGallery.js";
-export { PageForm, type PageFormProps } from "./PageForm.js";
-export {
-  Pagination,
-  LoadMore,
-  PagePagination,
-  type PaginationProps,
-  type LoadMoreProps,
-  type PagePaginationProps,
-} from "./Pagination.js";
-export { PostForm, type PostFormProps } from "./PostForm.js";
-export { PostList, type PostListProps } from "./PostList.js";
-export { ThreadView, type ThreadViewProps } from "./ThreadView.js";
-export { TypeBadge, type TypeBadgeProps } from "./TypeBadge.js";
-export {
-  VisibilityBadge,
-  type VisibilityBadgeProps,
-} from "./VisibilityBadge.js";

package/src/theme/index.ts

@@ -1,22 +0,0 @@
-/**
- * Jant Theme - Shared Infrastructure
- *
- * Exports shared layouts, components, and color themes used by all themes.
- * Individual theme packages (minimal, card, etc.) import from here.
- *
- * @example
- * ```typescript
- * // In a theme package:
- * import { MediaGallery, Pagination } from "@jant/core/theme";
- * import type { ColorTheme } from "@jant/core/theme";
- * ```
- */
-
-// Layout components (BaseLayout, DashLayout)
-export * from "./layouts/index.js";
-
-// Shared UI components (MediaGallery, Pagination, EmptyState, etc.)
-export * from "./components/index.js";
-
-// Color themes
-export * from "./color-themes.js";

package/src/theme/layouts/index.ts

@@ -1,7 +0,0 @@
-export {
-  BaseLayout,
-  type BaseLayoutProps,
-  type ToastProps,
-} from "./BaseLayout.js";
-export { DashLayout, type DashLayoutProps } from "./DashLayout.js";
-export type { SiteLayoutProps } from "../../types.js";