Adds Carbon ads to the documentation

docs/index.mdx

@@ -6,6 +6,7 @@ description:
 seo:
   description: What is Mock Service Worker?
 order: 11
+ads: false
 ---
 
 <VideoEmbed url="https://www.youtube.com/embed/HcQCqboatZk?controls=0" />

src/components/CarbonAds.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+import { Box } from 'atomic-layout'
+import './carbon-ads.css'
+
+const CARBON_URL =
+  'https://cdn.carbonads.com/carbon.js?serve=CEBIV5QY&placement=mswjsio'
+
+export const CarbonAds: React.FC = () => {
+  useEffect(() => {
+    const firstParagraph = document
+      .getElementById('docs-page')
+      .querySelector('p')
+    const element = document.createElement('script')
+    const container = document.createElement('div')
+    container.setAttribute('id', 'carbon-container')
+
+    element.setAttribute('src', CARBON_URL)
+    element.setAttribute('async', 'true')
+    element.setAttribute('id', '_carbonads_js')
+    container.appendChild(element)
+
+    firstParagraph.insertAdjacentElement('afterend', container)
+    // container.appendChild(element)
+  }, [])
+
+  return null
+}

src/components/carbon-ads.css

@@ -0,0 +1,73 @@
+#carbon-container {
+  margin: 2rem 0;
+  min-height: 143px;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: #fff;
+  padding: 0.5rem;
+  border: 1px solid var(--color-gray-dim);
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+}
+
+.carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 8px 10px;
+  background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      hsla(0, 0%, 0%, 0.025) 5px,
+      hsla(0, 0%, 0%, 0.025) 10px
+    )
+    hsla(203, 11%, 95%, 0.4);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 1;
+}

src/templates/docs/DocsLayout.tsx

@@ -3,13 +3,13 @@ import styled, { css, createGlobalStyle } from 'styled-components'
 import { Box, Composition, Only } from 'atomic-layout'
 
 import { Grid } from '../../components/Grid'
+import Header from '../../components/header'
 import { Breadcrumbs } from './components/Breadcrumbs'
 import { Menu } from './components/Menu'
 import { TableOfContents } from './components/TableOfContents'
 import { DocsPageFooter } from './components/DocsPageFooter'
 import { BaseLayout } from '../../components/BaseLayout'
 import { Footer } from '../../components/Footer'
-import Header from '../../components/header'
 
 interface Props {
   page?: any

src/templates/docs/singlePage.tsx

@@ -23,6 +23,7 @@ import { PathMatchPreview } from '../../components/mdx/PathMatchPreview'
 import { Table } from '../../components/mdx/Table'
 import { VideoEmbed } from '../../components/mdx/VideoEmbed'
 import DocsLayout from './DocsLayout'
+import { CarbonAds } from '../../components/CarbonAds'
 
 const createHeading = (level: 1 | 2 | 3 | 4): React.FC => {
   return (props) => <Heading level={level} {...props} />
@@ -82,10 +83,12 @@ const DocumentationPage = ({ data, pageContext }) => {
           siteName,
         }}
       />
+
       <h1>{page.frontmatter.title}</h1>
       {page.frontmatter.description && (
         <TextLead>{page.frontmatter.description}</TextLead>
       )}
+      {page.frontmatter.ads !== false && <CarbonAds />}
       <MDXProvider components={components}>
         <MDXRenderer>{page.body}</MDXRenderer>
       </MDXProvider>
@@ -106,6 +109,7 @@ export const query = graphql`
         seo {
           description
         }
+        ads
       }
       body
       tableOfContents