ci: deploy demo to github pages #1
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: Pages | |
| # Deploys the demo site to GitHub Pages. | |
| # Source published: colors_and_type.css + assets/ + preview/ + ui_kits/ | |
| # plus an auto-generated landing index.html and preview/index.html. | |
| on: | |
| push: | |
| branches: [main] | |
| paths: | |
| - "colors_and_type.css" | |
| - "assets/**" | |
| - "preview/**" | |
| - "ui_kits/**" | |
| - ".github/workflows/pages.yml" | |
| workflow_dispatch: | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| concurrency: | |
| group: pages | |
| cancel-in-progress: false | |
| jobs: | |
| build: | |
| name: Build site | |
| runs-on: ubuntu-latest | |
| timeout-minutes: 5 | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Stage _site/ | |
| run: | | |
| set -euo pipefail | |
| mkdir -p _site | |
| cp colors_and_type.css _site/ | |
| cp -r assets _site/ | |
| cp -r preview _site/ | |
| cp -r ui_kits _site/ | |
| - name: Generate preview/index.html | |
| run: | | |
| set -euo pipefail | |
| { | |
| echo '<!doctype html>' | |
| echo '<html data-theme="dark" lang="en"><head>' | |
| echo '<meta charset="utf-8">' | |
| echo '<title>RandomCodeSpace — preview cards</title>' | |
| echo '<meta name="viewport" content="width=device-width,initial-scale=1">' | |
| echo '<link rel="stylesheet" href="../colors_and_type.css">' | |
| echo '<style>' | |
| echo ' body{margin:0;padding:64px 24px;background:var(--bg-0);color:var(--fg-1);font-family:var(--font-sans);}' | |
| echo ' main{max-width:960px;margin:0 auto;}' | |
| echo ' .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px;}' | |
| echo ' h1{font-size:32px;font-weight:600;letter-spacing:-0.022em;margin:0 0 12px;}' | |
| echo ' p.lede{color:var(--fg-2);font-size:15px;line-height:1.55;margin:0 0 32px;max-width:60ch;}' | |
| echo ' .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:4px;}' | |
| echo ' a.card{display:block;padding:14px 16px;background:var(--bg-1);color:var(--fg-1);text-decoration:none;transition:background 140ms cubic-bezier(0.25,1,0.5,1);}' | |
| echo ' a.card:hover{background:var(--bg-2);}' | |
| echo ' a.card .name{font-family:var(--font-mono);font-size:12px;font-weight:500;}' | |
| echo ' a.card .group{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-3);margin-bottom:4px;}' | |
| echo ' .back{display:inline-block;margin-bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--fg-3);text-decoration:none;}' | |
| echo ' .back:hover{color:var(--fg-1);}' | |
| echo '</style></head><body>' | |
| echo '<main>' | |
| echo ' <a class="back" href="..">← Index</a>' | |
| echo ' <p class="eyebrow">/preview/</p>' | |
| echo ' <h1>Brand & component spec cards</h1>' | |
| echo ' <p class="lede">Static visual references with hex annotations and full state coverage. Each card is a self-contained HTML file using design tokens from <code>colors_and_type.css</code>.</p>' | |
| echo ' <div class="grid">' | |
| for f in $(ls preview/*.html | sort); do | |
| base=$(basename "$f" .html) | |
| group=$(echo "$base" | cut -d- -f1) | |
| echo " <a class=\"card\" href=\"$(basename "$f")\"><div class=\"group\">$group</div><div class=\"name\">$base</div></a>" | |
| done | |
| echo ' </div>' | |
| echo '</main></body></html>' | |
| } > _site/preview/index.html | |
| - name: Generate root index.html | |
| run: | | |
| set -euo pipefail | |
| cat > _site/index.html <<'HTML' | |
| <!doctype html> | |
| <html data-theme="dark" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>RandomCodeSpace — Design System</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <link rel="stylesheet" href="colors_and_type.css"> | |
| <style> | |
| body{margin:0;background:var(--bg-0);color:var(--fg-1);font-family:var(--font-sans);min-height:100vh;} | |
| .wrap{max-width:1080px;margin:0 auto;padding:80px 24px 96px;} | |
| .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;display:inline-flex;align-items:center;gap:10px;} | |
| .eyebrow::before{content:"";width:20px;height:1px;background:var(--border-2);} | |
| h1{font-size:64px;font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin:0 0 20px;} | |
| p.lede{color:var(--fg-2);font-size:17px;line-height:1.55;margin:0 0 56px;max-width:60ch;} | |
| p.lede code{background:var(--bg-2);border:1px solid var(--border-1);padding:1px 6px;border-radius:2px;font-size:0.92em;} | |
| section{margin:0 0 64px;} | |
| h2{font-size:22px;font-weight:600;letter-spacing:-0.014em;margin:0 0 24px;} | |
| .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:4px;} | |
| a.card{display:block;padding:20px 22px;background:var(--bg-1);color:var(--fg-1);text-decoration:none;transition:background 140ms cubic-bezier(0.25,1,0.5,1);} | |
| a.card:hover{background:var(--bg-2);} | |
| a.card .label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px;} | |
| a.card .name{font-size:17px;font-weight:500;letter-spacing:-0.008em;margin-bottom:6px;} | |
| a.card .desc{color:var(--fg-3);font-size:13px;line-height:1.5;} | |
| footer{border-top:1px solid var(--border-1);padding-top:24px;color:var(--fg-3);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;} | |
| footer a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--border-1);} | |
| footer a:hover{color:var(--accent);border-bottom-color:var(--accent);} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <p class="eyebrow">RandomCodeSpace · design system</p> | |
| <h1>Tools you own.</h1> | |
| <p class="lede">Live demos of the <code>@ossrandom/design-system</code> component library. Inter on Cod Gray, Signal Red on monochrome surfaces. Built for self-hosted developer tooling.</p> | |
| <section> | |
| <h2>UI kits</h2> | |
| <div class="grid"> | |
| <a class="card" href="ui_kits/marketing/"> | |
| <div class="label">/marketing/</div> | |
| <div class="name">Marketing site</div> | |
| <div class="desc">Hero, nav, feature grid, CLI showcase, pricing, footer.</div> | |
| </a> | |
| <a class="card" href="ui_kits/app/"> | |
| <div class="label">/app/</div> | |
| <div class="name">App dashboard</div> | |
| <div class="desc">Sidebar, topbar, services grid, log tail, command menu (⌘K).</div> | |
| </a> | |
| <a class="card" href="ui_kits/docs/"> | |
| <div class="label">/docs/</div> | |
| <div class="name">Docs site</div> | |
| <div class="desc">Sidebar nav, article body, code blocks, table of contents.</div> | |
| </a> | |
| </div> | |
| </section> | |
| <section> | |
| <h2>Brand & component spec cards</h2> | |
| <div class="grid"> | |
| <a class="card" href="preview/"> | |
| <div class="label">/preview/</div> | |
| <div class="name">Browse all cards</div> | |
| <div class="desc">39 single-purpose cards covering colors, type, spacing, motion, and component states.</div> | |
| </a> | |
| <a class="card" href="preview/responsive-check.html"> | |
| <div class="label">/preview/responsive-check/</div> | |
| <div class="name">Responsive check</div> | |
| <div class="desc">Load any card inside an iPhone, iPad, Galaxy, or desktop frame.</div> | |
| </a> | |
| </div> | |
| </section> | |
| <footer> | |
| <span>MIT licensed.</span> | |
| <span><a href="https://github.com/RandomCodeSpace/design-system">github.com/RandomCodeSpace/design-system</a></span> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |
| HTML | |
| - name: Configure Pages | |
| uses: actions/configure-pages@v5 | |
| with: | |
| enablement: true | |
| - uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: _site | |
| deploy: | |
| name: Deploy to Pages | |
| needs: build | |
| runs-on: ubuntu-latest | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| steps: | |
| - id: deployment | |
| uses: actions/deploy-pages@v4 |