cf-yoyo 1.0.0

package/src/types/index.ts

@@ -0,0 +1,259 @@
+/**
+ * 類型定義模組
+ * 定義 CLI 工具使用的所有 TypeScript 類型
+ */
+
+/**
+ * 程式語言列舉
+ * 支援 TypeScript 和 JavaScript
+ */
+export enum Language {
+  TYPESCRIPT = 'typescript',
+  JAVASCRIPT = 'javascript',
+}
+
+/**
+ * 專案類型列舉
+ */
+export enum ProjectType {
+  WORKER = 'worker',
+  PAGES = 'pages',
+  D1 = 'd1',
+  KV = 'kv',
+  R2 = 'r2',
+}
+
+/**
+ * 模板類型列舉
+ */
+export enum TemplateType {
+  BASIC = 'basic',
+  HONO = 'hono',
+  ITTY_ROUTER = 'itty-router',
+  STATIC = 'static',
+  REACT = 'react',
+  VUE = 'vue',
+  NEXTJS = 'nextjs',
+}
+
+/**
+ * 專案配置接口
+ */
+export interface ProjectConfig {
+  /** 專案名稱 */
+  projectName: string;
+  /** 程式語言 */
+  language: Language;
+  /** 專案類型 */
+  projectType: ProjectType;
+  /** 模板類型 */
+  template: TemplateType;
+  /** 是否初始化 Git 倉庫 */
+  initGit: boolean;
+  /** 是否安裝依賴 */
+  installDeps: boolean;
+  /** 目標目錄路徑 */
+  targetDir: string;
+  /** Node.js 版本 */
+  nodeVersion: string;
+  /** TypeScript 版本（僅適用於 TypeScript） */
+  tsVersion: string;
+}
+
+/**
+ * 用戶輸入接口
+ */
+export interface UserInput {
+  projectName?: string;
+  language?: Language;
+  projectType?: ProjectType;
+  template?: TemplateType;
+  initGit?: boolean;
+  installDeps?: boolean;
+}
+
+/**
+ * 命令選項接口
+ */
+export interface CommandOptions {
+  template?: string;
+  git?: boolean;
+  install?: boolean;
+}
+
+/**
+ * 模板信息接口
+ */
+export interface TemplateInfo {
+  /** 模板 ID */
+  id: string;
+  /** 模板名稱 */
+  name: string;
+  /** 模板描述 */
+  description: string;
+  /** 適用專案類型 */
+  projectType: ProjectType;
+  /** 模板語言 */
+  language: Language;
+  /** 模板路徑 */
+  path: string;
+}
+
+/**
+ * 檔案系統操作結果
+ */
+export interface FileSystemResult {
+  /** 是否成功 */
+  success: boolean;
+  /** 錯誤訊息（如有） */
+  error?: string;
+  /** 創建的檔案列表 */
+  files?: string[];
+  /** 創建的目錄列表 */
+  directories?: string[];
+}
+
+/**
+ * 衝突處理選項
+ */
+export interface ConflictResolution {
+  /** 覆蓋所有 */
+  overwriteAll?: boolean;
+  /** 跳過所有 */
+  skipAll?: boolean;
+  /** 當前操作 */
+  action: 'overwrite' | 'skip' | 'abort';
+}
+
+/**
+ * 日誌級別
+ */
+export enum LogLevel {
+  DEBUG = 'debug',
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error',
+}
+
+/**
+ * 日誌選項
+ */
+export interface LoggerOptions {
+  /** 日誌級別 */
+  level?: LogLevel;
+  /** 是否顯示時間戳 */
+  timestamp?: boolean;
+  /** 是否使用彩色輸出 */
+  color?: boolean;
+  /** 是否靜默模式（不輸出任何日誌） */
+  silent?: boolean;
+}
+
+/**
+ * 模板上下文介面
+ * 用於模板渲染的變數對象
+ */
+export interface TemplateContext {
+  [key: string]: unknown;
+  projectName: string;
+  projectType: string;
+  template: string;
+  author?: string;
+  email?: string;
+  description?: string;
+  version?: string;
+  license?: string;
+  year?: number;
+  date?: string;
+  timestamp?: string;
+  isWorker?: boolean;
+  isPages?: boolean;
+  isD1?: boolean;
+  isKV?: boolean;
+  isR2?: boolean;
+  isHono?: boolean;
+  isReact?: boolean;
+  isVue?: boolean;
+  isNextjs?: boolean;
+}
+
+/**
+ * 模板檔案定義
+ */
+export interface TemplateFile {
+  /** 目標檔案路徑（可包含變數，例如：__projectName__.ts） */
+  targetPath: string;
+  /** 來源模板檔案路徑（可選，與 content 二選一） */
+  sourcePath?: string | undefined;
+  /** 內嵌模板內容（可選，與 sourcePath 二選一） */
+  content?: string | undefined;
+}
+
+/**
+ * 模板配置介面
+ */
+export interface TemplateConfig {
+  /** 模板名稱 */
+  name: string;
+  /** 模板描述 */
+  description: string;
+  /** 專案類型 */
+  projectType: ProjectType;
+  /** 模板類型 */
+  templateType: TemplateType;
+  /** 模板檔案列表 */
+  files: TemplateFile[];
+  /** 需要的變數 */
+  requiredVars?: string[];
+  /** 可選變數 */
+  optionalVars?: string[];
+}
+
+/**
+ * 模板渲染結果
+ */
+export interface TemplateRenderResult {
+  /** 是否成功 */
+  success: boolean;
+  /** 生成的檔案列表 */
+  files: string[];
+  /** 錯誤列表 */
+  errors: Array<{ file: string; error: string }>;
+}
+
+/**
+ * 渲染選項
+ */
+export interface RenderOptions {
+  /** 是否轉義 HTML 實體 */
+  escapeHtml?: boolean;
+}
+
+/**
+ * Git 操作結果
+ */
+export interface GitResult {
+  /** 是否成功 */
+  success: boolean;
+  /** 結果訊息 */
+  message: string;
+  /** 輸出內容（可選） */
+  output?: string | undefined;
+}
+
+/**
+ * Git Token 資料結構
+ */
+export interface GitToken {
+  id: string;
+  name: string;
+  token: string;
+  createdAt: string;
+}
+
+/**
+ * Git Token 配置結構
+ */
+export interface GitTokenConfig {
+  tokens: GitToken[];
+}

