Radio show website: Full Astro build with 194 episodes imported
Complete website for The Computer Guru Show (radio.azcomputerguru.com): - Astro 6.0.4 static site with React islands - 194 episodes imported from gurushow.com RSS feed - Dark/light mode HSL design system - Persistent audio player with session persistence - Episode archive with search and season filtering - Home page with animated hero, stats, latest episodes - All pages: About, Subscribe, Community, Live, Contact, Blog, 404 - Podcast RSS feed with iTunes namespace - Session log updated Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
317
projects/radio-show/website/src/layouts/BaseLayout.astro
Normal file
317
projects/radio-show/website/src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,317 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
import PersistentPlayer from '../components/global/PersistentPlayer';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'The Computer Guru Show - Technology: Fun and Simple', image = '/og-image.jpg' } = Astro.props;
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.site)} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonicalURL} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={new URL(image, Astro.site)} />
|
||||
|
||||
<!-- RSS -->
|
||||
<link rel="alternate" type="application/rss+xml" title="The Computer Guru Show" href="/feed.xml" />
|
||||
|
||||
<title>{title} | The Computer Guru Show</title>
|
||||
|
||||
<!-- Theme initialization (prevent flash) -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
const stored = localStorage.getItem('theme');
|
||||
if (stored) {
|
||||
document.documentElement.setAttribute('data-theme', stored);
|
||||
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="container site-nav">
|
||||
<a href="/" class="site-logo">
|
||||
<span class="logo-text">The Computer Guru Show</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="/episodes">Episodes</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/live">Live</a>
|
||||
<a href="/community">Community</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/subscribe">Subscribe</a>
|
||||
</div>
|
||||
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
|
||||
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<span class="logo-text">The Computer Guru Show</span>
|
||||
<p>Technology: Fun and Simple</p>
|
||||
<p class="footer-location">Tucson, Arizona</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Show</h4>
|
||||
<a href="/episodes">Episodes</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/live">Live</a>
|
||||
<a href="/subscribe">Subscribe</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Connect</h4>
|
||||
<a href="/community">Community</a>
|
||||
<a href="/contact">Contact</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/feed.xml">RSS Feed</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© {new Date().getFullYear()} The Computer Guru Show. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<PersistentPlayer client:load />
|
||||
|
||||
<!-- Theme toggle script -->
|
||||
<script is:inline>
|
||||
document.getElementById('theme-toggle').addEventListener('click', () => {
|
||||
const html = document.documentElement;
|
||||
const current = html.getAttribute('data-theme');
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
html.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
document.getElementById('mobile-menu-toggle').addEventListener('click', () => {
|
||||
document.querySelector('.nav-links').classList.toggle('open');
|
||||
document.getElementById('mobile-menu-toggle').classList.toggle('open');
|
||||
});
|
||||
|
||||
// Fade-in on scroll
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: hsl(220 20% 8% / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
[data-theme="light"] .site-header {
|
||||
background: hsl(220 20% 97% / 0.85);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
.site-logo:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
.nav-links a {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
.nav-links a:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-2);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .icon-sun { display: none; }
|
||||
[data-theme="dark"] .icon-moon { display: block; }
|
||||
[data-theme="light"] .icon-sun { display: block; }
|
||||
[data-theme="light"] .icon-moon { display: none; }
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-2);
|
||||
}
|
||||
.mobile-menu-toggle span {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--color-text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
.mobile-menu-toggle.open span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
.mobile-menu-toggle.open span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.mobile-menu-toggle.open span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(5px, -5px);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: var(--color-bg-secondary);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-block: var(--space-12);
|
||||
margin-top: var(--space-16);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--space-8);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.footer-links h4 {
|
||||
font-size: var(--text-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.footer-links a {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
.footer-bottom p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-bg-primary);
|
||||
flex-direction: column;
|
||||
padding: var(--space-6);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.nav-links.open {
|
||||
display: flex;
|
||||
}
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user