[docs] Improve ad display

mui · Nov 7, 2019 · 8d6080b · 8d6080b
1 parent f78ca7f
commit 8d6080b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -55,14 +55,15 @@ const inHouses = [
   },
   {
     name: 'themes',
-    link: 'https://themes.material-ui.com/',
+    link: 'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house',
     img: '/static/in-house/themes.png',
     description:
       '<b>Premium Themes</b><br />Kickstart your application development with a ready-made theme.',
   },
   {
     name: 'tidelift',
-    link: 'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
+    link:
+      'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
     img: '/static/in-house/tidelift.png',
     description:
       '<b>Material-UI for enterprise</b><br />Available in the Tidelift Subscription. Reduce risk, and improve code health.',
@@ -77,6 +78,7 @@ function Ad(props) {
   const timerAdblock = React.useRef();
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
+  const [codeFundOut, setCodeFundOut] = React.useState(null);
 
   const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.cf-wrapper') || document.querySelector('#carbonads')) {
@@ -114,6 +116,18 @@ function Ad(props) {
     };
   }, [checkAdblock]);
 
+  React.useEffect(() => {
+    const handler = event => {
+      if (event.detail.status === 'no-advertiser') {
+        setCodeFundOut(true);
+      }
+    };
+    window.addEventListener('codefund', handler);
+    return () => {
+      window.removeEventListener('codefund', handler);
+    };
+  }, []);
+
   let children;
   let minHeight;
 
@@ -133,13 +147,13 @@ function Ad(props) {
   }
 
   if (!children) {
-    if (random >= 0.5) {
-      children = <AdCodeFund />;
-    } else if (!carbonOut) {
-      children = <AdCarbon />;
-    } else {
+    if (carbonOut || codeFundOut) {
       children = <AdInHouse ad={inHouses[Math.round((inHouses.length - 1) * random)]} />;
       minHeight = 'auto';
+    } else if (random >= 0.5) {
+      children = <AdCodeFund />;
+    } else {
+      children = <AdCarbon />;
     }
   }
 

diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
@@ -15,6 +15,8 @@ const styles = theme => ({
       '& .carbon-img': {
         float: 'left',
         marginLeft: -130,
+        width: 130,
+        height: 100,
         marginRight: theme.spacing(1.5),
       },
       '& img': {

diff --git a/docs/src/modules/components/AdCodeFund.js b/docs/src/modules/components/AdCodeFund.js
@@ -15,6 +15,8 @@ const styles = theme => ({
       '& .cf-img-wrapper.cf-img-wrapper': {
         float: 'left',
         marginLeft: -130,
+        width: 130,
+        height: 100,
         marginRight: theme.spacing(1.5),
       },
       '& img': {

diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js
@@ -15,6 +15,8 @@ const useStyles = makeStyles(theme => ({
     '& $imageWrapper': {
       float: 'left',
       marginLeft: -130,
+      width: 130,
+      height: 100,
       marginRight: theme.spacing(1.5),
     },
     '& img': {