create-next-pro-cli 0.1.28 → 0.1.29

package/templates/Projects/default/messages/en/_home.json

@@ -1,4 +1,11 @@
 {
-  "title": "Home",
-  "description": "Welcome to your homepage"
+  "title": "Welcome to your website",
+  "description": "Start developing right now.",
+  "readme": "Read the Doc",
+  "github": {
+    "project_credit": "This project was created with create-next-pro-cli",
+    "star": "Star",
+    "watch": "Watch",
+    "action_with_count": "{label} on GitHub, {count} total"
+  }
 }

package/templates/Projects/default/messages/en/settings.json

@@ -1,4 +1,12 @@
 {
   "title": "User Settings",
-  "description": "View and edit your personal settings."
+  "description": "Manage your personal preferences.",
+  "language": {
+    "title": "Language",
+    "description": "Choose the language used by the application."
+  },
+  "theme": {
+    "title": "Theme",
+    "description": "Switch between the light and dark appearance."
+  }
 }

package/templates/Projects/default/messages/en/userInfo.json

@@ -1,4 +1,9 @@
 {
   "title": "User Information",
-  "description": "View and edit your personal information."
+  "description": "Information provided by your Google account.",
+  "name": "Name",
+  "email": "Email address",
+  "profile_image_alt": "Google profile picture",
+  "profile_image_unavailable": "Google profile picture unavailable",
+  "unavailable": "Not provided"
 }

package/templates/Projects/default/messages/fr/_home.json

@@ -1,4 +1,11 @@
 {
-  "title": "Bienvenue sur notre site",
-  "description": "Commencez votre exploration dès maintenant."
+  "title": "Bienvenue sur votre site",
+  "description": "Commencez votre développement dès maintenant.",
+  "readme": "Lire la documentation",
+  "github": {
+    "project_credit": "Ce projet est créé avec create-next-pro-cli",
+    "star": "Star",
+    "watch": "Watch",
+    "action_with_count": "{label} sur GitHub, {count} au total"
+  }
 }

package/templates/Projects/default/messages/fr/settings.json

@@ -1,4 +1,12 @@
 {
   "title": "Paramètres utilisateur",
-  "description": "Consultez et modifiez vos paramètres personnels."
+  "description": "Gérez vos préférences personnelles.",
+  "language": {
+    "title": "Langue",
+    "description": "Choisissez la langue utilisée par l’application."
+  },
+  "theme": {
+    "title": "Thème",
+    "description": "Basculez entre les apparences claire et sombre."
+  }
 }

package/templates/Projects/default/messages/fr/userInfo.json

@@ -1,4 +1,9 @@
 {
   "title": "Informations utilisateur",
-  "description": "Consultez et modifiez vos informations personnelles."
+  "description": "Informations fournies par votre compte Google.",
+  "name": "Nom",
+  "email": "Adresse e-mail",
+  "profile_image_alt": "Photo de profil Google",
+  "profile_image_unavailable": "Photo de profil Google indisponible",
+  "unavailable": "Non renseigné"
 }

package/templates/Projects/default/next.config.ts