package/src/utils/logger.ts

@@ -0,0 +1,150 @@
+/**
+ * 日誌輸出工具模組
+ * 提供統一的日誌輸出接口，支援分級、彩色輸出
+ */
+
+import chalk from 'chalk';
+import { LogLevel, LoggerOptions } from '../types';
+
+/**
+ * 日誌類
+ * 負責終端輸出的格式化與美化
+ */
+class LoggerClass {
+  private level: LogLevel;
+  private showTimestamp: boolean;
+  private useColor: boolean;
+  private silent: boolean;
+
+  constructor(options: LoggerOptions = {}) {
+    this.level = options.level ?? LogLevel.INFO;
+    this.showTimestamp = options.timestamp ?? false;
+    this.useColor = options.color ?? true;
+    this.silent = options.silent ?? false;
+  }
+
+  /**
+   * 設定日誌級別
+   */
+  setLevel(level: LogLevel): void {
+    this.level = level;
+  }
+
+  /**
+   * 獲取當前日誌級別
+   */
+  getLevel(): LogLevel {
+    return this.level;
+  }
+
+  /**
+   * 檢查是否應該輸出指定級別的日誌
+   */
+  private shouldLog(level: LogLevel): boolean {
+    if (this.silent) return false;
+    const levels: LogLevel[] = [LogLevel.DEBUG, LogLevel.INFO, LogLevel.WARN, LogLevel.ERROR];
+    const currentIndex = levels.indexOf(level);
+    const thresholdIndex = levels.indexOf(this.level);
+    return currentIndex >= thresholdIndex;
+  }
+
+  /**
+   * 格式化時間戳
+   */
+  private getTimestamp(): string {
+    if (!this.showTimestamp) {
+      return '';
+    }
+    const now = new Date();
+    const timestamp = now.toISOString().replace('T', ' ').substring(0, 19);
+    return chalk.dim(`[${timestamp}] `);
+  }
+
+  /**
+   * 輸出調試訊息
+   */
+  debug(message: string): void {
+    if (this.shouldLog(LogLevel.DEBUG)) {
+      const timestamp = this.getTimestamp();
+      console.log(`${timestamp}${chalk.gray('DEBUG')} ${message}`);
+    }
+  }
+
+  /**
+   * 輸出普通訊息
+   */
+  info(message: string): void {
+    if (this.shouldLog(LogLevel.INFO)) {
+      const timestamp = this.getTimestamp();
+      console.log(`${timestamp}${chalk.blue('INFO')}  ${message}`);
+    }
+  }
+
+  /**
+   * 輸出警告訊息
+   */
+  warn(message: string): void {
+    if (this.shouldLog(LogLevel.WARN)) {
+      const timestamp = this.getTimestamp();
+      console.log(`${timestamp}${chalk.yellow('WARN')}  ${message}`);
+    }
+  }
+
+  /**
+   * 輸出錯誤訊息
+   */
+  error(message: string): void {
+    if (this.shouldLog(LogLevel.ERROR)) {
+      const timestamp = this.getTimestamp();
+      console.log(`${timestamp}${chalk.red('ERROR')} ${message}`);
+    }
+  }
+
+  /**
+   * 輸出成功訊息
+   */
+  success(message: string): void {
+    if (this.shouldLog(LogLevel.INFO)) {
+      const timestamp = this.getTimestamp();
+      console.log(`${timestamp}${chalk.green('SUCCESS')}  ${message}`);
+    }
+  }
+
+  /**
+   * 輸出帶圖標的訊息
+   */
+  icon(icon: string, message: string): void {
+    if (this.shouldLog(LogLevel.INFO)) {
+      const timestamp = this.getTimestamp();
+      const coloredIcon = this.useColor ? icon : `[${icon}]`;
+      console.log(`${timestamp}${coloredIcon} ${message}`);
+    }
+  }
+
+  /**
+   * 輸出空行
+   */
+  empty(): void {
+    console.log('');
+  }
+
+  /**
+   * 輸出分隔線
+   */
+  divider(char: string = '─', length: number = 40): void {
+    if (this.useColor) {
+      console.log(chalk.dim(char.repeat(length)));
+    } else {
+      console.log(char.repeat(length));
+    }
+  }
+}
+
+// 匯出單例
+export const logger = new LoggerClass();
+
+// 預設匯出
+export default logger;
+
+// 型別匯出
+export { LoggerClass };

