From d3bef5fd4529c6f24e9f83b8d561e25594d9801a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 12 Aug 2018 12:10:53 +0200
Subject: [PATCH] [docs] Try CodeFund over Carbon

---
 docs/src/modules/components/AppContent.js     |   4 +-
 .../modules/components/AppTableOfContents.js  |  14 +-
 docs/src/modules/components/Carbon.js         | 189 ------------------
 docs/src/modules/components/CodeFund.js       | 146 ++++++++++++++
 docs/src/modules/components/Demo.js           |   2 +-
 docs/src/modules/components/GoogleTag.js      |  10 +-
 docs/src/modules/components/MarkdownDocs.js   |  10 +-
 pages/_document.js                            |   6 +-
 pages/premium-themes.js                       |   2 +-
 pages/versions/index.js                       |   1 -
 10 files changed, 174 insertions(+), 210 deletions(-)
 delete mode 100644 docs/src/modules/components/Carbon.js
 create mode 100644 docs/src/modules/components/CodeFund.js

diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
index 6da6c2c19262a2..c9024c00304ade 100644
--- a/docs/src/modules/components/AppContent.js
+++ b/docs/src/modules/components/AppContent.js
@@ -14,12 +14,12 @@ const styles = theme => ({
     [theme.breakpoints.up('sm')]: {
       paddingLeft: theme.spacing.unit * 4,
       paddingRight: theme.spacing.unit * 4,
-      maxWidth: 'calc(100% - 160px)',
+      maxWidth: 'calc(100% - 162px)',
     },
     [theme.breakpoints.up('lg')]: {
       paddingLeft: theme.spacing.unit * 5,
       paddingRight: theme.spacing.unit * 9,
-      maxWidth: 'calc(100% - 240px - 160px)',
+      maxWidth: 'calc(100% - 240px - 162px)',
     },
   },
 });
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index a60a78459512cf..ff0be3d7e635d7 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -9,6 +9,7 @@ import EventListener from 'react-event-listener';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { textToHash } from '@material-ui/docs/MarkdownElement/MarkdownElement';
+import CodeFund from 'docs/src/modules/components/CodeFund';
 
 const renderer = new marked.Renderer();
 
