Add Verse By Verse: Nuggets sub-show with editable hosts and RSS feed
Publish Container / docker (push) Successful in 14m16s
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:
1 parent
335a9cbe31
commit
31e79ad542
11 files changed
+573
-41
No files matched your search
+144
-1
@@ -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 => {
|
||||
|
||||
Reference in new issue
Block a user