azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f22d33f2aeaa17e9f539e38a2500b9c8d8fb09c3
claudetools/projects/radio-show/website/src/pages/subscribe.astro
Mike Swanson ee89727662 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>
2026-03-14 20:44:42 -07:00

225 lines
9.2 KiB
Plaintext
Raw Blame History

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { platforms } from '../data/platforms';
---
<BaseLayout title="Subscribe" description="Subscribe to The Computer Guru Show on your favorite podcast platform.">
<!-- Hero -->
<section class="hero section">
<div class="container">
<span class="badge fade-in">Subscribe</span>
<h1 class="hero__title fade-in">Subscribe to The Computer Guru Show</h1>
<p class="hero__subtitle fade-in">
Never miss an episode. Choose your favorite platform.
</p>
</div>
</section>
<!-- Platform Grid -->
<section class="section">
<div class="container">
<div class="grid grid--3">
{platforms.map((platform) => (
<a href={platform.url} class="card platform-card fade-in" target={platform.url.startsWith('http') ? '_blank' : undefined} rel={platform.url.startsWith('http') ? 'noopener noreferrer' : undefined}>
<div class="platform-card__icon" data-platform={platform.icon}>
{platform.icon === 'apple' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
)}
{platform.icon === 'spotify' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
)}
{platform.icon === 'google' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm-.001 4.5a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5 7.5 7.5 0 0 1-7.5-7.5 7.5 7.5 0 0 1 7.5-7.5zm0 2a5.5 5.5 0 0 0-5.5 5.5 5.5 5.5 0 0 0 5.5 5.5 5.5 5.5 0 0 0 5.5-5.5 5.5 5.5 0 0 0-5.5-5.5zm0 2a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 12a3.5 3.5 0 0 1 3.499-3.5z"/></svg>
)}
{platform.icon === 'overcast' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14l2-4 2 4"/><path d="M12 14l2-4 2 4"/></svg>
)}
{platform.icon === 'pocketcasts' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M2 12h2"/><path d="M20 12h2"/></svg>
)}
{platform.icon === 'rss' && (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
)}
</div>
<h3 class="platform-card__name">{platform.name}</h3>
<span class="btn btn--ghost platform-card__btn">Subscribe</span>
</a>
))}
</div>
</div>
</section>
<!-- RSS Feed Section -->
<section class="section">
<div class="container">
<div class="rss-section fade-in">
<h2 class="section__title">RSS Feed</h2>
<p class="rss-section__desc">
Prefer a dedicated podcast app or RSS reader? Copy the feed URL below and add it manually.
RSS (Really Simple Syndication) lets you subscribe to content updates without needing
a specific platform account. Most podcast apps have an "Add by URL" option where you
can paste this link.
</p>
<div class="rss-input-group">
<input
type="text"
id="rss-url"
value="https://radio.azcomputerguru.com/feed.xml"
readonly
class="rss-input"
aria-label="RSS Feed URL"
/>
<button id="copy-rss" class="btn btn--primary" type="button">Copy</button>
</div>
<p id="copy-feedback" class="rss-feedback" aria-live="polite"></p>
</div>
</div>
</section>
<!-- What to Expect -->
<section class="section">
<div class="container">
<h2 class="section__title fade-in">What to Expect</h2>
<div class="grid grid--3">
<div class="card expect-card fade-in">
<h3>New Episodes</h3>
<p>Fresh episodes are on the way. Subscribe now so you are ready when they drop.</p>
<span class="badge">Coming Soon</span>
</div>
<div class="card expect-card fade-in">
<h3>Full Archive</h3>
<p>All 194 episodes from 10 seasons of the original run are available right now.</p>
<span class="badge">Available</span>
</div>
<div class="card expect-card fade-in">
<h3>Show Notes</h3>
<p>Every episode includes detailed show notes with links to the topics discussed.</p>
<span class="badge">Available</span>
</div>
</div>
</div>
</section>
<script is:inline>
document.getElementById('copy-rss').addEventListener('click', function() {
var input = document.getElementById('rss-url');
var feedback = document.getElementById('copy-feedback');
navigator.clipboard.writeText(input.value).then(function() {
feedback.textContent = 'Copied to clipboard.';
feedback.className = 'rss-feedback rss-feedback--success';
setTimeout(function() {
feedback.textContent = '';
feedback.className = 'rss-feedback';
}, 3000);
}).catch(function() {
input.select();
feedback.textContent = 'Press Ctrl+C to copy.';
feedback.className = 'rss-feedback';
});
});
</script>
</BaseLayout>
<style>
.hero {
text-align: center;
padding-block: var(--space-16) var(--space-8);
}
.hero__title {
font-size: var(--text-4xl);
margin-top: var(--space-4);
margin-bottom: var(--space-4);
}
.hero__subtitle {
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 520px;
margin-inline: auto;
}
/* Platform Cards */
.platform-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-8) var(--space-6);
cursor: pointer;
color: var(--color-text-primary);
}
.platform-card:hover {
color: var(--color-text-primary);
}
.platform-card__icon {
color: var(--color-accent);
margin-bottom: var(--space-4);
transition: transform var(--transition-base);
}
.platform-card:hover .platform-card__icon {
transform: scale(1.1);
}
.platform-card__name {
font-size: var(--text-lg);
margin-bottom: var(--space-4);
}
.platform-card__btn {
margin-top: auto;
}
/* RSS Section */
.rss-section {
max-width: 640px;
margin-inline: auto;
text-align: center;
}
.rss-section__desc {
color: var(--color-text-secondary);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
line-height: 1.8;
}
.rss-input-group {
display: flex;
gap: var(--space-2);
max-width: 500px;
margin-inline: auto;
}
.rss-input {
flex: 1;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.rss-input:focus {
outline: 2px solid var(--color-accent);
outline-offset: -1px;
}
.rss-feedback {
font-size: var(--text-sm);
margin-top: var(--space-2);
min-height: 1.4em;
}
.rss-feedback--success {
color: var(--color-success);
}
/* Expect Cards */
.expect-card {
text-align: center;
padding: var(--space-8) var(--space-6);
}
.expect-card h3 {
font-size: var(--text-lg);
margin-bottom: var(--space-3);
}
.expect-card p {
color: var(--color-text-secondary);
font-size: var(--text-sm);
margin-bottom: var(--space-4);
}
</style>
Reference in New Issue View Git Blame Copy Permalink