create-next-imagicma 0.0.5 → 0.0.7

package/README.md

@@ -1,44 +1,60 @@
 # create-next-imagicma
 
-一个极简的项目脚手架（类似 `create-next-app`），用于从本仓库模板快速生成新项目。
+一个极简项目脚手架，用于从本仓库模板快速生成新项目。支持双模板：`hono` 与 `next`。
 
 ## 使用
 
 ```bash
 npm install -g create-next-imagicma
-create-next-imagicma <project-dir> [--port <1-65535>] [--theme <name>]
+create-next-imagicma <project-dir> [--template <hono|next>] [--port <1-65535>] [--theme <name>]
 ```
 
 本地（未发布）使用示例：
 
 ```bash
-cd /Users/alexliu/Project/nextjs-app
-node ./create-next-imagicma/bin/create-next-imagicma.mjs demo-5001 --port 5001
+cd /Users/alexliu/Project/imagicma-template
+node ./create-next-imagicma/bin/create-next-imagicma.mjs demo-hono --template hono --port 5001
+node ./create-next-imagicma/bin/create-next-imagicma.mjs demo-next --template next --port 5001
 ```
 
 ## 参数
 
-- `--port <number>`：设置新项目 `dev/start` 的默认端口（写入 `next ... -p <port>`）。
-- `--theme <name>`：设置新项目默认主题（可选：`quadratic`、`nomad`、`honey`、`zen-garden`、`highlighter`）。
-- `-v, --version`：显示当前脚手架版本号。
-- 运行时仍可覆盖，例如：`pnpm dev -- -p 6001` 或 `PORT=6001 pnpm start`
+- `--template <hono|next>`：选择模板。默认 `hono`。
+- `--port <number>`：设置新项目默认端口。
+  - `next` 模板：写入 `next dev/start -p <port>`
+  - `hono` 模板：写入 `/.imagicma/port.json`，并同步 `process-compose.yaml` 的 `PORT`
+- `--theme <name>`：设置默认主题（`quadratic`、`nomad`、`honey`、`zen-garden`、`highlighter`）。
+- `-v, --version`：显示版本号。
 
 ## 依赖安装策略
 
-- 优先使用 `pnpm install`
-- 如果没有 `pnpm`，会尝试 `corepack pnpm install`
-- 如果依然不可用，会自动回退到 `npm install`
+- 优先 `pnpm install`
+- 无 `pnpm` 时尝试 `corepack pnpm install`
+- 仍不可用则回退 `npm install`
 
 ## 维护模板
 
-在脚手架目录执行（默认从同级的 `../nextjs-app` 同步）：
+在脚手架目录执行：
 
 ```bash
 pnpm run sync-template
 ```
 
-可通过环境变量自定义源仓库路径：
+默认同步：
+
+- `../nextjs-app` -> `template/`
+- `../hono-app` -> `template-hono/`
+
+可通过环境变量覆盖：
+
+```bash
+SOURCE_REPO_NEXT=/abs/path/to/nextjs-app \
+SOURCE_REPO_HONO=/abs/path/to/hono-app \
+pnpm run sync-template
+```
+
+兼容旧变量（仅 Next）：
 
 ```bash
-SOURCE_REPO=/abs/path/to/source pnpm run sync-template
+SOURCE_REPO=/abs/path/to/nextjs-app pnpm run sync-template
 ```

package/bin/create-next-imagicma.mjs

