docs: banner mod

Author: dangreen

website/docusaurus.config.js

@@ -31,12 +31,7 @@ const config = {
     {
       src: 'https://cloud.umami.is/script.js',
       'data-website-id': 'c15ead0d-e003-4fe0-8647-ddf0b560e38c',
-      defer: true,
-    },
-    {
-      src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
-      async: true,
-      type: 'text/javascript',
+      defer: true
     }
   ],
 

website/src/css/custom.css

@@ -51,6 +51,15 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   justify-content: space-between;
 }
 
+#bwndw {
+  transition: opacity 0.3s ease-in-out;
+  opacity: 1;
+
+  &.bwndw-loading {
+    opacity: 0;
+  }
+}
+
 .eab {
   margin: calc(var(--ifm-menu-link-padding-horizontal) + 0.5rem) 0 0 -0.5rem;
 }

website/src/theme/DocSidebar/index.js

@@ -6,40 +6,57 @@ import Cookies from 'js-cookie';
 const COOKIE_NAME = 'bwndw_fallback_cached';
 const COOKIE_DURATION = 28; // days (4 weeks)
 
-async function shouldUseFallback() {
+function saveUseFallback(value) {
+  Cookies.set(COOKIE_NAME, value.toString(), {
+    expires: COOKIE_DURATION,
+    sameSite: 'lax'
+  });
+}
+
+function readUseFallback() {
   const cached = Cookies.get(COOKIE_NAME);
 
-  if (cached !== undefined) {
-    return cached === 'true';
-  }
+  return cached === undefined
+    ? null
+    : cached === 'true';
+}
 
-  while (typeof ethicalads === 'undefined') {
-    await new Promise((resolve) => setTimeout(resolve, 300));
-  }
+let scriptPromise = null;
 
-  const placements = await ethicalads.wait;
-  const useFallback = !placements.length || placements[0].response.campaign_type !== 'paid';
+async function loadEthicalAdsScript() {
+  let script = document.getElementById('ethical-script');
 
-  Cookies.set(COOKIE_NAME, useFallback.toString(), {
-    expires: COOKIE_DURATION,
-    sameSite: 'lax'
-  });
+  if (!script) {
+    script = document.createElement('script');
+    script.id = 'ethical-script';
+    script.src = 'https://media.ethicalads.io/media/client/ethicalads.min.js';
+    script.async = true;
+    document.head.appendChild(script);
+
+    scriptPromise = (async () => {
+      while (typeof ethicalads === 'undefined') {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+
+      return (await ethicalads.wait) || [];
+    })()
+  }
 
-  return useFallback;
+  return scriptPromise
 }
 
 function createEthicalAdsBlock(root) {
   const banner = document.createElement('div');
 
-  banner.className = 'eab flat horizontal'
+  banner.className = 'eab flat horizontal bwndw-loading'
   banner.id = 'bwndw';
   banner.setAttribute('data-ea-publisher', 'react-chartjs-2jsorg');
   banner.setAttribute('data-ea-type', 'image');
 
   root?.appendChild(banner);
 
   if (typeof ethicalads !== 'undefined') {
-    ethicalads.reload();
+    ethicalads.load();
   }
 
   return banner;
@@ -49,7 +66,7 @@ function createCarbonAdsBlock(root) {
   const banner = document.createElement('div');
   const script = document.createElement('script');
 
-  banner.className = 'crbn';
+  banner.className = 'crbn bwndw-loading';
   banner.id = 'bwndw';
 
   script.src = '//cdn.carbonads.com/carbon.js?serve=CWBDT53N&placement=react-chartjs-2jsorg&format=cover';
@@ -75,14 +92,36 @@ export default function DocSidebar(props) {
 
   useEffect(() => {
     if (!document.getElementById('bwndw')) {
-      shouldUseFallback().then((useFallback) => {
-        if (!document.getElementById('bwndw')) {
-          const root = document.querySelector('.theme-doc-sidebar-menu')?.parentElement;
-
-          bannerRef.current = useFallback ? createCarbonAdsBlock(root) : createEthicalAdsBlock(root);
-          setColorMode(bannerRef.current, colorModeRef.current);
-        }
-      });
+      const root = document.querySelector('.theme-doc-sidebar-menu')?.parentElement;
+      let banner
+      const showBanner = () => {
+        setColorMode(banner, colorModeRef.current);
+        bannerRef.current = banner;
+        banner.classList.remove('bwndw-loading');
+      }
+      const cachedUseFallback = readUseFallback();
+
+      if (cachedUseFallback === true) {
+        banner = createCarbonAdsBlock(root);
+        showBanner();
+      } else {
+        banner = createEthicalAdsBlock(root);
+
+        loadEthicalAdsScript().then((placements) => {
+          if (cachedUseFallback === null) {
+            const useFallback = !placements.length || placements[0].response.campaign_type !== 'paid';
+
+            if (useFallback) {
+              banner.remove();
+              banner = createCarbonAdsBlock(root);
+            }
+
+            saveUseFallback(useFallback);
+          }
+
+          showBanner();
+        })
+      }
     }
   }, []);