deploy.sh

#!/bin/bash

# 3D Dev Skill 深度优化 - 一键部署脚本
# 使用方法：chmod +x deploy.sh && ./deploy.sh

set -e  # 遇到错误立即退出

echo "🚀 3D Dev Skill 深度优化 - 自动部署"
echo "========================================"
echo ""

# 颜色定义
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
NC='\033[0m' # No Color

# 配置
OPTIMIZATION_DIR="$HOME/Documents/AICode/3d-dev-skill-optimization"
TARGET_DIR="$HOME/Documents/3d-dev-skill"
GITHUB_REPO="AIPMAndy/3d-dev-skill"

# 检查优化文件是否存在
if [ ! -d "$OPTIMIZATION_DIR" ]; then
    echo -e "${RED}❌ 错误：找不到优化文件目录${NC}"
    echo "预期位置：$OPTIMIZATION_DIR"
    exit 1
fi

echo -e "${BLUE}📋 步骤 1/6: 检查环境${NC}"
echo "优化文件目录：$OPTIMIZATION_DIR"
echo "目标目录：$TARGET_DIR"
echo ""

# 克隆或更新仓库
echo -e "${BLUE}📥 步骤 2/6: 准备 Git 仓库${NC}"
if [ -d "$TARGET_DIR" ]; then
    echo "目录已存在，进入并拉取最新代码..."
    cd "$TARGET_DIR"
    git pull origin main || echo "警告：拉取失败，继续执行..."
else
    echo "克隆仓库..."
    cd ~/Documents
    git clone "https://github.com/$GITHUB_REPO.git" || {
        echo -e "${RED}❌ 克隆失败，请检查网络连接${NC}"
        exit 1
    }
    cd 3d-dev-skill
fi
echo -e "${GREEN}✓ 仓库准备完成${NC}"
echo ""

# 备份原文件
echo -e "${BLUE}💾 步骤 3/6: 备份原始文件${NC}"
BACKUP_DIR="backup_$(date +%Y%m%d_%H%M%S)"
mkdir -p "$BACKUP_DIR"
[ -f "README.md" ] && cp README.md "$BACKUP_DIR/"
[ -d "templates" ] && cp -r templates "$BACKUP_DIR/" 2>/dev/null || true
echo -e "${GREEN}✓ 备份完成：$BACKUP_DIR${NC}"
echo ""

# 复制优化文件
echo -e "${BLUE}📄 步骤 4/6: 复制优化文件${NC}"

# 复制主文档
echo "复制 README.md..."
cp "$OPTIMIZATION_DIR/README.md" ./
echo "复制 CONTRIBUTING.md..."
cp "$OPTIMIZATION_DIR/CONTRIBUTING.md" ./

