docs: ad banner mod

Author: dangreen

website/src/css/custom.css

@@ -51,6 +51,15 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   justify-content: space-between;
 }
 
-#eab {
+.eab {
   margin: calc(var(--ifm-menu-link-padding-horizontal) + 0.5rem) 0 0 -0.5rem;
 }
+
+.crbn {
+  margin: calc(var(--ifm-menu-link-padding-horizontal) + 0.5rem) 0.5rem 0 0;
+
+  &.dark #carbon-responsive {
+    filter: invert(1);
+    --carbon-bg-primary: transparent;
+  }
+}

website/src/theme/DocSidebar/index.js

@@ -2,29 +2,75 @@ import React, { useEffect, useRef } from 'react';
 import { useColorMode } from '@docusaurus/theme-common';
 import OriginalDocSidebar from '@theme-original/DocSidebar';
 
+async function shouldUseFallback() {
+  return true; // Temporarily disable EthicalAds
+
+  while (typeof ethicalads === 'undefined') {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+  }
+
+  const placements = await ethicalads.wait;
+
+  return !placements.length || placements[0].response.campaign_type !== 'paid';
+}
+
+function createEthicalAdsBlock(root) {
+  const banner = document.createElement('div');
+
+  banner.className = 'eab flat horizontal'
+  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();
+  }
+
+  return banner;
+}
+
+function createCarbonAdsBlock(root) {
+  const banner = document.createElement('div');
+  const script = document.createElement('script');
+
+  banner.className = 'crbn';
+  banner.id = 'bwndw';
+
+  script.src = '//cdn.carbonads.com/carbon.js?serve=CWBDT53N&placement=react-chartjs-2jsorg&format=cover';
+  script.id = '_carbonads_js';
+  script.async = true;
+
+  banner.appendChild(script);
+  root?.appendChild(banner);
+
+  return banner;
+}
+
+function setColorMode(banner, colorMode) {
+  banner?.classList.toggle('dark', colorMode === 'dark');
+}
+
 export default function DocSidebar(props) {
   const bannerRef = useRef();
   const { colorMode } = useColorMode();
 
   useEffect(() => {
-    if (!document.getElementById('eab')) {
-      const banner = document.createElement('div');
-
-      bannerRef.current = banner;
-      banner.className = 'flat horizontal'
-      banner.id = 'eab';
-      banner.setAttribute('data-ea-publisher', 'react-chartjs-2jsorg');
-      banner.setAttribute('data-ea-type', 'image');
-      document.querySelector('.theme-doc-sidebar-menu')?.parentElement?.appendChild(banner);
-
-      if (typeof ethicalads !== 'undefined') {
-        ethicalads.reload();
-      }
+    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, colorMode);
+        }
+      });
     }
   }, []);
 
   useEffect(() => {
-    bannerRef.current?.classList.toggle('dark', colorMode === 'dark');
+    setColorMode(bannerRef.current, colorMode);
   }, [colorMode]);
 
   return (