Front 1431 Add changelog update subscription

src/components/ToastSubscribed/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Admonition from "@theme/Admonition";
+import IconCheck from "@site/static/img/icon-check.svg";
+
+const ToastSubscribed = () => {
+  return (
+    <Admonition
+      type="tip"
+      icon={<IconCheck />}
+      title="You're subscribed"
+      className="toast"
+    >
+      You’ll now receive our Changelog updates by email.
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        onClick={() =>
+          document.querySelector(".toast").classList.add("toast--hidden")
+        }
+        className="toast-close"
+      >
+        <path
+          d="M2.58859 2.71569L2.64645 2.64645C2.82001 2.47288 3.08944 2.4536 3.28431 2.58859L3.35355 2.64645L8 7.293L12.6464 2.64645C12.8417 2.45118 13.1583 2.45118 13.3536 2.64645C13.5488 2.84171 13.5488 3.15829 13.3536 3.35355L8.707 8L13.3536 12.6464C13.5271 12.82 13.5464 13.0894 13.4114 13.2843L13.3536 13.3536C13.18 13.5271 12.9106 13.5464 12.7157 13.4114L12.6464 13.3536L8 8.707L3.35355 13.3536C3.15829 13.5488 2.84171 13.5488 2.64645 13.3536C2.45118 13.1583 2.45118 12.8417 2.64645 12.6464L7.293 8L2.64645 3.35355C2.47288 3.17999 2.4536 2.91056 2.58859 2.71569L2.64645 2.64645L2.58859 2.71569Z"
+          fill="#737276"
+        />
+      </svg>
+    </Admonition>
+  );
+};
+
+export default ToastSubscribed;

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 (
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className={`modal-content`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+      >
+        <button
+          className="modal-close"
+          onClick={onClose}
+          aria-label="Close modal"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.147052 0.303788L0.21967 0.21967C0.485936 -0.0465966 0.9026 -0.0708026 1.19621 0.147052L1.28033 0.21967L7.75 6.689L14.2197 0.21967C14.5126 -0.0732233 14.9874 -0.0732233 15.2803 0.21967C15.5732 0.512563 15.5732 0.987437 15.2803 1.28033L8.811 7.75L15.2803 14.2197C15.5466 14.4859 15.5708 14.9026 15.3529 15.1962L15.2803 15.2803C15.0141 15.5466 14.5974 15.5708 14.3038 15.3529L14.2197 15.2803L7.75 8.811L1.28033 15.2803C0.987437 15.5732 0.512563 15.5732 0.21967 15.2803C-0.0732233 14.9874 -0.0732233 14.5126 0.21967 14.2197L6.689 7.75L0.21967 1.28033C-0.0465966 1.01406 -0.0708026 0.5974 0.147052 0.303788L0.21967 0.21967L0.147052 0.303788Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+        <div className="modal-body">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/modal/styles.css

@@ -0,0 +1,65 @@
+.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: #fff;
+  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;
+}
+.modal-body iframe {
+  border-radius: 8px;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/css/custom.css

@@ -376,4 +376,48 @@ html[data-theme="dark"] .tabs__item--active {
   width: 1px;
   height: 20px;
   background: #cbd5e1;
+}
+
+.toast {
+  position: fixed;
+  bottom: 72px;
+  right: 26px;
+  box-shadow: 0px 4px 10px 0px #271A482E;
+  opacity: 0;
+  animation: toastFadeIn 0.5s ease;
+  animation-fill-mode: forwards;
+  animation-delay: 1s;
+  transform: translateX(10px);
+
+}
+
+.toast--hidden {
+  animation: toastFadeOut 0.5s ease;
+  animation-fill-mode: forwards;
+}
+
+.toast-close {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  cursor: pointer;
+}
+
+
+@keyframes toastFadeIn {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toastFadeOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
 }

src/theme/BlogListPage/index.js

@@ -12,6 +12,7 @@ import SearchMetadata from "@theme/SearchMetadata";
 import BlogPostItems from "@theme/BlogPostItems";
 import MDXContent from "@theme/MDXContent";
 import ComingUp from "../../../changelog/coming-up.mdx";
+import ToastSubscribed from "../../components/ToastSubscribed";
 
 function BlogListPageMetadata(props) {
   const { metadata } = props;
@@ -29,9 +30,11 @@ function BlogListPageMetadata(props) {
   );
 }
 function BlogListPageContent(props) {
-  const { metadata, items, sidebar } = props;
+  const { metadata, items, sidebar, history } = props;
+
   return (
     <BlogLayout sidebar={sidebar}>
+      {history.location.hash === "#subscribed" && <ToastSubscribed />}
       {metadata.page === 1 ? (
         <MDXContent>
           <ComingUp />

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 (
     <aside className="col col--3">
       <nav
@@ -19,7 +22,36 @@ export default function BlogSidebarDesktop({ sidebar }) {
         <div className={clsx(styles.sidebarItemTitle, "margin-bottom--md")}>
           {"Subscribe"}
         </div>
+
         <ul className={clsx(styles.sidebarItemList, "clean-list")}>
+          <li className={styles.sidebarItem}>
+            <Link
+              to={"#"}
+              onClick={() => setNewsletterModal(true)}
+              className={styles.sidebarItemLink}
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                  verticalAlign: "middle",
+                  marginRight: 6,
+                  position: "relative",
+                  top: -2,
+                }}
+              >
+                <path
+                  d="M15 5.5C15 7.98528 12.9853 10 10.5 10C8.01472 10 6 7.98528 6 5.5C6 3.01472 8.01472 1 10.5 1C12.9853 1 15 3.01472 15 5.5ZM11 3.5C11 3.22386 10.7761 3 10.5 3C10.2239 3 10 3.22386 10 3.5V5H8.5C8.22386 5 8 5.22386 8 5.5C8 5.77614 8.22386 6 8.5 6H10V7.5C10 7.77614 10.2239 8 10.5 8C10.7761 8 11 7.77614 11 7.5V6H12.5C12.7761 6 13 5.77614 13 5.5C13 5.22386 12.7761 5 12.5 5H11V3.5ZM12 13V10.793C12.3486 10.6944 12.6832 10.5622 13 10.4003V13C13 14.1046 12.1046 15 11 15H3C1.89543 15 1 14.1046 1 13V7C1 5.89543 1.89543 5 3 5H5.02242C5.00758 5.16468 5 5.33146 5 5.5C5 5.66854 5.00758 5.83532 5.02242 6H3C2.44772 6 2 6.44772 2 7V7.73976L7.0001 10.4321L7.54428 10.1391C7.88809 10.3586 8.25794 10.541 8.64816 10.6805L7.23715 11.4402C7.08916 11.5199 6.91104 11.5199 6.76305 11.4402L2 8.87552V13C2 13.5523 2.44772 14 3 14H11C11.5523 14 12 13.5523 12 13Z"
+                  fill="currentColor"
+                />
+              </svg>
+
+              {"Email"}
+            </Link>
+          </li>
           <li key={"/changelog/rss.xml"} className={styles.sidebarItem}>
             <Link
               isNavLink
@@ -97,6 +129,39 @@ export default function BlogSidebarDesktop({ sidebar }) {
           ))}
         </ul>
       </nav>
+      <Modal
+        isOpen={newsletterModalVisible}
+        onClose={() => setNewsletterModal(false)}
+      >
+        <svg
+          width="42"
+          height="42"
+          viewBox="0 0 42 42"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M40.25 11.375C40.25 6.05926 35.9407 1.75 30.625 1.75C25.3093 1.75 21 6.05926 21 11.375C21 16.6907 25.3093 21 30.625 21C35.9407 21 40.25 16.6907 40.25 11.375ZM31.5011 12.25L31.5019 16.6312C31.5019 17.1144 31.1102 17.5062 30.6269 17.5062C30.1437 17.5062 29.7519 17.1144 29.7519 16.6312L29.7511 12.25H25.3673C24.8845 12.25 24.4932 11.8583 24.4932 11.375C24.4932 10.8918 24.8845 10.5 25.3673 10.5H29.7508L29.75 6.12372C29.75 5.64047 30.1418 5.24872 30.625 5.24872C31.1082 5.24872 31.5 5.64047 31.5 6.12372L31.5008 10.5H35.869C36.3518 10.5 36.7432 10.8918 36.7432 11.375C36.7432 11.8583 36.3518 12.25 35.869 12.25H31.5011ZM35.875 29.3125V21.4686C36.8393 20.9661 37.7225 20.3293 38.5 19.5832V29.3125C38.5 32.3453 36.1262 34.8237 33.1352 34.991L32.8125 35H9.1875C6.15469 35 3.67632 32.6262 3.509 29.6352L3.5 29.3125V12.6875C3.5 9.6547 5.8738 7.17632 8.86476 7.009L9.1875 7H20.1218C19.7757 7.8298 19.5252 8.70938 19.3838 9.625H9.1875C7.5807 9.625 6.26291 10.8624 6.13515 12.4363L6.125 12.6875V13.4382L21 21.2668L23.2841 20.0645C24.0515 20.7134 24.906 21.2626 25.8277 21.6919L21.6113 23.9115C21.2833 24.0841 20.9005 24.1087 20.5568 23.9854L20.3887 23.9115L6.125 16.4045V29.3125C6.125 30.9193 7.36244 32.2371 8.93633 32.3648L9.1875 32.375H32.8125C34.4193 32.375 35.7371 31.1376 35.8648 29.5637L35.875 29.3125Z"
+            fill="#6240B5"
+          />
+        </svg>
+
+        <h3>Subscribe to the Swan Changelog</h3>
+        <iframe
+          data-w-type="embedded"
+          frameBorder="0"
+          scrolling="no"
+          marginHeight="0"
+          marginWidth="0"
+          src="https://xr22w.mjt.lu/wgt/xr22w/0oqk/form?c=ce289285"
+          width="100%"
+          style={{ height: "480px" }}
+        ></iframe>
+      </Modal>
+      <script
+        type="text/javascript"
+        src="https://app.mailjet.com/pas-nc-embedded-v1.js"
+      ></script>
     </aside>
   );
 }