[docs-infra] Move ads to the @mui/docs package

docs/nextConfigDocsInfra.js

@@ -71,8 +71,6 @@ function withDocsInfra(nextConfig) {
       NETLIFY_DEPLOY_URL: process.env.DEPLOY_URL,
       // Name of the site, its Netlify subdomain; for example, material-ui-docs
       NETLIFY_SITE_NAME: process.env.SITE_NAME,
-      // The ratio of ads display reported to Google Analytics. Used to avoid an exceed on the Google Analytics quotas.
-      GA_ADS_DISPLAY_RATIO: 0.1,
     },
     experimental: {
       scrollRestoration: true,

docs/package.json

@@ -129,7 +129,6 @@
     "@types/react-transition-group": "^4.4.10",
     "@types/react-window": "^1.8.8",
     "@types/stylis": "^4.2.0",
-    "@types/gtag.js": "^0.0.20",
     "chai": "^4.4.1",
     "cross-fetch": "^4.0.0",
     "gm": "^1.25.0",

docs/pages/_app.js

@@ -329,6 +329,7 @@ function AppWrapper(props) {
       </NextHead>
       <DocsProvider
         config={config}
+        adConfig={{ GADisplayRatio: 0.1 }}
         defaultUserLanguage={pageProps.userLanguage}
         translations={pageProps.translations}
       >

docs/src/modules/components/Ad.tsx

@@ -1,244 +1,4 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import AdCarbon from 'docs/src/modules/components/AdCarbon';
-import AdInHouse from 'docs/src/modules/components/AdInHouse';
-import { AdContext, adShape } from 'docs/src/modules/components/AdManager';
-import { useTranslate } from '@mui/docs/i18n';
+// Backwards compatibility for Toolpad.
+// TODO: remove when Toolpad migrated to `@mui/docs/i18n`
 
-function PleaseDisableAdblock() {
-  const t = useTranslate();
-
-  return (
-    <Paper
-      component="span"
-      elevation={0}
-      sx={{ display: 'block', p: 1.5, border: '2px solid', borderColor: 'primary.main' }}
-    >
-      <Typography variant="body2" component="span" gutterBottom sx={{ display: 'block' }}>
-        {t('likeMui')}
-      </Typography>
-      <Typography variant="body2" component="span" gutterBottom sx={{ display: 'block' }}>
-        {t('adblock')}
-      </Typography>
-      <Typography variant="body2" component="span" sx={{ display: 'block' }}>
-        {t('thanks')}{' '}
-        <span role="img" aria-label={t('emojiLove')}>
-          ❤️
-        </span>
-      </Typography>
-    </Paper>
-  );
-}
-
-const disableAd =
-  process.env.NODE_ENV !== 'production' && process.env.ENABLE_AD_IN_DEV_MODE !== 'true';
-const inHouseAds = [
-  {
-    name: 'scaffoldhub',
-    link: 'https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1',
-    img: '/static/ads-in-house/scaffoldhub.png',
-    description: '<b>ScaffoldHub</b>. Automate building your full-stack Material UI web-app.',
-  },
-  {
-    name: 'templates',
-    link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-templates',
-    img: '/static/ads-in-house/themes-2.jpg',
-    description:
-      '<b>Premium Templates</b>. Start your project with the best templates for admins, dashboards, and more.',
-  },
-  {
-    name: 'themes',
-    link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes',
-    img: '/static/ads-in-house/themes.png',
-    description:
-      '<b>Premium Themes</b>. Kickstart your application development with a ready-made theme.',
-  },
-  {
-    name: 'tidelift',
-    link: 'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
-    img: '/static/ads-in-house/tidelift.png',
-    description:
-      '<b>MUI for enterprise</b>. Save time and reduce risk. Managed open source — backed by maintainers.',
-  },
-  {
-    name: 'figma',
-    link: 'https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-figma',
-    img: '/static/ads-in-house/figma.png',
-    description:
-      '<b>For Figma</b>. A large UI kit with over 600 handcrafted Material UI, MUI X, Joy UI components 🎨.',
-  },
-];
-
-class AdErrorBoundary extends React.Component<{
-  eventLabel: string | null;
-  children?: React.ReactNode | undefined;
-}> {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    eventLabel: PropTypes.string,
-  };
-
-  state = { didError: false };
-
-  static getDerivedStateFromError() {
-    return { didError: true };
-  }
-
-  componentDidCatch() {
-    // send explicit `'null'`
-    const eventLabel = String(this.props.eventLabel);
-    // TODO: Use proper error monitoring service (for example Sentry) instead
-
-    window.gtag('event', 'ad', {
-      eventAction: 'crash',
-      eventLabel,
-    });
-  }
-
-  render() {
-    const { didError } = this.state;
-    const { children } = this.props;
-
-    if (didError) {
-      return null;
-    }
-    return children;
-  }
-}
-
-export const AD_MARGIN_TOP = 3;
-export const AD_MARGIN_BOTTOM = 3;
-export const AD_HEIGHT = 126;
-// Add more height on mobile as the text tends to wrap beyond the image height.
-export const AD_HEIGHT_MOBILE = 126 + 16;
-
-// https://stackoverflow.com/a/20084661
-function isBot() {
-  return /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
-}
-
-export default function Ad() {
-  const [adblock, setAdblock] = React.useState<null | boolean>(null);
-  const [carbonOut, setCarbonOut] = React.useState<null | boolean>(null);
-
-  const { current: randomAdblock } = React.useRef(Math.random());
-  const { current: randomInHouse } = React.useRef(Math.random());
-
-  let children;
-  let label;
-  // Hide the content to google bot to avoid its indexation.
-  if ((typeof window !== 'undefined' && isBot()) || disableAd) {
-    children = <span />;
-  } else if (adblock) {
-    if (randomAdblock < 0.2) {
-      children = <PleaseDisableAdblock />;
-      label = 'in-house-adblock';
-    } else {
-      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]} />;
-      label = 'in-house';
-    }
-  } else if (carbonOut) {
-    children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * randomInHouse)]} />;
-    label = 'in-house-carbon';
-  } else {
-    children = <AdCarbon />;
-    label = 'carbon';
-  }
-
-  const ad = React.useContext(AdContext);
-  const eventLabel = label ? `${label}-${ad.placement}-${adShape}` : null;
-
-  const timerAdblock = React.useRef<NodeJS.Timeout>();
-
-  const checkAdblock = React.useCallback(
-    (attempt = 1) => {
-      if (
-        document.querySelector('.ea-placement') ||
-        document.querySelector('#carbonads') ||
-        document.querySelector('.carbonads') ||
-        carbonOut
-      ) {
-        if (
-          document.querySelector('#carbonads a') &&
-          document.querySelector('#carbonads a')?.getAttribute('href') ===
-            'https://material-ui-next.com/discover-more/backers'
-        ) {
-          setCarbonOut(true);
-        }
-
-        setAdblock(false);
-        return;
-      }
-
-      if (attempt < 30) {
-        timerAdblock.current = setTimeout(() => {
-          checkAdblock(attempt + 1);
-        }, 500);
-      }
-
-      if (attempt > 6) {
-        setAdblock(true);
-      }
-    },
-    [carbonOut],
-  );
-
-  React.useEffect(() => {
-    if (disableAd) {
-      return undefined;
-    }
-    checkAdblock();
-
-    return () => {
-      clearTimeout(timerAdblock.current);
-    };
-  }, [checkAdblock]);
-
-  React.useEffect(() => {
-    // Avoid an exceed on the Google Analytics quotas.
-    if (Math.random() > ((process.env.GA_ADS_DISPLAY_RATIO ?? 0.1) as number) || !eventLabel) {
-      return undefined;
-    }
-
-    const delay = setTimeout(() => {
-      window.gtag('event', 'ad', {
-        eventAction: 'display',
-        eventLabel,
-      });
-    }, 2500);
-
-    return () => {
-      clearTimeout(delay);
-    };
-  }, [eventLabel]);
-
-  return (
-    <Box
-      component="span"
-      sx={(theme) => ({
-        position: 'relative',
-        display: 'block',
-        mt: AD_MARGIN_TOP,
-        mb: AD_MARGIN_BOTTOM,
-        minHeight: AD_HEIGHT_MOBILE,
-        [theme.breakpoints.up('sm')]: {
-          minHeight: AD_HEIGHT,
-        },
-        ...(adShape === 'image' && {}),
-        ...(adShape === 'inline' && {
-          display: 'flex',
-          alignItems: 'flex-end',
-        }),
-      })}
-      data-ga-event-category="ad"
-      data-ga-event-action="click"
-      data-ga-event-label={eventLabel}
-      className="Ad-root"
-    >
-      <AdErrorBoundary eventLabel={eventLabel}>{children}</AdErrorBoundary>
-    </Box>
-  );
-}
+export { Ad as default } from '@mui/docs/Ad';

