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

TFL fix

Browse Source
This commit is contained in:
nmemmert
2026-06-04 09:36:04 -04:00
parent 20397960d6
commit 8d95c50041
2 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+11 -1
View File
@@ -1117,10 +1117,20 @@
background: #080808; background: #080808;
border-top: 1px solid rgba(201, 168, 76, 0.18); border-top: 1px solid rgba(201, 168, 76, 0.18);
border-bottom: 1px solid rgba(201, 168, 76, 0.18); border-bottom: 1px solid rgba(201, 168, 76, 0.18);
padding: 5rem 0; padding: 4rem 0;
text-align: center; text-align: center;
} }
.tfl-label-row {
text-align: center;
margin-bottom: 1.5rem;
}
.tfl-label-row .section-heading {
text-align: center;
margin-bottom: 0.5rem;
}
.tfl-attribution { .tfl-attribution {
color: #8a7f5a; color: #8a7f5a;
font-size: 0.9rem; font-size: 0.9rem;
src/App.tsx
+40 -23
View File
@@ -1059,36 +1059,53 @@ function HomepageNewsletterSection() {
type TflWidgetType = 'audiodevo' | 'abdevotional' type TflWidgetType = 'audiodevo' | 'abdevotional'
function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) { function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) {
useEffect(() => { // Use an iframe so TFL's script gets a fresh page context with its own
// TFL's script looks for #tfl-syndicate-container synchronously when it loads. // DOMContentLoaded — required because this is a SPA and that event has
// The div is already in the DOM by the time this effect runs, so we just // already fired on the outer page before this component ever mounts.
// inject the script and it will find and populate the container. const iframeHeight = type === 'audiodevo' ? '420' : '800'
const existing = document.getElementById('tfl-syn-script')
if (existing) existing.remove()
const container = document.getElementById('tfl-syndicate-container') const srcdoc = `<!DOCTYPE html>
if (container) container.innerHTML = '' <html>
<head>
const script = document.createElement('script') <meta charset="utf-8" />
script.id = 'tfl-syn-script' <style>
script.src = `https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890` html, body { margin: 0; padding: 0; background: #ffffff; overflow: hidden; }
script.async = true #tfl-syndicate-container { font-family: Georgia, serif; }
document.body.appendChild(script) /* Hide the widget's own heading since our section already has one */
#tfl-syndicate-container h2,
return () => { script.remove() } #tfl-syndicate-container h3,
}, [type]) #tfl-syndicate-container > *:first-child > h2,
#tfl-syndicate-container > *:first-child > h3 { display: none; }
</style>
</head>
<body>
<script id="syn_script" src="https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890" type="text/javascript"></script>
<div id="tfl-syndicate-container"></div>
</body>
</html>`
return ( return (
<section className="section-tfl" aria-label="Truth For Life devotional"> <section className="section-tfl" aria-label="Truth For Life devotional">
<div className="section-inner"> <div className="section-inner">
<p className="eyebrow">Daily Devotional</p> <div className="tfl-label-row">
<h2 className="section-heading"> <h2 className="section-heading" style={{ marginBottom: '0.25rem' }}>
<span className="ornament">✦</span> Truth For Life <span className="ornament">✦</span> <span className="ornament">✦</span> Daily Devotional <span className="ornament">✦</span>
</h2> </h2>
<p className="tfl-attribution"> <p className="tfl-attribution" style={{ marginBottom: '1rem' }}>
Teaching from <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link">Truth For Life</a> with Alistair Begg <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link" style={{ fontSize: '1rem', fontWeight: 600 }}>Truth For Life</a>
{' '}with Alistair Begg
</p> </p>
<div id="tfl-syndicate-container" className="tfl-widget-wrap" /> </div>
<div className="tfl-widget-wrap">
<iframe
srcDoc={srcdoc}
title="Truth For Life daily devotional"
width="100%"
height={iframeHeight}
style={{ border: 'none', display: 'block', borderRadius: '10px' }}
sandbox="allow-scripts allow-same-origin allow-popups"
/>
</div>
</div> </div>
</section> </section>
) )