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:
@@ -167,3 +167,137 @@ Set-LocalUser -Name "username" -PasswordNeverExpires $true
|
||||
2. **Radio show structure** - Mac's curated 9-segment order is primary, remaining 4 segments as filler
|
||||
3. **Graph API over CIPP** - CIPP API lacked permissions for user operations; Graph API (Claude-MSP-Access) worked for MFA reset
|
||||
4. **607K record increase validated** - Confirmed accurate through monthly distribution analysis; mostly HISTLOGS backfill
|
||||
|
||||
---
|
||||
|
||||
## Update: 20:43 - Radio Show Website Build (radio.azcomputerguru.com)
|
||||
|
||||
### Summary
|
||||
|
||||
Built a complete premium radio show website for "The Computer Guru Show" using Astro 6.0.4 (static site generator with React islands). Site will live at radio.azcomputerguru.com, deployed to IX server (cPanel).
|
||||
|
||||
### Key Accomplishments
|
||||
|
||||
1. **Research Phase (parallel agents)**
|
||||
- Analyzed gurushow.com: WordPress 6.6.5, PowerPress/Blubrry, 230 posts, 194 podcast episodes (S6-S10, 2014-2018)
|
||||
- Researched IX server hosting environment: Rocky Linux, WHM/cPanel, root access
|
||||
- Studied 10+ competitor sites: TWiT.tv, Darknet Diaries, ATP, Lex Fridman, Changelog, Security Now, etc.
|
||||
- Researched Discord integration (WidgetBot), Discourse forums, RSS feed specs, live streaming options
|
||||
|
||||
2. **Architecture & Tech Stack Decision**
|
||||
- **Astro 6.0.4** - static site generator, outputs pure HTML/CSS/JS (no Node runtime needed on cPanel)
|
||||
- React islands for interactive components (player, search, Discord widget)
|
||||
- HSL-based CSS custom property design system with dark/light mode
|
||||
- Content collections for episodes (markdown with frontmatter)
|
||||
|
||||
3. **Episode Import**
|
||||
- Created `scripts/import-episodes.mjs` - fetches RSS feed from gurushow.com/feed/podcast
|
||||
- **194 episodes imported** as markdown files with frontmatter (title, season, episode, audio URL, duration, tags)
|
||||
- Audio stays on Blubrry CDN (URLs normalized to HTTPS)
|
||||
- Auto-tagging based on keyword extraction from titles/descriptions
|
||||
- 7 warnings: 5 empty descriptions, 1 unparseable title ("Guest appearance on Liberty Watch")
|
||||
|
||||
4. **Full Website Built - 204 pages, zero build errors**
|
||||
- **Home page**: Animated hero with gradient text, pulsing glow rings, latest episodes grid, featured classics carousel, stats section, blog highlights, about preview, subscribe CTA
|
||||
- **Episodes archive**: Search + season filter tabs, responsive card grid, 194 episode detail pages
|
||||
- **Episode detail pages**: Breadcrumbs, metadata, HTML5 audio player, rendered show notes, related episodes
|
||||
- **Blog**: Listing + individual post pages (1 welcome-back post)
|
||||
- **About**: Host bio, show history timeline (2014-2026), topic coverage grid
|
||||
- **Subscribe**: Platform cards, RSS feed URL with copy button
|
||||
- **Community**: Discord (WidgetBot placeholder), Discourse (placeholder), newsletter signup
|
||||
- **Live**: Off-air status indicator, schedule placeholder, stream placeholder
|
||||
- **Contact**: Form with subject dropdown, sponsorship section
|
||||
- **404**: Styled error page
|
||||
- **RSS feed**: Podcast-compatible with iTunes namespace
|
||||
|
||||
5. **Persistent Audio Player (signature feature)**
|
||||
- Glassmorphism bottom bar with backdrop-filter blur
|
||||
- Play/pause, 15s skip, clickable progress bar, volume, playback speed (0.75x-2x)
|
||||
- Session persistence via sessionStorage (resumes on page load)
|
||||
- Keyboard shortcuts (Space, arrow keys)
|
||||
- Responsive (compact on mobile)
|
||||
- Slide-up animation, custom events for cross-component communication
|
||||
- Integrated with episode cards and detail pages
|
||||
|
||||
### Architecture Decisions
|
||||
|
||||
1. **Astro over WordPress/Next.js** - Static output deploys to cPanel as files, no Node runtime needed, full design control
|
||||
2. **Content collections** - 194 episodes as markdown with Zod-validated frontmatter, type-safe queries
|
||||
3. **React islands only for interactivity** - Persistent player, search, Discord widget; everything else is static Astro
|
||||
4. **Audio stays on Blubrry CDN** - No re-hosting, preserves existing analytics and avoids storage costs
|
||||
5. **Vanilla JS for filtering** - Episode archive search/filter doesn't need React, keeps bundle small
|
||||
6. **Dark mode first** - Tech audience preference, HSL-based tokens for easy theming
|
||||
7. **Self-hosted Discourse** - Will deploy to IX server for community forum
|
||||
8. **WidgetBot for Discord** - Embeds Discord chat directly on website
|
||||
|
||||
### Files Created
|
||||
|
||||
```
|
||||
projects/radio-show/website/
|
||||
astro.config.mjs
|
||||
package.json
|
||||
tsconfig.json
|
||||
scripts/import-episodes.mjs # RSS feed importer (194 episodes)
|
||||
src/
|
||||
content.config.ts # Content collection schemas (Astro v6 glob loader)
|
||||
styles/tokens.css # HSL design system tokens
|
||||
styles/global.css # Reset, typography, utilities
|
||||
layouts/BaseLayout.astro # HTML shell, nav, footer, theme toggle, persistent player
|
||||
components/
|
||||
global/PersistentPlayer.tsx # React island - sticky audio player
|
||||
home/HeroSection.astro # Animated hero with gradient text
|
||||
home/LatestEpisodes.astro # 6 latest episode cards
|
||||
home/FeaturedClassics.astro # Scrollable classics row
|
||||
home/StatsSection.astro # Stats grid (194 episodes, 10 seasons, etc.)
|
||||
home/BlogHighlights.astro # Latest blog posts
|
||||
home/AboutPreview.astro # Bio preview with CTA
|
||||
home/SubscribeCTA.astro # Platform subscribe buttons
|
||||
episodes/EpisodeCard.astro # Reusable episode card
|
||||
episodes/SeasonFilter.astro # Season tab filter bar
|
||||
pages/
|
||||
index.astro # Home page (7 sections)
|
||||
about.astro # Host bio, timeline, topics
|
||||
subscribe.astro # Platform cards, RSS
|
||||
community.astro # Discord, Discourse, newsletter
|
||||
live.astro # Live show page (off-air)
|
||||
contact.astro # Contact form, sponsorship
|
||||
404.astro # Error page
|
||||
feed.xml.ts # Podcast RSS feed
|
||||
episodes/index.astro # Episode archive with search/filter
|
||||
episodes/[...slug].astro # Episode detail pages (194)
|
||||
blog/index.astro # Blog listing
|
||||
blog/[...slug].astro # Blog post pages
|
||||
utils/formatDate.ts, formatDuration.ts, episodeSlug.ts
|
||||
data/navigation.ts, platforms.ts
|
||||
content/episodes/*.md # 194 episode markdown files
|
||||
content/blog/welcome-back.md # Initial blog post
|
||||
```
|
||||
|
||||
### Deployment Plan (for Mac/later)
|
||||
|
||||
1. cPanel on IX server (ix.azcomputerguru.com)
|
||||
2. Create subdomain radio.azcomputerguru.com in WHM
|
||||
3. `npm run build` -> `dist/` folder
|
||||
4. rsync/SCP dist/ to document root
|
||||
5. AutoSSL for HTTPS
|
||||
6. .htaccess for caching, compression, HTTPS redirect
|
||||
|
||||
### Pending / Next Steps
|
||||
|
||||
1. **Waveform visualization** - WaveSurfer.js integration for the persistent player (dependency installed, not wired up yet)
|
||||
2. **Hero background images** - Need actual images in `public/images/heroes/`
|
||||
3. **Discord integration** - Configure WidgetBot with actual Discord server ID/channel
|
||||
4. **Discourse setup** - Install Discourse on IX server, configure community page links
|
||||
5. **Episode curation** - Mark selected episodes as `classic: true` and `featured: true` in frontmatter
|
||||
6. **Host photo** - Add Mike's photo for about page
|
||||
7. **OG image** - Create proper Open Graph image for social sharing
|
||||
8. **Deploy to cPanel** - Create subdomain, upload build, configure SSL
|
||||
9. **Podcast directory submission** - Submit new RSS feed URL to Apple Podcasts, Spotify
|
||||
10. **Contact form backend** - Set up Formspree or similar for the contact form
|
||||
11. **Newsletter integration** - Connect signup form to email service
|
||||
|
||||
### Dev Server
|
||||
|
||||
- Local: http://localhost:4321/
|
||||
- Build command: `cd projects/radio-show/website && npm run build`
|
||||
- Dev command: `cd projects/radio-show/website && npx astro dev --port 4321`
|
||||
|
||||
Reference in New Issue
Block a user