[docs] Add ethicalads.io (#21752)

docs/src/modules/components/Ad.js

@@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import AdCarbon from 'docs/src/modules/components/AdCarbon';
+import AdReadthedocs from 'docs/src/modules/components/AdReadthedocs';
 import AdInHouse from 'docs/src/modules/components/AdInHouse';
 import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
 
@@ -113,6 +114,7 @@ function Ad(props) {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
 
+  const { current: randomSplit } = React.useRef(Math.random());
   const { current: randomAdblock } = React.useRef(Math.random());
   const { current: randomInHouse } = React.useRef(Math.random());
 
@@ -132,21 +134,25 @@ function Ad(props) {
   } else if (carbonOut) {
     children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]} />;
     label = 'in-house-carbon';
-  } else {
+  } else if (randomSplit < 0.95) {
     children = <AdCarbon />;
     label = 'carbon';
+  } else {
+    children = <AdReadthedocs />;
+    label = 'readthedocs';
   }
 
   const ad = React.useContext(AdContext);
-  const eventLabel = `${label}-${ad.portal.placement}-${adShape}`;
+  const eventLabel = label ? `${label}-${ad.portal.placement}-${adShape}` : null;
 
   const timerAdblock = React.useRef();
 
   const checkAdblock = React.useCallback(
     (attempt = 1) => {
       if (
-        document.querySelector('.cf-wrapper') ||
+        document.querySelector('.ea-placement') ||
         document.querySelector('#carbonads') ||
+        document.querySelector('.ad-display') ||
         carbonOut
       ) {
         if (
@@ -187,7 +193,7 @@ function Ad(props) {
 
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
-    if (Math.random() < 0.9) {
+    if (Math.random() < 0.9 || !eventLabel) {
       return undefined;
     }
 

docs/src/modules/components/AdCarbon.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import loadScript from 'docs/src/modules/utils/loadScript';
 import adStyles from 'docs/src/modules/components/ad.styles';
+import AdDisplay from 'docs/src/modules/components/AdDisplay';
+import { adShape } from 'docs/src/modules/components/AdManager';
 
 const useStyles = makeStyles((theme) => {
   const styles = adStyles(theme);
@@ -20,7 +22,7 @@ const useStyles = makeStyles((theme) => {
   };
 });
 
-export default function AdCarbon() {
+function AdCarbonImage() {
   useStyles();
   const ref = React.useRef(null);
 
@@ -34,3 +36,79 @@ export default function AdCarbon() {
 
   return <span ref={ref} />;
 }
+
+export function AdCarbonInline(props) {
+  const [ad, setAd] = React.useState(null);
+
+  React.useEffect(() => {
+    let active = true;
+    let attempt = 0;
+
+    (async () => {
+      async function tryFetch() {
+        if (attempt >= 10 || !active) {
+          return null;
+        }
+
+        attempt += 1;
+        const request = await fetch('https://srv.buysellads.com/ads/CE7DC23W.json');
+        const data = await request.json();
+        // Inspired by https://github.com/Semantic-Org/Semantic-UI-React/blob/2c7134128925dd831de85011e3eb0ec382ba7f73/docs/src/components/CarbonAd/CarbonAdNative.js#L9
+        const sanitizedAd = data.ads
+          .filter((item) => Object.keys(item).length > 0)
+          .filter((item) => item.statlink)
+          .filter(Boolean)[0];
+
+        if (!sanitizedAd) {
+          return tryFetch();
+        }
+
+        return sanitizedAd;
+      }
+      const sanitizedAd = await tryFetch();
+      if (active) {
+        setAd(sanitizedAd);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  return ad ? (
+    <React.Fragment>
+      {/* Impression */}
+      <img src={ad.statimp} alt="" style={{ display: 'none' }} />
+      {/* Pixel */}
+      {ad.pixel &&
+        ad.pixel
+          .split('||')
+          .map((pixel, i) => (
+            <img
+              key={i}
+              src={`${pixel.replace('[timestamp]', ad.timestamp)}`}
+              style={{ display: 'none' }}
+              alt=""
+            />
+          ))}
+      <AdDisplay
+        {...props}
+        shape="inline"
+        ad={{
+          link: ad.statlink,
+          img: ad.image,
+          name: ad.company,
+          description: `<strong>${ad.company}</strong> - ${ad.description}`,
+          poweredby: 'Carbon',
+        }}
+      />
+    </React.Fragment>
+  ) : (
+    <div {...props} style={{ minHeight: 45 }} />
+  );
+}
+
+export default function AdCarbon() {
+  return adShape === 'image' ? <AdCarbonImage /> : <AdCarbonInline />;
+}

docs/src/modules/components/AdDisplay.js

@@ -0,0 +1,59 @@
+/* eslint react/jsx-no-target-blank: ["error", { allowReferrer: true }] */
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import { adShape } from 'docs/src/modules/components/AdManager';
+import { adStylesObject } from 'docs/src/modules/components/ad.styles';
+
+const hookFactory = (shape) =>
+  makeStyles((theme) => {
+    const styles = adStylesObject[`body-${shape}`](theme);
+    return {
+      root: {
+        ...styles.root,
+        '& img': styles.img,
+        '& a, & a:hover': styles.a,
+      },
+      imageWrapper: styles.imgWrapper,
+      description: styles.description,
+      poweredby: styles.poweredby,
+    };
+  });
+
+const autoShapeStyles = hookFactory(adShape);
+const inlineShapeStyles = hookFactory('inline');
+
+export default function AdDisplay(props) {
+  const { ad, className, shape = 'auto' } = props;
+  let classes;
+
+  if (shape === 'inline') {
+    classes = inlineShapeStyles();
+  } else {
+    classes = autoShapeStyles();
+  }
+
+  /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
+  return (
+    <span className={clsx(classes.root, 'ad-display', className)}>
+      <a href={ad.link} target="_blank" rel="noopener sponsored">
+        <span className={classes.imageWrapper}>
+          <img height="100" width="130" className={classes.image} src={ad.img} alt={ad.name} />
+        </span>
+        <span
+          className={classes.description}
+          dangerouslySetInnerHTML={{ __html: ad.description }}
+        />
+      </a>
+      <span className={classes.poweredby}>ad by {ad.poweredby}</span>
+    </span>
+  );
+  /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */
+}
+
+AdDisplay.propTypes = {
+  ad: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  shape: PropTypes.oneOf(['inline', 'auto']),
+};

docs/src/modules/components/AdInHouse.js

@@ -1,50 +1,12 @@
 /* eslint react/jsx-no-target-blank: ["error", { allowReferrer: true }] */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import adStyles from 'docs/src/modules/components/ad.styles';
-
-const useStyles = makeStyles((theme) => {
-  const styles = adStyles(theme);
-  return {
-    root: {
-      ...styles.root,
-      '& img': styles.img,
-      '& a, & a:hover': styles.a,
-    },
-    imageWrapper: styles.imgWrapper,
-    description: styles.description,
-    poweredby: styles.poweredby,
-  };
-});
+import AdDisplay from 'docs/src/modules/components/AdDisplay';
 
 export default function AdInHouse(props) {
   const { ad } = props;
-  const classes = useStyles();
 
-  /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
-  return (
-    <span className={classes.root}>
-      <a
-        href={ad.link}
-        target="_blank"
-        rel="noopener sponsored"
-        data-ga-event-category="ad"
-        data-ga-event-action="click"
-        data-ga-event-label={`in-house-${ad.name}`}
-      >
-        <span className={classes.imageWrapper}>
-          <img height="100" width="130" className={classes.image} src={ad.img} alt={ad.name} />
-        </span>
-        <span
-          className={classes.description}
-          dangerouslySetInnerHTML={{ __html: ad.description }}
-        />
-      </a>
-      <span className={classes.poweredby}>ad by Material-UI</span>
-    </span>
-  );
-  /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */
+  return <AdDisplay ad={{ poweredby: 'Material-UI', ...ad }} />;
 }
 
 AdInHouse.propTypes = {

docs/src/modules/components/AdManager.js

@@ -13,9 +13,9 @@ export const AdContext = React.createContext();
 const randomSession = Math.random();
 
 // Distribution profile:
-// 50% body-image
-// 50% body-inline
-export const adShape = randomSession < 0.5 ? 'inline' : 'image';
+// 20% body-inline
+// 80% body-image
+export const adShape = randomSession < 0.2 ? 'inline' : 'image';
 
 export default function AdManager(props) {
   const [portal, setPortal] = React.useState({});

docs/src/modules/components/AdReadthedocs.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import loadScript from 'docs/src/modules/utils/loadScript';
+import adStyles from 'docs/src/modules/components/ad.styles';
+import { adShape } from 'docs/src/modules/components/AdManager';
+
+const useStyles = makeStyles((theme) => {
+  const styles = adStyles(theme);
+
+  return {
+    '@global': {
+      '[data-ea-publisher][data-ea-publisher][data-ea-publisher][data-ea-publisher]': {
+        '&&': {
+          display: 'block',
+        },
+        '& .ea-placement': {
+          ...styles.root,
+        },
+        '& .ea-content': {
+          margin: 0,
+          padding: 0,
+          overflow: 'visible',
+          boxShadow: 'none',
+          background: 'transparent',
+          maxWidth: '100%',
+          color: 'inherit',
+        },
+        '& .ea-content > a': {
+          ...styles.imgWrapper,
+          marginLeft: -125,
+          width: 120,
+          height: 90,
+        },
+        '& .ea-content > a img': styles.img,
+        '& a, & a:hover': styles.a,
+        '& .ea-text': {
+          marginTop: 0,
+          color: 'inherit',
+          textAlign: 'left',
+        },
+        '& .ea-text strong': {
+          color: 'inherit',
+        },
+        '& .ea-text a': {
+          ...styles.description,
+          color: 'inherit',
+        },
+        '& .ea-callout': {
+          margin: 0,
+          padding: 0,
+          fontStyle: 'normal',
+          textAlign: 'left',
+          ...styles.poweredby,
+        },
+        '& .ea-callout a': {
+          fontSize: 'inherit',
+        },
+      },
+    },
+  };
+});
+
+export default function AdReadthedocs() {
+  useStyles();
+
+  React.useEffect(() => {
+    const script = loadScript(
+      'https://media.ethicalads.io/media/client/ethicalads.min.js',
+      document.querySelector('head'),
+    );
+
+    return () => {
+      script.parentElement.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <div data-ea-publisher="material-ui" data-ea-type={adShape === 'image' ? 'image' : 'text'} />
+  );
+}

docs/src/modules/components/Demo.js

@@ -686,7 +686,7 @@ const useStyles = makeStyles(
         overflow: 'auto',
         lineHeight: 1.5,
         margin: '0 !important',
-        maxHeight: 1000,
+        maxHeight: 'min(68vh, 1000px)',
       },
     },
     anchorLink: {

docs/src/modules/components/DiamondSponsors.js

@@ -53,7 +53,7 @@ export default function DiamondSponsors(props) {
       <Typography variant="caption" color="textSecondary" display="block" gutterBottom>
         {t('diamondSponsors')}
       </Typography>
-      {randomSencha < 0.25 ? (
+      {randomSencha < 0.01 ? (
         <a
           data-ga-event-category="sponsor"
           data-ga-event-action={spot}

docs/src/modules/components/ad.styles.js

@@ -43,7 +43,9 @@ const adBodyInlineStyles = (theme) => {
 
   return {
     ...baseline,
-    root: {},
+    root: {
+      display: 'block',
+    },
     imgWrapper: {
       display: 'none',
     },
@@ -71,6 +73,7 @@ const adBodyInlineStyles = (theme) => {
     },
     poweredby: {
       ...baseline.poweredby,
+      marginTop: 2,
       marginLeft: 0,
     },
     link: {