From d42808ed8cf5af722dd142ee4816368a8373d3c7 Mon Sep 17 00:00:00 2001 From: Thibaut Baillet Date: Thu, 20 Nov 2025 15:20:10 +0100 Subject: [PATCH 1/4] Add modal with mailjet iframe --- src/components/modal/index.js | 61 +++++++++++++++++++++++ src/components/modal/styles.css | 62 +++++++++++++++++++++++ src/theme/BlogSidebar/Desktop/index.js | 68 +++++++++++++++++++++++++- 3 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 src/components/modal/index.js create mode 100644 src/components/modal/styles.css diff --git a/src/components/modal/index.js b/src/components/modal/index.js new file mode 100644 index 00000000000..da4b0bb1cc8 --- /dev/null +++ b/src/components/modal/index.js @@ -0,0 +1,61 @@ +import React, { useEffect } from "react"; +import "./styles.css"; + +const Modal = ({ isOpen, onClose, children }) => { + useEffect(() => { + if (isOpen) { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = "unset"; + } + + return () => { + document.body.style.overflow = "unset"; + }; + }, [isOpen]); + + useEffect(() => { + const handleEscape = (event) => { + if (event.key === "Escape" && isOpen) { + onClose(); + } + }; + + document.addEventListener("keydown", handleEscape); + return () => document.removeEventListener("keydown", handleEscape); + }, [isOpen, onClose]); + + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()} + role="dialog" + aria-modal="true" + > + +
{children}
+
+
+ ); +}; + +export default Modal; diff --git a/src/components/modal/styles.css b/src/components/modal/styles.css new file mode 100644 index 00000000000..c1e714fb7f2 --- /dev/null +++ b/src/components/modal/styles.css @@ -0,0 +1,62 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(38, 35, 47, 0.2); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal-content { + background: #fafafa; + border-radius: 24px; + padding: 48px; + position: relative; + max-height: 95vh; + overflow-y: auto; + box-shadow: 0 2px 10px rgba(39, 26, 72, 0.18); + animation: modalFadeIn 0.3s ease-out; + width: 100%; + max-width: 600px; +} + +.modal-close { + position: absolute; + top: 44px; + right: 44px; + background: transparent; + border: none; + cursor: pointer; + color: #454348; + padding: 0; + width: 30px; + height: 30px; +} + +.modal-body { + color: #454348; + font-size: 14px; + line-height: 24px; +} + +.modal-body h3 { + margin: 8px 0 24px; +} +.modal-body p { + margin-bottom: 0; +} + +@keyframes modalFadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/theme/BlogSidebar/Desktop/index.js b/src/theme/BlogSidebar/Desktop/index.js index 0e580d30f6a..adbea909ccb 100644 --- a/src/theme/BlogSidebar/Desktop/index.js +++ b/src/theme/BlogSidebar/Desktop/index.js @@ -1,11 +1,14 @@ -import React from "react"; +import React, { useState } from "react"; import clsx from "clsx"; import Link from "@docusaurus/Link"; import { translate } from "@docusaurus/Translate"; import { useVisibleBlogSidebarItems } from "@docusaurus/theme-common/internal"; import styles from "./styles.module.css"; +import Modal from "@site/src/components/modal"; export default function BlogSidebarDesktop({ sidebar }) { + const [newsletterModalVisible, setNewsletterModal] = useState(false); const items = useVisibleBlogSidebarItems(sidebar.items); + return ( ); } From 15cda4568e57b3cb27889dbe451a1dbef14e359f Mon Sep 17 00:00:00 2001 From: Thibaut Baillet Date: Fri, 21 Nov 2025 13:52:03 +0100 Subject: [PATCH 2/4] Update form --- src/theme/BlogSidebar/Desktop/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/theme/BlogSidebar/Desktop/index.js b/src/theme/BlogSidebar/Desktop/index.js index adbea909ccb..8d2f076528c 100644 --- a/src/theme/BlogSidebar/Desktop/index.js +++ b/src/theme/BlogSidebar/Desktop/index.js @@ -147,16 +147,15 @@ export default function BlogSidebarDesktop({ sidebar }) {

Subscribe to the Swan Changelog

-

Enter your email to subscribe.