docs: ad banner

Author: dangreen

website/docusaurus.config.js

@@ -33,6 +33,11 @@ const config = {
       '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',
+    }
   ],
 
   presets: [

website/src/css/custom.css

@@ -44,3 +44,13 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
     max-width: 2440px;
   }
 }
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#eab {
+  margin: calc(var(--ifm-menu-link-padding-horizontal) + 0.5rem) 0 0 -0.5rem;
+}

website/src/theme/DocSidebar/index.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import OriginalDocSidebar from '@theme-original/DocSidebar';
+
+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);
+      ethicalads.reload();
+    }
+  }, []);
+
+  useEffect(() => {
+    bannerRef.current?.classList.toggle('dark', colorMode === 'dark');
+  }, [colorMode]);
+
+  return (
+    <OriginalDocSidebar {...props} />
+  );
+}