Fix: loads ads properly

Author: Frans Allen

gatsby-browser.js

@@ -1,2 +1,3 @@
 import './src/css/style.css';
 import './src/css/markdown.css';
+import './src/css/ads.css';

src/components/features.js

@@ -1,11 +1,19 @@
 import { Link } from 'gatsby';
-import React from 'react';
-import Helmet from 'react-helmet';
+import React, { useEffect, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Icons from '@fortawesome/free-solid-svg-icons';
+import loadCarbonAds from '../hooks/carbonads';
+
+const Features = props => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    loadCarbonAds(() => {
+      setLoaded(true);
+    });
+  });
 
-function Features() {
   return (
     <Tabs
       className="mx-auto my-8"
@@ -602,17 +610,7 @@ function Features() {
           </div>
         </TabPanel>
 
-        <div id="carbonads-home" className="float-none mt-8 lg:float-right lg:block lg:-mt-40">
-          <Helmet>
-            <script
-              key="carbonads"
-              type="text/javascript"
-              src="//cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&amp;placement=staticallyio"
-              id="_carbonads_js"
-              async
-            />
-          </Helmet>
-        </div>
+        <div id="ads" className="float-none mt-8 lg:float-right lg:block lg:-mt-32"></div>
       </div>
     </Tabs>
   );

src/css/ads.css

@@ -1,34 +1,35 @@
-#carbonads {
+#ads {
   max-width: 300px;
 }
 
-#carbonads > span {
+#ads > div > span {
   position: relative;
   display: block;
   padding: 10px;
   border-radius: 4px;
   background-color: #fff;
+  border: 4px solid #eee;
   box-shadow: 0 1px 3px hsla(0, 0%, 0%, .05);
 }
 
-#carbonads .carbon-wrap {
+#ads .carbon-wrap {
   display: flex;
 }
 
-#carbonads .carbon-img {
+#ads .carbon-img {
   margin-right: 10px;
   line-height: 1;
 }
 
-#carbonads .carbon-text {
+#ads .carbon-text {
   margin-bottom: 12px;
   color: #637381;
   text-decoration: none;
   font-size: 12px;
   line-height: 1.45;
 }
 
-#carbonads .carbon-poweredby {
+#ads .carbon-poweredby {
   position: absolute;
   bottom: 10px;
   left: 152px;

src/css/style.css

@@ -66,4 +66,3 @@
  */
 @import './custom.css';
 @import './buttons.css';
-@import './ads.css';

src/hooks/carbonads.js

@@ -0,0 +1,19 @@
+const loadCarbonAds = (callback) => {
+  const existingScript = document.getElementById('_carbonads_js');
+
+  if (!existingScript) {
+    const script = document.createElement('script');
+    script.src = 'https://cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&placement=staticallyio';
+    script.id = '_carbonads_js';
+    script.async = 'true';
+
+    document.getElementById('ads').appendChild(script);
+    script.onload = () => { 
+      if (callback) callback();
+    };
+  }
+
+  if (existingScript && callback) callback();
+};
+
+export default loadCarbonAds;

src/pages/docs.js

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import Helmet from 'react-helmet';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'gatsby';
 
 import Layout from '../components/layout';
@@ -9,8 +8,17 @@ import DocsNav from '../components/docs-nav';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Regular from "@fortawesome/free-regular-svg-icons";
 