docs/src/modules/components/ApiPage.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
 import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
-import AdGuest from 'docs/src/modules/components/AdGuest';
+import { Ad, AdGuest } from '@mui/docs/Ad';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
@@ -13,7 +13,6 @@ import { BrandingProvider } from '@mui/docs/branding';
 import { SectionTitle } from '@mui/docs/SectionTitle';
 import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
-import Ad from 'docs/src/modules/components/Ad';
 import PropertiesSection, {
   getPropsToC,
 } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';

docs/src/modules/components/AppLayoutDocs.js

@@ -4,20 +4,20 @@ import { useRouter } from 'next/router';
 import { styled } from '@mui/material/styles';
 import { exactProp } from '@mui/utils';
 import GlobalStyles from '@mui/material/GlobalStyles';
+import {
+  AdManager,
+  AD_MARGIN_TOP,
+  AD_HEIGHT,
+  AD_HEIGHT_MOBILE,
+  AD_MARGIN_BOTTOM,
+} from '@mui/docs/Ad';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppContainer from 'docs/src/modules/components/AppContainer';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
-import AdManager from 'docs/src/modules/components/AdManager';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
 import BackToTop from 'docs/src/modules/components/BackToTop';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
-import {
-  AD_MARGIN_TOP,
-  AD_HEIGHT,
-  AD_HEIGHT_MOBILE,
-  AD_MARGIN_BOTTOM,
-} from 'docs/src/modules/components/Ad';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 
 const TOC_WIDTH = 242;

