139 lines
4.7 KiB
YAML
139 lines
4.7 KiB
YAML
name: Deploy Storybook
|
|
|
|
on:
|
|
push:
|
|
branches:
|
|
- main
|
|
paths:
|
|
- 'apps/web/src/**'
|
|
- 'apps/web/.storybook/**'
|
|
- 'packages/abacus-react/**'
|
|
- '.gitea/workflows/deploy-storybook.yml'
|
|
workflow_dispatch:
|
|
|
|
jobs:
|
|
build-and-deploy:
|
|
name: Build and Deploy Storybook
|
|
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@v4
|
|
with:
|
|
version: 9.15.4
|
|
|
|
- name: Install dependencies
|
|
run: pnpm install --frozen-lockfile
|
|
|
|
- name: Generate build info
|
|
working-directory: apps/web
|
|
run: node scripts/generate-build-info.js
|
|
|
|
- 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 workspace packages
|
|
run: |
|
|
pnpm --filter @soroban/llm-client build
|
|
pnpm --filter @soroban/abacus-react build
|
|
|
|
- name: Build web Storybook
|
|
working-directory: apps/web
|
|
run: pnpm build-storybook --output-dir ../../storybook-static/web
|
|
|
|
- name: Build abacus-react Storybook
|
|
working-directory: packages/abacus-react
|
|
run: pnpm build-storybook --output-dir ../../storybook-static/abacus-react
|
|
|
|
- name: Create index page
|
|
run: |
|
|
cat > storybook-static/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;
|
|
background: #f5f5f5;
|
|
}
|
|
.header { text-align: center; margin-bottom: 40px; }
|
|
h1 { color: #ff4785; }
|
|
.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;
|
|
background: white;
|
|
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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Soroban Abacus Flashcards</h1>
|
|
<p>Interactive component documentation</p>
|
|
</div>
|
|
<div class="storybook-links">
|
|
<a href="./web/" class="storybook-card">
|
|
<div class="storybook-title">Web Application Storybook</div>
|
|
<p class="storybook-description">Complete web app components: games, tutorials, and UI elements</p>
|
|
</a>
|
|
<a href="./abacus-react/" class="storybook-card">
|
|
<div class="storybook-title">Abacus React Component</div>
|
|
<p class="storybook-description">Interactive React abacus with animations and place value editing</p>
|
|
</a>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
EOF
|
|
|
|
- name: Deploy to NAS
|
|
env:
|
|
NAS_SSH_KEY: ${{ secrets.NAS_SSH_KEY }}
|
|
NAS_HOST: ${{ secrets.NAS_HOST }}
|
|
NAS_DEPLOY_PATH: ${{ secrets.NAS_DEPLOY_PATH }}
|
|
run: |
|
|
# Setup SSH
|
|
mkdir -p ~/.ssh
|
|
echo "$NAS_SSH_KEY" > ~/.ssh/id_ed25519
|
|
chmod 600 ~/.ssh/id_ed25519
|
|
ssh-keyscan -H "$NAS_HOST" >> ~/.ssh/known_hosts 2>/dev/null
|
|
|
|
# Deploy via rsync
|
|
rsync -avz --delete \
|
|
storybook-static/ \
|
|
"antialias@${NAS_HOST}:${NAS_DEPLOY_PATH}/"
|
|
|
|
echo "Storybook deployed to https://dev.abaci.one/storybook/"
|
|
|