From 13a2afb931e4f03bd824005b2461ed5af5143ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Ram=C3=ADrez?= <tiangolo@gmail.com>
Date: Tue, 6 Oct 2026 09:41:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Embed=20the=20FastAPI=20and=20fr?=
 =?UTF-8?q?iends=20newsletter=20signup=20form=20(#16459)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/en/docs/css/custom.css |  7 +++++++
 docs/en/docs/js/custom.js   | 33 +++++++++++++++++++++++++++++++++
 docs/en/docs/newsletter.md  |  4 ++--
 3 files changed, 42 insertions(+), 2 deletions(-)

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