cf-yoyo 1.0.0

package/templates/pages/basic-js/public/js/main.js

@@ -0,0 +1,134 @@
+/**
+ * 主要 JavaScript 檔案
+ * Cloudflare Pages 靜態網站
+ */
+
+// 等待 DOM 加載完成
+document.addEventListener('DOMContentLoaded', () => {
+  initTimestamp();
+  initButton();
+});
+
+/**
+ * 初始化時間戳顯示
+ */
+function initTimestamp() {
+  const timestampElement = document.getElementById('timestamp');
+  if (timestampElement) {
+    updateTimestamp(timestampElement);
+    // 每秒更新時間
+    setInterval(() => updateTimestamp(timestampElement), 1000);
+  }
+}
+
+/**
+ * 更新時間戳
+ * @param {HTMLElement} element - 時間戳元素
+ */
+function updateTimestamp(element) {
+  const now = new Date();
+  const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  };
+  element.textContent = now.toLocaleString('zh-TW', options);
+}
+
+/**
+ * 初始化按鈕事件
+ */
+function initButton() {
+  const clickBtn = document.getElementById('clickBtn');
+  const messageElement = document.getElementById('message');
+
+  if (clickBtn && messageElement) {
+    let clickCount = 0;
+    const messages = [
+      '你好！這是你的第一個 Cloudflare Pages 網站 🎉',
+      '繼續點擊！你會發現更多驚喜 ✨',
+      '太棒了！你已經點擊 3 次了 🚀',
+      '還在點？你真的很喜歡這個按鈕呢 😄',
+      '哇！你已經成為點擊大師了 🏆',
+      '好吧，這是最後一條訊息了，謝謝你的支持！🙏',
+    ];
+
+    clickBtn.addEventListener('click', () => {
+      clickCount++;
+
+      // 根據點擊次數顯示不同訊息
+      const messageIndex = Math.min(clickCount - 1, messages.length - 1);
+      messageElement.textContent = `${messages[messageIndex]} (點擊次數: ${clickCount})`;
+
+      // 添加動畫效果
+      messageElement.style.animation = 'none';
+      messageElement.offsetHeight; // 觸發重繪
+      messageElement.style.animation = 'fadeIn 0.3s ease';
+
+      // 按鈕動畫
+      clickBtn.style.transform = 'scale(0.95)';
+      setTimeout(() => {
+        clickBtn.style.transform = 'scale(1)';
+      }, 100);
+
+      console.log(`Button clicked ${clickCount} times`);
+    });
+  }
+}
+
+/**
+ * 工具函數：格式化日期
+ * @param {Date} date - 日期對象
+ * @returns {string} 格式化後的日期字串
+ */
+export function formatDate(date) {
+  return new Intl.DateTimeFormat('zh-TW', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+}
+
+/**
+ * 工具函數：防抖
+ * @param {Function} func - 要防抖的函數
+ * @param {number} wait - 等待時間（毫秒）
+ * @returns {Function} 防抖後的函數
+ */
+export function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+/**
+ * 工具函數：節流
+ * @param {Function} func - 要節流的函數
+ * @param {number} limit - 限制時間（毫秒）
+ * @returns {Function} 節流後的函數
+ */
+export function throttle(func, limit) {
+  let inThrottle;
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+// 導出主要功能（支援 ES Module）
+export { initTimestamp, initButton };
+
+console.log('🚀 Cloudflare Pages site loaded!');

package/templates/pages/basic-js/template.json

@@ -0,0 +1,35 @@
+{
+  "name": "基礎 Cloudflare Pages (JavaScript)",
+  "description": "純靜態 HTML/CSS/JS 的 Cloudflare Pages 專案，使用 JavaScript",
+  "projectType": "pages",
+  "templateType": "static",
+  "language": "javascript",
+  "files": [
+    {
+      "sourcePath": "package.json.mustache",
+      "targetPath": "package.json"
+    },
+    {
+      "sourcePath": "wrangler.toml.mustache",
+      "targetPath": "wrangler.toml"
+    },
+    {
+      "sourcePath": "public/index.html.mustache",
+      "targetPath": "public/index.html"
+    },
+    {
+      "sourcePath": "public/css/style.css",
+      "targetPath": "public/css/style.css"
+    },
+    {
+      "sourcePath": "public/js/main.js",
+      "targetPath": "public/js/main.js"
+    },
+    {
+      "sourcePath": "README.md.mustache",
+      "targetPath": "README.md"
+    }
+  ],
+  "requiredVars": ["projectName", "projectType", "template"],
+  "optionalVars": ["author", "email", "description", "license"]
+}

package/templates/pages/basic-js/wrangler.toml.mustache

@@ -0,0 +1,14 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "{{projectName}}"
+
+# Cloudflare Pages 配置
+[build]
+command = ""
+
+[site]
+bucket = "./public"
+
+# 環境變數
+[env.production]
+
+[env.development]

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

@@ -0,0 +1,97 @@
+# {{projectName}}
+
+{{description}}
+
+這是一個基於 React + Vite + TypeScript 的 Cloudflare Pages 專案，使用 create-cf-project 腳手架工具建立。
+
+## 🚀 快速開始
+
+### 安裝依賴
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 開發模式
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+這會啟動 Vite 開發伺服器，你可以在 http://localhost:3000 預覽網站。
+
+### 建置
+
+\`\`\`bash
+npm run build
+\`\`\`
+
+### 預覽生產版本
+
+\`\`\`bash
+npm run preview
+\`\`\`
+
+### 部署
+
+\`\`\`bash
+npm run deploy
+\`\`\`
+
+## 📁 專案結構
+
+\`\`\`
+{{projectName}}/
+├── src/                  # 原始碼目錄
+│   ├── App.tsx          # 主應用組件
+│   ├── App.css          # 應用樣式
+│   ├── main.tsx         # 入口檔案
+│   ├── index.css        # 全局樣式
+│   └── vite-env.d.ts    # Vite 類型定義
+├── dist/                # 建置輸出（由 Vite 生成）
+├── index.html           # HTML 入口
+├── vite.config.ts       # Vite 配置
+├── tsconfig.json        # TypeScript 配置
+├── tsconfig.node.json   # Node 類型配置
+├── package.json         # 專案配置
+└── README.md            # 本文件
+\`\`\`
+
+## 🛠️ 技術棧
+
+- **框架**: React 18
+- **語言**: TypeScript
+- **構建工具**: Vite
+- **部署平台**: Cloudflare Pages
+- **包管理器**: npm
+
+## 📚 可用腳本
+
+| 腳本 | 描述 |
+|------|------|
+| `npm run dev` | 啟動開發伺服器 |
+| `npm run build` | 建置生產版本 |
+| `npm run preview` | 預覽生產版本 |
+| `npm run deploy` | 部署到 Cloudflare Pages |
+| `npm run lint` | 執行 ESLint |
+| `npm run type-check` | 執行 TypeScript 類型檢查 |
+
+## 🎨 自定義
+
+你可以隨意修改 `src/` 目錄下的檔案來自定義你的應用：
+
+- 編輯 `src/App.tsx` 修改主頁內容
+- 編輯 `src/App.css` 修改樣式
+- 添加新組件到 `src/components/`
+
+## 📖 相關資源
+
+- [React 文檔](https://react.dev)
+- [Vite 文檔](https://vitejs.dev)
+- [Cloudflare Pages 文檔](https://developers.cloudflare.com/pages/)
+
+## 📝 授權
+
+{{#license}}{{license}}{{/license}}{{^license}}MIT{{/license}}
+
+建立於 {{date}} | {{year}}

package/templates/pages/react/index.html.mustache

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-TW">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <meta name="description" content="{{description}}">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/pages/react/package.json.mustache

@@ -0,0 +1,34 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "{{description}}",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "wrangler pages dev dist",
+    "deploy": "wrangler pages deploy dist",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.3.0",
+    "vite": "^5.1.0",
+    "wrangler": "^3.39.0"
+  },
+  "author": "{{#author}}{{author}}{{/author}}{{^author}}Anonymous{{/author}}",
+  "license": "{{#license}}{{license}}{{/license}}{{^license}}MIT{{/license}}"
+}

package/templates/pages/react/src/App.css

@@ -0,0 +1,168 @@
+/* 主應用樣式 */
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 6rem 2rem;
+  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);
+}
+
+.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;
+}
+
+.card {
+  background: #f8f9fa;
+  padding: 3rem;
+  text-align: center;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.card button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  font-size: 1.1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  font-weight: 600;
+}
+
+.card button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.card p {
+  margin-top: 1.5rem;
+  color: #666;
+}
+
+.card code {
+  background: #e9ecef;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'Fira Code', monospace;
+}
+
+.features {
+  padding: 4rem 2rem;
+  flex: 1;
+  background: white;
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 2rem;
+  margin-bottom: 3rem;
+  color: #333;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-card {
+  background: #f8f9fa;
+  padding: 2rem;
+  border-radius: 12px;
+  text-align: center;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+.feature-card p {
+  color: #666;
+  line-height: 1.6;
+}
+
+footer {
+  background: #333;
+  color: white;
+  padding: 2rem;
+  text-align: center;
+}
+
+footer p {
+  opacity: 0.8;
+  margin: 0.5rem 0;
+}
+
+@media (max-width: 768px) {
+  .hero {
+    padding: 4rem 1.5rem;
+  }
+
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+
+  .card {
+    padding: 2rem 1.5rem;
+  }
+
+  .features {
+    padding: 3rem 1.5rem;
+  }
+}

package/templates/pages/react/src/App.tsx.mustache

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import './App.css';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="app">
+      <div className="hero">
+        <h1>⚡ {{projectName}}</h1>
+        <p className="description">{{description}}</p>
+        <div className="badges">
+          <span className="badge">React</span>
+          <span className="badge">Vite</span>
+          <span className="badge">Cloudflare Pages</span>
+        </div>
+      </div>
+
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+
+      <div className="features">
+        <h2>✨ 技術棧</h2>
+        <div className="feature-grid">
+          <div className="feature-card">
+            <div className="feature-icon">⚛️</div>
+            <h3>React 18</h3>
+            <p>最新版本的 React，包含 Concurrent Features</p>
+          </div>
+          <div className="feature-card">
+            <div className="feature-icon">🔥</div>
+            <h3>Vite</h3>
+            <p>下一代前端工具鏈，極速的開發體驗</p>
+          </div>
+          <div className="feature-card">
+            <div className="feature-icon">📘</div>
+            <h3>TypeScript</h3>
+            <p>靜態類型檢查，提升代碼質量</p>
+          </div>
+          <div className="feature-card">
+            <div className="feature-icon">🚀</div>
+            <h3>Cloudflare Pages</h3>
+            <p>全球邊緣部署，極速載入</p>
+          </div>
+        </div>
+      </div>
+
+      <footer>
+        <p>建立於 {{date}} | {{year}}</p>
+        <p>使用 create-cf-project 生成</p>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

package/templates/pages/react/src/index.css

@@ -0,0 +1,53 @@
+/* 全局樣式 */
+:root {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+}
+
+/* 滾動條樣式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* 選中文字樣式 */
+::selection {
+  background: rgba(102, 126, 234, 0.3);
+}

package/templates/pages/react/src/main.tsx.mustache

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/pages/react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/pages/react/template.json

@@ -0,0 +1,54 @@
+{
+  "name": "React Cloudflare Pages",
+  "description": "使用 React 框架的 Cloudflare Pages 專案，支援現代前端開發",
+  "projectType": "pages",
+  "templateType": "react",
+  "files": [
+    {
+      "sourcePath": "package.json.mustache",
+      "targetPath": "package.json"
+    },
+    {
+      "sourcePath": "vite.config.ts",
+      "targetPath": "vite.config.ts"
+    },
+    {
+      "sourcePath": "index.html.mustache",
+      "targetPath": "index.html"
+    },
+    {
+      "sourcePath": "src/main.tsx.mustache",
+      "targetPath": "src/main.tsx"
+    },
+    {
+      "sourcePath": "src/App.tsx.mustache",
+      "targetPath": "src/App.tsx"
+    },
+    {
+      "sourcePath": "src/App.css",
+      "targetPath": "src/App.css"
+    },
+    {
+      "sourcePath": "src/index.css",
+      "targetPath": "src/index.css"
+    },
+    {
+      "sourcePath": "src/vite-env.d.ts",
+      "targetPath": "src/vite-env.d.ts"
+    },
+    {
+      "sourcePath": "tsconfig.json",
+      "targetPath": "tsconfig.json"
+    },
+    {
+      "sourcePath": "tsconfig.node.json",
+      "targetPath": "tsconfig.node.json"
+    },
+    {
+      "sourcePath": "README.md.mustache",
+      "targetPath": "README.md"
+    }
+  ],
+  "requiredVars": ["projectName", "projectType", "template"],
+  "optionalVars": ["author", "email", "description", "license"]
+}