Mike Swanson
8ac514c9ea
human-flow P0-P1 fixes for radio.azcomputerguru.com: - K1: skip-to-content link (first tab stop) + id/tabindex on <main>. - K2: global :focus-visible ring (accent outline) across links, buttons, inputs and player controls; reveal the seek-bar handle on focus. - K3: mobile menu a11y — aria-expanded/aria-controls, Escape closes and restores focus to the toggle, focus moves to first link on open. All token-based, no emojis. Not built (node_modules absent on this host). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
342 lines
10 KiB
Plaintext
342 lines
10 KiB
Plaintext
---
|
|
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 - Helping you deal with all of your technology needs while treating you like a person in the process.', 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>
|
|
<a href="#main-content" class="skip-link">Skip to content</a>
|
|
<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" id="primary-nav">
|
|
<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" aria-expanded="false" aria-controls="primary-nav">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content" tabindex="-1">
|
|
<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>Helping you deal with all of your technology needs while treating you like a person in the process.</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
|
|
const menuToggle = document.getElementById('mobile-menu-toggle');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
|
|
function closeMobileMenu(returnFocus) {
|
|
navLinks.classList.remove('open');
|
|
menuToggle.classList.remove('open');
|
|
menuToggle.setAttribute('aria-expanded', 'false');
|
|
if (returnFocus) {
|
|
menuToggle.focus();
|
|
}
|
|
}
|
|
|
|
menuToggle.addEventListener('click', () => {
|
|
const isOpen = navLinks.classList.toggle('open');
|
|
menuToggle.classList.toggle('open', isOpen);
|
|
menuToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
|
if (isOpen) {
|
|
const firstLink = navLinks.querySelector('a');
|
|
if (firstLink) firstLink.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && navLinks.classList.contains('open')) {
|
|
closeMobileMenu(true);
|
|
}
|
|
});
|
|
|
|
// 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>
|