create-nextdevtpl 2.6.0

package/template/src/app/[locale]/(marketing)/blog/[slug]/page.tsx

@@ -0,0 +1,178 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ArticleJsonLd, BreadcrumbJsonLd } from "@/components/seo/json-ld";
+import { siteConfig } from "@/config";
+import { Link } from "@/i18n/routing";
+import { getAllBlogSlugs, getBlogPost } from "@/lib/source";
+
+/**
+ * 生成静态参数
+ */
+export function generateStaticParams() {
+  return getAllBlogSlugs();
+}
+
+/**
+ * 生成页面元数据 (enhanced with article metadata)
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const post = getBlogPost(slug, locale);
+
+  if (!post) {
+    return {
+      title: "Post Not Found",
+    };
+  }
+
+  const publishedDate =
+    typeof post.date === "string" ? post.date : post.date.toISOString();
+
+  const url = `${siteConfig.url}/${locale}/blog/${slug}`;
+
+  return {
+    title: post.title,
+    description: post.description,
+    authors: post.author ? [{ name: post.author }] : undefined,
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      url,
+      siteName: siteConfig.name,
+      publishedTime: publishedDate,
+      authors: post.author ? [post.author] : undefined,
+      tags: post.tags,
+      images: [
+        {
+          url: `${siteConfig.url}${siteConfig.ogImage}`,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+    },
+    alternates: {
+      canonical: url,
+      languages: {
+        en: `${siteConfig.url}/en/blog/${slug}`,
+        zh: `${siteConfig.url}/zh/blog/${slug}`,
+      },
+    },
+  };
+}
+
+/**
+ * 博客文章详情页面
+ */
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+  const post = getBlogPost(slug, locale);
+
+  if (!post) {
+    notFound();
+  }
+
+  // 获取 MDX 内容组件
+  const MDXContent = post.body;
+
+  // 格式化日期
+  const formattedDate =
+    typeof post.date === "string"
+      ? post.date
+      : post.date.toLocaleDateString(locale === "zh" ? "zh-CN" : "en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+
+  const isoDate =
+    typeof post.date === "string" ? post.date : post.date.toISOString();
+
+  return (
+    <article className="container mx-auto max-w-3xl py-20">
+      {/* JSON-LD Structured Data */}
+      <ArticleJsonLd
+        title={post.title}
+        description={post.description || ""}
+        slug={slug}
+        locale={locale as "en" | "zh"}
+        publishedAt={isoDate}
+        {...(post.author && { author: post.author })}
+        {...(post.tags && { tags: post.tags })}
+      />
+      <BreadcrumbJsonLd
+        items={[
+          { name: "Home", url: `/${locale}` },
+          {
+            name: locale === "zh" ? "博客" : "Blog",
+            url: `/${locale}/blog`,
+          },
+          { name: post.title, url: `/${locale}/blog/${slug}` },
+        ]}
+      />
+
+      {/* 返回链接 */}
+      <Link
+        href="/blog"
+        className="mb-8 inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
+      >
+        ← {locale === "zh" ? "返回博客" : "Back to Blog"}
+      </Link>
+
+      {/* 文章头部 */}
+      <header className="mb-12">
+        {/* 标签 */}
+        {post.tags && post.tags.length > 0 && (
+          <div className="mb-4 flex flex-wrap gap-2">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* 标题 */}
+        <h1 className="mb-4 text-4xl font-bold tracking-tight md:text-5xl">
+          {post.title}
+        </h1>
+
+        {/* 描述 */}
+        {post.description && (
+          <p className="mb-6 text-xl text-muted-foreground">
+            {post.description}
+          </p>
+        )}
+
+        {/* 元数据 */}
+        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+          {post.author && <span>{post.author}</span>}
+          <span>•</span>
+          <time dateTime={formattedDate}>{formattedDate}</time>
+        </div>
+      </header>
+
+      {/* 文章内容 */}
+      <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:font-bold prose-a:text-primary prose-code:rounded prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-pre:bg-muted">
+        <MDXContent />
+      </div>
+    </article>
+  );
+}

package/template/src/app/[locale]/(marketing)/blog/blog-post-card.tsx

@@ -0,0 +1,95 @@
+import { Link } from "@/i18n/routing";
+
+/**
+ * 博客文章卡片属性
+ */
+interface BlogPostCardProps {
+  slug: string;
+  title: string;
+  description?: string | undefined;
+  date: string;
+  author?: string | undefined;
+  tags?: string[] | undefined;
+}
+
+/**
+ * 博客文章卡片组件
+ *
+ * 用于在博客列表页面显示文章摘要
+ */
+export function BlogPostCard({
+  slug,
+  title,
+  description,
+  date,
+  author,
+  tags,
+}: BlogPostCardProps) {
+  return (
+    <article className="group">
+      <Link
+        href={`/blog/${slug}`}
+        className="flex flex-col gap-8 md:flex-row md:items-start"
+      >
+        {/* 文本内容 */}
+        <div className="flex-1 space-y-4">
+          {/* 标签 */}
+          {tags && tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* 标题 */}
+          <h2 className="text-2xl font-bold tracking-tight transition-colors group-hover:text-primary md:text-3xl">
+            {title}
+          </h2>
+
+          {/* 描述 */}
+          {description && (
+            <p className="leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          )}
+
+          {/* 元数据 */}
+          <p className="text-sm text-muted-foreground">
+            {author && `${author} • `}
+            {date}
+          </p>
+        </div>
+
+        {/* 图片占位符 */}
+        <div className="relative aspect-video w-full shrink-0 overflow-hidden rounded-xl border bg-muted md:w-[380px]">
+          <div className="flex h-full items-center justify-center">
+            <div className="grid grid-cols-2 gap-3 p-6">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold">N</span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-primary">⚛</span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-muted-foreground">
+                  TS
+                </span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-muted-foreground">
+                  🌊
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </article>
+  );
+}

package/template/src/app/[locale]/(marketing)/blog/page.tsx

@@ -0,0 +1,127 @@
+import type { Metadata } from "next";
+import { BreadcrumbJsonLd } from "@/components/seo/json-ld";
+import { Separator } from "@/components/ui/separator";
+import { siteConfig } from "@/config";
+import { getBlogPosts } from "@/lib/source";
+
+import { BlogPostCard } from "./blog-post-card";
+
+/**
+ * 生成博客列表页 Metadata
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const isZh = locale === "zh";
+
+  const title = isZh ? "博客文章" : "Blog Posts";
+  const description = isZh
+    ? "发现 NextDevTpl 团队的最新见解、教程和更新。了解产品最新动态。"
+    : "Discover the latest insights, tutorials, and updates from the NextDevTpl team. Learn about the latest product news.";
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "website",
+      url: `${siteConfig.url}/${locale}/blog`,
+      siteName: siteConfig.name,
+    },
+    alternates: {
+      canonical: `${siteConfig.url}/${locale}/blog`,
+      languages: {
+        en: `${siteConfig.url}/en/blog`,
+        zh: `${siteConfig.url}/zh/blog`,
+      },
+    },
+  };
+}
+
+/**
+ * 博客列表页面
+ *
+ * 显示当前语言的所有博客文章
+ */
+export default async function BlogPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const posts = getBlogPosts(locale);
+
+  // 按日期排序（最新的在前）
+  const sortedPosts = posts.sort((a, b) => {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  return (
+    <div className="container mx-auto max-w-5xl py-20">
+      {/* Breadcrumb JSON-LD */}
+      <BreadcrumbJsonLd
+        items={[
+          { name: "Home", url: `/${locale}` },
+          {
+            name: locale === "zh" ? "博客" : "Blog",
+            url: `/${locale}/blog`,
+          },
+        ]}
+      />
+
+      {/* Header */}
+      <div className="mb-16 text-center">
+        <h1 className="text-4xl font-bold tracking-tight md:text-5xl">
+          {locale === "zh" ? "博客文章" : "Blog Posts"}
+        </h1>
+        <p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
+          {locale === "zh"
+            ? "发现 NextDevTpl 团队的最新见解、教程和更新。了解产品最新动态。"
+            : "Discover the latest insights, tutorials, and updates from the NextDevTpl team. Learn about the latest product news."}
+        </p>
+      </div>
+
+      {/* Posts List */}
+      {sortedPosts.length > 0 ? (
+        <div className="space-y-12">
+          {sortedPosts.map((post, index) => {
+            // 从路径中提取 slug
+            const pathParts = post.info.path.split("/");
+            const fileName = pathParts[pathParts.length - 1] ?? "";
+            const slug = fileName.replace(/\.mdx$/, "");
+
+            return (
+              <div key={post.info.path}>
+                <BlogPostCard
+                  slug={slug}
+                  title={post.title}
+                  description={post.description}
+                  date={
+                    typeof post.date === "string"
+                      ? post.date
+                      : (post.date.toISOString().split("T")[0] ?? "")
+                  }
+                  author={post.author}
+                  tags={post.tags}
+                />
+                {index < sortedPosts.length - 1 && (
+                  <Separator className="mt-12" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="text-center text-muted-foreground">
+          {locale === "zh" ? "暂无博客文章" : "No blog posts yet"}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/app/[locale]/(marketing)/demo/plan-badges/page.tsx

@@ -0,0 +1,36 @@
+import { PlanBadge, type PlanType } from "@/features/subscription";
+
+const plans: PlanType[] = ["free", "starter", "pro", "ultra"];
+const sizes: Array<"xs" | "sm" | "md" | "lg"> = ["xs", "sm", "md", "lg"];
+
+export default function PlanBadgesDemoPage() {
+  return (
+    <section className="container py-16">
+      <div className="mx-auto flex max-w-4xl flex-col gap-10">
+        <header className="space-y-3">
+          <h1 className="text-3xl font-semibold tracking-tight">
+            Plan Badge Demo
+          </h1>
+          <p className="text-muted-foreground">
+            Preview the subscription badge styles across plans and sizes.
+          </p>
+        </header>
+
+        <div className="space-y-8">
+          {sizes.map((size) => (
+            <div key={size} className="space-y-3 rounded-xl border bg-card p-6">
+              <div className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+                Size: {size.toUpperCase()}
+              </div>
+              <div className="flex flex-wrap items-center gap-4">
+                {plans.map((plan) => (
+                  <PlanBadge key={`${plan}-${size}`} plan={plan} size={size} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/app/[locale]/(marketing)/layout.tsx

@@ -0,0 +1,15 @@
+import { Footer, Header } from "@/features/marketing";
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}

package/template/src/app/[locale]/(marketing)/legal/[slug]/page.tsx

@@ -0,0 +1,130 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+import { Link } from "@/i18n/routing";
+import { getAllLegalSlugs, getLegalDoc } from "@/lib/source";
+
+/**
+ * 生成静态参数
+ * 用于预渲染所有法律文档页面
+ */
+export function generateStaticParams() {
+  return getAllLegalSlugs();
+}
+
+/**
+ * 生成页面元数据
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const doc = getLegalDoc(slug, locale);
+
+  if (!doc) {
+    return {
+      title: "Document Not Found",
+    };
+  }
+
+  return {
+    title: doc.title,
+    description: doc.description,
+  };
+}
+
+/**
+ * 法律文档详情页面
+ *
+ * 路由: /legal/[slug]
+ * 支持: /legal/terms, /legal/privacy, /legal/cookie-policy
+ */
+export default async function LegalPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+  const doc = getLegalDoc(slug, locale);
+
+  // 文档不存在时返回 404
+  if (!doc) {
+    notFound();
+  }
+
+  // 获取 MDX 内容组件
+  const MDXContent = doc.body;
+
+  // 格式化日期
+  const formattedDate =
+    typeof doc.date === "string"
+      ? doc.date
+      : doc.date.toLocaleDateString(locale === "zh" ? "zh-CN" : "en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+
+  return (
+    <article className="container mx-auto max-w-3xl py-12">
+      {/* 返回链接 */}
+      <Link
+        href="/"
+        className="mb-8 inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
+      >
+        ← {locale === "zh" ? "返回首页" : "Back to Home"}
+      </Link>
+
+      {/* 文档头部 */}
+      <header className="mb-8 border-b pb-8">
+        {/* 标题 */}
+        <h1 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl">
+          {doc.title}
+        </h1>
+
+        {/* 最后更新日期 */}
+        <p className="text-sm text-muted-foreground">
+          {locale === "zh" ? "最后更新：" : "Last Updated: "}
+          <time dateTime={formattedDate}>{formattedDate}</time>
+        </p>
+      </header>
+
+      {/* 文档内容 - 使用 Tailwind Typography 样式 */}
+      <div className="prose prose-neutral dark:prose-invert max-w-none prose-headings:font-semibold prose-h2:text-xl prose-h2:mt-8 prose-h3:text-lg prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-table:text-sm prose-th:bg-muted prose-th:p-2 prose-td:p-2 prose-td:border">
+        <MDXContent />
+      </div>
+
+      {/* 底部导航 */}
+      <footer className="mt-12 border-t pt-8">
+        <div className="flex flex-wrap gap-4 text-sm">
+          <span className="text-muted-foreground">
+            {locale === "zh" ? "其他法律文档：" : "Other Legal Documents:"}
+          </span>
+          {slug !== "terms" && (
+            <Link href="/legal/terms" className="text-primary hover:underline">
+              {locale === "zh" ? "服务条款" : "Terms of Service"}
+            </Link>
+          )}
+          {slug !== "privacy" && (
+            <Link
+              href="/legal/privacy"
+              className="text-primary hover:underline"
+            >
+              {locale === "zh" ? "隐私政策" : "Privacy Policy"}
+            </Link>
+          )}
+          {slug !== "cookie-policy" && (
+            <Link
+              href="/legal/cookie-policy"
+              className="text-primary hover:underline"
+            >
+              {locale === "zh" ? "Cookie 政策" : "Cookie Policy"}
+            </Link>
+          )}
+        </div>
+      </footer>
+    </article>
+  );
+}

package/template/src/app/[locale]/(marketing)/page.tsx

@@ -0,0 +1,94 @@
+import type { Metadata } from "next";
+import { SiteJsonLd, SoftwareAppJsonLd } from "@/components/seo/json-ld";
+import { siteConfig } from "@/config";
+import {
+  CTASection,
+  FAQSection,
+  FeatureGrid,
+  HeroSection,
+  HowItWorks,
+  PricingSection,
+  Testimonials,
+  UseCasesSection,
+} from "@/features/marketing";
+
+/**
+ * 生成首页 Metadata
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const isZh = locale === "zh";
+
+  const title = isZh
+    ? "NextDevTpl - 生产就绪的 Next.js SaaS 模板"
+    : "NextDevTpl - Production-ready Next.js SaaS Template";
+
+  const description = isZh
+    ? "生产就绪的 Next.js SaaS 模板，内置认证、支付、积分系统、后台任务、国际化与管理后台。克隆、定制、即可上线。"
+    : "Production-ready Next.js SaaS template with authentication, payments, a credits system, background jobs, i18n, and an admin panel. Clone, customize, and ship.";
+
+  return {
+    title,
+    description,
+    keywords: [
+      "Next.js SaaS template",
+      "SaaS boilerplate",
+      "Next.js starter kit",
+      "Better Auth",
+      "Drizzle ORM",
+      "TypeScript SaaS",
+      ...(isZh ? ["Next.js SaaS 模板", "SaaS 脚手架", "SaaS 样板"] : []),
+    ],
+    openGraph: {
+      title,
+      description,
+      type: "website",
+      url: `${siteConfig.url}/${locale}`,
+      siteName: siteConfig.name,
+      images: [
+        {
+          url: `${siteConfig.url}${siteConfig.ogImage}`,
+          width: 1200,
+          height: 630,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [`${siteConfig.url}${siteConfig.ogImage}`],
+    },
+  };
+}
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  return (
+    <>
+      {/* JSON-LD Structured Data */}
+      <SiteJsonLd locale={locale as "en" | "zh"} />
+      <SoftwareAppJsonLd locale={locale as "en" | "zh"} />
+
+      {/* Page Sections */}
+      <HeroSection />
+      <FeatureGrid />
+      <HowItWorks />
+      <UseCasesSection />
+      <Testimonials />
+      <PricingSection />
+      <FAQSection />
+      <CTASection />
+    </>
+  );
+}