Add structured show notes form to Episode Highlights; v1.2.3

Replace single showNotes textarea with five guided fields: Episode Summary,
Key Themes, Scripture References, Key Quotes, and Resources & Links. Legacy
showNotes content is preserved as a backward-compatible fallback — it
auto-populates the Summary field in the admin editor and renders on the public
episode detail page until overwritten with structured data.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/AdminPage.tsx

@@ -1642,7 +1642,11 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
           summary: '',
           url: '',
           embedUrl: '',
-          showNotes: '',
+          showNotesSummary: '',
+          showNotesThemes: [],
+          showNotesScripture: [],
+          showNotesQuotes: [],
+          showNotesResources: [],
           discussionQuestions: [],
         },
       ],
@@ -1656,6 +1660,16 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
     }))
   }
 
+  function updatePodcastLinkStringArray(id: string, field: keyof PodcastFeaturedLink, raw: string) {
+    const items = raw.split('\n').map(s => s.trim()).filter(Boolean)
+    setForm(f => ({
+      ...f,
+      podcastFeaturedLinks: (f.podcastFeaturedLinks ?? []).map(link =>
+        link.id === id ? { ...link, [field]: items } : link
+      ),
+    }))
+  }
+
   function updatePodcastLinkQuestions(id: string, raw: string) {
     const questions = raw.split('\n').map(q => q.trim()).filter(Boolean)
     setForm(f => ({
@@ -3440,8 +3454,54 @@ async function handleAssetUpload(event: ChangeEvent<HTMLInputElement>) {
                         </select>
                       </div>
                       <div className="admin-field">
-                        <label htmlFor={`podcast-notes-${activeHighlight.id}`}>Show Notes</label>
-                        <textarea id={`podcast-notes-${activeHighlight.id}`} rows={4} placeholder="Key points, scripture references, timestamps..." value={activeHighlight.showNotes ?? ''} onChange={e => updatePodcastLink(activeHighlight.id, 'showNotes', e.target.value)} />
+                        <label htmlFor={`podcast-notes-summary-${activeHighlight.id}`}>Episode Summary</label>
+                        <textarea
+                          id={`podcast-notes-summary-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="2–3 sentences summarizing the episode..."
+                          value={activeHighlight.showNotesSummary ?? (activeHighlight.showNotes && !(activeHighlight.showNotesThemes?.length) ? activeHighlight.showNotes : '')}
+                          onChange={e => updatePodcastLink(activeHighlight.id, 'showNotesSummary', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-themes-${activeHighlight.id}`}>Key Themes (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-themes-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Faith and doubt&#10;Prayer in suffering&#10;Community"
+                          value={(activeHighlight.showNotesThemes ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesThemes', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-scripture-${activeHighlight.id}`}>Scripture References (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-scripture-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Romans 8:28&#10;Psalm 23:4"
+                          value={(activeHighlight.showNotesScripture ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesScripture', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-quotes-${activeHighlight.id}`}>Key Quotes (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-quotes-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="God meets us in the middle of our mess."
+                          value={(activeHighlight.showNotesQuotes ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesQuotes', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-resources-${activeHighlight.id}`}>Resources &amp; Links (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-resources-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Book: The Ruthless Elimination of Hurry by John Mark Comer&#10;https://example.com"
+                          value={(activeHighlight.showNotesResources ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesResources', e.target.value)}
+                        />
                       </div>
                       <div className="admin-field">
                         <label htmlFor={`podcast-dq-${activeHighlight.id}`}>Discussion Questions (one per line)</label>

src/App.tsx

@@ -716,6 +716,11 @@ function PodcastHighlightsSection({ content }: { content: SiteContent }) {
               || isLikelySpotifyEpisodeUrl(link.url)
               || (link.discussionQuestions ?? []).length > 0
               || link.showNotes
+              || link.showNotesSummary
+              || (link.showNotesThemes ?? []).length > 0
+              || (link.showNotesScripture ?? []).length > 0
+              || (link.showNotesQuotes ?? []).length > 0
+              || (link.showNotesResources ?? []).length > 0
             )
             const dest = (!hasRichContent && link.url)
               ? { external: link.url }
@@ -1500,10 +1505,45 @@ function EpisodeDetailPage({ content }: { content: SiteContent }) {
             </a>
           )}
 
-          {episode.showNotes && (
+          {(episode.showNotesSummary || (episode.showNotesThemes ?? []).length > 0 || (episode.showNotesScripture ?? []).length > 0 || (episode.showNotesQuotes ?? []).length > 0 || (episode.showNotesResources ?? []).length > 0 || episode.showNotes) && (
             <div className="episode-detail-show-notes">
               <h2 className="episode-detail-section-heading">Show Notes</h2>
-              <p>{episode.showNotes}</p>
+              {episode.showNotesSummary
+                ? <p>{episode.showNotesSummary}</p>
+                : episode.showNotes && !(episode.showNotesThemes ?? []).length && <p>{episode.showNotes}</p>
+              }
+              {(episode.showNotesThemes ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Key Themes</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesThemes!.map((t, i) => <li key={i}>{t}</li>)}
+                  </ul>
+                </div>
+              )}
+              {(episode.showNotesScripture ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Scripture References</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesScripture!.map((s, i) => <li key={i}>{s}</li>)}
+                  </ul>
+                </div>
+              )}
+              {(episode.showNotesQuotes ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Key Quotes</h3>
+                  {episode.showNotesQuotes!.map((q, i) => (
+                    <blockquote key={i} className="episode-detail-show-notes-quote">{q}</blockquote>
+                  ))}
+                </div>
+              )}
+              {(episode.showNotesResources ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Resources</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesResources!.map((r, i) => <li key={i}>{r}</li>)}
+                  </ul>
+                </div>
+              )}
             </div>
           )}
 

src/content.ts

@@ -67,6 +67,13 @@ export interface PodcastFeaturedLink {
   summary: string
   url: string
   embedUrl?: string
+  // Structured show notes fields
+  showNotesSummary?: string
+  showNotesThemes?: string[]
+  showNotesScripture?: string[]
+  showNotesQuotes?: string[]
+  showNotesResources?: string[]
+  // Legacy plain-text field — kept for backward compat with live data
   showNotes?: string
   discussionQuestions?: string[]
 }