create-nextdevtpl 2.6.0

package/template/src/app/sitemap.ts

@@ -0,0 +1,68 @@
+import type { MetadataRoute } from "next";
+
+import { siteConfig } from "@/config";
+import { getAllPseoParams } from "@/features/pseo";
+import { getAllBlogSlugs, getAllLegalSlugs } from "@/lib/source";
+
+/** Supported locales */
+const locales = ["en", "zh"] as const;
+
+/**
+ * 动态生成 sitemap.xml
+ *
+ * 包含所有公开页面的 URL
+ * 用于搜索引擎索引
+ */
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = siteConfig.url;
+  const now = new Date();
+
+  // Static pages that exist for each locale
+  const staticPaths = [
+    "", // homepage
+    "/blog",
+    "/pseo",
+  ];
+
+  // Generate static routes for each locale
+  const staticRoutes = locales.flatMap((locale) =>
+    staticPaths.map((path) => ({
+      url: `${baseUrl}/${locale}${path}`,
+      lastModified: now,
+      changeFrequency: "weekly" as const,
+      priority: path === "" ? 1 : 0.8,
+    }))
+  );
+
+  // Blog posts (dynamic)
+  const blogSlugs = getAllBlogSlugs();
+  const blogRoutes = blogSlugs.map(
+    ({ locale, slug }: { locale: string; slug: string }) => ({
+      url: `${baseUrl}/${locale}/blog/${slug}`,
+      lastModified: now,
+      changeFrequency: "monthly" as const,
+      priority: 0.7,
+    })
+  );
+
+  // Legal pages (dynamic)
+  const legalSlugs = getAllLegalSlugs();
+  const legalRoutes = legalSlugs.map(
+    ({ locale, slug }: { locale: string; slug: string }) => ({
+      url: `${baseUrl}/${locale}/legal/${slug}`,
+      lastModified: now,
+      changeFrequency: "yearly" as const,
+      priority: 0.3,
+    })
+  );
+
+  const pseoSlugs = getAllPseoParams();
+  const pseoRoutes = pseoSlugs.map(({ locale, slug }) => ({
+    url: `${baseUrl}/${locale}/pseo/${slug}`,
+    lastModified: now,
+    changeFrequency: "weekly" as const,
+    priority: 0.6,
+  }));
+
+  return [...staticRoutes, ...blogRoutes, ...legalRoutes, ...pseoRoutes];
+}

