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 mediaQuery="(min-width: 52em)" data-ea-type="image" />
               {docList.map(item => {
                 return (
                   <Match path="/docs/:docName" key={item.title}>

site/src/components/EthicalAd.js

@@ -0,0 +1,68 @@
+import React from 'react'
+
+function removeNode(node) {
+  node.parentNode.removeChild(node)
+}
+
+const useMediaQuery = mediaQuery => {
+  const mediaObj = React.useMemo(() => window.matchMedia(mediaQuery), [
+    mediaQuery
+  ])
+  const [matches, setMatches] = React.useState(mediaObj.matches)
+  React.useLayoutEffect(
+    () => {
+      const updater = () => setMatches(mediaObj.matches)
+      mediaObj.addListener(updater)
+      return () => mediaObj.removeListener(updater)
+    },
+    [mediaObj]
+  )
+  return matches
+}
+
+export default function EthicalAd({ mediaQuery = '', ...props }) {
+  if (typeof window === 'undefined') {
+    return (
+      <>
+        <div data-ea-publisher="emotion-sh" data-ea-manual="true" {...props} />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+var removeNode = ${removeNode};
+if (document.currentScript) {
+    var matches = window.matchMedia('${mediaQuery}').matches;
+    var prevNode = document.currentScript.previousSibling;
+    !matches && removeNode(prevNode);
+    removeNode(document.currentScript);
+} else {
+    [].slice.call(document.querySelectorAll('[data-ea-publisher]')).forEach(function (node) {
+      removeNode(node.nextSibling);
+      removeNode(node);
+    });
+}
+`
+          }}
+        />
+      </>
+    )
+  }
+
+  if (!window.hasDocumentCurrentScript) {
+    return null
+  }
+
+  const matches = useMediaQuery(mediaQuery)
+
+  React.useEffect(
+    () => {
+      if (matches && window.ethicalads) {
+        window.ethicalads.load()
+      }
+    },
+    [matches]
+  )
+
+  return matches ? (
+    <div data-ea-publisher="emotion-sh" data-ea-manual="true" {...props} />
+  ) : null
+}

site/src/html.js

@@ -7,10 +7,18 @@ 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:
-              'window.searchError = function() {window.searchErrored = true;};window.searchLoaded = function() {};'
+            __html: [
+              'window.searchError = function() {window.searchErrored = true;};',
+              'window.searchLoaded = function() {};',
+              'window.hasDocumentCurrentScript = !!document.currentScript;',
+              'window.addEventListener("load", function () { window.hasDocumentCurrentScript && ethicalads.load(); });'
+            ].join('')
           }}
         />
         {props.headComponents}

site/src/pages/community.js

@@ -5,6 +5,7 @@ import { graphql } from 'gatsby'
 import Layout from '../layouts'
 import * as markdownComponents from '../utils/markdown-styles'
 import Title from '../components/Title'
+import EthicalAd from '../components/EthicalAd'
 import { MDXProvider } from '@mdx-js/react'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 

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 mediaQuery="(max-width: 52em)" data-ea-type="text" />
           <div
             css={{
               alignItems: 'center',