Add gtag and fix icons height

components/guide-footer/style.js

@@ -26,7 +26,8 @@ export const ShareWrap = styled.div`
     color: #101010;
 
     svg {
-      height: 18px;
+      height: 18px !important;
+      width: 18px !important;
       color: #757575;
       margin-left: 7px;
       transition: all 0.2s ease;
@@ -108,9 +109,8 @@ export const AuthorBio = styled.p`
 
 export const AuthorImg = styled.img`
   border-radius: 100%;
-  height: 100px;
-  width: 100px;
-  border-radius: 100%;
+  height: 100px !important;
+  width: 100px !important;
   margin-right: 22px;
 `;
 

components/helmet/index.js

@@ -1,5 +1,6 @@
 import NextHead from 'next/head';
 import siteConfig from 'data/site';
+import { GA_TRACKING_ID } from 'lib/gtag';
 
 const prepareTitle = (givenTitle) => {
   givenTitle = givenTitle || siteConfig.title;
@@ -52,6 +53,17 @@ const Helmet = (props) => (
     <link rel="icon" type="image/png" sizes="16x16" href="/static/manifest/icon16.png" />
     <link rel="shortcut icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
     <link rel="icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
+
+    { /* Global Site Tag (gtag.js) - Google Analytics */ }
+    <script async src={ `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}` } />
+    <script dangerouslySetInnerHTML={{
+      __html: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${GA_TRACKING_ID}');
+      `,
+    }} />
   </NextHead>
 );
 

components/share-guide/index.js

@@ -12,20 +12,14 @@ const ShareGuide = ({
 }) => (
   <ShareWrap>
     <ShareIconsList className="d-sm-none d-md-none d-lg-flex d-xl-flex">
-      <ShareIcon>
-        <a href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
+      <ShareIcon href={ getTwitterShareUrl({ text: `${guide.title} by @${author.twitter}`, url: guide.url })} target="_blank">
           <FontAwesomeIcon icon={ faTwitterSquare } />
-        </a>
       </ShareIcon>
-      <ShareIcon>
-        <a href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
+      <ShareIcon href={ getFacebookShareUrl({ text: guide.title, url: guide.url }) } target="_blank">
         <FontAwesomeIcon icon={ faFacebookSquare } />
-        </a>
       </ShareIcon>
-      <ShareIcon>
-        <a href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
+      <ShareIcon href={ getRedditShareUrl({ text: guide.title, url: guide.url })} target="_blank">
         <FontAwesomeIcon icon={ faRedditSquare } />
-        </a>
       </ShareIcon>
     </ShareIconsList>
   </ShareWrap>

components/share-guide/style.js

@@ -15,18 +15,23 @@ export const ShareWrap = styled.div`
   flex-direction: column;
   position: absolute;
   padding: 0 0;
-  top: 2px;
+  top: 6px;
   left: -50px;
   height: 100%;
 `;
 
-export const ShareIcon = styled.span`
+export const ShareIcon = styled.a`
+  display: block;
+  width: 22px;
+  height: 22px;
   margin-bottom: 8px;
 
   svg {
-    height: 22px;
+    height: 22px !important;
+    width: 22px !important;
     color: #757575;
     transition: all 0.2s;
+    vertical-align: top;
   }
   
   &:hover svg {

data/guides.json

@@ -3,6 +3,7 @@
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
     "url": "/guides/design-patterns-for-humans",
+    "fileName": "design-patterns-for-humans",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "2019-01-23T17:00:00.860Z",
@@ -12,6 +13,7 @@
     "title": "Learn Regex",
     "description": "An easy to understand guide on regular expressions with real world examples",
     "url": "/guides/learn-regex",
+    "fileName": "learn-regex",
     "featured": true,
     "author": "ziishaned",
     "createdAt": "2019-01-23T17:00:00.860Z",
@@ -21,6 +23,7 @@
     "title": "Bash Guide",
     "description": "Easy to understand guide for bash with real world usage examples.",
     "url": "/guides/bash-guide",
+    "fileName": "bash-guide",
     "featured": true,
     "author": "idnan",
     "createdAt": "2019-01-23T17:00:00.860Z",
@@ -30,6 +33,7 @@
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
     "url": "/guides/dns-in-one-picture",
+    "fileName": "dns-in-one-picture",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "2019-11-01T12:00:00.860Z",
@@ -39,6 +43,7 @@
     "title": "Using React Hooks",
     "description": "Start using React hooks in your react applications today with this guide.",
     "url": "/guides/using-react-hooks",
+    "fileName": "using-react-hooks",
     "featured": true,
     "author": "kamranahmedse",
     "createdAt": "2019-01-23T17:00:00.860Z",
@@ -48,6 +53,7 @@
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
     "url": "/guides/http-caching",
+    "fileName": "http-caching",
     "featured": true,
     "author": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",

layouts/default/index.js

@@ -1,11 +1,21 @@
+import React from 'react';
 import Helmet from 'components/helmet';
 import './global.scss';
+import { firePageView } from '../../lib/gtag';
 
-const DefaultLayout = (props) => (
+class DefaultLayout extends React.Component {
+  componentDidMount() {
+    firePageView(window.location.pathname);
+  }
+
+  render() {
+    return (
       <div>
         <Helmet />
-    { props.children }
+        { this.props.children }
       </div>
     );
+  }
+}
 
 export default DefaultLayout;

lib/gtag.js

@@ -0,0 +1,17 @@
+export const GA_TRACKING_ID = 'UA-139582634-1';
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const firePageView = url => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  })
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+};

lib/guide.js

@@ -2,23 +2,16 @@ import guides from "data/guides";
 import authors from "data/authors";
 import siteConfig from "data/site";
 
-
 export const getRequestedGuide = req => {
   const guide = guides.find(guide => guide.url === req.url);
   if (!guide) {
     return null;
   }
 
-  // We will use this URL format to find the relevant markdown
-  // file inside the `/data` directory. For example `/guides/learn-regex`
-  // has to have `/guides/learn-regex.md` file inside the `data` directory
-  const path = guide.url.replace(/^\//, '');
-
   try {
     return {
       ...guide,
       author: authors.find(author => author.username === guide.author) || {},
-      component: require(`../data/${path}.md`).default,
     };
   } catch (e) {
     console.log(e);

next.config.js

@@ -36,7 +36,7 @@ const options = {
 
   config.resolve.modules.push(path.resolve('./'));
 
-    // Allow loading images
+    // Allow loading images and fonts
     config.module.rules.push({
       test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
       use: {

pages/guides/[guide].js

@@ -5,20 +5,22 @@ import GuideHeader from 'components/guide-header';
 import GuideBody from 'components/guide-body';
 import ShareGuide from 'components/share-guide';
 import GuideFooter from 'components/guide-footer';
-import { getRequestedGuide } from "lib/guide";
-import Helmet from '../../components/helmet';
+import { getRequestedGuide } from 'lib/guide';
+import Helmet from 'components/helmet';
 
 const Guide = ({ guide }) => {
   if (!guide) {
     return <Error statusCode={ 404 } />
   }
 
+  const GuideContent = require(`../../data/guides/${guide.fileName}.md`).default;
+
   return (
     <GuideLayout>
       <Helmet title={ guide.title } description={ guide.description } />
       <GuideHeader guide={ guide } />
       <GuideBody>
-        <guide.component />
+        <GuideContent />
         <ShareGuide guide={ guide } />
       </GuideBody>
       <GuideFooter guide={ guide } />
@@ -26,9 +28,9 @@ const Guide = ({ guide }) => {
   );
 };
 
-Guide.getInitialProps = serverOnlyProps(({ req }) => {
+Guide.getInitialProps = serverOnlyProps(async ({ req }) => {
   return {
-    guide: getRequestedGuide(req),
+    guide: await getRequestedGuide(req),
   };
 });