fix(dice-verse): fix react router #8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deploy to GitHub Pages | |
| on: | |
| push: | |
| branches: [ main, master ] | |
| pull_request: | |
| branches: [ main, master ] | |
| # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | |
| # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. | |
| concurrency: | |
| group: "pages" | |
| cancel-in-progress: false | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Setup Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '18' | |
| cache: 'npm' | |
| cache-dependency-path: 'apps/dice-verse/package-lock.json' | |
| - name: Install dependencies | |
| run: | | |
| cd apps/dice-verse | |
| npm ci | |
| - name: Build dice-verse | |
| run: | | |
| cd apps/dice-verse | |
| npm run build | |
| - name: Create main index.html | |
| run: | | |
| mkdir -p dist | |
| cat > dist/index.html << 'EOF' | |
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Weekly Vibe Coding - 一百个创意应用</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 40px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| text-align: center; | |
| max-width: 900px; | |
| width: 100%; | |
| } | |
| h1 { | |
| color: #333; | |
| margin-bottom: 20px; | |
| font-size: 2.5rem; | |
| } | |
| .subtitle { | |
| color: #666; | |
| margin-bottom: 40px; | |
| font-size: 1.2rem; | |
| } | |
| .deployment-info { | |
| background: #f0f8ff; | |
| border-left: 4px solid #667eea; | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| text-align: left; | |
| border-radius: 8px; | |
| } | |
| .deployment-info h3 { | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .deployment-info p { | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| .apps-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 25px; | |
| margin-top: 30px; | |
| } | |
| .app-card { | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 30px 20px; | |
| text-decoration: none; | |
| color: #333; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .app-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.15); | |
| border-color: #667eea; | |
| } | |
| .app-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #667eea, #764ba2); | |
| } | |
| .app-icon { | |
| font-size: 3.5rem; | |
| margin-bottom: 15px; | |
| } | |
| .app-title { | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .app-desc { | |
| color: #666; | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| .app-status { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| } | |
| .status-live { | |
| background: #e8f5e8; | |
| color: #2d5a2d; | |
| } | |
| .status-coming { | |
| background: #fff3cd; | |
| color: #856404; | |
| } | |
| .coming-soon { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| .coming-soon:hover { | |
| transform: none; | |
| box-shadow: none; | |
| border-color: transparent; | |
| } | |
| .footer { | |
| margin-top: 40px; | |
| padding-top: 20px; | |
| border-top: 1px solid #eee; | |
| color: #999; | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎯 Weekly Vibe Coding</h1> | |
| <p class="subtitle">用提示词实现一百个创意应用</p> | |
| <div class="deployment-info"> | |
| <h3>🚀 GitHub Pages 部署</h3> | |
| <p>本项目采用 GitHub Actions 自动部署到 GitHub Pages，每次推送到主分支时自动构建和部署所有应用。</p> | |
| </div> | |
| <div class="apps-grid"> | |
| <a href="./dice-verse/" class="app-card"> | |
| <div class="app-icon">🎲</div> | |
| <div class="app-title">Dice Verse</div> | |
| <div class="app-desc">多功能骰子应用，支持各种游戏场景的骰子投掷和统计功能</div> | |
| <span class="app-status status-live">✅ 已部署</span> | |
| </a> | |
| <div class="app-card coming-soon"> | |
| <div class="app-icon">📝</div> | |
| <div class="app-title">Todo Master</div> | |
| <div class="app-desc">智能待办事项管理器，支持优先级、分类和提醒功能</div> | |
| <span class="app-status status-coming">🚧 开发中</span> | |
| </div> | |
| <div class="app-card coming-soon"> | |
| <div class="app-icon">🎨</div> | |
| <div class="app-title">Color Palette</div> | |
| <div class="app-desc">专业调色板工具，支持色彩搭配和导出功能</div> | |
| <span class="app-status status-coming">🚧 开发中</span> | |
| </div> | |
| <div class="app-card coming-soon"> | |
| <div class="app-icon">⏱️</div> | |
| <div class="app-title">Pomodoro Timer</div> | |
| <div class="app-desc">番茄工作法计时器，帮助提高工作效率和专注力</div> | |
| <span class="app-status status-coming">🚧 开发中</span> | |
| </div> | |
| <div class="app-card coming-soon"> | |
| <div class="app-icon">🌤️</div> | |
| <div class="app-title">Weather Dashboard</div> | |
| <div class="app-desc">精美的天气仪表板，提供详细的天气信息和预报</div> | |
| <span class="app-status status-coming">🚧 开发中</span> | |
| </div> | |
| <div class="app-card coming-soon"> | |
| <div class="app-icon">💰</div> | |
| <div class="app-title">Expense Tracker</div> | |
| <div class="app-desc">个人财务管理工具，记录和分析日常支出</div> | |
| <span class="app-status status-coming">🚧 开发中</span> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>🎯 目标：用提示词实现一百个创意应用 | 当前进度：1/100</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| EOF | |
| - name: Copy dice-verse build to dist | |
| run: | | |
| cp -r apps/dice-verse/dist dist/dice-verse | |
| - name: Setup Pages | |
| uses: actions/configure-pages@v4 | |
| - name: Upload artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: './dist' | |
| deploy: | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| runs-on: ubuntu-latest | |
| needs: build | |
| if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' | |
| steps: | |
| - name: Deploy to GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v4 |