package/templates/pages/basic/README.md.mustache

@@ -0,0 +1,63 @@
+# {{projectName}}
+
+{{description}}
+
+這是一個基於 Cloudflare Pages 的靜態網站專案，使用 create-cf-project 腳手架工具建立。
+
+## 快速開始
+
+### 安裝依賴
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 開發模式
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+這會啟動本地開發伺服器，你可以在 http://localhost:8788 預覽網站。
+
+### 部署
+
+\`\`\`bash
+npm run deploy
+\`\`\`
+
+## 專案結構
+
+\`\`\`
+{{projectName}}/
+├── public/               # 靜態資源目錄
+│   ├── index.html        # 首頁
+│   ├── css/              # 樣式表
+│   │   └── style.css
+│   └── js/               # JavaScript
+│       └── main.js
+├── package.json          # 專案配置
+├── tsconfig.json         # TypeScript 配置
+├── wrangler.toml         # Cloudflare 配置
+└── README.md             # 本文件
+\`\`\`
+
+## 技術細節
+
+- **平台**: Cloudflare Pages
+- **類型**: 靜態網站
+- **語言**: HTML5, CSS3, JavaScript (ES2022)
+
+## 自定義
+
+你可以隨意修改 `public/` 目錄下的檔案來自定義你的網站：
+
+- 編輯 `index.html` 修改內容
+- 編輯 `css/style.css` 修改樣式
+- 編輯 `js/main.js` 添加交互功能
+
+## 授權
+
+{{#license}}{{license}}{{/license}}{{^license}}MIT{{/license}}
+
+建立於 {{date}} | {{year}}

package/templates/pages/basic/package.json.mustache

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "{{description}}",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler pages dev public",
+    "deploy": "wrangler pages deploy public",
+    "build": "echo '靜態網站無需建置'",
+    "preview": "wrangler pages dev public --port 8788"
+  },
+  "keywords": [
+    "cloudflare",
+    "pages",
+    "static",
+    "edge"
+  ],
+  "author": "{{#author}}{{author}}{{/author}}{{^author}}Anonymous{{/author}}",
+  "license": "{{#license}}{{license}}{{/license}}{{^license}}MIT{{/license}}",
+  "devDependencies": {
+    "wrangler": "^3.39.0"
+  }
+}

package/templates/pages/basic/public/css/style.css

@@ -0,0 +1,199 @@
+/**
+ * 主樣式表
+ * {{projectName}}
+ */
+
+/* CSS 變數 */
+:root {
+  --primary-color: #667eea;
+  --secondary-color: #764ba2;
+  --text-color: #333;
+  --text-light: #666;
+  --bg-color: #f8f9fa;
+  --card-bg: #fff;
+  --border-radius: 12px;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* 重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--text-color);
+  background: var(--bg-color);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+/* Hero 區塊 */
+.hero {
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: white;
+  padding: 6rem 0;
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.hero .description {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  line-height: 1.7;
+}
+
+.badges {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.badge {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* 功能區塊 */
+.features {
+  padding: 4rem 0;
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 3rem;
+  color: var(--text-color);
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.feature-card {
+  background: var(--card-bg);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-lg);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+}
+
+.feature-card p {
+  color: var(--text-light);
+  line-height: 1.6;
+}
+
+/* CTA 區塊 */
+.cta {
+  padding: 4rem 0;
+  text-align: center;
+}
+
+.cta h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.cta p {
+  color: var(--text-light);
+  margin-bottom: 2rem;
+}
+
+.code-block {
+  background: #1e1e1e;
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+  max-width: 500px;
+  margin: 0 auto;
+  text-align: left;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: 'Fira Code', 'Consolas', monospace;
+  font-size: 0.9rem;
+  color: #d4d4d4;
+  line-height: 1.5;
+}
+
+.code-block .comment {
+  color: #6a9955;
+}
+
+/* Footer */
+footer {
+  background: var(--text-color);
+  color: white;
+  padding: 2rem 0;
+  text-align: center;
+}
+
+footer p {
+  opacity: 0.8;
+  margin: 0.5rem 0;
+}
+
+/* 響應式 */
+@media (max-width: 768px) {
+  .hero {
+    padding: 4rem 0;
+  }
+
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero .description {
+    font-size: 1rem;
+  }
+
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .feature-card {
+    padding: 1.5rem;
+  }
+}