Add GitHub Pages deployment setup #3
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 ] | |
| workflow_dispatch: | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| 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' | |
| - name: Cache node modules | |
| uses: actions/cache@v3 | |
| with: | |
| path: | | |
| 1/node_modules | |
| 2/node_modules | |
| 3/node_modules | |
| 4/node_modules | |
| 5/node_modules | |
| 5a/node_modules | |
| 5b/node_modules | |
| 6/node_modules | |
| 6a/node_modules | |
| 7/node_modules | |
| 8/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('*/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node- | |
| - name: Install dependencies and build all projects | |
| run: | | |
| set -e # Exit on any error | |
| echo "Installing dependencies for all projects..." | |
| # Install dependencies for all projects sequentially | |
| for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do | |
| echo "Installing dependencies for project $dir..." | |
| cd $dir | |
| npm install | |
| cd .. | |
| done | |
| echo "Building all projects..." | |
| # Build all projects sequentially to capture any build errors | |
| for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do | |
| echo "Building project $dir..." | |
| cd $dir | |
| if npm run build; then | |
| echo "✅ Build completed for project $dir" | |
| ls -la dist/ || echo "❌ Warning: dist directory not found for project $dir" | |
| else | |
| echo "❌ Build failed for project $dir" | |
| exit 1 | |
| fi | |
| cd .. | |
| done | |
| - name: Create combined dist | |
| run: | | |
| mkdir -p dist | |
| echo "Copying build artifacts..." | |
| for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do | |
| if [ -d "$dir/dist" ] && [ "$(ls -A $dir/dist 2>/dev/null)" ]; then | |
| echo "Copying $dir/dist to dist/$dir/" | |
| mkdir -p dist/$dir | |
| cp -r $dir/dist/* dist/$dir/ | |
| else | |
| echo "Warning: $dir/dist is empty or does not exist" | |
| exit 1 | |
| fi | |
| done | |
| echo "Listing final dist structure:" | |
| find dist -type f | head -20 | |
| - name: Create index.html | |
| run: | | |
| cat > dist/index.html << 'EOF' | |
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Floating UI React Demo</title> | |
| <style> | |
| body { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| line-height: 1.6; | |
| background-color: #f8fafc; | |
| } | |
| h1 { | |
| color: #1e293b; | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin: 40px 0; | |
| } | |
| .demo-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 24px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .demo-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .demo-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: #3b82f6; | |
| } | |
| .demo-desc { | |
| color: #64748b; | |
| font-size: 0.875rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Floating UI React Demo</h1> | |
| <div class="demo-grid"> | |
| <a href="./1/" class="demo-card"> | |
| <div class="demo-title">Demo 1</div> | |
| <div class="demo-desc">基本的なFloating UIの実装</div> | |
| </a> | |
| <a href="./2/" class="demo-card"> | |
| <div class="demo-title">Demo 2</div> | |
| <div class="demo-desc">ポジショニングオプション</div> | |
| </a> | |
| <a href="./3/" class="demo-card"> | |
| <div class="demo-title">Demo 3</div> | |
| <div class="demo-desc">インタラクション機能</div> | |
| </a> | |
| <a href="./4/" class="demo-card"> | |
| <div class="demo-title">Demo 4</div> | |
| <div class="demo-desc">アニメーション効果</div> | |
| </a> | |
| <a href="./5/" class="demo-card"> | |
| <div class="demo-title">Demo 5</div> | |
| <div class="demo-desc">高度なカスタマイズ</div> | |
| </a> | |
| <a href="./5a/" class="demo-card"> | |
| <div class="demo-title">Demo 5a</div> | |
| <div class="demo-desc">バリエーション A</div> | |
| </a> | |
| <a href="./5b/" class="demo-card"> | |
| <div class="demo-title">Demo 5b</div> | |
| <div class="demo-desc">バリエーション B</div> | |
| </a> | |
| <a href="./6/" class="demo-card"> | |
| <div class="demo-title">Demo 6</div> | |
| <div class="demo-desc">複雑なレイアウト</div> | |
| </a> | |
| <a href="./6a/" class="demo-card"> | |
| <div class="demo-title">Demo 6a</div> | |
| <div class="demo-desc">レイアウト応用</div> | |
| </a> | |
| <a href="./7/" class="demo-card"> | |
| <div class="demo-title">Demo 7</div> | |
| <div class="demo-desc">実用的な実装例</div> | |
| </a> | |
| <a href="./8/" class="demo-card"> | |
| <div class="demo-title">Demo 8</div> | |
| <div class="demo-desc">完全なコンポーネント</div> | |
| </a> | |
| </div> | |
| </body> | |
| </html> | |
| EOF | |
| - 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 | |
| steps: | |
| - name: Deploy to GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v4 |