190 lines
6.1 KiB
YAML
190 lines
6.1 KiB
YAML
name: Deploy Storybooks to GitHub Pages
|
|
|
|
on:
|
|
push:
|
|
branches:
|
|
- main
|
|
pull_request:
|
|
branches:
|
|
- main
|
|
|
|
permissions:
|
|
contents: read
|
|
pages: write
|
|
id-token: write
|
|
|
|
concurrency:
|
|
group: "pages"
|
|
cancel-in-progress: true
|
|
|
|
jobs:
|
|
build-and-deploy:
|
|
name: Build and Deploy Storybooks
|
|
runs-on: ubuntu-latest
|
|
|
|
steps:
|
|
- name: Checkout
|
|
uses: actions/checkout@v4
|
|
with:
|
|
fetch-depth: 0
|
|
|
|
- name: Setup Node.js
|
|
uses: actions/setup-node@v4
|
|
with:
|
|
node-version: "20"
|
|
|
|
- name: Setup pnpm
|
|
uses: pnpm/action-setup@v2
|
|
with:
|
|
version: 9.15.4
|
|
|
|
- name: Get pnpm store directory
|
|
shell: bash
|
|
run: |
|
|
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
|
|
|
|
- name: Setup pnpm cache
|
|
uses: actions/cache@v4
|
|
with:
|
|
path: ${{ env.STORE_PATH }}
|
|
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
|
restore-keys: |
|
|
${{ runner.os }}-pnpm-store-
|
|
|
|
- name: Install dependencies
|
|
run: pnpm install --frozen-lockfile
|
|
|
|
- name: Generate Panda CSS
|
|
working-directory: apps/web
|
|
run: |
|
|
pnpm panda codegen
|
|
npx @pandacss/dev cssgen || echo "CSS generation had warnings but continued"
|
|
|
|
- name: Build abacus-react package
|
|
run: pnpm --filter @soroban/abacus-react build
|
|
|
|
- name: Build web Storybook
|
|
working-directory: apps/web
|
|
run: pnpm build-storybook --output-dir ../../storybook-web
|
|
|
|
- name: Build abacus-react Storybook
|
|
working-directory: packages/abacus-react
|
|
run: pnpm build-storybook --output-dir ../../storybook-abacus-react
|
|
|
|
- name: Create combined pages directory
|
|
run: |
|
|
mkdir -p pages
|
|
cp -r storybook-web pages/web
|
|
cp -r storybook-abacus-react pages/abacus-react
|
|
|
|
# Create index page with links to both Storybooks
|
|
cat > pages/index.html << 'EOF'
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Soroban Abacus Flashcards - Storybooks</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.storybook-links {
|
|
display: grid;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
.storybook-card {
|
|
border: 1px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.storybook-card:hover {
|
|
border-color: #ff4785;
|
|
box-shadow: 0 4px 12px rgba(255, 71, 133, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
.storybook-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: #ff4785;
|
|
}
|
|
.storybook-description {
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
background: #ff4785;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🧮 Soroban Abacus Flashcards</h1>
|
|
<p>Interactive component documentation and demos</p>
|
|
</div>
|
|
|
|
<div class="storybook-links">
|
|
<a href="./web/" class="storybook-card">
|
|
<div class="storybook-title">
|
|
Web Application <span class="badge">Storybook</span>
|
|
</div>
|
|
<p class="storybook-description">
|
|
Complete web application components including games, tutorials, and UI elements
|
|
</p>
|
|
</a>
|
|
|
|
<a href="./abacus-react/" class="storybook-card">
|
|
<div class="storybook-title">
|
|
Abacus React Component <span class="badge">Storybook</span>
|
|
</div>
|
|
<p class="storybook-description">
|
|
Interactive React abacus component with animations and place value editing
|
|
</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e1e5e9;">
|
|
<p style="color: #666; font-size: 0.9rem;">
|
|
📖 <a href="https://github.com/antialias/soroban-abacus-flashcards" style="color: #0366d6;">View on GitHub</a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
EOF
|
|
|
|
- name: Setup Pages
|
|
if: github.ref == 'refs/heads/main'
|
|
uses: actions/configure-pages@v4
|
|
|
|
- name: Upload artifact
|
|
if: github.ref == 'refs/heads/main'
|
|
uses: actions/upload-pages-artifact@v4
|
|
with:
|
|
path: ./pages
|
|
|
|
- name: Deploy to GitHub Pages
|
|
if: github.ref == 'refs/heads/main'
|
|
id: deployment
|
|
uses: actions/deploy-pages@v4
|