@notionx/create-notionx-app 1.0.0

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

@@ -0,0 +1,74 @@
+// Public list page for the first content source (default: blog).
+// The list itself is a content-source route, while its page title,
+// SEO copy, nav placement, and shell visibility can be edited through
+// the Notion-backed Pages model.
+
+import type { Metadata } from "next";
+import { listGenericNotionContent } from "@notionx/core/notion";
+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";
+
+export const revalidate = 300;
+
+export async function generateMetadata(): Promise<Metadata> {
+  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  return {
+    title: page?.seoTitle || page?.title || "{{contentSourceListTitle}}",
+    description:
+      page?.seoDescription || page?.description || "{{contentSourceListDescription}}",
+  };
+}
+
+export default async function {{contentSourceConstName}}Page() {
+  const items = await listGenericNotionContent({{contentSourceVarName}});
+  const page = await getSitePageForContentSource("{{contentSourceId}}");
+  const title = page?.title || "{{contentSourceListTitle}}";
+  const description = page?.description || "{{contentSourceListDescription}}";
+
+  if (items.length === 0) {
+    return (
+      <SiteShell
+        showHeader={page?.showHeader ?? true}
+        showFooter={page?.showFooter ?? true}
+      >
+        <main className="container mx-auto max-w-4xl px-4 py-16">
+          <h1 className="text-4xl font-bold tracking-tight">{title}</h1>
+          <p className="mt-4 text-muted-foreground">{description}</p>
+          <div className="mt-12 rounded-lg border border-dashed bg-muted/30 px-6 py-16 text-center">
+            <p className="text-sm text-muted-foreground">
+              {{contentSourceEmptyState}}
+            </p>
+            <p className="mt-2 text-xs text-muted-foreground">
+              在 Notion 中把 <code>{{contentSourceTitle}}</code> 行的{" "}
+              <code>Published</code> 勾选后，会自动出现在这里。
+            </p>
+          </div>
+        </main>
+      </SiteShell>
+    );
+  }
+
+  return (
+    <SiteShell
+      showHeader={page?.showHeader ?? true}
+      showFooter={page?.showFooter ?? true}
+    >
+      <main className="container mx-auto max-w-4xl px-4 py-16">
+        <header className="mb-12 space-y-3">
+          <h1 className="text-4xl font-bold tracking-tight">{title}</h1>
+          <p className="text-muted-foreground">{description}</p>
+        </header>
+
+        <ul className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+          {items.map((item) => (
+            <li key={item.pageId}>
+              <PostCard item={item} href={`{{contentSourceListPath}}/${item.slug}`} />
+            </li>
+          ))}
+        </ul>
+      </main>
+    </SiteShell>
+  );
+}

package/dist/templates/components/content/post-card.tsx.tmpl

@@ -0,0 +1,80 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+type PostCardItem = {
+  title: string;
+  description: string;
+  date: string;
+  tags: string[];
+  coverImage: string | null;
+};
+
+function formatDate(value: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function PostCard({
+  item,
+  href,
+}: {
+  item: PostCardItem;
+  href: string;
+}) {
+  return (
+    <Link href={href} className="group block h-full">
+      <Card className="h-full overflow-hidden transition-colors group-hover:border-foreground/30">
+        {item.coverImage ? (
+          <div className="relative aspect-[16/9] overflow-hidden bg-muted">
+            <Image
+              src={item.coverImage}
+              alt={item.title}
+              fill
+              sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
+              className="object-cover transition-transform group-hover:scale-[1.02]"
+            />
+          </div>
+        ) : null}
+        <CardHeader>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <time dateTime={item.date}>{formatDate(item.date)}</time>
+            {item.tags.slice(0, 2).map((tag) => (
+              <Badge key={tag} variant="outline">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+          <CardTitle className="line-clamp-2 text-xl group-hover:underline">
+            {item.title}
+          </CardTitle>
+          {item.description ? (
+            <CardDescription className="line-clamp-3">
+              {item.description}
+            </CardDescription>
+          ) : null}
+        </CardHeader>
+        <CardContent>
+          <span className="inline-flex items-center text-sm font-medium text-primary">
+            Read article
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </span>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}