package/template/src/components/motion/reveal.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import type { ReactNode } from "react";
+
+/** 全站统一缓动（与 Hero 入场一致） */
+export const EASE: [number, number, number, number] = [0.22, 0.7, 0.16, 1];
+
+interface RevealProps {
+  children: ReactNode;
+  className?: string;
+  /** 入场延迟（秒），用于同区块内错峰 */
+  delay?: number;
+  /** 初始 Y 位移（px） */
+  y?: number;
+}
+
+/**
+ * 滚动进入视口时淡入上浮的一次性入场动画。
+ *
+ * - once: true —— 只触发一次，滚回去不重复
+ * - viewport margin 让动画在元素进入视口 10% 时就触发，更跟手
+ * - 自动尊重 prefers-reduced-motion：减弱动效用户直接渲染静态内容，
+ *   不做位移/淡入（避免可访问性问题）
+ */
+export function Reveal({
+  children,
+  className,
+  delay = 0,
+  y = 16,
+}: RevealProps) {
+  const reduce = useReducedMotion();
+
+  if (reduce) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "0px 0px -10% 0px" }}
+      transition={{ duration: 0.6, ease: EASE, delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/template/src/components/seo/json-ld.tsx

@@ -0,0 +1,87 @@
+import {
+  type ArticleSchemaInput,
+  type BreadcrumbItem,
+  type FAQItem,
+  generateArticleSchema,
+  generateBreadcrumbSchema,
+  generateFAQSchema,
+  generateOrganizationSchema,
+  generateSoftwareApplicationSchema,
+  generateWebSiteSchema,
+} from "@/lib/seo/json-ld";
+
+type LocaleType = "en" | "zh";
+
+/**
+ * Generic JSON-LD script injector
+ */
+function JsonLdScript({ data }: { data: object }) {
+  return (
+    <script
+      type="application/ld+json"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: JSON-LD injection is safe
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}
+
+/**
+ * WebSite + Organization (typically used in layout)
+ */
+export function SiteJsonLd({ locale }: { locale: LocaleType }) {
+  return (
+    <>
+      <JsonLdScript data={generateWebSiteSchema(locale)} />
+      <JsonLdScript data={generateOrganizationSchema()} />
+    </>
+  );
+}
+
+/**
+ * Article (for blog posts)
+ */
+export function ArticleJsonLd(props: ArticleSchemaInput) {
+  return <JsonLdScript data={generateArticleSchema(props)} />;
+}
+
+/**
+ * FAQ Page
+ */
+export function FAQJsonLd({ faqs }: { faqs: FAQItem[] }) {
+  if (!faqs || faqs.length === 0) return null;
+  return <JsonLdScript data={generateFAQSchema(faqs)} />;
+}
+
+/**
+ * Breadcrumbs
+ */
+export function BreadcrumbJsonLd({ items }: { items: BreadcrumbItem[] }) {
+  if (!items || items.length === 0) return null;
+  return <JsonLdScript data={generateBreadcrumbSchema(items)} />;
+}
+
+/**
+ * Software Application (for product pages)
+ */
+export function SoftwareAppJsonLd({ locale }: { locale: LocaleType }) {
+  return <JsonLdScript data={generateSoftwareApplicationSchema(locale)} />;
+}
+
+/**
+ * Combined schema for homepage
+ */
+export function HomePageJsonLd({
+  locale,
+  faqs,
+}: {
+  locale: LocaleType;
+  faqs?: FAQItem[];
+}) {
+  return (
+    <>
+      <SiteJsonLd locale={locale} />
+      <SoftwareAppJsonLd locale={locale} />
+      {faqs && faqs.length > 0 && <FAQJsonLd faqs={faqs} />}
+    </>
+  );
+}

package/template/src/components/seo/og-image-template.tsx

@@ -0,0 +1,118 @@
+import { ImageResponse } from "next/og";
+
+import { siteConfig } from "@/config";
+
+export const OG_IMAGE_SIZE = {
+  width: 1200,
+  height: 630,
+};
+
+function getHostname(url: string | undefined): string {
+  if (!url) return "example.com";
+  try {
+    return new URL(url).hostname;
+  } catch {
+    const cleaned = url.replace(/^https?:\/\//, "");
+    return cleaned.split("/")[0] ?? cleaned;
+  }
+}
+
+export function createOgImageResponse(): ImageResponse {
+  const hostname = getHostname(siteConfig.url);
+
+  return new ImageResponse(
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#0a0a0a",
+        backgroundImage:
+          "radial-gradient(circle at 25% 25%, #7c3aed20 0%, transparent 50%), radial-gradient(circle at 75% 75%, #7c3aed10 0%, transparent 50%)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: 40,
+        }}
+      >
+        <div
+          style={{
+            width: 80,
+            height: 80,
+            background: "linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)",
+            borderRadius: 20,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginRight: 24,
+            boxShadow: "0 8px 32px rgba(124, 58, 237, 0.4)",
+          }}
+        >
+          {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative template icon */}
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+          </svg>
+        </div>
+        <span
+          style={{
+            fontSize: 64,
+            fontWeight: 700,
+            background: "linear-gradient(135deg, #ffffff 0%, #a5a5a5 100%)",
+            backgroundClip: "text",
+            color: "transparent",
+          }}
+        >
+          {siteConfig.name}
+        </span>
+      </div>
+
+      <div
+        style={{
+          fontSize: 28,
+          color: "#a1a1aa",
+          textAlign: "center",
+          maxWidth: 800,
+          lineHeight: 1.4,
+          padding: "0 40px",
+        }}
+      >
+        {siteConfig.description}
+      </div>
+
+      <div
+        style={{
+          marginTop: 48,
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 24px",
+          background: "rgba(124, 58, 237, 0.1)",
+          borderRadius: 50,
+          border: "1px solid rgba(124, 58, 237, 0.3)",
+        }}
+      >
+        <span style={{ fontSize: 18, color: "#a78bfa" }}>{hostname}</span>
+      </div>
+    </div>,
+    {
+      ...OG_IMAGE_SIZE,
+    }
+  );
+}

package/template/src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/template/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/template/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/template/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };