make CTA update from dark/light

DidierRLopes · Jan 12, 2025 · 4727886 · 4727886
1 parent 5c54dbb
commit 4727886
Showing 1 changed file with 39 additions and 8 deletions.
diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js
@@ -3,17 +3,52 @@ import BlogPostItem from '@theme-original/BlogPostItem';
 import React, { useEffect, useState } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 export default function BlogPostItemWrapper(props) {
   const { metadata, isBlogPostPage } = useBlogPost();
   const isBrowser = useIsBrowser();
   const [theme, setTheme] = useState('light');
+  const [beehiivSrc, setBehiivSrc] = useState('https://embeds.beehiiv.com/2c2719b8-abe1-4f8b-8427-fb9c2361f059');
 
   useEffect(() => {
-    if (isBrowser) {
-      setTheme(document.documentElement.getAttribute('data-theme') !== 'dark' ? 'light' : 'dark');
+    if (ExecutionEnvironment.canUseDOM) {
+      // Function to update sources based on theme
+      const updateSources = () => {
+        const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
+
+        setBehiivSrc(
+          isDarkTheme
+            ? 'https://embeds.beehiiv.com/2c2719b8-abe1-4f8b-8427-fb9c2361f059'
+            : 'https://embeds.beehiiv.com/e1ef8c12-fc6d-4afa-8235-057b2e9bb6f3'
+        );
+      };
+
+      // Initial update
+      updateSources();
+
+      // Create mutation observer
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'data-theme'
+          ) {
+            updateSources();
+          }
+        }
+      });
+
+      // Start observing
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
+
+      // Cleanup
+      return () => observer.disconnect();
     }
-  }, [isBrowser]);
+  }, []);
 
   return (
     <>
@@ -24,11 +59,7 @@ export default function BlogPostItemWrapper(props) {
             {() => (
               <div>
                 <iframe
-                  src={
-                    theme === 'light'
-                      ? 'https://embeds.beehiiv.com/e1ef8c12-fc6d-4afa-8235-057b2e9bb6f3'
-                      : 'https://embeds.beehiiv.com/2c2719b8-abe1-4f8b-8427-fb9c2361f059'
-                  }
+                  src={beehiivSrc}
                   data-test-id="beehiiv-embed"
                   width="100%"
                   height="200"