📝 Embed the FastAPI and friends newsletter signup form (#16459)

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;
+}

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()

docs/en/docs/newsletter.md

@@ -1,5 +1,5 @@
 # FastAPI and friends newsletter
 
-<iframe data-w-type="embedded" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://xr4n4.mjt.lu/wgt/xr4n4/hj5/form?c=40a44fa4" width="100%" style="height: 800px;"></iframe>
+<iframe class="newsletter-embed" src="https://fastapiandfriends.com/embed/" title="Subscribe to the FastAPI and friends newsletter" width="100%" height="280"></iframe>
 
-<script type="text/javascript" src="https://app.mailjet.com/pas-nc-embedded-v1.js"></script>
+[Read previous issues](https://fastapiandfriends.com/newsletter) or [subscribe on the FastAPI and friends website](https://fastapiandfriends.com/#subscribe).