@notionx/create-notionx-app 1.0.0

package/dist/templates/components/page-blocks/feature-grid-block.tsx.tmpl

@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { StructuredFeatureGridBlock } from "@/lib/pages/source";
+
+function gridClassName(columns: StructuredFeatureGridBlock["columns"]) {
+  if (columns === 2) return "grid gap-6 md:grid-cols-2";
+  if (columns === 4) return "grid gap-6 md:grid-cols-2 xl:grid-cols-4";
+  return "grid gap-6 md:grid-cols-3";
+}
+
+export function FeatureGridBlock({
+  block,
+}: {
+  block: StructuredFeatureGridBlock;
+}) {
+  return (
+    <section className="border-t bg-background">
+      <div className="container mx-auto max-w-6xl px-4 py-14">
+        <div className="mx-auto max-w-3xl text-center">
+          <Badge variant="secondary">Feature Grid</Badge>
+          <h2 className="mt-4 text-3xl font-semibold tracking-tight md:text-4xl">
+            {block.headline}
+          </h2>
+          {block.body ? (
+            <p className="mt-4 text-lg text-muted-foreground">{block.body}</p>
+          ) : null}
+        </div>
+        <div className={["mt-10", gridClassName(block.columns)].join(" ")}>
+          {block.items.map((item) => {
+            const card = (
+              <Card className="h-full">
+                <CardHeader>
+                  <Badge variant="outline" className="w-fit">
+                    {item.icon}
+                  </Badge>
+                  <CardTitle className="text-xl">{item.title}</CardTitle>
+                  <CardDescription>{item.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {item.href ? (
+                    <span className="text-sm font-medium text-primary">
+                      Explore more
+                    </span>
+                  ) : null}
+                </CardContent>
+              </Card>
+            );
+
+            return item.href ? (
+              <Link key={item.title} href={item.href} className="block">
+                {card}
+              </Link>
+            ) : (
+              <div key={item.title}>{card}</div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/templates/components/page-blocks/hero-block.tsx.tmpl

@@ -0,0 +1,73 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { StructuredHeroBlock } from "@/lib/pages/source";
+
+function sectionClassName(theme: StructuredHeroBlock["theme"]) {
+  if (theme === "inverse") return "border-b bg-primary text-primary-foreground";
+  if (theme === "default") return "border-b bg-background";
+  return "border-b bg-muted/20";
+}
+
+export function HeroBlock({ block }: { block: StructuredHeroBlock }) {
+  const isCentered = block.alignment === "center";
+
+  return (
+    <section className={sectionClassName(block.theme)}>
+      <div
+        className={[
+          "container mx-auto max-w-5xl px-4 py-16 md:py-24",
+          isCentered ? "text-center" : "text-left",
+        ].join(" ")}
+      >
+        {block.eyebrow ? (
+          <Badge variant={block.theme === "inverse" ? "secondary" : "outline"}>
+            {block.eyebrow}
+          </Badge>
+        ) : null}
+        <h2 className="mt-5 text-4xl font-semibold tracking-tight md:text-6xl">
+          {block.headline}
+        </h2>
+        {block.subheadline ? (
+          <p
+            className={[
+              "mt-5 max-w-2xl text-lg text-muted-foreground",
+              isCentered ? "mx-auto" : "",
+              block.theme === "inverse" ? "text-primary-foreground/80" : "",
+            ].join(" ")}
+          >
+            {block.subheadline}
+          </p>
+        ) : null}
+        {block.description ? (
+          <p
+            className={[
+              "mt-4 max-w-2xl text-sm",
+              isCentered ? "mx-auto" : "",
+              block.theme === "inverse" ? "text-primary-foreground/70" : "text-muted-foreground",
+            ].join(" ")}
+          >
+            {block.description}
+          </p>
+        ) : null}
+        <div
+          className={[
+            "mt-8 flex flex-wrap gap-3",
+            isCentered ? "justify-center" : "justify-start",
+          ].join(" ")}
+        >
+          {block.primaryCta ? (
+            <Button asChild size="lg">
+              <Link href={block.primaryCta.href}>{block.primaryCta.label}</Link>
+            </Button>
+          ) : null}
+          {block.secondaryCta ? (
+            <Button asChild size="lg" variant="secondary">
+              <Link href={block.secondaryCta.href}>{block.secondaryCta.label}</Link>
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/templates/components/page-blocks/latest-posts-block.tsx.tmpl

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { listGenericNotionContent } from "@notionx/core/notion";
+import { {{contentSourceVarName}} } from "@/lib/content/models";
+import { PostCard } from "@/components/content/post-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { StructuredLatestPostsBlock } from "@/lib/pages/source";
+
+export async function LatestPostsBlock({
+  block,
+}: {
+  block: StructuredLatestPostsBlock;
+}) {
+  const items = await listGenericNotionContent({{contentSourceVarName}});
+  const visibleItems = items.slice(0, block.count);
+
+  return (
+    <section className="border-t bg-background">
+      <div className="container mx-auto max-w-6xl px-4 py-14">
+        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <div className="max-w-3xl">
+            <Badge variant="secondary">Latest Posts</Badge>
+            <h2 className="mt-4 text-3xl font-semibold tracking-tight md:text-4xl">
+              {block.headline}
+            </h2>
+            {block.body ? (
+              <p className="mt-4 text-lg text-muted-foreground">{block.body}</p>
+            ) : null}
+          </div>
+          {block.primaryCta ? (
+            <Button asChild variant="outline">
+              <Link href={block.primaryCta.href}>
+                {block.primaryCta.label}
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+          ) : null}
+        </div>
+
+        {visibleItems.length ? (
+          <div className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {visibleItems.map((item) => (
+              <PostCard
+                key={item.pageId}
+                item={item}
+                href={`{{contentSourceListPath}}/${item.slug}`}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="mt-10 rounded-2xl border border-dashed bg-muted/30 px-6 py-12 text-sm text-muted-foreground">
+            Publish a few posts in Notion to turn this homepage block into a live latest-posts grid.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/dist/templates/components/page-blocks/story-block.tsx.tmpl

@@ -0,0 +1,70 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { StructuredStoryBlock } from "@/lib/pages/source";
+
+function layoutClassName(layout: StructuredStoryBlock["layout"]) {
+  if (layout === "text-left") return "grid gap-8 lg:grid-cols-[1.2fr_0.8fr]";
+  if (layout === "media-left") return "grid gap-8 lg:grid-cols-2";
+  return "grid gap-8 lg:grid-cols-2";
+}
+
+export function StoryBlock({ block }: { block: StructuredStoryBlock }) {
+  const mediaFirst = block.layout === "media-left";
+
+  const media = block.mediaUrl ? (
+    <div className="overflow-hidden rounded-2xl border bg-muted">
+      <img
+        src={block.mediaUrl}
+        alt={block.title}
+        className="h-full min-h-72 w-full object-cover"
+      />
+    </div>
+  ) : (
+    <Card>
+      <CardHeader>
+        <CardTitle>{block.title}</CardTitle>
+        <CardDescription>{block.description}</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm text-muted-foreground">
+        Add a media URL in the reusable block row to replace this placeholder.
+      </CardContent>
+    </Card>
+  );
+
+  const copy = (
+    <div className="space-y-5">
+      <Badge variant="outline">Story</Badge>
+      <h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
+        {block.headline}
+      </h2>
+      <p className="text-base leading-7 text-muted-foreground">{block.body}</p>
+      {block.quote ? (
+        <blockquote className="rounded-2xl border bg-muted/40 p-6">
+          <p className="text-lg font-medium leading-8">"{block.quote}"</p>
+          {block.quoteAttribution ? (
+            <footer className="mt-3 text-sm text-muted-foreground">
+              {block.quoteAttribution}
+            </footer>
+          ) : null}
+        </blockquote>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <section className="border-t bg-muted/10">
+      <div className="container mx-auto max-w-6xl px-4 py-14">
+        <div className={layoutClassName(block.layout)}>
+          {mediaFirst ? media : copy}
+          {mediaFirst ? copy : media}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/templates/components/page-blocks.fallback.tsx.tmpl

@@ -0,0 +1,17 @@
+// Fallback page-blocks renderer — used when the project opts out
+// of the Notion-backed `blocks` data source
+// (`--no-blocks` / `CREATE_NOTIONX_NO_BLOCKS=1`).
+//
+// `PageBlocks` is a no-op: it accepts the same `StructuredBlock[]`
+// prop but renders nothing. Pages that reference `<PageBlocks />`
+// keep compiling; their `structuredBlocks` field is always empty
+// because `lib/pages/source.ts` only populates it when
+// `blocksSource` is registered.
+
+import type { SitePage } from "@/lib/pages/source";
+
+type StructuredBlock = SitePage["structuredBlocks"][number];
+
+export function PageBlocks({ blocks: _blocks }: { blocks: StructuredBlock[] }) {
+  return null;
+}

package/dist/templates/components/page-blocks.tsx.tmpl

@@ -0,0 +1,32 @@
+import { NotionBlocks } from "@/components/notion-blocks";
+import type { SitePage } from "@/lib/pages/source";
+import { FeatureGridBlock } from "@/components/page-blocks/feature-grid-block";
+import { HeroBlock } from "@/components/page-blocks/hero-block";
+import { LatestPostsBlock } from "@/components/page-blocks/latest-posts-block";
+import { StoryBlock } from "@/components/page-blocks/story-block";
+
+type StructuredBlock = SitePage["structuredBlocks"][number];
+
+export async function PageBlocks({ blocks }: { blocks: StructuredBlock[] }) {
+  if (!blocks.length) return null;
+
+  return (
+    <>
+      {blocks.map((block) => (
+        <div key={block.slug}>
+          {block.type === "hero" ? <HeroBlock block={block} /> : null}
+          {block.type === "feature-grid" ? <FeatureGridBlock block={block} /> : null}
+          {block.type === "story" ? <StoryBlock block={block} /> : null}
+          {block.type === "latest-posts" ? <LatestPostsBlock block={block} /> : null}
+          {block.type === "legacy" ? (
+            <section className="border-t bg-muted/10">
+              <div className="container mx-auto max-w-5xl px-4 py-14">
+                <NotionBlocks blocks={block.blocks} />
+              </div>
+            </section>
+          ) : null}
+        </div>
+      ))}
+    </>
+  );
+}

package/dist/templates/components/search/search-dialog.tsx.tmpl

@@ -0,0 +1,171 @@
+"use client";
+
+// Search dialog component. Provides a client-side search UI that
+// queries the `/api/search` endpoint (registered by the worker when
+// a SearchAdapter is present).
+//
+// Usage: place <SearchDialog /> anywhere in your layout (e.g. inside
+// the site header). The component renders a trigger button and a
+// modal dialog with a search input and result list.
+//
+// This is a user-owned file — customize freely to match your design.
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Search, X, FileText } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+
+interface SearchResult {
+  modelId: string;
+  routeId: string;
+  title: string;
+  summary: string;
+}
+
+interface SearchResponse {
+  results: SearchResult[];
+  query: string;
+  count: number;
+}
+
+export function SearchDialog() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const performSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setResults([]);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}&limit=20`);
+      if (!res.ok) throw new Error(`Search failed (${res.status})`);
+      const data: SearchResponse = await res.json();
+      setResults(data.results ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Search failed");
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleQueryChange = useCallback(
+    (value: string) => {
+      setQuery(value);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => performSearch(value), 300);
+    },
+    [performSearch],
+  );
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    } else {
+      setQuery("");
+      setResults([]);
+      setError(null);
+    }
+  }, [open]);
+
+  const handleResultClick = (result: SearchResult) => {
+    const path = result.routeId.startsWith("/")
+      ? result.routeId
+      : `/${result.modelId}/${result.routeId}`;
+    window.location.href = path;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon" aria-label="Search">
+          <Search className="h-5 w-5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Search</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => handleQueryChange(e.target.value)}
+              placeholder="Search content..."
+              className="pl-9 pr-9"
+            />
+            {query && (
+              <button
+                onClick={() => handleQueryChange("")}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                aria-label="Clear"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="mt-4 max-h-[400px] overflow-y-auto">
+          {loading && (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              Searching...
+            </p>
+          )}
+          {error && (
+            <p className="py-8 text-center text-sm text-destructive">{error}</p>
+          )}
+          {!loading && !error && query && results.length === 0 && (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              No results found for &ldquo;{query}&rdquo;
+            </p>
+          )}
+          {!loading && !error && !query && (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              Type to search across all content.
+            </p>
+          )}
+          {!loading && !error && results.length > 0 && (
+            <ul className="space-y-1">
+              {results.map((result) => (
+                <li key={`${result.modelId}-${result.routeId}`}>
+                  <button
+                    onClick={() => handleResultClick(result)}
+                    className="flex w-full items-start gap-3 rounded-md p-3 text-left hover:bg-accent transition-colors"
+                  >
+                    <FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium">{result.title}</p>
+                      {result.summary && (
+                        <p className="mt-0.5 line-clamp-2 text-sm text-muted-foreground">
+                          {result.summary}
+                        </p>
+                      )}
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/dist/templates/components/site/locale-switcher.tsx.tmpl

@@ -0,0 +1,65 @@
+// Default `LocaleSwitcher` for the four built-in starter models.
+// Renders one link per supported locale, following the locale-switcher
+// rule from the design:
+//
+//   - link to the same model's translated detail when one exists
+//   - fall back to the localized list when a detail is missing
+//
+// The component is intentionally a server component: the link list
+// is computed from the request URL and the supported locales — no
+// client state needed.
+
+import Link from "next/link";
+import { i18n, isAppLocale } from "@/lib/i18n";
+import {
+  buildLocaleSwitcherLinks,
+  type LocaleSwitcherTranslation,
+} from "@notionx/core";
+import { blogContract } from "@/lib/locale-contract";
+
+type Props = {
+  currentLocale: string;
+  currentSlug?: string;
+  translations?: readonly LocaleSwitcherTranslation[];
+};
+
+export function LocaleSwitcher({
+  currentLocale,
+  currentSlug,
+  translations = [],
+}: Props) {
+  if (i18n.supportedLocales.length < 2) return null;
+  if (!isAppLocale(currentLocale)) return null;
+
+  const links = currentSlug
+    ? buildLocaleSwitcherLinks({
+        contract: blogContract,
+        currentLocale,
+        defaultLocale: i18n.defaultLocale,
+        currentSlug,
+        supportedLocales: i18n.supportedLocales,
+        translations,
+      })
+    : i18n.supportedLocales.map((locale) => ({
+        locale,
+        href:
+          locale === i18n.defaultLocale
+            ? blogContract.listPath
+            : `/${locale}${blogContract.listPath}`,
+      }));
+
+  return (
+    <nav aria-label="Language" className="flex items-center gap-2 text-sm">
+      {links.map((link) => (
+        <Link
+          key={link.locale}
+          href={link.href}
+          aria-current={link.locale === currentLocale ? "true" : undefined}
+          className="rounded px-2 py-1 hover:bg-muted"
+        >
+          {link.locale}
+        </Link>
+      ))}
+    </nav>
+  );
+}

package/dist/templates/components/site/site-footer.tsx.tmpl

@@ -0,0 +1,106 @@
+import Link from "next/link";
+import { i18n } from "@/lib/i18n";
+import { getSiteFooterGroups } from "@/lib/pages/source";
+import { getSiteSettings } from "@/lib/site/settings";
+
+type FooterColumn = {
+  label: string;
+  items: Array<{ label: string; href: string }>;
+};
+type SocialLink = { label: string; href: string };
+
+export async function SiteFooter() {
+  const [pageGroups, settings] = await Promise.all([
+    getSiteFooterGroups() as Promise<FooterColumn[]>,
+    getSiteSettings(),
+  ]);
+  const groups =
+    pageGroups.length > 0
+      ? pageGroups
+      : (settings.footer.columns as unknown as FooterColumn[]);
+  const social = settings.footer.social as SocialLink[];
+  const tagline = settings.footer.tagline || settings.description;
+  const copyright = settings.footer.copyright;
+
+  // No columns → single-line copyright layout.
+  if (groups.length === 0) {
+    return (
+      <footer className="border-t bg-muted/30">
+        <div className="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-6 text-sm text-muted-foreground md:flex-row">
+          <span>{copyright}</span>
+          {i18n.supportedLocales.length > 1 ? (
+            <span>· {i18n.defaultLocale}</span>
+          ) : null}
+          {social.length ? (
+            <div className="flex gap-4">
+              {social.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="hover:text-foreground"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </footer>
+    );
+  }
+
+  // With columns → multi-column grid + tagline + social row.
+  return (
+    <footer className="border-t bg-muted/30">
+      <div className="container mx-auto grid gap-8 px-4 py-10 md:grid-cols-[1.5fr_2fr]">
+        <div>
+          <Link href="/" className="font-semibold tracking-tight">
+            {settings.name}
+          </Link>
+          {tagline ? (
+            <p className="mt-2 max-w-sm text-sm text-muted-foreground">
+              {tagline}
+            </p>
+          ) : null}
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2">
+          {groups.map((group) => (
+            <div key={group.label}>
+              <h2 className="text-sm font-medium">{group.label}</h2>
+              <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+                {group.items.map((item) => (
+                  <li key={item.href}>
+                    <Link href={item.href} className="hover:text-foreground">
+                      {item.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+      {social.length ? (
+        <div className="border-t">
+          <div className="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-4 text-sm text-muted-foreground md:flex-row">
+            <span>
+              {copyright}
+              {i18n.supportedLocales.length > 1 ? ` · ${i18n.defaultLocale}` : ""}
+            </span>
+            <div className="flex gap-4">
+              {social.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="hover:text-foreground"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </footer>
+  );
+}