[docs–infra] Prevent displaying multiple ads

oliviertassinari · Jun 24, 2023 · 1e468b4 · 1e468b4
1 parent 314c3d4
commit 1e468b4
Showing 1 changed file with 21 additions and 23 deletions.
diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
@@ -1,14 +1,32 @@
 import * as React from 'react';
-import GlobalStyles from '@mui/material/GlobalStyles';
+import { styled } from '@mui/material/styles';
 import loadScript from 'docs/src/modules/utils/loadScript';
 import AdDisplay from 'docs/src/modules/components/AdDisplay';
 import { adStylesObject } from 'docs/src/modules/components/ad.styles';
 
+const CarbonRoot = styled('span')(({ theme }) => {
+  const styles = adStylesObject['body-image'](theme);
+
+  return {
+    '& #carbonads': {
+      ...styles.root,
+      '& .carbon-img': styles.imgWrapper,
+      '& img': styles.img,
+      '& a, & a:hover': styles.a,
+      '& .carbon-text': styles.description,
+      '& .carbon-poweredby': styles.poweredby,
+    },
+    '& [id^=carbonads_]': {
+      display: 'none',
+    },
+  };
+});
+
 function AdCarbonImage() {
   const ref = React.useRef(null);
 
   React.useEffect(() => {
-    // The isolation logic of carbonads is flawed.
+    // The isolation logic of carbonads is broken.
     // Once the script starts loading, it will asynchronous resolve, with no way to stop it.
     // This leads to duplication of the ad. To solve the issue, we debounce the load action.
     const load = setTimeout(() => {
@@ -24,27 +42,7 @@ function AdCarbonImage() {
     };
   }, []);
 
-  return (
-    <React.Fragment>
-      <GlobalStyles
-        styles={(theme) => {
-          const styles = adStylesObject['body-image'](theme);
-
-          return {
-            '#carbonads': {
-              ...styles.root,
-              '& .carbon-img': styles.imgWrapper,
-              '& img': styles.img,
-              '& a, & a:hover': styles.a,
-              '& .carbon-text': styles.description,
-              '& .carbon-poweredby': styles.poweredby,
-            },
-          };
-        }}
-      />
-      <span ref={ref} />
-    </React.Fragment>
-  );
+  return <CarbonRoot ref={ref} />;
 }
 
 export function AdCarbonInline(props) {