@notionx/create-notionx-app 1.0.0 → 2.0.0

package/dist/templates/app/{{contentSourceListPath}}/[slug]/page.tsx.tmpl

@@ -7,8 +7,10 @@ import Link from "next/link";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
-import { getGenericNotionContentBySlug } from "@notionx/core/notion";
+import { getGenericNotionContentBySlugForLocale } from "@notionx/core";
 import { {{contentSourceVarName}} } from "@/lib/content/models";
+import { getRequestLocale } from "@/lib/site/request-env";
+import { i18n } from "@/lib/i18n";
 import { Badge } from "@/components/ui/badge";
 import { NotionBlocks } from "@/components/notion-blocks";
 import { SiteShell } from "@/components/site/site-shell";
@@ -35,7 +37,8 @@ export async function generateMetadata({
   params: Promise<Params>;
 }): Promise<Metadata> {
   const { slug } = await params;
-  const item = await getGenericNotionContentBySlug({{contentSourceVarName}}, slug);
+  const locale = getRequestLocale(i18n.defaultLocale);
+  const item = await getGenericNotionContentBySlugForLocale({{contentSourceVarName}}, slug, locale);
   if (!item) return { title: "Not found" };
   return {
     title: item.title,
@@ -52,8 +55,9 @@ export default async function {{contentSourceConstName}}DetailPage({
   params: Promise<Params>;
 }) {
   const { slug } = await params;
-  const item = await getGenericNotionContentBySlug({{contentSourceVarName}}, slug);
-  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  const locale = getRequestLocale(i18n.defaultLocale);
+  const item = await getGenericNotionContentBySlugForLocale({{contentSourceVarName}}, slug, locale);
+  const page = await getSitePageForContentSource("{{contentSourceId}}", locale);
   if (!item) notFound();
 
   return (

package/dist/templates/app/{{contentSourceListPath}}/page.tsx.tmpl

@@ -4,16 +4,19 @@
 // the Notion-backed Pages model.
 
 import type { Metadata } from "next";
-import { listGenericNotionContent } from "@notionx/core/notion";
+import { listGenericNotionContentForLocale } from "@notionx/core";
 import { PostCard } from "@/components/content/post-card";
 import { {{contentSourceVarName}} } from "@/lib/content/models";
 import { SiteShell } from "@/components/site/site-shell";
 import { getSitePageForContentSource } from "@/lib/pages/source";
+import { getRequestLocale } from "@/lib/site/request-env";
+import { i18n } from "@/lib/i18n";
 
 export const revalidate = 300;
 
 export async function generateMetadata(): Promise<Metadata> {
-  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  const locale = getRequestLocale(i18n.defaultLocale);
+  const page = await getSitePageForContentSource("{{contentSourceId}}", locale);
   return {
     title: page?.seoTitle || page?.title || "{{contentSourceListTitle}}",
     description:
@@ -22,8 +25,9 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function {{contentSourceConstName}}Page() {
-  const items = await listGenericNotionContent({{contentSourceVarName}});
-  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  const locale = getRequestLocale(i18n.defaultLocale);
+  const items = await listGenericNotionContentForLocale({{contentSourceVarName}}, locale);
+  const page = await getSitePageForContentSource("{{contentSourceId}}", locale);
   const title = page?.title || "{{contentSourceListTitle}}";
   const description = page?.description || "{{contentSourceListDescription}}";
 

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

@@ -1,67 +1,15 @@
-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";
-}
+import { NotionBlocks } from "@/components/notion-blocks";
+import type { StructuredPageBlock } from "@/lib/pages/source";
 
 export function FeatureGridBlock({
   block,
 }: {
-  block: StructuredFeatureGridBlock;
+  block: StructuredPageBlock;
 }) {
   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>
+        <NotionBlocks blocks={block.blocks} />
       </div>
     </section>
   );

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

@@ -1,72 +1,11 @@
-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";
+import { NotionBlocks } from "@/components/notion-blocks";
+import type { StructuredPageBlock } from "@/lib/pages/source";
 
+export function HeroBlock({ block }: { block: StructuredPageBlock }) {
   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>
+    <section className="border-b bg-muted/20">
+      <div className="container mx-auto max-w-5xl px-4 py-16 md:py-24">
+        <NotionBlocks blocks={block.blocks} />
       </div>
     </section>
   );

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

@@ -3,39 +3,31 @@ 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 { NotionBlocks } from "@/components/notion-blocks";
 import { Button } from "@/components/ui/button";
-import type { StructuredLatestPostsBlock } from "@/lib/pages/source";
+import type { StructuredPageBlock } from "@/lib/pages/source";
 
 export async function LatestPostsBlock({
   block,
 }: {
-  block: StructuredLatestPostsBlock;
+  block: StructuredPageBlock;
 }) {
   const items = await listGenericNotionContent({{contentSourceVarName}});
-  const visibleItems = items.slice(0, block.count);
+  const visibleItems = items.slice(0, 6);
 
   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}
+            <NotionBlocks blocks={block.blocks} />
           </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}
+          <Button asChild variant="outline">
+            <Link href="{{contentSourceListPath}}">
+              View all posts
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
         </div>
 
         {visibleItems.length ? (

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

@@ -1,69 +1,11 @@
-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>
-  );
+import { NotionBlocks } from "@/components/notion-blocks";
+import type { StructuredPageBlock } from "@/lib/pages/source";
 
+export function StoryBlock({ block }: { block: StructuredPageBlock }) {
   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>
+        <NotionBlocks blocks={block.blocks} />
       </div>
     </section>
   );

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

@@ -14,11 +14,11 @@ export async function PageBlocks({ blocks }: { blocks: StructuredBlock[] }) {
     <>
       {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" ? (
+          {block.variant === "hero" ? <HeroBlock block={block} /> : null}
+          {block.variant === "feature-grid" ? <FeatureGridBlock block={block} /> : null}
+          {block.variant === "story" ? <StoryBlock block={block} /> : null}
+          {block.variant === "latest-posts" ? <LatestPostsBlock block={block} /> : null}
+          {block.variant === "legacy" || !["hero", "feature-grid", "story", "latest-posts"].includes(block.variant) ? (
             <section className="border-t bg-muted/10">
               <div className="container mx-auto max-w-5xl px-4 py-14">
                 <NotionBlocks blocks={block.blocks} />

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

@@ -10,6 +10,7 @@ import {
 import { ThemeToggle } from "@/components/theme-toggle";
 import { LocaleSwitcher } from "./locale-switcher";
 import { i18n } from "@/lib/i18n";
+import { getRequestLocale } from "@/lib/site/request-env";
 import { getSiteNavigation } from "@/lib/pages/source";
 import { getSiteSettings } from "@/lib/site/settings";
 
@@ -20,9 +21,10 @@ type NavItem = {
 };
 
 export async function SiteHeader() {
+  const locale = getRequestLocale(i18n.defaultLocale);
   const [pageNav, settings] = await Promise.all([
-    getSiteNavigation() as Promise<NavItem[]>,
-    getSiteSettings(),
+    getSiteNavigation(locale) as Promise<NavItem[]>,
+    getSiteSettings(locale),
   ]);
   const nav =
     pageNav.length > 0 ? pageNav : (settings.navigation.main as unknown as NavItem[]);
@@ -64,7 +66,7 @@ export async function SiteHeader() {
             </Button>
           ) : null}
           {i18n.supportedLocales.length > 1 ? (
-            <LocaleSwitcher currentLocale={i18n.defaultLocale} />
+            <LocaleSwitcher currentLocale={locale} />
           ) : null}
           <ThemeToggle />
           <Button asChild variant="outline" size="sm">

package/dist/templates/env.d.ts.tmpl

@@ -18,6 +18,14 @@ interface Env {
   // here as a sentinel for "Notion not configured" — the loader
   // will fall back to the static values in `lib/site/config.ts`.
   NOTION_SITE_SETTINGS_DATA_SOURCE_ID?: string;
+  // Translation data sources (populated by `notionx locale add` or
+  // by the scaffolder when bilingual mode is enabled). Each holds
+  // locale-specific rows that the runtime merges with the base
+  // source via the LocaleContract fallback rule.
+  NOTION_BLOG_TRANSLATIONS_DATA_SOURCE_ID?: string;
+  NOTION_PAGES_TRANSLATIONS_DATA_SOURCE_ID?: string;
+  NOTION_BLOCKS_TRANSLATIONS_DATA_SOURCE_ID?: string;
+  NOTION_SITE_SETTINGS_TRANSLATIONS_DATA_SOURCE_ID?: string;
   SITE_URL?: string;
 }
 

package/dist/templates/lib/blocks/translations.ts.tmpl

@@ -5,9 +5,13 @@
 import {
   pickTranslation,
   pickTranslationOrDefault,
+  mapNotionPageToLocalizedContentTranslation,
+  listGenericNotionContentForLocale,
 } from "@notionx/core";
 import { i18n } from "@/lib/i18n";
 import { blocksContract } from "@/lib/locale-contract";
+import { blockTranslationsSource } from "@/lib/content/models";
+import type { NotionPageLike } from "@notionx/core";
 
 export type BlockTranslation = {
   pageId: string;
@@ -18,7 +22,8 @@ export type BlockTranslation = {
   eyebrow: string;
   headline: string;
   subheadline: string;
-  body: string;
+  // Body content is read from the translation page's children blocks
+  // (via getPageBlocks(translationPageId)), not a Notion property.
   quote: string;
   quoteAttribution: string;
   primaryCtaLabel: string;
@@ -42,3 +47,19 @@ export function pickBlockTranslation(
     )
   );
 }
+
+export async function listBlockTranslations(locale: string): Promise<BlockTranslation[]> {
+  if (!blockTranslationsSource) return [];
+  const pages = await listGenericNotionContentForLocale(blockTranslationsSource, locale);
+  return pages
+    .map((p) => mapNotionPageToLocalizedContentTranslation<BlockTranslation>(p as unknown as NotionPageLike, {
+      fields: {
+        title: "Title",
+        source: "Source",
+        locale: "Locale",
+        slug: "Slug",
+        published: "Published",
+      },
+    }))
+    .filter((row): row is BlockTranslation => row !== null);
+}

package/dist/templates/lib/blog/translations.ts.tmpl

@@ -1,13 +1,16 @@
-// Locale-aware blog lookup. Falls back to the default-locale
-// translation when a target locale is missing (rule: hide).
+// Locale-aware blog lookup. Falls back per the blog contract's
+// `hide` rule: a base post without a translation in the target
+// locale is hidden from the list.
 
 import {
   pickTranslation,
   hideWhenMissing,
   mapNotionPageToLocalizedContentTranslation,
+  listGenericNotionContentForLocale,
 } from "@notionx/core";
 import { i18n } from "@/lib/i18n";
 import { blogContract } from "@/lib/locale-contract";
+import { blogTranslationsSource } from "@/lib/content/models";
 import type { NotionPageLike } from "@notionx/core";
 
 export type BlogTranslationExtra = {
@@ -50,3 +53,16 @@ export function blogListForLocale(
 ) {
   return hideWhenMissing(rows, locale);
 }
+
+/**
+ * Load all blog translation rows for a given locale from the
+ * `blog-translations` Notion data source. Returns an empty array
+ * when the translation source is not configured.
+ */
+export async function listBlogTranslations(locale: string): Promise<BlogTranslation[]> {
+  if (!blogTranslationsSource) return [];
+  const pages = await listGenericNotionContentForLocale(blogTranslationsSource, locale);
+  return pages
+    .map((p) => mapBlogTranslation(p as unknown as NotionPageLike))
+    .filter((row): row is BlogTranslation => row !== null);
+}

package/dist/templates/lib/content/models.ts.tmpl

@@ -34,6 +34,12 @@ import {
 {{internalSourceDeclarations}}
 // END generated-internal-sources
 
+// BEGIN generated-translation-sources
+// (Regenerated by `notionx add` / `notionx remove` / `notionx
+// update`. Do not edit between these markers.)
+{{translationSourceDeclarations}}
+// END generated-translation-sources
+
 // `contentSources` is the public list shown in admin nav and
 // iterated by search/revalidation. `managedContentSources`
 // additionally includes any internal singleton sources