nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions 1 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;
border-top: 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;
}
.tfl-label-row {
text-align: center;
margin-bottom: 1.5rem;
}
.tfl-label-row .section-heading {
text-align: center;
margin-bottom: 0.5rem;
}
.tfl-attribution {
color: #8a7f5a;
font-size: 0.9rem;
src/App.tsx
+40 -23
View File
@@ -1059,36 +1059,53 @@ function HomepageNewsletterSection() {
type TflWidgetType = 'audiodevo' | 'abdevotional'
function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) {
useEffect(() => {
// TFL's script looks for #tfl-syndicate-container synchronously when it loads.
// The div is already in the DOM by the time this effect runs, so we just
// inject the script and it will find and populate the container.
const existing = document.getElementById('tfl-syn-script')
if (existing) existing.remove()
// Use an iframe so TFL's script gets a fresh page context with its own
// DOMContentLoaded — required because this is a SPA and that event has
// already fired on the outer page before this component ever mounts.
const iframeHeight = type === 'audiodevo' ? '420' : '800'
const container = document.getElementById('tfl-syndicate-container')
if (container) container.innerHTML = ''
const script = document.createElement('script')
script.id = 'tfl-syn-script'
script.src = `https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890`
script.async = true
document.body.appendChild(script)
return () => { script.remove() }
}, [type])
const srcdoc = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body { margin: 0; padding: 0; background: #ffffff; overflow: hidden; }
#tfl-syndicate-container { font-family: Georgia, serif; }
/* Hide the widget's own heading since our section already has one */
#tfl-syndicate-container h2,
#tfl-syndicate-container h3,
#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 (
<section className="section-tfl" aria-label="Truth For Life devotional">
<div className="section-inner">
<p className="eyebrow">Daily Devotional</p>
<h2 className="section-heading">
<span className="ornament">✦</span> Truth For Life <span className="ornament">✦</span>
<div className="tfl-label-row">
<h2 className="section-heading" style={{ marginBottom: '0.25rem' }}>
<span className="ornament">✦</span> Daily Devotional <span className="ornament">✦</span>
</h2>
<p className="tfl-attribution">
Teaching from <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link">Truth For Life</a> with Alistair Begg
<p className="tfl-attribution" style={{ marginBottom: '1rem' }}>
<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>
<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>
</section>
)