@jant/core 0.3.7 → 0.3.8

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;
+}

package/src/types.ts

@@ -201,6 +201,15 @@ export interface Setting {
   updatedAt: number;
 }
 
+export interface NavigationLink {
+  id: number;
+  label: string;
+  url: string;
+  position: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
 // =============================================================================
 // Operation Types
 // =============================================================================
@@ -230,6 +239,18 @@ export interface UpdatePost {
   mediaIds?: string[];
 }
 
+export interface CreateNavigationLink {
+  label: string;
+  url: string;
+  position?: number;
+}
+
+export interface UpdateNavigationLink {
+  label?: string;
+  url?: string;
+  position?: number;
+}
+
 // =============================================================================
 // Configuration Types
 // =============================================================================
@@ -269,6 +290,39 @@ export interface EmptyStateProps {
   actionHref?: string;
 }
 
+// =============================================================================
+// Timeline Types
+// =============================================================================
+
+/** Props for per-type timeline cards */
+export interface TimelineCardProps {
+  post: PostWithMedia;
+  compact?: boolean;
+}
+
+/** Props for thread inline preview */
+export interface ThreadPreviewProps {
+  rootPost: PostWithMedia;
+  previewReplies: PostWithMedia[];
+  totalReplyCount: number;
+}
+
+/** Data structure for a single timeline item */
+export interface TimelineItemData {
+  post: PostWithMedia;
+  threadPreview?: {
+    replies: PostWithMedia[];
+    totalReplyCount: number;
+  };
+}
+
+/** Props for the timeline feed wrapper */
+export interface TimelineFeedProps {
+  items: TimelineItemData[];
+  hasMore: boolean;
+  nextCursor?: number;
+}
+
 /**
  * Theme component overrides
  */
@@ -278,6 +332,13 @@ export interface ThemeComponents {
   PostList?: FC<PostListProps>;
   Pagination?: FC<PaginationProps>;
   EmptyState?: FC<EmptyStateProps>;
+  NoteCard?: FC<TimelineCardProps>;
+  ArticleCard?: FC<TimelineCardProps>;
+  LinkCard?: FC<TimelineCardProps>;
+  QuoteCard?: FC<TimelineCardProps>;
+  ImageCard?: FC<TimelineCardProps>;
+  ThreadPreview?: FC<ThreadPreviewProps>;
+  TimelineFeed?: FC<TimelineFeedProps>;
 }
 
 /**

package/dist/app.d.ts

@@ -1,38 +0,0 @@
-/**
- * Jant App Factory
- */
-import { Hono } from "hono";
-import { type Services } from "./services/index.js";
-import { type Auth } from "./auth.js";
-import type { Bindings, JantConfig } from "./types.js";
-export interface AppVariables {
-    services: Services;
-    auth: Auth;
-    config: JantConfig;
-    themeStyle: string;
-}
-export type App = Hono<{
-    Bindings: Bindings;
-    Variables: AppVariables;
-}>;
-/**
- * Create a Jant application
- *
- * @param config - Optional configuration
- * @returns Hono app instance
- *
- * Site settings (name, description, language) should be configured via
- * environment variables (SITE_NAME, SITE_DESCRIPTION, SITE_LANGUAGE).
- * They can also be set in the dashboard, which stores them in the database.
- *
- * @example
- * ```typescript
- * import { createApp } from "@jant/core";
- *
- * export default createApp({
- *   theme: { components: { PostCard: MyPostCard } },
- * });
- * ```
- */
-export declare function createApp(config?: JantConfig): App;
-//# sourceMappingURL=app.d.ts.map

package/dist/app.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAG5B,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAwCvD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAExE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,MAAM,GAAE,UAAe,GAAG,GAAG,CAwnBtD"}

package/dist/auth.d.ts

@@ -1,25 +0,0 @@
-/**
- * Authentication with better-auth
- */
-export declare function createAuth(d1: D1Database, options: {
-    secret: string;
-    baseURL: string;
-}): import("better-auth").Auth<{
-    database: (options: import("better-auth").BetterAuthOptions) => import("better-auth").DBAdapter<import("better-auth").BetterAuthOptions>;
-    secret: string;
-    baseURL: string;
-    emailAndPassword: {
-        enabled: true;
-        autoSignIn: true;
-        minPasswordLength: number;
-    };
-    session: {
-        expiresIn: number;
-        cookieCache: {
-            enabled: true;
-            maxAge: number;
-        };
-    };
-}>;
-export type Auth = ReturnType<typeof createAuth>;
-//# sourceMappingURL=auth.d.ts.map

package/dist/auth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../src/auth.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,wBAAgB,UAAU,CACxB,EAAE,EAAE,UAAU,EACd,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;GA6B7C;AAED,MAAM,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/dist/db/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * Database utilities
- */
-import * as schema from "./schema.js";
-export type Database = ReturnType<typeof createDatabase>;
-export declare function createDatabase(d1: D1Database): import("drizzle-orm/d1").DrizzleD1Database<typeof schema> & {
-    $client: D1Database;
-};
-export { schema };
-//# sourceMappingURL=index.d.ts.map

package/dist/db/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/db/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAEzD,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU;;EAE5C;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}