Skip to content

fix(dice-verse): fix vite config #7

fix(dice-verse): fix vite config

fix(dice-verse): fix vite config #7

Workflow file for this run

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