+import loadCarbonAds from '../hooks/carbonads';
+
 function DocsPage() {
   const [isExpanded, toggleExpansion] = useState(false);
+  const [ loaded, setLoaded ] = useState(false);
+
+  useEffect(() => {
+    loadCarbonAds(() => {
+      setLoaded(true);
+    });
+  });
 
   return (
     <Layout>
@@ -87,7 +95,7 @@ function DocsPage() {
         </div>
 
         <aside className="lg:w-1/4 xl:2/5 mt-5 p-5">
-          <div className="mb-10">
+          <div className="mb-5">
             <a
               className="text-lg umami--click--link-docs-chat"
               href="https://twitter.com/staticallyio"
@@ -109,15 +117,7 @@ function DocsPage() {
             </a>
           </div>
 
-          <Helmet>
-            <script
-              key="carbonads"
-              type="text/javascript"
-              src="//cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&amp;placement=staticallyio"
-              id="_carbonads_js"
-              async
-            />
-          </Helmet>
+          <div id="ads"></div>
         </aside>
       </section>
     </Layout>

src/pages/features.js

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import Helmet from 'react-helmet';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'gatsby';
 
 import Layout from '../components/layout';
@@ -9,8 +8,17 @@ import DocsNav from '../components/docs-nav';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Regular from "@fortawesome/free-regular-svg-icons";
 
+import loadCarbonAds from '../hooks/carbonads';
+
 function FeaturesPage() {
   const [isExpanded, toggleExpansion] = useState(false);
+  const [ loaded, setLoaded ] = useState(false);
+
+  useEffect(() => {
+    loadCarbonAds(() => {
+      setLoaded(true);
+    });
+  });
 
   return (
     <Layout>
@@ -89,7 +97,7 @@ function FeaturesPage() {
         </div>
 
         <aside className="lg:w-1/4 xl:2/5 mt-5 p-5">
-          <div className="mb-10">
+          <div className="mb-5">
             <a
               className="text-lg umami--click--link-docs-chat"
               href="https://twitter.com/staticallyio"
@@ -111,15 +119,7 @@ function FeaturesPage() {
             </a>
           </div>
 
-          <Helmet>
-            <script
-              key="carbonads"
-              type="text/javascript"
-              src="//cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&amp;placement=staticallyio"
-              id="_carbonads_js"
-              async
-            />
-          </Helmet>
+          <div id="ads"></div>
         </aside>
       </section>
     </Layout>

src/pages/wordpress.js

@@ -1,6 +1,5 @@
 import { Link } from 'gatsby';
-import React from 'react';
-import Helmet from 'react-helmet';
+import React, { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Regular from '@fortawesome/free-regular-svg-icons';
 import * as Brands from '@fortawesome/free-brands-svg-icons';
@@ -9,7 +8,17 @@ import Layout from '../components/layout';
 import SEO from '../components/seo';
 import staticallyMark from '../../static/images/branding/statically-mark.svg';
 
-function WordpressPage() {
+import loadCarbonAds from '../hooks/carbonads';
+
+const WordpressPage = props => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    loadCarbonAds(() => {
+      setLoaded(true);
+    });
+  });
+
   return (
     <Layout>
       <SEO
@@ -42,15 +51,7 @@ function WordpressPage() {
                   capabilities to images, cache and deliver quickly.
                 </p>
 
-                <Helmet>
-                  <script
-                    key="carbonads"
-                    type="text/javascript"
-                    src="//cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&amp;placement=staticallyio"
-                    id="_carbonads_js"
-                    async
-                  />
-                </Helmet>
+                <div id="ads"></div>
               </div>
 
               <div className="w-full sm:w-1/4 md:w-1/4 lg:w-1/4 m-auto">

src/templates/docs.js

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import Helmet from 'react-helmet';
+import React, { useEffect, useState } from 'react';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
@@ -9,10 +8,19 @@ import DocsNav from '../components/docs-nav';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Regular from "@fortawesome/free-regular-svg-icons";
 
+import loadCarbonAds from '../hooks/carbonads';
+
 function DocsPost({ data }) {
   const { markdownRemark } = data; // data.markdownRemark holds our post data
   const { frontmatter, html } = markdownRemark;
-  const [isExpanded, toggleExpansion] = useState(false);
+  const [ isExpanded, toggleExpansion ] = useState(false);
+  const [ loaded, setLoaded ] = useState(false);
+
+  useEffect(() => {
+    loadCarbonAds(() => {
+      setLoaded(true);
+    });
+  });
 
   return (
     <Layout>
@@ -54,8 +62,8 @@ function DocsPost({ data }) {
           </div>
         </div>
 
-        <aside className="lg:w-1/4 xl:2/5 mt-5 p-5">
-          <div className="mb-10">
+        <aside className="lg:w-1/4 xl:2/5 mt-10 p-5">
+          <div className="mb-5">
             <a
               className="text-lg umami--click--link-docs-chat"
               href="https://twitter.com/staticallyio"
@@ -77,15 +85,7 @@ function DocsPost({ data }) {
             </a>
           </div>
 
-          <Helmet>
-            <script
-              key="carbonads"
-              type="text/javascript"
-              src="//cdn.carbonads.com/carbon.js?serve=CEBIV5Q7&amp;placement=staticallyio"
-              id="_carbonads_js"
-              async
-            />
-          </Helmet>
+          <div id="ads"></div>
         </aside>
       </section>
     </Layout>