Merge pull request #132 from phuoc-ng/ad

Setup ads

client/components/Ad.tsx

@@ -0,0 +1,38 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import './ad.css';
+
+const Ad: React.FC<{}> = () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+
+        const script = document.createElement('script');
+        script.src = source;
+        script.async = true;
+        script.id = '_carbonads_js';
+        container.appendChild(script);
+
+        return () => {
+            container.removeChild(script);
+        };
+    }, []);
+
+    return (
+        <div className='flex justify-center mx-4 my-6'>
+            <div ref={containerRef} />
+        </div>
+    );
+};
+
+export default Ad;

client/components/ad.css

@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+#carbonads {
+    background-color: #edf2f7;
+    padding: 0.5rem;
+    position: relative;
+    max-width: 24rem;
+}
+.carbon-wrap {
+    display: flex;
+}
+
+.carbon-img {
+    margin-right: 0.5rem;
+}
+
+.carbon-poweredby {
+    bottom: 0;
+    font-size: 0.75rem;
+    padding-bottom: 0.5rem;
+    padding-right: 0.5rem;
+    position: absolute;
+    right: 0;
+}

client/layouts/DetailsLayout.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Ad from '../components/Ad';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from './Layout';
 
@@ -41,6 +42,7 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
             </div>
             <div className='xl:border xl:border-gray-400'>
                 {children}
+                <Ad />
             </div>
         </Layout>
     );

client/pages/ExplorePage.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
 import Heading from '../components/Heading';
 import Pattern from '../constants/Pattern';
@@ -51,6 +52,8 @@ const ExplorePage = () => {
                     <div className='mb-5' style={{ textAlign: 'center' }}>
                         All covers you see in this page are made with CSS only. Inspect them! 🎉
                     </div>
+
+                    <Ad />
                 </div>
 
                 <section>

client/pages/HomePage.tsx

@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 
 import './home.css';
 
+import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
@@ -85,6 +86,8 @@ const HomePage = () => {
                         </div>
                     </div>
 
+                    <Ad />
+
                     <div
                         className="hljs"
                         style={{