@@ -8,6 +8,17 @@ const contentSecurityPolicy = createContentSecurityPolicy(
 
 const nextConfig: NextConfig = {
   poweredByHeader: false,
+  turbopack: {
+    root: process.cwd(),
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
   async headers() {
     const headers = [
       {

package/templates/Projects/default/package.json

@@ -21,7 +21,7 @@
     "verify:rendering": "node --experimental-strip-types tests/rendering/verify-rendering.ts",
     "check": "prettier --check . && eslint . && tsc --noEmit && vitest run && next build && node --experimental-strip-types tests/rendering/verify-rendering.ts",
     "test:consumer": "node --experimental-strip-types tests/consumer/validate-template.ts",
-    "audit": "bun audit"
+    "audit": "node --experimental-strip-types scripts/audit.ts"
   },
   "dependencies": {
     "@radix-ui/react-slot": "1.3.0",
@@ -52,5 +52,11 @@
   },
   "overrides": {
     "postcss": "8.5.15"
+  },
+  "allowScripts": {
+    "@parcel/watcher": true,
+    "@swc/core": true,
+    "sharp": true,
+    "unrs-resolver": true
   }
 }

package/templates/Projects/default/playwright.config.ts

@@ -6,21 +6,44 @@ export default defineConfig({
   fullyParallel: true,
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? "github" : "list",
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
   use: {
     baseURL: "http://127.0.0.1:3100",
     trace: "retain-on-failure",
+    contextOptions: { reducedMotion: "reduce" },
   },
-  projects: [
-    { name: "desktop", use: { ...devices["Desktop Chrome"] } },
-    { name: "mobile", use: { ...devices["Pixel 5"] } },
-  ],
   webServer: {
     command: "next build && next start --hostname 127.0.0.1 --port 3100",
     url: "http://127.0.0.1:3100/en",
-    reuseExistingServer: !process.env.CI,
     env: {
-      AUTH_DISABLED: "true",
       NEXT_PUBLIC_APP_URL: "http://127.0.0.1:3100",
+      AUTH_URL: "http://127.0.0.1:3100",
+      NEXTAUTH_URL: "http://127.0.0.1:3100",
+      AUTH_SECRET: "",
+      AUTH_GOOGLE_ID: "",
+      AUTH_GOOGLE_SECRET: "",
+      AUTH_DISABLED: "true",
     },
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
   },
+  projects: [
+    {
+      name: "desktop",
+      use: {
+        ...devices["Desktop Chrome"],
+        contextOptions: { reducedMotion: "reduce" },
+      },
+    },
+    {
+      name: "mobile",
+      use: {
+        ...devices["Pixel 5"],
+        contextOptions: { reducedMotion: "reduce" },
+      },
+    },
+  ],
 });

package/templates/Projects/default/pnpm-workspace.yaml

@@ -3,3 +3,5 @@ allowBuilds:
   "@swc/core": true
   sharp: true
   unrs-resolver: true
+overrides:
+  postcss: 8.5.15

package/templates/Projects/default/scripts/audit.ts

@@ -0,0 +1,4 @@
+import { resolvePackageManager, runPackageManager } from "./package-manager.ts";
+
+const manager = resolvePackageManager();
+await runPackageManager(manager, ["audit"]);

package/templates/Projects/default/scripts/package-manager.ts

@@ -0,0 +1,68 @@
+import { spawn } from "node:child_process";
+
+export const packageManagers = ["bun", "npm", "pnpm"] as const;
+
+export type PackageManager = (typeof packageManagers)[number];
+
+function isPackageManager(value: string): value is PackageManager {
+  return packageManagers.includes(value as PackageManager);
+}
+
+export function resolvePackageManager(
+  env: Readonly<Record<string, string | undefined>> = process.env,
+): PackageManager {
+  const explicit = env.CNP_PACKAGE_MANAGER?.trim();
+  if (explicit) {
+    if (isPackageManager(explicit)) return explicit;
+    throw new Error(
+      `Unsupported package manager "${explicit}". Expected bun, npm, or pnpm.`,
+    );
+  }
+
+  const userAgent = env.npm_config_user_agent?.trim().split(/[\s/]/, 1)[0];
+  if (userAgent && isPackageManager(userAgent)) return userAgent;
+
+  throw new Error(
+    "Unable to detect the package manager. Run the script through bun, npm, or pnpm, or set CNP_PACKAGE_MANAGER.",
+  );
+}
+
+export function packageManagerExecutable(
+  manager: PackageManager,
+  platform: NodeJS.Platform = process.platform,
+): string {
+  return platform === "win32" && manager !== "bun" ? `${manager}.cmd` : manager;
+}
+
+export function installArguments(manager: PackageManager): string[] {
+  if (manager === "bun") return ["install", "--frozen-lockfile"];
+  if (manager === "pnpm") return ["install", "--no-frozen-lockfile"];
+  return ["install"];
+}
+
+export function runPackageManager(
+  manager: PackageManager,
+  args: string[],
+  options: { cwd?: string; env?: NodeJS.ProcessEnv } = {},
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const executable = packageManagerExecutable(manager);
+    const child = spawn(executable, args, {
+      cwd: options.cwd,
+      env: options.env ?? process.env,
+      shell: false,
+      stdio: "inherit",
+    });
+    child.once("error", reject);
+    child.once("exit", (code, signal) => {
+      if (code === 0) resolve();
+      else {
+        reject(
+          new Error(
+            `${manager} ${args.join(" ")} failed${signal ? ` with signal ${signal}` : ` with exit code ${code ?? "unknown"}`}.`,
+          ),
+        );
+      }
+    });
+  });
+}

package/templates/Projects/default/src/app/[locale]/(public)/_home/page.tsx

@@ -1,6 +1,6 @@
 // src/app/[locale]/(public)/_home/page.tsx
-import HomePageUI from "@/ui/_home/page-ui";
+import HomePageShell from "@/ui/_home/page-shell";
 
 export default function HomePage() {
-  return <HomePageUI />;
+  return <HomePageShell />;
 }

package/templates/Projects/default/src/app/[locale]/(public)/layout.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import GlobalHeader from "@/ui/_global/GlobalHeader";
-import GlobalMain from "@/ui/_global/GlobalMain";
 
 export default function PublicLayout({
   children,
@@ -10,7 +9,7 @@ export default function PublicLayout({
   return (
     <>
       <GlobalHeader hasSessionInitial={false} />
-      <GlobalMain>{children}</GlobalMain>
+      {children}
     </>
   );
 }

package/templates/Projects/default/src/app/[locale]/(public)/login/page.tsx

@@ -1,8 +1,13 @@
 // src/app/[locale]/(public)/login/page.tsx
 import LoginPageUI from "@/ui/login/page-ui";
+import GlobalMain from "@/ui/_global/GlobalMain";
 
 export const dynamic = "force-static";
 
 export default function LoginPage() {
-  return <LoginPageUI />;
+  return (
+    <GlobalMain>
+      <LoginPageUI />
+    </GlobalMain>
+  );
 }

package/templates/Projects/default/src/app/[locale]/(public)/register/page.tsx

@@ -1,8 +1,13 @@
 // src/app/[locale]/(public)/register/page.tsx
 import RegisterPageUI from "@/ui/register/page-ui";
+import GlobalMain from "@/ui/_global/GlobalMain";
 
 export const dynamic = "force-static";
 
 export default function RegisterPage() {
-  return <RegisterPageUI />;
+  return (
+    <GlobalMain>
+      <RegisterPageUI />
+    </GlobalMain>
+  );
 }

package/templates/Projects/default/src/app/[locale]/(user)/userInfo/page.tsx

@@ -1,5 +1,8 @@
+import { auth } from "@/auth";
 import UserInfoPageUI from "@/ui/userInfo/page-ui";
 
-export default function UserInfoPage() {
-  return <UserInfoPageUI />;
+export default async function UserInfoPage() {
+  const session = await auth();
+
+  return <UserInfoPageUI user={session?.user} />;
 }

package/templates/Projects/default/src/app/[locale]/page.tsx

@@ -1,15 +1,12 @@
 import React from "react";
 import HomePage from "@/app/[locale]/(public)/_home/page";
 import GlobalHeader from "@/ui/_global/GlobalHeader";
-import GlobalMain from "@/ui/_global/GlobalMain";
 
 export default async function FallbackPage() {
   return (
     <>
       <GlobalHeader hasSessionInitial={false} />
-      <GlobalMain>
-        <HomePage />
-      </GlobalMain>
+      <HomePage />
     </>
   );
 }

package/templates/Projects/default/src/lib/github/repository.ts

@@ -0,0 +1,68 @@
+export const GITHUB_REPOSITORY_URL =
+  "https://github.com/Rising-Corporation/create-next-pro-cli";
+export const GITHUB_README_URL = `${GITHUB_REPOSITORY_URL}#readme`;
+
+const GITHUB_REPOSITORY_API_URL =
+  "https://api.github.com/repos/Rising-Corporation/create-next-pro-cli";
+
+export type GitHubRepositoryStats = {
+  stars: number | null;
+  watchers: number | null;
+};
+
+const unavailableStats: GitHubRepositoryStats = {
+  stars: null,
+  watchers: null,
+};
+
+type GitHubRepositoryFetcher = (
+  url: string,
+  init: {
+    headers: Record<string, string>;
+    next: { revalidate: number };
+  },
+) => Promise<Response>;
+
+export function parseGitHubRepositoryStats(
+  value: unknown,
+): GitHubRepositoryStats {
+  if (!value || typeof value !== "object") return unavailableStats;
+
+  const repository = value as Record<string, unknown>;
+  const stars = repository.stargazers_count;
+  const watchers = repository.subscribers_count;
+
+  if (
+    !Number.isInteger(stars) ||
+    (stars as number) < 0 ||
+    !Number.isInteger(watchers) ||
+    (watchers as number) < 0
+  ) {
+    return unavailableStats;
+  }
+
+  return {
+    stars: stars as number,
+    watchers: watchers as number,
+  };
+}
+
+export async function getGitHubRepositoryStats(
+  fetcher: GitHubRepositoryFetcher = fetch,
+): Promise<GitHubRepositoryStats> {
+  try {
+    const response = await fetcher(GITHUB_REPOSITORY_API_URL, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+      next: { revalidate: 3600 },
+    });
+
+    if (!response.ok) return unavailableStats;
+
+    return parseGitHubRepositoryStats(await response.json());
+  } catch {
+    return unavailableStats;
+  }
+}

package/templates/Projects/default/src/ui/_global/GlobalMain.tsx

@@ -2,14 +2,19 @@ import React from "react";
 
 export default function GlobalMain({
   children,
+  footer,
 }: {
   children: React.ReactNode;
+  footer?: React.ReactNode;
 }) {
   return (
-    <main className="mt-0 flex min-h-screen flex-col bg-neutral-50 text-foreground font-sans hero-pattern">
-      <div className="flex-1 flex flex-col justify-center items-stretch mx-auto w-full  px-6 self-stretch">
-        {children}
-      </div>
-    </main>
+    <div className="mt-0 flex min-h-screen flex-col bg-neutral-50 text-foreground font-sans hero-pattern">
+      <main className="flex flex-1 flex-col">
+        <div className="flex-1 flex flex-col justify-center items-stretch mx-auto w-full px-6 self-stretch">
+          {children}
+        </div>
+      </main>
+      {footer}
+    </div>
   );
 }

package/templates/Projects/default/src/ui/_global/ThemeToggle.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useSyncExternalStore } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "./Button";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 
 const themeChangeEvent = "template-theme-change";
 
@@ -24,8 +24,16 @@ function subscribeToThemeChange(onStoreChange: () => void) {
   };
 }
 
+function applyTheme(dark: boolean) {
+  document.documentElement.classList.toggle("dark", dark);
+  document.documentElement.classList.toggle("light", !dark);
+  localStorage.setItem("theme", dark ? "dark" : "light");
+  window.dispatchEvent(new Event(themeChangeEvent));
+}
+
 export default function ThemeToggle() {
   const t = useTranslations("_global_ui");
+  const locale = useLocale();
   const theme = useSyncExternalStore(
     subscribeToThemeChange,
     getThemeSnapshot,
@@ -33,12 +41,14 @@ export default function ThemeToggle() {
   );
   const isDark = theme === "dark";
 
-  const applyTheme = (dark: boolean) => {
-    document.documentElement.classList.toggle("dark", dark);
-    document.documentElement.classList.toggle("light", !dark);
-    localStorage.setItem("theme", dark ? "dark" : "light");
-    window.dispatchEvent(new Event(themeChangeEvent));
-  };
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("theme");
+    const shouldUseDark = storedTheme
+      ? storedTheme === "dark"
+      : window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    applyTheme(shouldUseDark);
+  }, [locale]);
 
   return (
     <Button

package/templates/Projects/default/src/ui/_global/UserNav.tsx

@@ -2,6 +2,7 @@
 import { Link } from "@/lib/i18n/navigation";
 import { useTranslations } from "next-intl";
 import LogoutButton from "../dashboard/LogoutButton";
+import ThemeToggle from "./ThemeToggle";
 
 const navLinks = [
   { href: "/dashboard", labelKey: "user_nav.links.dashboard" },
@@ -18,12 +19,15 @@ const UserNav = () => {
           <li key={link.href}>
             <Link
               href={link.href}
-              className="inline-block rounded px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-stone-600 hover:bg-stone-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-500"
+              className="inline-block rounded px-3 py-1.5 text-sm font-medium dark:text-stone-100 light:text-stone-900 hover:text-stone-600 hover:bg-stone-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-500"
             >
               {t(link.labelKey)}
             </Link>
           </li>
         ))}
+        <li>
+          <ThemeToggle />
+        </li>
         <li>
           <LogoutButton />
         </li>

package/templates/Projects/default/src/ui/_home/GitHubActions.tsx

@@ -0,0 +1,57 @@
+import { Eye, Star } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+import { Button } from "@/ui/_global/Button";
+import {
+  GITHUB_REPOSITORY_URL,
+  getGitHubRepositoryStats,
+} from "@/lib/github/repository";
+
+export default async function GitHubActions() {
+  const [t, stats] = await Promise.all([
+    getTranslations("_home.github"),
+    getGitHubRepositoryStats(),
+  ]);
+
+  const actions = [
+    {
+      label: t("star"),
+      count: stats.stars,
+      icon: Star,
+    },
+    {
+      label: t("watch"),
+      count: stats.watchers,
+      icon: Eye,
+    },
+  ];
+
+  return (
+    <div className="mt-12 text-center">
+      <p className="mb-4">{t("project_credit")}</p>
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        {actions.map(({ label, count, icon: Icon }) => (
+          <Button key={label} asChild variant="outline">
+            <a
+              href={GITHUB_REPOSITORY_URL}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={
+                count === null
+                  ? label
+                  : t("action_with_count", { label, count })
+              }
+            >
+              <Icon className="mr-2 h-4 w-4" aria-hidden="true" />
+              <span>{label}</span>
+              {count !== null && (
+                <span className="ml-2 border-l border-current pl-2 tabular-nums">
+                  {count}
+                </span>
+              )}
+            </a>
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/Projects/default/src/ui/_home/page-shell.tsx

@@ -0,0 +1,16 @@
+import GlobalMain from "@/ui/_global/GlobalMain";
+import HomePageUI from "@/ui/_home/page-ui";
+
+const footer = (
+  <footer className="border-t px-4 py-6 text-center text-sm text-gray-600 dark:text-gray-300">
+    <p>Empowered by Rising Corporation</p>
+  </footer>
+);
+
+export default function HomePageShell() {
+  return (
+    <GlobalMain footer={footer}>
+      <HomePageUI />
+    </GlobalMain>
+  );
+}

package/templates/Projects/default/src/ui/_home/page-ui.tsx

@@ -1,25 +1,36 @@
 // src/ui/_home/page-ui.tsx
 import { getTranslations } from "next-intl/server";
+import { ArrowRight } from "lucide-react";
+import { GITHUB_README_URL } from "@/lib/github/repository";
+import GitHubActions from "@/ui/_home/GitHubActions";
 
 export default async function HomePageUI() {
   const t = await getTranslations("_home");
 
   return (
-    <>
-      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <h1 className="text-5xl lg:text-6xl font-bold mb-6 leading-tight">
-              {t.rich("title", {
-                span: (chunks) => (
-                  <span className="gradient-text">{chunks}</span>
-                ),
-              })}
-            </h1>
+    <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <h1 className="text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+            {t.rich("title", {
+              span: (chunks) => <span className="gradient-text">{chunks}</span>,
+            })}
+          </h1>
+          <div>
             <p className="text-lg">{t("description")}</p>
+            <a
+              href={GITHUB_README_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="mt-4 inline-flex items-center gap-2 font-medium underline underline-offset-4 hover:text-stone-600"
+            >
+              {t("readme")}
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
+            </a>
           </div>
         </div>
-      </section>
-    </>
+        <GitHubActions />
+      </div>
+    </section>
   );
 }

package/templates/Projects/default/src/ui/dashboard/LogoutButton.tsx

@@ -19,7 +19,7 @@ const LogoutButton = () => {
       variant="ghost"
       size="sm"
       onClick={handleLogout}
-      className="text-gray-400 hover:text-black  glass-effect"
+      className="text-gray-400 hover:text-black dark:hover:text-white glass-effect"
     >
       <LogOut className="h-4 w-4 sm:mr-2" />
       <span className="hidden sm:inline">{t("logout")}</span>

package/templates/Projects/default/src/ui/dashboard/StatsCard.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 export default function StatsCard({ t }: { t: (key: string) => string }) {
   return (
-    <div className="rounded border bg-white p-6 shadow-sm">
+    <div className="rounded border bg-white p-6 shadow-sm dark:bg-black">
       <h2 className="text-lg font-semibold mb-2">{t("widgets.stats.title")}</h2>
-      <ul className="text-sm text-gray-600 space-y-1">
+      <ul className="text-sm text-gray-600 space-y-1 dark:text-gray-300">
         <li>{t("widgets.stats.views")}: 123</li>
         <li>{t("widgets.stats.likes")}: 45</li>
         <li>{t("widgets.stats.comments")}: 7</li>