nate/Siteforge
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign Nuggets page: host pills in a row above episodes; v2.0.22
Publish Container / docker (push) Successful in 14m8s
Details

Browse Source 
Replaces the two-column hosts/episodes sidebar layout with a single full-width
column: host pills (photo + name, pill-shaped, clickable) in a horizontal row
at the top, episodes list filling the full width below.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-09-16 07:37:25 -04:00
1 parent b35605f411
commit 7ff5c453e8
3 files changed
+24 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.tsx
+15 -24
View File
@@ -1926,31 +1926,22 @@ function NuggetsPage({ content }: { content: SiteContent }) {
)}
<section className="section-nuggets-body" aria-label={`${nuggets.title} hosts and episodes`}>
<div className="section-inner nuggets-body-layout">
<div className="nuggets-body-col nuggets-body-hosts">
{activeHosts.length > 0 && (
<>
<p className="eyebrow">Meet the Hosts</p>
<div className="nuggets-hosts-list">
{activeHosts.map(host => (
<Link key={host.id} to={`/nuggets/hosts/${host.id}`} className="nuggets-host-card nuggets-host-card--link">
<div className="nuggets-host-card-header">
{host.imageUrl && <img src={host.imageUrl} alt={host.name} className="nuggets-host-card-img" loading="lazy" />}
<div className="nuggets-host-card-meta">
<h3 className="nuggets-host-card-name">{host.name}</h3>
{host.role && <p className="nuggets-host-card-role">{host.role}</p>}
</div>
</div>
{host.bio && <p className="nuggets-host-card-bio">{host.bio}</p>}
<p className="nuggets-host-card-cta">View Profile →</p>
</Link>
))}
</div>
</>
)}
</div>
<div className="section-inner">
{activeHosts.length > 0 && (
<div className="nuggets-hosts-row-wrap">
<p className="eyebrow" style={{ marginBottom: '1rem' }}>Meet the Hosts</p>
<div className="nuggets-hosts-row">
{activeHosts.map(host => (
<Link key={host.id} to={`/nuggets/hosts/${host.id}`} className="nuggets-host-pill">
{host.imageUrl && <img src={host.imageUrl} alt={host.name} className="nuggets-host-pill-img" loading="lazy" />}
<span className="nuggets-host-pill-name">{host.name}</span>
</Link>
))}
</div>
</div>
)}
<div className="nuggets-body-col nuggets-body-episodes">
<div className="nuggets-episodes-full">
<p className="eyebrow">Episodes</p>
{loading ? (
<p className="nuggets-episodes-note">Loading episodes…</p>