Skip to content

combined storybook and docs #3

combined storybook and docs

combined storybook and docs #3

Workflow file for this run

name: Build and Deploy Documentation
on:
push:
branches:
- main # or your default branch
permissions:
contents: read
pages: write
id-token: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
# Step 1: Build Storybook first
- name: Build Storybook
run: npm run build-storybook
# Step 2: Generate TypeDoc into a subdirectory of Storybook
- name: Generate TypeDoc documentation
run: npx typedoc --out storybook-static/api src/index.ts
# Step 3: Create a simple navigation page (optional)
- name: Create navigation page
run: |
echo '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Documentation</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem; }
h1 { border-bottom: 1px solid #eaecef; }
.nav-links { display: flex; gap: 2rem; margin: 2rem 0; }
.nav-link { display: inline-block; padding: 0.5rem 1rem; background-color: #0366d6; color: white; text-decoration: none; border-radius: 4px; }
</style>
</head>
<body>
<h1>Project Documentation</h1>
<div class="nav-links">
<a class="nav-link" href="./index.html">Component Library</a>
<a class="nav-link" href="./api/index.html">API Documentation</a>
</div>
</body>
</html>' > storybook-static/docs-home.html
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
path: './storybook-static'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2