diff --git a/docs/en/docs/css/custom.css b/docs/en/docs/css/custom.css index a6fcc279aa..ea958ea025 100644 --- a/docs/en/docs/css/custom.css +++ b/docs/en/docs/css/custom.css @@ -549,3 +549,10 @@ Inspired by Termynal's CSS tricks with modifications /* Hidden in MkDocs; rendered on GitHub (which doesn't load this stylesheet) */ .only-github { display: none; } + +.newsletter-embed { + display: block; + width: calc(100% + 8px); + margin: -4px; + border: 0; +} diff --git a/docs/en/docs/js/custom.js b/docs/en/docs/js/custom.js index a4db853f5c..ffe45f8b8e 100644 --- a/docs/en/docs/js/custom.js +++ b/docs/en/docs/js/custom.js @@ -238,12 +238,45 @@ function setupOpinionsTabs() { }); } +let cleanupNewsletterEmbed = () => {}; + +function setupNewsletterEmbed() { + cleanupNewsletterEmbed(); + const frame = document.querySelector('.newsletter-embed'); + if (!frame) return; + const origin = new URL(frame.src).origin; + const configure = () => frame.contentWindow.postMessage({ + type: 'fastapi-newsletter:configure', + theme: document.body.dataset.mdColorScheme === 'slate' ? 'dark' : 'light', + fontSize: parseFloat(getComputedStyle(frame.parentElement).fontSize), + }, origin); + const resize = (event) => { + if (event.origin !== origin || event.source !== frame.contentWindow) return; + const { type, height } = event.data ?? {}; + if (type !== 'fastapi-newsletter:resize' || !Number.isFinite(height) || height <= 0 || height > 2000) return; + frame.style.height = `${Math.ceil(height)}px`; + }; + window.addEventListener('message', resize); + frame.addEventListener('load', configure); + window.addEventListener('resize', configure); + const themeObserver = new MutationObserver(configure); + themeObserver.observe(document.body, { attributes: true, attributeFilter: ['data-md-color-scheme'] }); + configure(); + cleanupNewsletterEmbed = () => { + window.removeEventListener('message', resize); + frame.removeEventListener('load', configure); + window.removeEventListener('resize', configure); + themeObserver.disconnect(); + }; +} + async function main() { setupTermynal(); showRandomAnnouncement('announce-left', 5000) handleSponsorImages(); openLinksInNewTab(); setupOpinionsTabs(); + setupNewsletterEmbed(); } document$.subscribe(() => { main() diff --git a/docs/en/docs/newsletter.md b/docs/en/docs/newsletter.md index 29b777a670..d42b59913a 100644 --- a/docs/en/docs/newsletter.md +++ b/docs/en/docs/newsletter.md @@ -1,5 +1,5 @@ # FastAPI and friends newsletter - + - +[Read previous issues](https://fastapiandfriends.com/newsletter) or [subscribe on the FastAPI and friends website](https://fastapiandfriends.com/#subscribe).