Fix YAML heredoc issue with echo approach #6
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: | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| concurrency: | |
| group: "pages" | |
| cancel-in-progress: false | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Setup Pages | |
| uses: actions/configure-pages@v4 | |
| - name: Setup Python | |
| uses: actions/setup-python@v4 | |
| with: | |
| python-version: '3.11' | |
| - name: Install dependencies | |
| run: | | |
| python -m pip install --upgrade pip | |
| pip install flask python-dotenv | |
| - name: Build static site | |
| run: | | |
| mkdir -p _site/svg | |
| # Copy SVG files from _svg_assets if they exist | |
| if [ -d "_svg_assets" ]; then | |
| cp _svg_assets/*.svg _site/svg/ || true | |
| fi | |
| echo '<!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="An interactive visualization of web development concepts using a house metaphor"><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;--focus-outline:#2196F3;}body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;max-width:1200px;margin:0 auto;padding:20px;background-color:var(--bg-color);color:var(--text-color);line-height:1.5;}h1,h2{color:var(--header-color);text-align:center;}.three-column-layout{display:flex;width:100%;margin-bottom:40px;min-height:600px;}.left-column{width:25%;flex:0 0 25%;background-color:var(--card-bg);border-radius:8px;padding:20px;box-shadow:0 2px 10px var(--card-shadow);}.center-column{width:55%;flex:0 0 55%;background-color:var(--card-bg);border-radius:8px;padding:20px;box-shadow:0 2px 10px var(--card-shadow);}.right-column{width:20%;flex:0 0 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;}.github-link{margin-top:30px;text-align:center;}.button{display:inline-block;padding:10px 15px;background-color:var(--btn-color);color:var(--btn-text);text-decoration:none;border-radius:4px;font-weight:bold;}.button:hover{background-color:var(--btn-hover);}footer{margin-top:40px;text-align:center;font-size:0.9em;}</style></head><body><h1>The House that Code Built</h1><p style="text-align:center;">An 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" style="width:100%;height:auto;"><img src="svg/house-structure.svg" alt="House structure visualization" style="width:100%;height:auto;position:absolute;top:0;left:0;"></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 class="github-link"><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>' > _site/index.html | |
| - name: Upload artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: './_site' | |
| deploy: | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| runs-on: ubuntu-latest | |
| needs: build | |
| steps: | |
| - name: Deploy to GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v3 |