Add Verse By Verse: Nuggets sub-show with editable hosts and RSS feed
Publish Container / docker (push) Successful in 14m16s

New /nuggets page for the companion show, linked from the Episodes nav
dropdown. Hosts (name, role, bio, photo) show in a left column with the
episode list on the right — latest episode featured, rest below.
Episodes are pulled from an admin-configurable RSS feed URL (empty by
default, shows "coming soon" until set) rather than hardcoded like the
main show's feed, since the show doesn't have one yet.

Everything is editable in /admin under a new Nuggets section: Show
Settings (title, tagline, description, podcast art, RSS/platform URLs)
and Hosts (add freely; removing a host archives them instead of
deleting — kept on record and restorable, never lost).

Extracted the RSS item-parsing logic shared with the main show's feed
(server/routes/episodes.js) into server/rss-helpers.js so both feeds
use the same parser instead of duplicating it.

Also fixes the local Vite dev server not proxying /uploads/* to the
backend — it was silently serving the SPA shell (200, text/html)
instead of the actual file, so any admin-uploaded image (podcast art,
host photos, etc.) appeared broken in local dev only.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Yvx4rPVy2HWe7ubuk3X3J
This commit is contained in:
nmemmertandClaude Sonnet 5 committed 2026-09-07 14:27:52 -04:00
1 parent 335a9cbe31
commit 31e79ad542
11 files changed
+573 -41

No files matched your search

+144 -1
View File
@@ -4,7 +4,7 @@ import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable }
import { CSS } from '@dnd-kit/utilities'
import type { ChangeEvent } from 'react'
import { Link } from 'react-router-dom'
import type { SiteContent, CustomLink, CustomBlock, ColossiansStudySection, StudyProgram, RedirectRule, PodcastFeaturedLink, SeoSettings, LegalSettings } from './content'
import type { SiteContent, CustomLink, CustomBlock, ColossiansStudySection, StudyProgram, RedirectRule, PodcastFeaturedLink, SeoSettings, LegalSettings, PodcastHost } from './content'
import { DEFAULTS } from './content'
import { AnalyticsPanel } from './components/AnalyticsPanel'
import { AdminCollapsibleCard } from './components/AdminCollapsibleCard'
@@ -666,6 +666,7 @@ type AdminView =
| 'about:show-copy' | 'about:bio' | 'about:testimonials'
| 'contact:profile' | 'contact:copy'
| 'podcast:current-series' | 'podcast:highlights' | 'podcast:finished-books' | 'podcast:scripts' | 'podcast:rss'
| 'nuggets:settings' | 'nuggets:hosts'
| 'downloads' | 'custom-links' | 'content-blocks' | 'books' | 'recommended-resources'
| 'questions' | 'study-comments' | 'analytics' | 'assets' | 'colossians-study' | 'qr-codes'
| 'subscribers' | 'study-users' | 'email-templates' | 'broadcast'
@@ -717,6 +718,10 @@ const ADMIN_NAV: NavGroup[] = [
{ kind: 'leaf', view: 'podcast:scripts', label: 'Episode Scripts' },
{ kind: 'leaf', view: 'podcast:rss', label: 'RSS Feed' },
]},
{ kind: 'parent', id: 'nuggets', label: 'Nuggets', children: [
{ kind: 'leaf', view: 'nuggets:settings', label: 'Show Settings' },
{ kind: 'leaf', view: 'nuggets:hosts', label: 'Hosts' },
]},
{ kind: 'leaf', view: 'colossians-study', label: 'Studies' },
{ kind: 'leaf', view: 'downloads', label: 'Resources' },
{ kind: 'leaf', view: 'custom-links', label: 'Custom Links' },
@@ -4574,6 +4579,144 @@ async function handleAssetUpload(event: ChangeEvent<HTMLInputElement>) {
)
})()}
{/* NUGGETS — SHOW SETTINGS */}
{adminView === 'nuggets:settings' && (() => {
const nuggets = form.nuggets ?? DEFAULTS.nuggets
const updateNuggets = <K extends keyof typeof nuggets>(key: K, value: (typeof nuggets)[K]) =>
setForm(f => ({ ...f, nuggets: { ...(f.nuggets ?? DEFAULTS.nuggets), [key]: value } }))
return (
<section className="admin-panel-section" aria-label="Nuggets show settings">
<div className="admin-panel-head">
<h2>Nuggets — Show Settings</h2>
<p>Verse By Verse: Nuggets is a companion show. Visitors reach it at <code>/nuggets</code>.</p>
</div>
<div className="admin-array-fields">
<div className="admin-field">
<label htmlFor="nuggets-title">Show Title</label>
<input id="nuggets-title" type="text" value={nuggets.title} onChange={e => updateNuggets('title', e.target.value)} />
</div>
<div className="admin-field">
<label htmlFor="nuggets-tagline">Tagline</label>
<input id="nuggets-tagline" type="text" placeholder="Short verse-bite teaching, one nugget at a time." value={nuggets.tagline} onChange={e => updateNuggets('tagline', e.target.value)} />
</div>
<div className="admin-field">
<label htmlFor="nuggets-description">Description</label>
<textarea id="nuggets-description" rows={4} value={nuggets.description} onChange={e => updateNuggets('description', e.target.value)} />
</div>
<div className="admin-field">
<label htmlFor="nuggets-art">Podcast Art</label>
<input id="nuggets-art" type="text" placeholder="/uploads/nuggets-art.png" value={nuggets.podcastArtUrl} onChange={e => updateNuggets('podcastArtUrl', e.target.value)} />
{renderImageAssetSelector(nuggets.podcastArtUrl, value => updateNuggets('podcastArtUrl', value), 'nuggets-art-asset')}
{renderImagePreview(nuggets.podcastArtUrl, `${nuggets.title} podcast art`)}
</div>
<div className="admin-field">
<label htmlFor="nuggets-rss">RSS Feed URL</label>
<input id="nuggets-rss" type="text" placeholder="https://anchor.fm/s/xxxxxxxx/podcast/rss" value={nuggets.rssFeedUrl} onChange={e => updateNuggets('rssFeedUrl', e.target.value)} />
<p className="admin-field-help">
{nuggets.rssFeedUrl.trim()
? 'The /nuggets page pulls its episode list from this feed (cached 30 minutes).'
: 'Leave blank until the show has a feed — the page will show "Episodes coming soon" until this is set.'}
</p>
</div>
<div className="admin-field">
<label htmlFor="nuggets-spotify">Spotify URL</label>
<input id="nuggets-spotify" type="text" placeholder="https://open.spotify.com/show/..." value={nuggets.spotifyUrl} onChange={e => updateNuggets('spotifyUrl', e.target.value)} />
</div>
<div className="admin-field">
<label htmlFor="nuggets-apple">Apple Podcasts URL</label>
<input id="nuggets-apple" type="text" placeholder="https://podcasts.apple.com/..." value={nuggets.appleUrl} onChange={e => updateNuggets('appleUrl', e.target.value)} />
</div>
</div>
{renderSaveStatus()}
</section>
)
})()}
{/* NUGGETS — HOSTS */}
{adminView === 'nuggets:hosts' && (() => {
const hosts = form.nuggets?.hosts ?? []
const activeHosts = hosts.filter(h => !h.archived)
const archivedHosts = hosts.filter(h => h.archived)
const updateHost = (id: string, patch: Partial<PodcastHost>) =>
setForm(f => ({
...f,
nuggets: { ...(f.nuggets ?? DEFAULTS.nuggets), hosts: (f.nuggets?.hosts ?? []).map(h => h.id === id ? { ...h, ...patch } : h) },
}))
return (
<section className="admin-panel-section" aria-label="Nuggets hosts">
<div className="admin-panel-head">
<h2>Nuggets — Hosts</h2>
<p>Hosts shown on the public Nuggets page. Removing a host archives them — they're kept on record, never deleted, and can be restored.</p>
</div>
{activeHosts.length === 0 && (
<p className="admin-stats-note">No active hosts yet. Add one below.</p>
)}
{activeHosts.map(host => (
<AdminCollapsibleCard key={host.id} title={host.name || 'Unnamed host'} subtitle={host.role || 'No role set'}>
<div className="admin-array-row">
<div className="admin-array-fields">
<div className="admin-field">
<label>Name</label>
<input type="text" value={host.name} onChange={e => updateHost(host.id, { name: e.target.value })} />
</div>
<div className="admin-field">
<label>Role</label>
<input type="text" placeholder="Co-Host" value={host.role} onChange={e => updateHost(host.id, { role: e.target.value })} />
</div>
<div className="admin-field">
<label>Bio</label>
<textarea rows={3} value={host.bio} onChange={e => updateHost(host.id, { bio: e.target.value })} />
</div>
<div className="admin-field">
<label>Photo</label>
<input type="text" placeholder="/uploads/host-photo.jpg" value={host.imageUrl} onChange={e => updateHost(host.id, { imageUrl: e.target.value })} />
{renderImageAssetSelector(host.imageUrl, value => updateHost(host.id, { imageUrl: value }), `nuggets-host-img-${host.id}`)}
{renderImagePreview(host.imageUrl, host.name || 'Host photo')}
</div>
</div>
<button type="button" className="btn-admin-remove" onClick={() => updateHost(host.id, { archived: true })}>Archive</button>
</div>
</AdminCollapsibleCard>
))}
<button
type="button"
className="btn-admin-add"
onClick={() => setForm(f => ({
...f,
nuggets: {
...(f.nuggets ?? DEFAULTS.nuggets),
hosts: [...(f.nuggets?.hosts ?? []), { id: Date.now().toString(36), name: '', role: '', bio: '', imageUrl: '', archived: false }],
},
}))}
>
+ Add Host
</button>
{archivedHosts.length > 0 && (
<div style={{ marginTop: '2.5rem' }}>
<div className="admin-panel-head">
<h3>Archived Hosts</h3>
<p>Hidden from the public site. Restore to bring a host back.</p>
</div>
{archivedHosts.map(host => (
<div key={host.id} className="admin-array-row" style={{ alignItems: 'center' }}>
<div className="admin-array-fields" style={{ flexDirection: 'row', alignItems: 'center', gap: '1rem' }}>
{host.imageUrl && <img src={host.imageUrl} alt={host.name} style={{ width: 36, height: 36, borderRadius: '50%', objectFit: 'cover' }} />}
<span>{host.name || 'Unnamed host'}</span>
{host.role && <span style={{ color: '#7a7060', fontSize: '0.85rem' }}>{host.role}</span>}
</div>
<button type="button" className="btn-admin-save" onClick={() => updateHost(host.id, { archived: false })}>Restore</button>
</div>
))}
</div>
)}
{renderSaveStatus()}
</section>
)
})()}
{/* STUDY COMMENTS */}
{adminView === 'study-comments' && (() => {
const filtered = studyComments.filter(c => {