Add GitHub Pages deployment setup #2
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: | | |
| # Install dependencies for all projects in parallel | |
| for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do | |
| (cd $dir && npm ci) & | |
| done | |
| wait | |
| # Build all projects in parallel | |
| for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do | |
| (cd $dir && npm run build) & | |
| done | |
| wait | |
| - name: Create combined dist | |
| run: | | |
| mkdir -p dist | |
| mkdir -p dist/1 && cp -r 1/dist/* dist/1/ | |
| mkdir -p dist/2 && cp -r 2/dist/* dist/2/ | |
| mkdir -p dist/3 && cp -r 3/dist/* dist/3/ | |
| mkdir -p dist/4 && cp -r 4/dist/* dist/4/ | |
| mkdir -p dist/5 && cp -r 5/dist/* dist/5/ | |
| mkdir -p dist/5a && cp -r 5a/dist/* dist/5a/ | |
| mkdir -p dist/5b && cp -r 5b/dist/* dist/5b/ | |
| mkdir -p dist/6 && cp -r 6/dist/* dist/6/ | |
| mkdir -p dist/6a && cp -r 6a/dist/* dist/6a/ | |
| mkdir -p dist/7 && cp -r 7/dist/* dist/7/ | |
| mkdir -p dist/8 && cp -r 8/dist/* dist/8/ | |
| - 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 |