# 复制模板
echo "复制模板文件..."
mkdir -p templates
cp "$OPTIMIZATION_DIR/templates"/*.html templates/

# 复制文档（可选，不提交到 GitHub）
mkdir -p docs-optimization
cp "$OPTIMIZATION_DIR"/*.md docs-optimization/ 2>/dev/null || true

echo -e "${GREEN}✓ 文件复制完成${NC}"
echo ""

# 创建 GitHub Pages
echo -e "${BLUE}🌐 步骤 5/6: 创建 GitHub Pages 演示${NC}"
mkdir -p docs
cp templates/*.html docs/

# 创建演示索引页
cat > docs/index.html << 'EOFINDEX'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Dev Skill - Live Demos</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 40px 20px;
            min-height: 100vh;
        }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .subtitle { color: #aaa; margin-bottom: 40px; font-size: 1.1rem; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }
        .card {
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(102, 126, 234, 0.3);
            border-radius: 12px;
            padding: 25px;
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            border-color: #667eea;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
        .card h3 { margin-bottom: 10px; color: #667eea; font-size: 1.3rem; }
        .card p { color: #ccc; margin-bottom: 15px; line-height: 1.6; }
        .card a {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .card a:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .back {
            text-align: center;
            margin-top: 50px;
            padding-top: 40px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .back a {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .back a:hover { text-decoration: underline; }
        @media (max-width: 768px) {
            h1 { font-size: 2rem; }
            .grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 3D Dev Skill - Live Demos</h1>
        <p class="subtitle">Interactive demos generated with natural language + AI</p>

        <div class="grid">
            <div class="card">
                <h3>✨ Particle System</h3>
                <p>10,000 particles forming a nebula with glow effects, orbital motion, and interactive controls</p>
                <a href="particle-system.html" target="_blank">Open Demo →</a>
            </div>

            <div class="card">
                <h3>🎮 Physics Playground</h3>
                <p>Interactive physics simulation with Cannon.js - click to shoot spheres and knock down the tower</p>
                <a href="physics-demo.html" target="_blank">Open Demo →</a>
            </div>

            <div class="card">
                <h3>💫 Post-Processing Effects</h3>
                <p>Bloom and glow effects with real-time parameter adjustment and multiple glowing objects</p>
                <a href="post-processing.html" target="_blank">Open Demo →</a>
            </div>

            <div class="card">
                <h3>🎨 GLTF Model Viewer</h3>
                <p>Complete 3D model viewer with drag & drop, multiple environment presets, and detailed stats</p>
                <a href="gltf-viewer.html" target="_blank">Open Demo →</a>
            </div>

            <div class="card">
                <h3>🌊 Custom Shader Effects</h3>
                <p>Water ripple shader with mouse interaction - move your cursor to create beautiful waves</p>
                <a href="shader-effects.html" target="_blank">Open Demo →</a>
            </div>
        </div>

        <div class="back">
            <p style="color: #888; margin-bottom: 15px;">
                All demos generated using natural language commands in Claude Code
            </p>
            <a href="https://github.com/AIPMAndy/3d-dev-skill">
                ← View on GitHub
            </a>
        </div>
    </div>
</body>
</html>
EOFINDEX

echo -e "${GREEN}✓ GitHub Pages 演示页面创建完成${NC}"
echo ""

# Git 提交
echo -e "${BLUE}📤 步骤 6/6: 提交到 GitHub${NC}"
git add .
git commit -m "🎨 Major optimization: New README, 5 advanced templates, comprehensive docs

Key improvements:
- Redesigned README with visual appeal and pain-point focus
- Added 5 production-ready templates (particles, physics, post-processing, GLTF viewer, shaders)
- Added comprehensive contribution guidelines
- Quantified value proposition: 240x efficiency boost
- Created GitHub Pages live demo site
- Added complete documentation package

This update positions the project for community growth and viral adoption." || {
    echo -e "${YELLOW}⚠️  没有新的更改需要提交${NC}"
}

echo ""
echo -e "${YELLOW}准备推送到 GitHub...${NC}"
read -p "是否立即推送？(y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
    git push origin main && {
        echo -e "${GREEN}✓ 推送成功！${NC}"
    } || {
        echo -e "${RED}❌ 推送失败，请检查网络连接或权限${NC}"
        exit 1
    }
else
    echo -e "${YELLOW}跳过推送。稍后手动执行：git push origin main${NC}"
fi

echo ""
echo "=========================================="
echo -e "${GREEN}🎉 部署完成！${NC}"
echo "=========================================="
echo ""
echo "✅ 已完成："
echo "   • README.md 已更新"
echo "   • 5 个高级模板已添加"
echo "   • CONTRIBUTING.md 已添加"
echo "   • GitHub Pages 演示站点已创建"
echo ""
echo "📋 接下来需要手动完成："
echo "   1. 设置 GitHub Topics"
echo "      访问：https://github.com/$GITHUB_REPO/settings"
echo "      Topics: claude-code, ai-assistant, threejs, 3d-graphics, webgl"
echo ""
echo "   2. 启用 GitHub Pages"
echo "      访问：https://github.com/$GITHUB_REPO/settings/pages"
echo "      Source: main branch > /docs folder > Save"
echo ""
echo "   3. 录制演示 GIF（推荐工具：Gifox, Kap）"
echo "      • particle-system.html"
echo "      • physics-demo.html"
echo "      • Claude Code 完整流程"
echo ""
echo "   4. 社交媒体推广"
echo "      • Twitter/X（今天）"
echo "      • Reddit r/threejs（明天）"
echo "      • 掘金/知乎（本周）"
echo ""
echo "📖 详细指南："
echo "   查看 $OPTIMIZATION_DIR/QUICK_START_CHECKLIST.md"
echo ""
echo -e "${BLUE}🚀 准备好让项目爆火！${NC}"
echo ""