@@ -39,7 +40,7 @@ renderer.heading = (text, level) => {
 const styles = theme => ({
   root: {
     top: 70,
-    width: 160,
+    width: 162,
     flexShrink: 0,
     order: 2,
     position: 'sticky',
@@ -53,6 +54,9 @@ const styles = theme => ({
       display: 'block',
     },
   },
+  contents: {
+    marginTop: theme.spacing.unit * 2,
+  },
   ul: {
     padding: 0,
     margin: 0,
@@ -67,7 +71,7 @@ const styles = theme => ({
 class AppTableOfContents extends React.Component {
   handleScroll = debounce(() => {
     this.findActiveIndex();
-  }, 166); // Corresponds to 10 frames at 60 Hz.
+  }, 83); // Corresponds to 5 frames at 60 Hz.
 
   constructor(props) {
     super(props);
@@ -122,14 +126,15 @@ class AppTableOfContents extends React.Component {
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, disableAd } = this.props;
     const { active } = this.state;
 
     return (
       <nav className={classes.root}>
+        {disableAd ? null : <CodeFund />}
         {itemsServer.length > 0 ? (
           <React.Fragment>
-            <Typography variant="body2" gutterBottom>
+            <Typography variant="body2" gutterBottom className={classes.contents}>
               Contents
             </Typography>
             <EventListener target="window" onScroll={this.handleScroll} />
@@ -178,6 +183,7 @@ class AppTableOfContents extends React.Component {
 AppTableOfContents.propTypes = {
   classes: PropTypes.object.isRequired,
   contents: PropTypes.array.isRequired,
+  disableAd: PropTypes.bool.isRequired,
 };
 
 export default withStyles(styles)(AppTableOfContents);
diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js
deleted file mode 100644
index 9ba01fda86e168..00000000000000
--- a/docs/src/modules/components/Carbon.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import pure from 'recompose/pure';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-
-const styles = theme => ({
-  '@global': {
-    '#carbonads': {
-      padding: theme.spacing.unit,
-      backgroundColor: theme.palette.background.paper,
-      '& img': {
-        verticalAlign: 'middle',
-      },
-      '& a': {
-        textDecoration: 'none',
-      },
-      '& .carbon-wrap': {
-        display: 'flex',
-        [theme.breakpoints.up('sm')]: {
-          display: 'block',
-        },
-      },
-      '& .carbon-text': {
-        ...theme.typography.body1,
-        display: 'block',
-        margin: `0 0 0 ${theme.spacing.unit}px`,
-        [theme.breakpoints.up('sm')]: {
-          margin: `${theme.spacing.unit}px 0`,
-        },
-      },
-      '& .carbon-poweredby': {
-        ...theme.typography.caption,
-        display: 'block',
-        marginTop: theme.spacing.unit / 2,
-        position: 'absolute',
-        right: 0,
-        bottom: 0,
-        padding: theme.spacing.unit,
-        [theme.breakpoints.up('sm')]: {
-          marginTop: 0,
-          position: 'static',
-          padding: 0,
-        },
-      },
-    },
-  },
-  root: {
-    minHeight: 116,
-    margin: `${theme.spacing.unit}px 0 0`,
-    [theme.breakpoints.up('sm')]: {
-      margin: 0,
-      minHeight: 0,
-    },
-  },
-  ad: {
-    zIndex: 1,
-    borderRadius: theme.shape.borderRadius,
-    position: 'relative',
-    [theme.breakpoints.up('sm')]: {
-      margin: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
-      maxWidth: 130 + theme.spacing.unit * 2,
-      float: 'right',
-    },
-    [theme.breakpoints.up('xl')]: {
-      position: 'fixed',
-      margin: 0,
-      right: theme.spacing.unit * 2,
-      bottom: theme.spacing.unit * 2,
-    },
-  },
-  carbonads: {
-    padding: theme.spacing.unit,
-    backgroundColor: theme.palette.background.paper,
-  },
-  info: {
-    ...theme.typography.caption,
-    position: 'absolute',
-    padding: theme.spacing.unit,
-    cursor: 'default',
-    display: 'none',
-    [theme.breakpoints.up('sm')]: {
-      display: 'block',
-      bottom: 0,
-      right: 0,
-    },
-  },
-});
-
-class Carbon extends React.Component {
-  timerAdblock = null;
-
-  state = {
-    adblock: null,
-  };
-
-  componentDidMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      return;
-    }
-
-    const script = document.createElement('script');
-    script.setAttribute('async', '');
-    script.src = '//cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom';
-    script.id = '_carbonads_js';
-    const ad = document.querySelector('#ad');
-    if (ad) {
-      ad.appendChild(script);
-    }
-
-    this.checkAdblock();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timerAdblock);
-  }
-
-  checkAdblock = (attempt = 1) => {
-    if (document.querySelector('#carbonads')) {
-      this.setState({
-        adblock: false,
-      });
-      return;
-    }
-
-    if (attempt < 20) {
-      this.timerAdblock = setTimeout(() => {
-        this.checkAdblock(attempt + 1);
-      }, 500);
-    }
-
-    if (attempt > 6) {
-      this.setState({
-        adblock: true,
-      });
-    }
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { adblock } = this.state;
-
-    if (adblock) {
-      return (
-        <div className={classes.root}>
-          <div className={classes.ad}>
-            <div className={classes.carbonads}>
-              <Typography gutterBottom>Like Material-UI?</Typography>
-              <Typography gutterBottom>
-                {`If you don't mind tech-related ads, and want to support Open Source,
-                please whitelist Material-UI in your ad blocker.`}
-              </Typography>
-              <Typography>
-                Thank you!{' '}
-                <span role="img" aria-label="Love">
-                  ❤️
-                </span>
-              </Typography>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className={classes.root}>
-        <div className={classes.ad}>
-          <div id="ad" />
-          {adblock === false && (
-            <Tooltip
-              id="ad-info"
-              title="This ad is designed to support Open Source."
-              placement="left"
-            >
-              <span className={classes.info}>i</span>
-            </Tooltip>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-Carbon.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default pure(withStyles(styles)(Carbon));
diff --git a/docs/src/modules/components/CodeFund.js b/docs/src/modules/components/CodeFund.js
new file mode 100644
index 00000000000000..023c880e03e42b
--- /dev/null
+++ b/docs/src/modules/components/CodeFund.js
@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const styles = theme => ({
+  '@global': {
+    '#cf_ad': {
+      padding: theme.spacing.unit,
+      backgroundColor: theme.palette.background.paper,
+      borderRadius: theme.shape.borderRadius,
+      '&& .cf-wrapper': {
+        padding: 0,
+        backgroundColor: 'transparent',
+      },
+      '&& .cf-img-wrapper': {
+        float: 'none',
+        display: 'block',
+      },
+      '&& .cf-text': {
+        ...theme.typography.body1,
+        display: 'block',
+        margin: `${theme.spacing.unit}px 0`,
+        '& strong': {
+          fontWeight: theme.typography.fontWeightMedium,
+        },
+      },
+      '&& .cf-powered-by': {
+        ...theme.typography.caption,
+        marginTop: 0,
+      },
+    },
+  },
+  root: {
+    position: 'relative',
+    minHeight: 180,
+  },
+  info: {
+    ...theme.typography.caption,
+    position: 'absolute',
+    padding: theme.spacing.unit,
+    cursor: 'default',
+    bottom: 0,
+    right: 0,
+  },
+});
+
+class CodeFund extends React.Component {
+  timerAdblock = null;
+
+  state = {
+    adblock: null,
+  };
+
+  componentDidMount() {
+    if (process.env.NODE_ENV !== 'production') {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.setAttribute('async', '');
+    script.src = 'https://codefund.io/scripts/71fdcb01-40be-4590-af75-cd1bd4773c2a/embed.js';
+    const scriptSlot = document.querySelector('#code-fund-script-slot');
+    scriptSlot.appendChild(script);
+    this.checkAdblock();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timerAdblock);
+  }
+
+  checkAdblock = (attempt = 1) => {
+    if (document.querySelector('.cf-wrapper')) {
+      this.setState({
+        adblock: false,
+      });
+      return;
+    }
+
+    if (attempt < 20) {
+      this.timerAdblock = setTimeout(() => {
+        this.checkAdblock(attempt + 1);
+      }, 500);
+    }
+
+    if (attempt > 6) {
+      this.setState({
+        adblock: true,
+      });
+    }
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { adblock } = this.state;
+
+    if (process.env.NODE_ENV !== 'production') {
+      return null;
+    }
+
+    if (adblock) {
+      return (
+        <div className={classes.root}>
+          <div id="cf_ad">
+            <Typography gutterBottom>Like Material-UI?</Typography>
+            <Typography gutterBottom>
+              {`If you don't mind tech-related ads, and want to support Open Source,
+              please whitelist Material-UI in your ad blocker.`}
+            </Typography>
+            <Typography>
+              Thank you!{' '}
+              <span role="img" aria-label="Love">
+                ❤️
+              </span>
+            </Typography>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <div id="code-fund-script-slot" />
+        <div className={classes.root}>
+          <div id="codefund_ad" />
+          {adblock === false && (
+            <Tooltip
+              id="ad-info"
+              title="This ad is designed to support Open Source."
+              placement="left"
+            >
+              <span className={classes.info}>i</span>
+            </Tooltip>
+          )}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+CodeFund.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CodeFund);
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index f9657442c0002e..c12825b341950f 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -65,7 +65,6 @@ const styles = theme => ({
     marginBottom: 40,
     marginLeft: -theme.spacing.unit * 2,
     marginRight: -theme.spacing.unit * 2,
-    clear: 'both',
     [theme.breakpoints.up('sm')]: {
       padding: `0 ${theme.spacing.unit}px`,
       marginLeft: 0,
@@ -73,6 +72,7 @@ const styles = theme => ({
     },
   },
   demo: theme.mixins.gutters({
+    borderRadius: theme.shape.borderRadius,
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     display: 'flex',
diff --git a/docs/src/modules/components/GoogleTag.js b/docs/src/modules/components/GoogleTag.js
index ed141b766df83f..8dfcc6b7d2bb39 100644
--- a/docs/src/modules/components/GoogleTag.js
+++ b/docs/src/modules/components/GoogleTag.js
@@ -1,14 +1,18 @@
 import React from 'react';
-import config from 'docs/src/config';
 
 class GoogleTag extends React.Component {
   googleTimer = null;
 
   componentDidMount() {
+    if (process.env.NODE_ENV !== 'production') {
+      return;
+    }
+
     // Wait for the title to be updated.
     this.googleTimer = setTimeout(() => {
-      window.gtag('config', config.google.id, {
-        page_path: window.location.pathname,
+      window.ga('send', {
+        hitType: 'pageview',
+        page: window.location.pathname,
       });
     });
   }
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index ffa57502478f12..4722d2d5c43993 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -8,7 +8,6 @@ import MarkdownElement from '@material-ui/docs/MarkdownElement';
 import Head from 'docs/src/modules/components/Head';
 import AppContent from 'docs/src/modules/components/AppContent';
 import Demo from 'docs/src/modules/components/Demo';
-import Carbon from 'docs/src/modules/components/Carbon';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import {
@@ -38,7 +37,7 @@ const demoRegexp = /^"demo": "(.*)"/;
 const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/tree/master';
 
 function MarkdownDocs(props, context) {
-  const { classes, demos, disableCarbon, markdown, markdownLocation: markdownLocationProp } = props;
+  const { classes, demos, disableAd, markdown, markdownLocation: markdownLocationProp } = props;
   const contents = getContents(markdown);
   const headers = getHeaders(markdown);
 
@@ -78,14 +77,13 @@ ${headers.components
         title={`${headers.title || getTitle(markdown)} - Material-UI`}
         description={getDescription(markdown)}
       />
-      <AppTableOfContents contents={contents} />
+      <AppTableOfContents contents={contents} disableAd={disableAd} />
       <AppContent className={classes.root}>
         <div className={classes.header}>
           <Button component="a" href={`${SOURCE_CODE_ROOT_URL}${markdownLocation}`}>
             {'Edit this page'}
           </Button>
         </div>
-        {disableCarbon ? null : <Carbon key={markdownLocation} />}
         {contents.map((content, index) => {
           const match = content.match(demoRegexp);
 
@@ -118,7 +116,7 @@ ${headers.components
 MarkdownDocs.propTypes = {
   classes: PropTypes.object.isRequired,
   demos: PropTypes.object,
-  disableCarbon: PropTypes.bool,
+  disableAd: PropTypes.bool,
   markdown: PropTypes.string.isRequired,
   // You can define the direction location of the markdown file.
   // Otherwise, we try to determine it with an heuristic.
@@ -126,7 +124,7 @@ MarkdownDocs.propTypes = {
 };
 
 MarkdownDocs.defaultProps = {
-  disableCarbon: false,
+  disableAd: false,
 };
 
 MarkdownDocs.contextTypes = {
diff --git a/pages/_document.js b/pages/_document.js
index 6f4a3b94966cc2..7322790d0ded5f 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -60,13 +60,13 @@ class MyDocument extends Document {
         <body>
           <Main />
           {/* Global Site Tag (gtag.js) - Google Analytics */}
-          <script async src={`https://www.googletagmanager.com/gtag/js?id=${config.google.id}`} />
+          <script async src="https://www.google-analytics.com/analytics.js" />
           <script
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: `
-window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments)};
-gtag('js', new Date());
+window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+ga('create', '${config.google.id}', 'material-ui.com');
               `,
             }}
           />
diff --git a/pages/premium-themes.js b/pages/premium-themes.js
index 3f07fffd4809fd..bacff79f88a04d 100644
--- a/pages/premium-themes.js
+++ b/pages/premium-themes.js
@@ -6,7 +6,7 @@ import markdown from 'docs/src/pages/premium-themes/premium-themes.md';
 function Page() {
   return (
     <MarkdownDocs
-      disableCarbon
+      disableAd
       markdown={markdown}
       demos={{
         'pages/premium-themes/PremiumThemes.js': {
diff --git a/pages/versions/index.js b/pages/versions/index.js
index e920fb7784b99b..78347101fa870b 100644
--- a/pages/versions/index.js
+++ b/pages/versions/index.js
@@ -6,7 +6,6 @@ import markdown from 'docs/src/pages/versions/versions.md';
 function Page() {
   return (
     <MarkdownDocs
-      disableCarbon
       markdown={markdown}
       demos={{
         'pages/versions/LatestVersion.js': {