azcomputerguru/claudetools
1
0
Fork 0
Code Issues 73 Pull Requests Actions Packages Projects Releases Wiki Activity

Radio show website: Full Astro build with 194 episodes imported

Browse Source 
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:
Mike Swanson
2026-03-14 20:44:42 -07:00
parent 1adc2ed3a4
commit ee89727662
236 changed files with 16513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
projects/radio-show/website/src/pages/blog/[...slug].astro Normal file
View File

@@ -0,0 +1,186 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection, render } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { slug: post.id },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await render(post);
---
<BaseLayout title={post.data.title} description={post.data.description}>
<article class="article section">
<div class="container--narrow">
<!-- Back Link -->
<a href="/blog" class="back-link fade-in">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
Back to Blog
</a>
<!-- Article Header -->
<header class="article__header fade-in">
<div class="article__meta">
<time datetime={post.data.pubDate.toISOString()}>
{post.data.pubDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</time>
<span class="article__author">by {post.data.author}</span>
</div>
<h1 class="article__title">{post.data.title}</h1>
{post.data.tags.length > 0 && (
<div class="article__tags">
{post.data.tags.map((tag: string) => (
<span class="badge">{tag}</span>
))}
</div>
)}
</header>
<!-- Article Content -->
<div class="article__content prose fade-in">
<Content />
</div>
<!-- Back Link Bottom -->
<div class="article__footer fade-in">
<a href="/blog" class="btn btn--ghost">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
Back to Blog
</a>
</div>
</div>
</article>
</BaseLayout>
<style>
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-8);
}
.back-link:hover {
color: var(--color-accent);
}
.article__header {
margin-bottom: var(--space-12);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
}
.article__meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.article__meta time {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.article__author {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.article__title {
font-size: var(--text-4xl);
line-height: 1.15;
margin-bottom: var(--space-4);
}
.article__tags {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Prose styles for rendered markdown */
.prose {
line-height: 1.8;
color: var(--color-text-secondary);
}
.prose :global(h2) {
font-size: var(--text-2xl);
color: var(--color-text-primary);
margin-top: var(--space-12);
margin-bottom: var(--space-4);
}
.prose :global(h3) {
font-size: var(--text-xl);
color: var(--color-text-primary);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.prose :global(p) {
margin-bottom: var(--space-6);
}
.prose :global(ul),
.prose :global(ol) {
margin-bottom: var(--space-6);
padding-left: var(--space-6);
}
.prose :global(li) {
margin-bottom: var(--space-2);
}
.prose :global(strong) {
color: var(--color-text-primary);
font-weight: 600;
}
.prose :global(a) {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.prose :global(blockquote) {
border-left: 3px solid var(--color-accent);
padding-left: var(--space-6);
margin-block: var(--space-6);
color: var(--color-text-muted);
font-style: italic;
}
.prose :global(code) {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--color-bg-tertiary);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}
.prose :global(pre) {
background: var(--color-bg-tertiary);
padding: var(--space-6);
border-radius: var(--radius-md);
overflow-x: auto;
margin-bottom: var(--space-6);
}
.prose :global(pre code) {
background: none;
padding: 0;
}
.prose :global(hr) {
border: none;
border-top: 1px solid var(--color-border);
margin-block: var(--space-8);
}
.article__footer {
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
.article__title {
font-size: var(--text-3xl);
}
}
</style>

134
projects/radio-show/website/src/pages/blog/index.astro Normal file
View File

@@ -0,0 +1,134 @@
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';
const allPosts = await getCollection('blog', ({ data }) => !data.draft);
const posts = allPosts.sort((a, b) =>
new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
);
---
<BaseLayout title="Blog" description="Articles, guides, and updates from The Computer Guru Show.">
<!-- Hero -->
<section class="hero section">
<div class="container">
<span class="badge fade-in">Blog</span>
<h1 class="hero__title fade-in">Blog</h1>
<p class="hero__subtitle fade-in">
{posts.length} {posts.length === 1 ? 'post' : 'posts'} -- articles, updates, and guides.
</p>
</div>
</section>
<!-- Posts Grid -->
<section class="section">
<div class="container">
{posts.length === 0 ? (
<div class="empty-state fade-in">
<p>No blog posts yet. Check back soon.</p>
</div>
) : (
<div class="grid grid--2">
{posts.map((post) => (
<a href={`/blog/${post.id}`} class="card post-card fade-in">
<div class="post-card__meta">
<time datetime={post.data.pubDate.toISOString()}>
{post.data.pubDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</time>
</div>
<h2 class="post-card__title">{post.data.title}</h2>
<p class="post-card__desc">{post.data.description}</p>
<div class="post-card__footer">
{post.data.tags.length > 0 && (
<div class="post-card__tags">
{post.data.tags.map((tag: string) => (
<span class="badge">{tag}</span>
))}
</div>
)}
<span class="post-card__link">Read More &rarr;</span>
</div>
</a>
))}
</div>
)}
</div>
</section>
</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);
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-16);
color: var(--color-text-muted);
font-size: var(--text-lg);
}
/* Post Card */
.post-card {
display: flex;
flex-direction: column;
color: var(--color-text-primary);
padding: var(--space-8);
}
.post-card:hover {
color: var(--color-text-primary);
}
.post-card__meta {
margin-bottom: var(--space-3);
}
.post-card__meta time {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.post-card__title {
font-size: var(--text-xl);
margin-bottom: var(--space-3);
line-height: 1.3;
}
.post-card__desc {
color: var(--color-text-secondary);
font-size: var(--text-sm);
line-height: 1.7;
flex: 1;
}
.post-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-6);
flex-wrap: wrap;
gap: var(--space-3);
}
.post-card__tags {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.post-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
}
</style>