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