Restore proper three-column layout with meta tags #27
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: write | ||
| jobs: | ||
| deploy: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Copy SVG assets to deploy directory | ||
| run: mkdir -p _site/svg && cp -r _svg_assets/* _site/svg/ || true | ||
| - name: Create proper index.html with 3-column layout | ||
| run: | | ||
| # Write HTML file parts separately to avoid YAML issues | ||
| cat > _site/index.html << ENDHTML | ||
| <!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="The House that Code Built - Interactive Learning Tool"> | ||
| <meta name="author" content="TortoiseWolfe"> | ||
| <meta name="keywords" content="web development, HTML, CSS, JavaScript, visualization"> | ||
| <title>The House that Code Built</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| width: 100%; | ||
| } | ||
| .left-column { | ||
| width: 25%; | ||
| flex: 0 0 25%; | ||
| background: #f0f0f0; | ||
| padding: 15px; | ||
| box-sizing: border-box; | ||
| } | ||
| .center-column { | ||
| width: 55%; | ||
| flex: 0 0 55%; | ||
| padding: 15px; | ||
| box-sizing: border-box; | ||
| } | ||
| .right-column { | ||
| width: 20%; | ||
| flex: 0 0 20%; | ||
| background: #f0f0f0; | ||
| padding: 15px; | ||
| box-sizing: border-box; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="left-column"> | ||
| <h2>Presets</h2> | ||
| <p>Left column (25%)</p> | ||
| </div> | ||
| <div class="center-column"> | ||
| <h2>Visualization</h2> | ||
| <img src="svg/house-structure.svg" alt="House Structure" width="100%"> | ||
| <img src="svg/environment-layer.svg" alt="Environment Layer" width="100%"> | ||
| </div> | ||
| <div class="right-column"> | ||
| <h2>Layer Controls</h2> | ||
| <p>Right column (20%)</p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
| ENDHTML | ||
| - name: Deploy | ||
| uses: peaceiris/actions-gh-pages@v3 | ||
| with: | ||
| github_token: ${{ github.token }} | ||
| publish_dir: ./_site | ||
