Adjustments to static pages (e.g. github -> gitlab)

README.md

@@ -21,13 +21,16 @@
 ## Prerequisites
 
 ### Node.js and npm
+
 To run this project you will need a package manager such as `npm`.
 To install it, follow the guide at [npmjs.com](https://www.npmjs.com/get-npm).
 
 ### Library
-To be able to use the widget API you will need to download the `@tecnojest/widget-base` package or build the `lib` yourself. 
+
+To be able to use the widget API you will need to download the `@tecnojest/widget-base` package or build the `lib` yourself.
 
 #### Installing from the npm registry
+
 If you are a registered partner, you will be able to download the package from the official registry. You will need to configure your local npm engine to point to Tecnojest's registry, by doing the following:
 
     # authenticate in the private npm registry
@@ -42,17 +45,19 @@ if during the first `npm login` step you receive a `UNABLE_TO_VERIFY_LEAF_SIGNAT
 and try again.
 
 #### Building the lib yourself
-Everyone is able to build the `lib` themselves. To do so, follow these steps:  
+
+Everyone is able to build the `lib` themselves. To do so, follow these steps:
+
 1. Clone the repository
 2. `cd` into the repository
 3. `npm install` to install the dependencies
 4. To build, run:  
-    4.1 OSX / Linux: `npm run build`  
-    4.2 Windows: `npm run build-windows`
+   4.1 OSX / Linux: `npm run build`  
+   4.2 Windows: `npm run build-windows`
 
 To link the `lib` in your widget template:  
-  a) Modify the import in the widget template of your choice to point to the built lib instead of `@tecnojest/widget-base`  
-  b) Run `npm link` in the `lib` folder and `npm link @tecnojest/widget-base` in the widget template folder
+ a) Modify the import in the widget template of your choice to point to the built lib instead of `@tecnojest/widget-base`  
+ b) Run `npm link` in the `lib` folder and `npm link @tecnojest/widget-base` in the widget template folder
 
 <a id="get-started"></a>
 
@@ -62,17 +67,19 @@ This repository contains the documentation, lib and templates for creating widge
 Additional templates or implementations of widgets can be created by following the [lib's README](./lib/README.md#index-file)
 
 <a id="folder-structure"></a>
+
 ## Folder structure
 
 In the repository you can find the following folders:
-* [doc](./doc)  
-Contains a thorough description and outlines the purpose of the whole project in markdown.
-See [the first article on the concept](https://blog.energenious.eu/?p=74).
 
-* [lib](./lib)  
-  The core of this project. Contains the skeleton for rendering widgets written in different techologies. 
+- [doc](./doc)  
+  Contains a thorough description and outlines the purpose of the whole project in markdown.
+  See [the first article on the concept](https://blog.energenious.eu/?p=74).
+
+- [lib](./lib)  
+  The core of this project. Contains the skeleton for rendering widgets written in different techologies.
 
-* [templates](./templates)  
+- [templates](./templates)  
   Basic, working implementations of widgets written in various technologies, ready to be developed further. It is recommended to start off with these templates.  
   To use a template, please refer to its corresponding README.
 
@@ -82,6 +89,10 @@ See [the first article on the concept](https://blog.energenious.eu/?p=74).
 
 To contribute to particular parts of the repository, please refer to the corresponding READMEs.
 
+### CI/CD configuration
+
+Please run the CI/CD locally using GitLab Runner. The guide on how to use it can be found here: [GitLab Runner Installation and Usage](https://medium.com/@umutuluer/how-to-test-gitlab-ci-locally-f9e6cef4f054)
+
 <a id="troubleshoot"></a>
 
 ## Troubleshoot

pages/config.js

@@ -44,7 +44,8 @@ const config = {
     title: "Energenious | Widgets",
     description: "Widgets project documentation.",
     ogImage: null,
-    docsLocation: "https://gitlab.com/energenious/widgets/pages/content",
+    docsLocation:
+      "https://gitlab.com/energenious/widgets/-/tree/master/pages/content",
     favicon: "https://energenious.eu/lay/favicon-32x32.png"
   },
   pwa: {

pages/content/index.mdx

 ---
-title: "Landing Page"
+metaTitle: "Landing Page"
 ---
 
 Some introduction text. Lists out all the headings from h1 to h6. Easy to customise. Some more text. Additional text.
 
 # Heading H1
+
 Heading 1 text
 
 ## Heading H2
+
 Heading 2 text
 
 ### Heading H3
+
 Heading 3 text
 
 #### Heading H4
+
 Heading 4 text
 
 ##### Heading H5
+
 Heading 5 text
 
 ###### Heading H6
+
 Heading 6 text
 
 ## Lists
+
 - Item 1
 - Item 2
 - Item 3

pages/src/GitLabLink.js

+import React from "react";
+const gitlabIcon = require("./components/images/gitlab.svg");
+
+const GitLabLink = ({ link, text }) => {
+  return (
+    <a href={link} className="githubSection">
+      <img className="githubIcon" src={gitlabIcon} alt="gitlab" />
+      {text}
+    </a>
+  );
+};
+
+export default GitLabLink;

pages/src/GithubLink.js

-import React from 'react';
-const githubIcon = require('./components/images/github.svg');
-
-const GithubLink = ({ link, text }) => {
-  return (
-    <a href={link} className="githubSection">
-      <img className="githubIcon" src={githubIcon} alt="github" />
-      {text}
-    </a>
-  );
-};
-
-export default GithubLink;

pages/src/components/Header.js

-import React from 'react';
-import styled from '@emotion/styled';
-import { StaticQuery, graphql } from 'gatsby';
-import GitHubButton from 'react-github-btn';
-import Link from './link';
-import Loadable from 'react-loadable';
+import React from "react";
+import styled from "@emotion/styled";
+import { StaticQuery, graphql } from "gatsby";
+import GitHubButton from "react-github-btn";
+import Link from "./link";
+import Loadable from "react-loadable";
 
-import config from '../../config.js';
-import LoadingProvider from './mdxComponents/loading';
-import { DarkModeSwitch } from './DarkModeSwitch';
+import config from "../../config.js";
+import LoadingProvider from "./mdxComponents/loading";
+import { DarkModeSwitch } from "./DarkModeSwitch";
 
-const help = require('./images/help.svg');
+const help = require("./images/help.svg");
 
-const isSearchEnabled = config.header.search && config.header.search.enabled ? true : false;
+const isSearchEnabled =
+  config.header.search && config.header.search.enabled ? true : false;
 
 let searchIndices = [];
 
@@ -19,34 +20,34 @@ if (isSearchEnabled && config.header.search.indexName) {
   searchIndices.push({
     name: `${config.header.search.indexName}`,
     title: `Results`,
-    hitComp: `PageHit`,
+    hitComp: `PageHit`
   });
 }
 
-import Sidebar from './sidebar';
+import Sidebar from "./sidebar";
 
 const LoadableComponent = Loadable({
-  loader: () => import('./search/index'),
-  loading: LoadingProvider,
+  loader: () => import("./search/index"),
+  loading: LoadingProvider
 });
 
 function myFunction() {
-  var x = document.getElementById('navbar');
+  var x = document.getElementById("navbar");
 
-  if (x.className === 'topnav') {
-    x.className += ' responsive';
+  if (x.className === "topnav") {
+    x.className += " responsive";
   } else {
-    x.className = 'topnav';
+    x.className = "topnav";
   }
 }
 
-const StyledBgDiv = styled('div')`
+const StyledBgDiv = styled("div")`
   height: 60px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
   background-color: #f8f8f8;
   position: relative;
   display: none;
-  background: ${props => (props.isDarkThemeActive ? '#001932' : undefined)};
+  background: ${props => (props.isDarkThemeActive ? "#001932" : undefined)};
 
   @media (max-width: 767px) {
     display: block;
@@ -76,35 +77,42 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
       }
     `}
     render={data => {
-      const logoImg = require('./images/logo.svg');
+      const logoImg = require("./images/logo.svg");
 
-      const twitter = require('./images/twitter.svg');
+      const twitter = require("./images/twitter.svg");
 
-      const discordBrandsBlock = require('./images/discord-brands-block.svg');
+      const discordBrandsBlock = require("./images/discord-brands-block.svg");
 
-      const twitterBrandsBlock = require('./images/twitter-brands-block.svg');
+      const twitterBrandsBlock = require("./images/twitter-brands-block.svg");
 
       const {
         site: {
-          siteMetadata: { headerTitle, githubUrl, helpUrl, tweetText, logo, headerLinks },
-        },
+          siteMetadata: {
+            headerTitle,
+            githubUrl,
+            helpUrl,
+            tweetText,
+            logo,
+            headerLinks
+          }
+        }
       } = data;
 
-      const finalLogoLink = logo.link !== '' ? logo.link : 'https://hasura.io/';
+      const finalLogoLink = logo.link !== "" ? logo.link : "https://hasura.io/";
 
       return (
-        <div className={'navBarWrapper'}>
-          <nav className={'navBarDefault'}>
-            <div className={'navBarHeader'}>
-              <Link to={finalLogoLink} className={'navBarBrand'}>
+        <div className={"navBarWrapper"}>
+          <nav className={"navBarDefault"}>
+            <div className={"navBarHeader"}>
+              <Link to={finalLogoLink} className={"navBarBrand"}>
                 <img
-                  className={'img-responsive displayInline'}
-                  src={logo.image !== '' ? logo.image : logoImg}
-                  alt={'logo'}
+                  className={"img-responsive displayInline"}
+                  src={logo.image !== "" ? logo.image : logoImg}
+                  alt={"logo"}
                 />
               </Link>
               <div
-                className={'headerTitle displayInline'}
+                className={"headerTitle displayInline"}
                 dangerouslySetInnerHTML={{ __html: headerTitle }}
               />
             </div>
@@ -115,18 +123,18 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
               ></ul>
             ) : null}
             {isSearchEnabled ? (
-              <div className={'searchWrapper hiddenMobile navBarUL'}>
+              <div className={"searchWrapper hiddenMobile navBarUL"}>
                 <LoadableComponent collapse={true} indices={searchIndices} />
               </div>
             ) : null}
