docs: add carbon ads

Author: mrholek

packages/docs/src/components/Ads.tsx

@@ -0,0 +1,21 @@
+import React, { FC, useEffect, useRef } from 'react'
+
+const Ads: FC = ({ code, placement }: { code: string; placement: string }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = ''
+      const s = document.createElement('script')
+      s.id = '_carbonads_js'
+      s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`
+      ref.current.appendChild(s)
+    }
+  }, [])
+
+  return <div id="carbonads" className="my-3" ref={ref} />
+}
+
+Ads.displayName = 'Ads'
+
+export default Ads

packages/docs/src/components/index.ts

@@ -1,3 +1,4 @@
+import Ads from './Ads'
 import CodeBlock from './CodeBlock'
 import Example from './Example'
 import Footer from './Footer'
@@ -7,4 +8,4 @@ import Sidebar from './Sidebar'
 import { SidebarNav } from './SidebarNav'
 import Toc from './Toc'
 
-export { CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }
+export { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }

packages/docs/src/styles/_ads.scss

@@ -0,0 +1,61 @@
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#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: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+  z-index: 100;
+}
+#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;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

packages/docs/src/styles/styles.scss

@@ -4,6 +4,7 @@
 @import "@coreui/chartjs/scss/coreui-chartjs";
 @import "prismjs/themes/prism-solarizedlight.css";
 
+@import "ads";
 @import "anchor";
 @import "example";
 @import "footer";

packages/docs/src/templates/Docs.tsx

@@ -1,10 +1,9 @@
 import React, { FC, useState } from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
-import { CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../components/'
+import { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../components/'
 import { CCol, CContainer, CRow, CTable } from '@coreui/react/src/'
 import './../styles/styles.scss'
 
@@ -28,9 +27,6 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
   return (
     <>
       <Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
-      <Helmet>
-        <script src="https://media.ethicalads.io/media/client/ethicalads.min.js" />
-      </Helmet>
       <myContext.Provider
         value={{
           sidebarVisible,
@@ -46,7 +42,7 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
                 <CCol lg={9}>
                   <h1>{mdx.frontmatter.title}</h1>
                   <p className="docs-lead fs-4 fw-light">{mdx.frontmatter.description}</p>
-                  <div data-ea-publisher="coreui-io" data-ea-type="image"></div>
+                  <Ads code="CEAICKJY" placement="coreuiio" />
                   <MDXProvider components={components}>
                     <MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
                   </MDXProvider>