diff --git a/site/src/components/DocWrapper.js b/site/src/components/DocWrapper.js
index 4f65084bb..6f34d84bb 100644
--- a/site/src/components/DocWrapper.js
+++ b/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 ({
})}
>
+
{docList.map(item => {
return (
diff --git a/site/src/components/EthicalAd.js b/site/src/components/EthicalAd.js
new file mode 100644
index 000000000..2ded3f3c9
--- /dev/null
+++ b/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 (
+ <>
+
+
+ >
+ )
+ }
+
+ if (!window.hasDocumentCurrentScript) {
+ return null
+ }
+
+ const matches = useMediaQuery(mediaQuery)
+
+ React.useEffect(
+ () => {
+ if (matches && window.ethicalads) {
+ window.ethicalads.load()
+ }
+ },
+ [matches]
+ )
+
+ return matches ? (
+
+ ) : null
+}
diff --git a/site/src/html.js b/site/src/html.js
index 954851ca5..17e4bc534 100644
--- a/site/src/html.js
+++ b/site/src/html.js
@@ -7,10 +7,18 @@ export default function HTML(props) {
+
{props.headComponents}
diff --git a/site/src/pages/community.js b/site/src/pages/community.js
index 510db8bae..a994bc064 100644
--- a/site/src/pages/community.js
+++ b/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'
diff --git a/site/src/templates/doc.js b/site/src/templates/doc.js
index 03bb389ff..d478eb294 100644
--- a/site/src/templates/doc.js
+++ b/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 {
sidebarOpen={this.state.sidebarOpen}
setSidebarOpen={this.setSidebarOpen}
>
+