Add EthicalAd

site/src/components/DocWrapper.js

@@ -14,6 +14,7 @@ import { getDocMap, docList } from '../utils/misc'
 
 import DocMetadata from './DocMetadata'
 import Search from './Search'
+import EthicalAd from './EthicalAd'
 
 let space = constants.space
 const scaleAnimation = keyframes`
@@ -181,6 +182,7 @@ export default ({
               })}
             >
               <Search />
+              <EthicalAd condition="desktop" data-ea-type="image" />
               {docList.map(item => {
                 return (
                   <Match path="/docs/:docName" key={item.title}>

site/src/components/EthicalAd.js

@@ -0,0 +1,54 @@
+import React from 'react'
+
+function isMobile() {
+  return /mobile/i.test(navigator.userAgent)
+}
+
+function removeNode(node) {
+  node.parentNode.removeChild(node)
+}
+
+let hasDocumentCurrentScript = false
+
+if (typeof window !== 'undefined') {
+  hasDocumentCurrentScript = !!document.currentScript
+}
+
+export default function EthicalAd({ condition, ...props }) {
+  if (typeof window === 'undefined') {
+    return (
+      <>
+        <div data-ea-publisher="emotion-sh" {...props} />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+var removeNode = ${removeNode};
+if (document.currentScript) {
+    var isMobile = (${isMobile})();
+    var prevNode = document.currentScript.previousSibling;
+    ${condition === 'desktop' ? `isMobile && removeNode(prevNode);` : ''}
+    ${condition === 'mobile' ? `!isMobile && removeNode(prevNode);` : ''}
+    removeNode(document.currentScript);
+} else {
+    [].slice.call(document.querySelectorAll('[data-ea-publisher]')).forEach(function (node) {
+      removeNode(node.nextSibling);
+      removeNode(node);
+    });
+}
+`
+          }}
+        />
+      </>
+    )
+  }
+
+  if (
+    !hasDocumentCurrentScript ||
+    (condition === 'desktop' && isMobile()) ||
+    (condition === 'mobile' && !isMobile())
+  ) {
+    return null
+  }
+
+  return <div data-ea-publisher="emotion-sh" {...props} />
+}

site/src/html.js

@@ -7,6 +7,10 @@ export default function HTML(props) {
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script
+          async
+          src="https://media.ethicalads.io/media/client/ethicalads.min.js"
+        />
         <script
           dangerouslySetInnerHTML={{
             __html:

site/src/templates/doc.js

@@ -10,6 +10,7 @@ import Layout from '../layouts'
 import { graphql } from 'gatsby'
 import DocWrapper from '../components/DocWrapper'
 import Title from '../components/Title'
+import EthicalAd from '../components/EthicalAd'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { MDXProvider } from '@mdx-js/react'
 
@@ -106,6 +107,7 @@ export default class DocRoute extends React.Component<Props, DocRouteState> {
           sidebarOpen={this.state.sidebarOpen}
           setSidebarOpen={this.setSidebarOpen}
         >
+          <EthicalAd condition="mobile" data-ea-type="text" />
           <div
             css={{
               alignItems: 'center',