-            <div id="navbar" className={'topnav'}>
-              <div className={'visibleMobile'}>
+            <div id="navbar" className={"topnav"}>
+              <div className={"visibleMobile"}>
                 <Sidebar location={location} />
                 <hr />
               </div>
-              <ul className={'navBarUL navBarNav navBarULRight'}>
+              <ul className={"navBarUL navBarNav navBarULRight"}>
                 {headerLinks.map((link, key) => {
-                  if (link.link !== '' && link.text !== '') {
+                  if (link.link !== "" && link.text !== "") {
                     return (
                       <li key={key}>
                         <a
@@ -140,47 +148,42 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
                     );
                   }
                 })}
-                {helpUrl !== '' ? (
+                {helpUrl !== "" ? (
                   <li>
                     <a href={helpUrl}>
-                      <img src={help} alt={'Help icon'} />
+                      <img src={help} alt={"Help icon"} />
                     </a>
                   </li>
                 ) : null}
 
-                {tweetText !== '' ? (
+                {tweetText !== "" ? (
                   <li>
                     <a
-                      href={'https://twitter.com/intent/tweet?&text=' + tweetText}
+                      href={
+                        "https://twitter.com/intent/tweet?&text=" + tweetText
+                      }
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <img className={'shareIcon'} src={twitter} alt={'Twitter'} />
+                      <img
+                        className={"shareIcon"}
+                        src={twitter}
+                        alt={"Twitter"}
+                      />
                     </a>
                   </li>
                 ) : null}
-                {tweetText !== '' || githubUrl !== '' ? (
+                {tweetText !== "" || githubUrl !== "" ? (
                   <li className="divider hiddenMobile"></li>
                 ) : null}
                 {config.header.social ? (
-                  <li className={'hiddenMobile'}>
+                  <li className={"hiddenMobile"}>
                     <ul
                       className="socialWrapper"
                       dangerouslySetInnerHTML={{ __html: config.header.social }}
                     ></ul>
                   </li>
                 ) : null}
-                {githubUrl !== '' ? (
-                  <li className={'githubBtn'}>
-                    <GitHubButton
-                      href={githubUrl}
-                      data-show-count="true"
-                      aria-label="Star on GitHub"
-                    >
-                      Star
-                    </GitHubButton>
-                  </li>
-                ) : null}
                 <li>
                   <DarkModeSwitch
                     isDarkThemeActive={isDarkThemeActive}
@@ -191,21 +194,21 @@ const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
             </div>
           </nav>
           <StyledBgDiv isDarkThemeActive={isDarkThemeActive}>
-            <div className={'navBarDefault removePadd'}>
+            <div className={"navBarDefault removePadd"}>
               <span
                 onClick={myFunction}
-                className={'navBarToggle'}
+                className={"navBarToggle"}
                 onKeyDown={myFunction}
                 role="button"
                 tabIndex={0}
               >
-                <span className={'iconBar'}></span>
-                <span className={'iconBar'}></span>
-                <span className={'iconBar'}></span>
+                <span className={"iconBar"}></span>
+                <span className={"iconBar"}></span>
+                <span className={"iconBar"}></span>
               </span>
             </div>
             {isSearchEnabled ? (
-              <div className={'searchWrapper'}>
+              <div className={"searchWrapper"}>
                 <LoadableComponent collapse={true} indices={searchIndices} />
               </div>
             ) : null}

pages/src/components/images/github.svg

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
-<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
-	c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
-	c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
-	c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
-	c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
-	c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
-	C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
-</svg>

pages/src/components/images/gitlab.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 586 559" style="enable-background:new 0 0 586 559;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FAFAFA;}
+	.st1{fill:#F0F0F0;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#E24329;}
+	.st4{fill:#FCA326;}
+	.st5{fill:#FC6D26;}
+	.st6{fill:#8C929D;}
+	.st7{fill:#2E2E2E;}
+	.st8{fill:none;stroke:#FCA326;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#FC6D26;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#E24329;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#F0F0F0;stroke-miterlimit:10;}
+	.st12{fill:#231F20;}
+	.st13{fill:none;stroke:#231F20;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st14{display:none;}
+	.st15{display:inline;opacity:0.1;fill:#E828E3;}
+	.st16{display:inline;}
+	.st17{opacity:0.1;fill:#E828E3;}
+	.st18{font-family:'SourceSansPro-Semibold';}
+	.st19{font-size:24px;}
+	.st20{display:inline;fill:#DB3B21;}
+	.st21{display:inline;fill:#FC6D26;}
+	.st22{display:inline;fill:#2E2E2E;}
+	.st23{display:inline;fill:#6E49CB;}
+	.st24{display:inline;fill:#380D75;}
+	.st25{display:inline;fill:#FCA121;}
+	.st26{opacity:0.6;fill:none;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:12,6;}
+	.st27{fill:none;stroke:#444444;stroke-width:1.5339;stroke-miterlimit:10;}
+</style>
+<g id="logo_art">
+	<g>
+		<path id="path50_2_" class="st3" d="M293.026,434.983L293.026,434.983l62.199-191.322H230.918L293.026,434.983L293.026,434.983z"/>
+		<path id="path66_6_" class="st4" d="M143.798,243.662L143.798,243.662l-18.941,58.126c-1.714,5.278,0.137,11.104,4.661,14.394    l163.509,118.801L143.798,243.662L143.798,243.662z"/>
+		<path id="path74_2_" class="st3" d="M143.798,243.662h87.12l-37.494-115.224c-1.919-5.895-10.282-5.895-12.27,0L143.798,243.662    L143.798,243.662z"/>
+		<path id="path82_6_" class="st4" d="M442.346,243.662L442.346,243.662l18.873,58.126c1.714,5.278-0.137,11.104-4.661,14.394    L293.026,434.983L442.346,243.662L442.346,243.662z"/>
+		<path id="path86_2_" class="st3" d="M442.346,243.662h-87.12l37.425-115.224c1.919-5.895,10.282-5.895,12.27,0L442.346,243.662    L442.346,243.662z"/>
+		<polygon class="st5" points="293.026,434.983 355.225,243.662 442.346,243.662   "/>
+		<polygon class="st5" points="293.026,434.983 143.798,243.662 230.918,243.662   "/>
+	</g>
+</g>
+<g xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" id="spacing_guides" class="st14">
+	<path id="path40_18_" sketch:type="MSShapeGroup" class="st15" d="M0,0.5v124h586V0.5H0L0,0.5z"/>
+	<path id="path40_16_" sketch:type="MSShapeGroup" class="st15" d="M0,435.5v124h586v-124H0L0,435.5z"/>
+	<path id="path40_15_" sketch:type="MSShapeGroup" class="st15" d="M462.2,560h124V0h-124V560L462.2,560z"/>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 511.2881 283.3319)" class="st18 st19">1x</text>
+	</g>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 281.2881 500.9978)" class="st18 st19">1x</text>
+	</g>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 281.2881 65.998)" class="st18 st19">1x</text>
+	</g>
+	<path id="path40_5_" sketch:type="MSShapeGroup" class="st15" d="M0,560h124V0H0V560L0,560z"/>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 51.2881 283.3319)" class="st18 st19">1x</text>
+	</g>
+</g>
+</svg>
\ No newline at end of file

pages/src/components/styles/GlobalStyles.js

-import { injectGlobal } from 'emotion';
+import { injectGlobal } from "emotion";
 
 export const baseStyles = injectGlobal`
   @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@@ -528,7 +528,7 @@ export const baseStyles = injectGlobal`
   }
 
   .gitBtn img {
-    width: 15px;
+    width: 30px;
     display: inline-block;
     margin-right: 5px;
   }

pages/src/templates/docs.js

-import React, { Component } from 'react';
-import Helmet from 'react-helmet';
-import { graphql } from 'gatsby';
-import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
-
-import { Layout, Link } from '$components';
-import NextPrevious from '../components/NextPrevious';
-import config from '../../config';
-import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs';
+import React, { Component } from "react";
+import Helmet from "react-helmet";
+import { graphql } from "gatsby";
+import MDXRenderer from "gatsby-plugin-mdx/mdx-renderer";
+
+import { Layout, Link } from "$components";
+import NextPrevious from "../components/NextPrevious";
+import config from "../../config";
+import {
+  Edit,
+  StyledHeading,
+  StyledMainWrapper
+} from "../components/styles/Docs";
 
 const forcedNavOrder = config.sidebar.forcedNavOrder;
 
@@ -21,15 +25,15 @@ export default class MDXRuntimeTest extends Component {
       allMdx,
       mdx,
       site: {
-        siteMetadata: { docsLocation, title },
-      },
+        siteMetadata: { docsLocation, title }
+      }
     } = data;
 
-    const gitHub = require('../components/images/github.svg');
+    const gitLab = require("../components/images/gitlab.svg");
 
     const navItems = allMdx.edges
       .map(({ node }) => node.fields.slug)
-      .filter(slug => slug !== '/')
+      .filter(slug => slug !== "/")
       .sort()
       .reduce(
         (acc, cur) => {
@@ -37,10 +41,10 @@ export default class MDXRuntimeTest extends Component {
             return { ...acc, [cur]: [cur] };
           }
 
-          let prefix = cur.split('/')[1];
+          let prefix = cur.split("/")[1];
 
           if (config.gatsby && config.gatsby.trailingSlash) {
-            prefix = prefix + '/';
+            prefix = prefix + "/";
           }
 
           if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
@@ -59,7 +63,9 @@ export default class MDXRuntimeTest extends Component {
       .concat(navItems.items)
       .map(slug => {
         if (slug) {
-          const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug);
+          const { node } = allMdx.edges.find(
+            ({ node }) => node.fields.slug === slug
+          );
 
           return { title: node.fields.title, url: node.fields.slug };
         }
@@ -73,7 +79,9 @@ export default class MDXRuntimeTest extends Component {
     let canonicalUrl = config.gatsby.siteUrl;
 
     canonicalUrl =
-      config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
+      config.gatsby.pathPrefix !== "/"
+        ? canonicalUrl + config.gatsby.pathPrefix
+        : canonicalUrl;
     canonicalUrl = canonicalUrl + mdx.fields.slug;
 
     return (
@@ -81,21 +89,30 @@ export default class MDXRuntimeTest extends Component {
         <Helmet>
           {metaTitle ? <title>{metaTitle}</title> : null}
           {metaTitle ? <meta name="title" content={metaTitle} /> : null}
-          {metaDescription ? <meta name="description" content={metaDescription} /> : null}
+          {metaDescription ? (
+            <meta name="description" content={metaDescription} />
+          ) : null}
           {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
-          {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
-          {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
+          {metaDescription ? (
+            <meta property="og:description" content={metaDescription} />
+          ) : null}
+          {metaTitle ? (
+            <meta property="twitter:title" content={metaTitle} />
+          ) : null}
           {metaDescription ? (
             <meta property="twitter:description" content={metaDescription} />
           ) : null}
           <link rel="canonical" href={canonicalUrl} />
         </Helmet>
-        <div className={