docs/src/modules/components/Demo.js

@@ -20,14 +20,14 @@ import DemoSandbox from 'docs/src/modules/components/DemoSandbox';
 import ReactRunner from 'docs/src/modules/components/ReactRunner';
 import DemoEditor from 'docs/src/modules/components/DemoEditor';
 import DemoEditorError from 'docs/src/modules/components/DemoEditorError';
-import { AdCarbonInline } from 'docs/src/modules/components/AdCarbon';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
 import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
 import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
+import { AdCarbonInline } from '@mui/docs/Ad';
 import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding';
 
 /**

docs/src/modules/components/MarkdownDocs.js

@@ -4,13 +4,12 @@ import { useRouter } from 'next/router';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
 import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import { Ad, AdGuest } from '@mui/docs/Ad';
 import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useUserLanguage } from '@mui/docs/i18n';
 import { BrandingProvider } from '@mui/docs/branding';
-import Ad from 'docs/src/modules/components/Ad';
-import AdGuest from 'docs/src/modules/components/AdGuest';
 
 function JoyModeObserver({ mode }) {
   const { setMode } = useColorScheme();

docs/src/modules/components/MarkdownDocsV2.js

@@ -5,6 +5,7 @@ import kebabCase from 'lodash/kebabCase';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
 import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import { Ad, AdGuest } from '@mui/docs/Ad';
 import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent';
 import HooksApiContent from 'docs/src/modules/components/HooksApiContent';
 import { getTranslatedHeader as getComponentTranslatedHeader } from 'docs/src/modules/components/ApiPage';
@@ -13,10 +14,8 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
 import { BrandingProvider } from '@mui/docs/branding';
-import Ad from 'docs/src/modules/components/Ad';
 import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame';
 import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs';
-import AdGuest from 'docs/src/modules/components/AdGuest';
 import { getPropsToC } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
 import { getClassesToC } from 'docs/src/modules/components/ApiPage/sections/ClassesSection';