Completely rewrite GitHub Pages workflow to fix artifact error #8
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: | ||
| # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | ||
| permissions: | ||
| contents: read | ||
| pages: write | ||
| id-token: write | ||
| # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | ||
| # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. | ||
| concurrency: | ||
| group: "pages" | ||
| cancel-in-progress: false | ||
| jobs: | ||
| # Single deploy job since we're just deploying | ||
| deploy: | ||
| environment: | ||
| name: github-pages | ||
| url: ${{ steps.deployment.outputs.page_url }} | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Setup Pages | ||
| uses: actions/configure-pages@v4 | ||
| - name: Create static files | ||
| run: | | ||
| # Create output directory | ||
| mkdir -p static-site/svg | ||
| # List directory contents to debug | ||
| echo "Current directory contents:" | ||
| ls -la | ||
| # Copy SVG files if they exist | ||
| if [ -d "_svg_assets" ]; then | ||
| cp _svg_assets/*.svg static-site/svg/ || echo "No SVG files found in _svg_assets" | ||
| else | ||
| # Create placeholder SVGs | ||
| echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><rect width="800" height="600" fill="none" stroke="#ccc" stroke-width="1"/><text x="400" y="300" font-family="Arial" font-size="24" text-anchor="middle" fill="#999">Environment Layer</text></svg>' > static-site/svg/environment-layer.svg | ||
| echo '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><rect width="800" height="600" fill="none" stroke="#ccc" stroke-width="1"/><text x="400" y="300" font-family="Arial" font-size="24" text-anchor="middle" fill="#999">House Structure</text></svg>' > static-site/svg/house-structure.svg | ||
| fi | ||
| # Create index.html | ||
| cat > static-site/index.html << 'EOF' | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" content="Interactive visualization of web development concepts"> | ||
| <title>The House that Code Built</title> | ||
| <style> | ||
| :root { | ||
| --bg-color: #f5f5f5; | ||
| --text-color: #333; | ||
| --header-color: #2e7d32; | ||
| --card-bg: #ffffff; | ||
| --card-shadow: rgba(0,0,0,0.1); | ||
| --btn-color: #2196F3; | ||
| --btn-hover: #1976D2; | ||
| --btn-text: #ffffff; | ||
| } | ||
| body { | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| max-width: 1200px; | ||
| background-color: var(--bg-color); | ||
| color: var(--text-color); | ||
| } | ||
| h1, h2 { | ||
| color: var(--header-color); | ||
| text-align: center; | ||
| } | ||
| .three-column-layout { | ||
| display: flex; | ||
| width: 100%; | ||
| min-height: 600px; | ||
| gap: 20px; | ||
| margin-bottom: 40px; | ||
| } | ||
| .left-column { | ||
| width: 25%; | ||
| background-color: var(--card-bg); | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| box-shadow: 0 2px 10px var(--card-shadow); | ||
| } | ||
| .center-column { | ||
| width: 55%; | ||
| background-color: var(--card-bg); | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| box-shadow: 0 2px 10px var(--card-shadow); | ||
| } | ||
| .right-column { | ||
| width: 20%; | ||
| background-color: var(--card-bg); | ||
| border-radius: 8px; | ||
| padding: 20px; | ||
| box-shadow: 0 2px 10px var(--card-shadow); | ||
| } | ||
| .svg-container { | ||
| width: 100%; | ||
| height: 500px; | ||
| position: relative; | ||
| } | ||
| .svg-container img { | ||
| width: 100%; | ||
| height: auto; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
| .button { | ||
| display: inline-block; | ||
| padding: 10px 15px; | ||
| background-color: var(--btn-color); | ||
| color: white; | ||
| text-decoration: none; | ||
| border-radius: 4px; | ||
| font-weight: bold; | ||
| } | ||
| .button:hover { | ||
| background-color: var(--btn-hover); | ||
| } | ||
| footer { | ||
| text-align: center; | ||
| margin-top: 40px; | ||
| } | ||
| @media (max-width: 800px) { | ||
| .three-column-layout { | ||
| flex-direction: column; | ||
| } | ||
| .left-column, .center-column, .right-column { | ||
| width: 100%; | ||
| margin-bottom: 20px; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>The House that Code Built</h1> | ||
| <p style="text-align: center;">Interactive visualization of web development concepts</p> | ||
| <div class="three-column-layout"> | ||
| <div class="left-column"> | ||
| <h2>About This Project</h2> | ||
| <p>This visualization demonstrates web development concepts through the metaphor of a house:</p> | ||
| <ul> | ||
| <li>Environment - The foundation</li> | ||
| <li>HTML - The structure</li> | ||
| <li>CSS - The design</li> | ||
| <li>JavaScript - The interactivity</li> | ||
| <li>Backend - The systems</li> | ||
| </ul> | ||
| </div> | ||
| <div class="center-column"> | ||
| <div class="svg-container"> | ||
| <img src="svg/environment-layer.svg" alt="Environment layer visualization"> | ||
| <img src="svg/house-structure.svg" alt="House structure visualization"> | ||
| </div> | ||
| </div> | ||
| <div class="right-column"> | ||
| <h2>Interactive Version</h2> | ||
| <p>The full interactive version has:</p> | ||
| <ul> | ||
| <li>Layer toggling</li> | ||
| <li>Chapter navigation</li> | ||
| <li>Tom Waits soundtrack</li> | ||
| <li>Dark/light mode</li> | ||
| </ul> | ||
| <div style="text-align: center; margin-top: 20px;"> | ||
| <a href="https://github.com/TortoiseWolfe/The_House_that_Code_Built" class="button">View on GitHub</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <p>Created by <a href="https://github.com/TortoiseWolfe">TortoiseWolfe</a></p> | ||
| <p>This project follows WCAG 2.1 AA accessibility guidelines</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
| EOF | ||
| # Check if files were created successfully | ||
| echo "Static site directory contents:" | ||
| ls -la static-site/ | ||
| ls -la static-site/svg/ | ||
| - name: Upload artifact | ||
| uses: actions/upload-pages-artifact@v3 | ||
| with: | ||
| path: 'static-site' | ||
| - name: Deploy to GitHub Pages | ||
| id: deployment | ||
| uses: actions/deploy-pages@v3 | ||