@@ -7,7 +7,12 @@ import { fileURLToPath } from "node:url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const TEMPLATE_DIR = path.resolve(__dirname, "..", "template");
+
+const TEMPLATE_DIR_NEXT = path.resolve(__dirname, "..", "template");
+const TEMPLATE_DIR_HONO = path.resolve(__dirname, "..", "template-hono");
+const TEMPLATE_CHOICES = ["hono", "next"];
+const DEFAULT_TEMPLATE = "hono";
+
 const THEME_STYLES = [
   "quadratic",
   "nomad",
@@ -17,6 +22,12 @@ const THEME_STYLES = [
 ];
 
 const PACKAGE_JSON_PATH = path.resolve(__dirname, "..", "package.json");
+const HONO_LOCKED_SCRIPTS = {
+  predev: "node ./scripts/imagicma-guard.mjs dev",
+  dev: "node ./scripts/imagicma-dev.mjs",
+  prestart: "node ./scripts/imagicma-guard.mjs start",
+  start: "node ./scripts/imagicma-start.mjs",
+};
 
 async function getVersion() {
   const raw = await fs.readFile(PACKAGE_JSON_PATH, "utf8");
@@ -25,13 +36,14 @@ async function getVersion() {
 }
 
 function printHelp() {
-  console.log(`create-next-imagicma <project-dir> [--port <1-65535>] [--theme <name>]
+  console.log(`create-next-imagicma <project-dir> [--template <hono|next>] [--port <1-65535>] [--theme <name>]
 
 参数：
-  --port <number>  设置新项目 dev/start 的默认端口（next ... -p）
-  --theme <name>   设置默认主题（可选：${THEME_STYLES.join(", ")}）
-  -h, --help       显示帮助
-  -v, --version    显示版本号
+  --template <name>  选择模板（可选：${TEMPLATE_CHOICES.join("、")}，默认：${DEFAULT_TEMPLATE}）
+  --port <number>    设置新项目默认端口
+  --theme <name>     设置默认主题（可选：${THEME_STYLES.join(", ")}）
+  -h, --help         显示帮助
+  -v, --version      显示版本号
 `);
 }
 
@@ -64,6 +76,21 @@ function parseTheme(raw) {
   return normalized;
 }
 
+function parseTemplate(raw) {
+  const normalized = String(raw ?? "").trim().toLowerCase();
+  if (!normalized) {
+    throw new Error("--template 缺少值：请使用 --template <hono|next>");
+  }
+
+  if (!TEMPLATE_CHOICES.includes(normalized)) {
+    throw new Error(
+      `--template 参数不合法：${JSON.stringify(raw)}（可选：${TEMPLATE_CHOICES.join("、")}）`,
+    );
+  }
+
+  return normalized;
+}
+
 function sanitizePackageName(raw) {
   const normalized = raw
     .toLowerCase()
@@ -76,6 +103,7 @@ function parseArgs(argv) {
   let projectDir;
   let port;
   let theme;
+  let template = DEFAULT_TEMPLATE;
 
   for (let i = 0; i < argv.length; i += 1) {
     const arg = argv[i];
@@ -118,6 +146,21 @@ function parseArgs(argv) {
       continue;
     }
 
+    if (arg === "--template") {
+      const value = argv[i + 1];
+      if (!value) {
+        throw new Error("--template 缺少值：请使用 --template <hono|next>");
+      }
+      template = parseTemplate(value);
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith("--template=")) {
+      template = parseTemplate(arg.slice("--template=".length));
+      continue;
+    }
+
     if (arg.startsWith("-")) {
       throw new Error(`未知参数：${arg}`);
     }
@@ -134,7 +177,14 @@ function parseArgs(argv) {
     throw new Error("缺少 <project-dir>：请指定要创建的项目目录名/路径");
   }
 
-  return { projectDir, port, theme, help: false, version: false };
+  return {
+    projectDir,
+    port,
+    theme,
+    template,
+    help: false,
+    version: false,
+  };
 }
 
 async function ensureTargetDirReady(targetDir) {
@@ -152,20 +202,30 @@ async function ensureTargetDirReady(targetDir) {
   }
 }
 
-async function updatePackageName(targetDir, port) {
+async function updatePackageName(targetDir, port, template) {
   const pkgPath = path.join(targetDir, "package.json");
   const raw = await fs.readFile(pkgPath, "utf8");
   const pkg = JSON.parse(raw);
-  const devScript = port === undefined ? "next dev" : `next dev -p ${port}`;
-  const startScript =
-    port === undefined ? "next start" : `next start -p ${port}`;
 
   pkg.name = sanitizePackageName(path.basename(targetDir));
-  pkg.scripts = {
-    ...(pkg.scripts ?? {}),
-    dev: devScript,
-    start: startScript,
-  };
+
+  if (template === "next") {
+    const devScript = port === undefined ? "next dev" : `next dev -p ${port}`;
+    const startScript =
+      port === undefined ? "next start" : `next start -p ${port}`;
+
+    pkg.scripts = {
+      ...(pkg.scripts ?? {}),
+      dev: devScript,
+      start: startScript,
+    };
+  } else {
+    pkg.scripts = {
+      ...(pkg.scripts ?? {}),
+      ...HONO_LOCKED_SCRIPTS,
+    };
+  }
+
   await fs.writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
 }
 
@@ -191,6 +251,34 @@ async function updateProcessComposePort(targetDir, port) {
   await fs.writeFile(filePath, next);
 }
 
+async function updateLockedPortFile(targetDir, port) {
+  if (port === undefined) return;
+
+  const filePath = path.join(targetDir, ".imagicma", "port.json");
+
+  let current = {};
+  try {
+    const raw = await fs.readFile(filePath, "utf8");
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") {
+      current = parsed;
+    }
+  } catch (error) {
+    if (!(error && typeof error === "object" && error.code === "ENOENT")) {
+      throw error;
+    }
+  }
+
+  const next = {
+    ...current,
+    port,
+    locked: true,
+    version: 1,
+  };
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.writeFile(filePath, `${JSON.stringify(next, null, 2)}\n`);
+}
+
 async function updateDefaultTheme(targetDir, theme) {
   if (theme === undefined) return;
 
@@ -250,7 +338,6 @@ async function initGit(targetDir) {
     }
     return true;
   } catch (_error) {
-    // 不存在 git 或其它异常时静默跳过，不报错
     return false;
   }
 }
@@ -293,6 +380,11 @@ async function installDependencies(targetDir) {
   }
 }
 
+function getTemplateDir(template) {
+  if (template === "next") return TEMPLATE_DIR_NEXT;
+  return TEMPLATE_DIR_HONO;
+}
+
 async function main() {
   const parsed = parseArgs(process.argv.slice(2));
   if (parsed.help) {
@@ -305,26 +397,31 @@ async function main() {
     return;
   }
 
-  const { projectDir, port, theme } = parsed;
+  const { projectDir, port, theme, template } = parsed;
   const targetDir = path.resolve(process.cwd(), projectDir);
+  const templateDir = getTemplateDir(template);
 
   await ensureTargetDirReady(targetDir);
 
-  await fs.cp(TEMPLATE_DIR, targetDir, {
+  await fs.cp(templateDir, targetDir, {
     recursive: true,
     force: true,
     errorOnExist: false,
   });
-  // npm publish 会默认排除 .gitignore，模板中以 gitignore 发布，此处还原为 .gitignore
+
   const gitignoreSrc = path.join(targetDir, "gitignore");
   try {
     await fs.access(gitignoreSrc);
     await fs.rename(gitignoreSrc, path.join(targetDir, ".gitignore"));
   } catch {
-    // 无 gitignore 则跳过（如本地开发时仍保留 .gitignore 的情况）
+    // ignore
   }
-  await updatePackageName(targetDir, port);
+
+  await updatePackageName(targetDir, port, template);
   await updateProcessComposePort(targetDir, port);
+  if (template === "hono") {
+    await updateLockedPortFile(targetDir, port);
+  }
   await updateDefaultTheme(targetDir, theme);
 
   await initGit(targetDir);
@@ -343,8 +440,9 @@ async function main() {
   }
 
   console.log(`\n✅ 项目已创建：${targetDir}`);
+  console.log(`模板类型：${template}`);
   if (port !== undefined) {
-    console.log(`已设置默认端口：${port}（写入 dev/start 启动命令）`);
+    console.log(`已设置默认端口：${port}`);
   }
   if (theme !== undefined) {
     console.log(`已设置默认主题：${theme}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-imagicma",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "bin": {
     "create-next-imagicma": "./bin/create-next-imagicma.mjs"
@@ -8,6 +8,7 @@
   "files": [
     "bin/**",
     "template/**",
+    "template-hono/**",
     "README.md"
   ],
   "scripts": {

package/template/app/globals.css

@@ -428,6 +428,337 @@
     transform: translateY(0px);
     box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
   }
+
+  @keyframes aurora-shift-x {
+    from {
+      background-position: 0% 50%;
+    }
+    to {
+      background-position: 200% 50%;
+    }
+  }
+
+  @keyframes aurora-shift-y {
+    from {
+      background-position: 50% 0%;
+    }
+    to {
+      background-position: 50% 200%;
+    }
+  }
+
+  @keyframes aurora-breathe {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 0.95;
+    }
+  }
+
+  @keyframes nebula-float-a {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(8%, 5%, 0) scale(1.08);
+    }
+  }
+
+  @keyframes nebula-float-b {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(-7%, 6%, 0) scale(1.12);
+    }
+  }
+
+  @keyframes nebula-float-c {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      transform: translate3d(5%, -6%, 0) scale(1.06);
+    }
+  }
+
+  @keyframes grain-shift {
+    0% {
+      transform: translate3d(0, 0, 0);
+    }
+    25% {
+      transform: translate3d(1%, -1%, 0);
+    }
+    50% {
+      transform: translate3d(-1%, 1%, 0);
+    }
+    75% {
+      transform: translate3d(0.5%, 1%, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes loader-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes loader-spin-reverse {
+    from {
+      transform: rotate(360deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes loader-core-breathe {
+    0%,
+    100% {
+      transform: scale(0.92);
+      opacity: 0.85;
+    }
+    50% {
+      transform: scale(1.04);
+      opacity: 1;
+    }
+  }
+
+  .nebula-orb {
+    position: absolute;
+    border-radius: 9999px;
+    mix-blend-mode: screen;
+    opacity: 0.72;
+    filter: blur(72px);
+    will-change: transform;
+  }
+
+  .nebula-orb-a {
+    left: -11rem;
+    top: -8rem;
+    height: 34rem;
+    width: 34rem;
+    background: radial-gradient(
+      circle,
+      rgba(56, 189, 248, 0.36) 0%,
+      rgba(99, 102, 241, 0.2) 45%,
+      rgba(255, 255, 255, 0) 72%
+    );
+    animation: nebula-float-a 16s ease-in-out infinite;
+  }
+
+  .nebula-orb-b {
+    right: -13rem;
+    top: 14%;
+    height: 38rem;
+    width: 38rem;
+    background: radial-gradient(
+      circle,
+      rgba(20, 184, 166, 0.33) 0%,
+      rgba(59, 130, 246, 0.16) 46%,
+      rgba(255, 255, 255, 0) 75%
+    );
+    animation: nebula-float-b 18s ease-in-out infinite;
+  }
+
+  .nebula-orb-c {
+    bottom: -16rem;
+    left: 26%;
+    height: 36rem;
+    width: 36rem;
+    background: radial-gradient(
+      circle,
+      rgba(167, 139, 250, 0.24) 0%,
+      rgba(56, 189, 248, 0.12) 45%,
+      rgba(255, 255, 255, 0) 74%
+    );
+    animation: nebula-float-c 15s ease-in-out infinite;
+  }
+
+  .nebula-grain {
+    position: absolute;
+    inset: -20%;
+    background-image: radial-gradient(rgba(15, 23, 42, 0.08) 0.7px, transparent 0.7px);
+    background-size: 3px 3px;
+    opacity: 0.08;
+    animation: grain-shift 8s steps(10) infinite;
+  }
+
+  .luxe-loader {
+    position: relative;
+    height: 96px;
+    width: 96px;
+  }
+
+  .luxe-loader__ring {
+    position: absolute;
+    border-radius: 9999px;
+    border: 2px solid transparent;
+  }
+
+  .luxe-loader__ring--outer {
+    inset: 0;
+    border-top-color: rgba(56, 189, 248, 0.98);
+    border-right-color: rgba(99, 102, 241, 0.94);
+    box-shadow:
+      0 0 18px rgba(56, 189, 248, 0.6),
+      inset 0 0 12px rgba(59, 130, 246, 0.15);
+    animation: loader-spin 1.35s linear infinite;
+  }
+
+  .luxe-loader__ring--inner {
+    inset: 13px;
+    border-left-color: rgba(20, 184, 166, 0.96);
+    border-bottom-color: rgba(56, 189, 248, 0.88);
+    box-shadow: 0 0 14px rgba(20, 184, 166, 0.45);
+    animation: loader-spin-reverse 1.05s linear infinite;
+  }
+
+  .luxe-loader__core {
+    position: absolute;
+    inset: 34px;
+    border-radius: 9999px;
+    background: radial-gradient(
+      circle at 35% 30%,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(210, 237, 255, 0.95) 42%,
+      rgba(107, 172, 255, 0.78) 100%
+    );
+    box-shadow:
+      0 0 24px rgba(56, 189, 248, 0.48),
+      0 0 34px rgba(99, 102, 241, 0.24);
+    animation: loader-core-breathe 2.1s ease-in-out infinite;
+  }
+
+  .luxe-loader__orbit {
+    position: absolute;
+    inset: 0;
+    animation: loader-spin 2.5s linear infinite;
+  }
+
+  .luxe-loader__dot {
+    position: absolute;
+    left: 50%;
+    top: 3px;
+    height: 9px;
+    width: 9px;
+    border-radius: 9999px;
+    transform: translateX(-50%);
+    background: radial-gradient(
+      circle at 30% 30%,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(167, 243, 255, 0.95) 35%,
+      rgba(34, 211, 238, 0.95) 100%
+    );
+    box-shadow:
+      0 0 10px rgba(34, 211, 238, 0.8),
+      0 0 18px rgba(56, 189, 248, 0.5);
+  }
+
+  .aurora-frame {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+  }
+
+  .aurora-edge {
+    position: absolute;
+    opacity: 0.95;
+    will-change: background-position, opacity;
+  }
+
+  .aurora-edge.is-glow {
+    filter: blur(16px);
+    opacity: 0.75;
+  }
+
+  .aurora-edge.top,
+  .aurora-edge.bottom {
+    left: 0;
+    right: 0;
+    height: 4px;
+    background-image: linear-gradient(
+      90deg,
+      rgba(16, 185, 129, 0.2),
+      rgba(34, 211, 238, 1),
+      rgba(59, 130, 246, 1),
+      rgba(16, 185, 129, 0.2)
+    );
+    background-size: 320% 100%;
+    box-shadow:
+      0 0 8px rgba(34, 211, 238, 0.9),
+      0 0 22px rgba(59, 130, 246, 0.65);
+    animation:
+      aurora-shift-x 5.2s linear infinite,
+      aurora-breathe 2.6s ease-in-out infinite;
+  }
+
+  .aurora-edge.top {
+    top: 0;
+  }
+
+  .aurora-edge.bottom {
+    bottom: 0;
+    animation-direction: reverse, normal;
+  }
+
+  .aurora-edge.left,
+  .aurora-edge.right {
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background-image: linear-gradient(
+      180deg,
+      rgba(16, 185, 129, 0.2),
+      rgba(34, 211, 238, 1),
+      rgba(59, 130, 246, 1),
+      rgba(16, 185, 129, 0.2)
+    );
+    background-size: 100% 320%;
+    box-shadow:
+      0 0 8px rgba(34, 211, 238, 0.85),
+      0 0 20px rgba(59, 130, 246, 0.6);
+    animation:
+      aurora-shift-y 5.8s linear infinite,
+      aurora-breathe 3s ease-in-out infinite;
+  }
+
+  .aurora-edge.left {
+    left: 0;
+  }
+
+  .aurora-edge.right {
+    right: 0;
+    animation-direction: reverse, normal;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nebula-orb,
+    .nebula-grain,
+    .luxe-loader__ring--outer,
+    .luxe-loader__ring--inner,
+    .luxe-loader__core,
+    .luxe-loader__orbit {
+      animation: none;
+    }
+
+    .aurora-edge {
+      animation: none;
+      opacity: 0.75;
+    }
+  }
 }
 
 html[data-preview-shield="on"] nextjs-portal,

package/template/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
+import Script from "next/script";
 import "./globals.css";
-import { DevPreviewShield } from "./_components/DevPreviewShield";
+// import { DevPreviewShield } from "./_components/DevPreviewShield";
 import { Providers } from "./providers";
 import { DEFAULT_THEME_STYLE } from "@/lib/theme/default-theme";
 
@@ -21,12 +22,9 @@ export default function RootLayout({
       data-theme-style={DEFAULT_THEME_STYLE}
     >
       <body className="antialiased">
+        <Script src="/imagicma-picker-bridge.js" strategy="beforeInteractive" />
         <Providers>
-          {process.env.NODE_ENV === "development" ? (
-            <DevPreviewShield>{children}</DevPreviewShield>
-          ) : (
-            children
-          )}
+          {children}
         </Providers>
       </body>
     </html>