Fix Ko-fi support section to match dark site theme; v1.1.48

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

package.json

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

src/AdminPage.tsx

@@ -936,6 +936,8 @@ const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; sect
   { key: 'platformAmazonUrl', label: 'Platform — Amazon Music URL', section: 'global' },
   { key: 'platformFacebookUrl', label: 'Platform — Facebook URL', section: 'global' },
   { key: 'platformCreatorUrl', label: 'Platform — Creator Profile URL', section: 'global' },
+  { key: 'platformKofiUrl', label: 'Platform — Ko-fi URL', section: 'global' },
+  { key: 'platformKofiQrUrl', label: 'Platform — Ko-fi QR Code Image URL', section: 'global' },
   { key: 'welcomeEmailSubject', label: 'Welcome Email — Subject', section: 'global' },
   { key: 'welcomeEmailGreetingPrefix', label: 'Welcome Email — Greeting Prefix', section: 'global' },
   { key: 'welcomeEmailIntro', label: 'Welcome Email — Intro Paragraph', multiline: true, section: 'global' },

src/App.css

@@ -12006,3 +12006,15 @@
 .ct-history-ep-section { margin-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 0.6rem; }
 .ct-history-ep-label { font-size: 0.72rem; color: #6b7280; margin: 0 0 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
 .ct-history-item--ep { background: rgba(99,102,241,0.07); border-left: 2px solid #6366f1; }
+
+/* ── Ko-fi support section ───────────────────────────────────────────────── */
+.section-kofi-support { background: var(--brand-black-2, #0f0f0c); padding: 4.5rem 1.5rem; text-align: center; border-top: 1px solid var(--brand-border, #2a2518); border-bottom: 1px solid var(--brand-border, #2a2518); }
+.kofi-support-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
+.kofi-support-inner .eyebrow { color: var(--brand-gold, #c9a84c); }
+.kofi-support-inner h2 { font-family: var(--brand-font-heading, 'Cormorant Garamond', serif); font-size: 2.2rem; font-weight: 600; color: var(--brand-warm-white, #f0ead8); margin: 0; }
+.kofi-support-desc { font-size: 1rem; line-height: 1.75; color: var(--brand-muted, #b0a48c); max-width: 460px; margin: 0; }
+.kofi-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.5rem 0; }
+.kofi-qr-img { width: 180px; height: 180px; border-radius: 8px; border: 1px solid var(--brand-border, #2a2518); }
+.kofi-qr-caption { font-size: 0.78rem; color: var(--brand-muted, #b0a48c); letter-spacing: 0.03em; }
+.kofi-btn { display: inline-block; background: transparent; color: var(--brand-gold, #c9a84c); border: 1px solid var(--brand-gold, #c9a84c); font-size: 0.9rem; font-weight: 600; padding: 0.7rem 1.75rem; border-radius: 4px; text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s; }
+.kofi-btn:hover { background: var(--brand-gold, #c9a84c); color: var(--brand-black, #0a0a08); }

src/App.tsx

@@ -452,6 +452,7 @@ function SiteFooter({ content }: { content: SiteContent }) {
   const amazonUrl = content.platformAmazonUrl || '/amazon'
   const creatorUrl = content.platformCreatorUrl || 'https://creators.spotify.com/pod/profile/nmemmert/'
   const facebookUrl = content.platformFacebookUrl || 'https://facebook.com/versebyversewithnate'
+  const kofiUrl = content.platformKofiUrl
   const extraFooterLinks = (content.customLinks ?? []).filter(
     l => l.placement === 'footer' || l.placement === 'platforms' || l.placement === 'otherSites',
   )
@@ -479,6 +480,12 @@ function SiteFooter({ content }: { content: SiteContent }) {
         <a href={creatorUrl} target="_blank" rel="noreferrer">Creator Profile</a>
         <span aria-hidden="true">·</span>
         <a href={facebookUrl} target="_blank" rel="noreferrer">Facebook</a>
+        {kofiUrl && (
+          <>
+            <span aria-hidden="true">·</span>
+            <a href={kofiUrl} target="_blank" rel="noreferrer">Support on Ko-fi</a>
+          </>
+        )}
         {extraFooterLinks.length > 0 && (
           <>
             <span aria-hidden="true">·</span>
@@ -550,6 +557,35 @@ function PlatformButtons({ content }: { content: SiteContent }) {
   )
 }
 
+function KofiSupportSection({ content }: { content: SiteContent }) {
+  const kofiUrl = content.platformKofiUrl
+  const qrUrl = content.platformKofiQrUrl
+  if (!kofiUrl && !qrUrl) return null
+  return (
+    <section className="section-kofi-support" aria-label="Support the show">
+      <div className="section-inner kofi-support-inner">
+        <p className="eyebrow">Support the Ministry</p>
+        <h2>Help Keep the Word Going</h2>
+        <p className="kofi-support-desc">
+          This podcast and study resources are listener-supported. If God has used this ministry in your life,
+          consider buying me a coffee — it goes directly toward keeping the teaching free for everyone.
+        </p>
+        {qrUrl && (
+          <div className="kofi-qr-wrap">
+            <img src={qrUrl} alt="Ko-fi donation QR code" className="kofi-qr-img" />
+            <p className="kofi-qr-caption">Scan to give on Ko-fi</p>
+          </div>
+        )}
+        {kofiUrl && (
+          <a href={kofiUrl} target="_blank" rel="noreferrer" className="kofi-btn">
+            ☕ Support on Ko-fi
+          </a>
+        )}
+      </div>
+    </section>
+  )
+}
+
 function AboutSection({ content }: { content: SiteContent }) {
   return (
     <section className="section-about" aria-label="About the show">
@@ -1887,6 +1923,7 @@ function AboutPage({ content }: { content: SiteContent }) {
       <SiteSearchBar content={content} />
       <PageBanner eyebrow="About" title="About the Show" />
       <AboutSection content={content} />
+      <KofiSupportSection content={content} />
       <TestimonialsSection testimonials={content.testimonials ?? []} />
       <CustomBlocksSection content={content} page="about" />
       <SiteFooter content={content} />
@@ -2548,6 +2585,26 @@ export default function App() {
       .catch(() => {})
   }, [])
 
+  useEffect(() => {
+    const kofiUrl = content.platformKofiUrl
+    if (!kofiUrl) return
+    const username = kofiUrl.replace(/\/$/, '').split('/').pop()
+    if (!username) return
+    if (document.getElementById('kofi-overlay-script')) return
+    const script = document.createElement('script')
+    script.id = 'kofi-overlay-script'
+    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.umd.min.js'
+    script.onload = () => {
+      ;(window as any).kofiWidgetOverlay?.draw(username, {
+        type: 'floating-chat',
+        'floating-chat.donateButton.text': 'Support the Show',
+        'floating-chat.donateButton.background-color': '#29abe0',
+        'floating-chat.donateButton.text-color': '#fff',
+      })
+    }
+    document.body.appendChild(script)
+  }, [content.platformKofiUrl])
+
   useEffect(() => {
     if (location.pathname !== '/' || !location.hash) return
 

src/content.ts

@@ -199,6 +199,8 @@ export interface SiteContent {
   platformAmazonUrl: string
   platformFacebookUrl: string
   platformCreatorUrl: string
+  platformKofiUrl?: string
+  platformKofiQrUrl?: string
   // ── Welcome Email ──
   welcomeEmailSubject: string
   welcomeEmailGreetingPrefix: string
@@ -416,6 +418,8 @@ export const DEFAULTS: SiteContent = {
   platformAmazonUrl: '/amazon',
   platformFacebookUrl: 'https://facebook.com/versebyversewithnate',
   platformCreatorUrl: 'https://creators.spotify.com/pod/profile/nmemmert/',
+  platformKofiUrl: 'https://ko-fi.com/versebyversewithnate',
+  platformKofiQrUrl: '/images/kofi-qr.png',
   welcomeEmailSubject: 'Welcome to Verse by Verse with Nate',
   welcomeEmailGreetingPrefix: 'Glad you\'re here',
   welcomeEmailIntro: 'Thanks for subscribing to Verse by Verse with Nate - a Bible teaching podcast where we slow down, dig into the text, and pull out the nuggets God has for us word by word.',