feat: improve GitHub Pages website UX and release display (#121)

## Summary
- Removed copyright statement from footer (keeping MIT License only)
since Union Square is a project, not an entity
- Stacked getting started boxes vertically with full content width for
better readability of code examples
- Added dynamic GitHub release fetching to automatically display latest
release information on the website

## Changes
1. **Footer Update**: Removed copyright statement, keeping only "MIT
License" text
2. **Layout Improvement**: Changed getting started section from grid to
vertical stack layout with max-width for better code readability
3. **Dynamic Release Display**: Added JavaScript to fetch latest release
from GitHub API and display it with formatted markdown
4. **Workflow Enhancement**: Updated GitHub Pages deploy workflow to
trigger on release publication events

## Test plan
- [x] Verified copyright statement removed from footer
- [x] Confirmed getting started boxes stack vertically with better width
- [x] Tested release fetching JavaScript (handles both existing releases
and no-release case)
- [x] Workflow will trigger on next release publication

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: jwilger

.github/workflows/deploy-gh-pages.yml

@@ -11,6 +11,10 @@ on:
       - 'package.json'
       - '.github/workflows/deploy-gh-pages.yml'
 
+  # Trigger on release publication
+  release:
+    types: [published]
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 

docs/assets/css/style.css

@@ -494,9 +494,11 @@ body {
 }
 
 .steps-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: var(--spacing-lg);
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .step-card {

docs/assets/js/main.js

@@ -166,3 +166,56 @@ style.textContent = `
     }
 `;
 document.head.appendChild(style);
+
+// Fetch and display latest GitHub release
+async function fetchLatestRelease() {
+    try {
+        const response = await fetch('https://api.github.com/repos/jwilger/union_square/releases/latest');
+
+        if (response.status === 404) {
+            // No releases yet
+            return;
+        }
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const release = await response.json();
+
+        // Update release card with actual release data
+        const releaseCard = document.querySelector('.release-card');
+        if (!releaseCard) return;
+
+        const releaseDate = new Date(release.published_at).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+
+        releaseCard.innerHTML = `
+            <div class="release-status">
+                <span class="status-badge">${release.prerelease ? 'Pre-release' : 'Latest'}</span>
+                <span class="release-date">${releaseDate}</span>
+            </div>
+            <h3 class="release-title">${release.name || release.tag_name}</h3>
+            <div class="release-description">${marked.parse(release.body || 'No release notes available.')}</div>
+            <div class="release-actions">
+                <a href="${release.html_url}" class="btn btn-outline">View Release</a>
+                <a href="https://github.com/jwilger/union_square/releases" class="btn btn-outline">All Releases</a>
+            </div>
+        `;
+    } catch (error) {
+        console.error('Error fetching release:', error);
+        // Keep the default content on error
+    }
+}
+
+// Load marked.js for markdown parsing
+const script = document.createElement('script');
+script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
+script.onload = () => {
+    // Fetch release once marked.js is loaded
+    fetchLatestRelease();
+};
+document.head.appendChild(script);

docs/index.html

@@ -217,7 +217,7 @@ <h3 class="release-title">No releases yet</h3>
             <div class="footer-content">
                 <div class="footer-left">
                     <img src="https://raw.githubusercontent.com/jwilger/union_square/main/logo.svg" alt="Union Square Logo" class="footer-logo">
-                    <p>&copy; 2024 Union Square. MIT License.</p>
+                    <p>MIT License</p>
                 </div>
                 <div class="footer-links">
                     <a href="https://github.com/jwilger/union_square">GitHub</a>