feat: adds cover images

components/layouts/mdx/articles.tsx

@@ -59,6 +59,28 @@ const ArticlesMdxLayout = ({ frontMatter, children }) => {
     );
   };
 
+  const coverImageNode = () => {
+    if (!frontMatter.coverImage) {
+      return (
+        <Box
+          bgImage={`url(/images/common/cover.jpg)`}
+          bgSize="cover"
+          bgPos="center"
+          h={64}
+        />
+      );
+    }
+
+    return (
+      <Box
+        bgImage={`url(${frontMatter.coverImage})`}
+        bgSize="cover"
+        bgPos="center"
+        h={64}
+      />
+    );
+  };
+
   return (
     <>
       <NextSeo
@@ -69,14 +91,16 @@ const ArticlesMdxLayout = ({ frontMatter, children }) => {
             ".mdx",
             "/"
           )}`,
-          title: siteConfig.details.title,
+          title: frontMatter.title,
           description: frontMatter.description,
           images: [
             {
-              url: `${siteConfig.details.url}${siteConfig.assets.avatar}`,
+              url: frontMatter.coverImage
+                ? frontMatter.coverImage
+                : "/images/common/cover.jpg",
               width: 800,
               height: 600,
-              alt: siteConfig.details.title,
+              alt: frontMatter.title,
             },
           ],
           site_name: siteConfig.details.title,
@@ -87,6 +111,7 @@ const ArticlesMdxLayout = ({ frontMatter, children }) => {
       <SocialLinks />
       <Navbar />
       <Box bg={sectionBgColor[colorMode]} color={sectionColor[colorMode]}>
+        {coverImageNode()}
         <Box maxW="3xl" mx="auto" px={4} py={8}>
           <Grid templateColumns="1fr">
             <Box maxW="100%" overflowX="hidden">

pages/articles/2020-01-01-how-to-automate-the-backend-stuffs-with-open-source-headless-cms-strapi-and-docker.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-01-01"
 title: "How to Automate the Backend stuffs with Open Source Headless CMS Strapi and Docker"
 category: "docker"
-tags: ["strapi", "headless", "cms"]
+tags: ["strapi", "cms"]
 description: "Learn how to get started with Strapi which is an Open Source Headless CMS using Docker."
 ---
 

pages/articles/2020-01-15-integrating-tailwind-css-with-next-js.mdx

@@ -2,8 +2,8 @@
 layout: 'articles'
 date: "2020-01-15"
 title: "Integrating TailwindCSS with Next.js"
-category: "css"
-tags: ["react", "nextjs", "tailwind"]
+category: "javascript"
+tags: ["react.js", "next.js", "tailwind"]
 description: "Learn how to use TailwindCSS with Next.js to build maintainable front-end applications."
 ---
 

pages/articles/2020-01-22-understanding-component-oriented-styling-using-styletron.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-01-22"
 title: "Understanding Component-Oriented Styling using Styletron"
 category: "css"
-tags: ["react"]
+tags: ["react.js"]
 description: "Learn how to style your React components using Styletron."
 ---
 

pages/articles/2020-01-29-using-mirage-js-to-jumpstart-your-frontend-development.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-01-29"
 title: "Using Mirage.js to jumpstart your frontend development"
 category: "javascript"
-tags: ["api", "javascript"]
+tags: ["api"]
 description: "Learn how to build front-end applications without any back-end APIs using Mirage."
 ---
 

pages/articles/2020-03-30-how-to-authenticate-your-next-js-application-using-open-source-headless-cms-strapi.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-03-30"
 title: "How to Authenticate your Next.js application using Open Source Headless CMS Strapi"
 category: "javascript"
-tags: ["react", "javascript"]
+tags: ["react.js"]
 description: "Learn how to authenticate a front-end application using Next.js and Strapi."
 ---
 

pages/articles/2020-06-17-create-an-accessible-pagination-component-with-react.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-06-17"
 title: "How to Design and Create a Flexible and Theme-able Pagination Component with React and Theme UI"
 category: "javascript"
-tags: ["react", "javascript"]
+tags: ["react.js"]
 description: "This tutorial will explain all the things that is necessary to know how to build a custom pagination component with a good User Experience using React."
 ---
 

pages/articles/2020-06-20-create-a-npm-package-from-a-react-component.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-06-20"
 title: "Create a Package from a React Component and Publish it to NPM"
 category: "javascript"
-tags: ["react", "javascript"]
+tags: ["react.js"]
 description: "This tutorial will explain how you can create a package from a React component and publish it to NPM."
 ---
 

pages/articles/2020-07-12-getting-started-with-nextjs-and-graphcms.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-07-12"
 title: "Getting started with Next.js and GraphCMS"
 category: "javascript"
-tags: ["react", "javascript", "cms"]
+tags: ["react.js", "next.js", "cms"]
 description: "Learn how to get started with GraphCMS with Next.js."
 ---
 

pages/articles/2020-08-20-how-to-use-next.js-with-strapi-and-apollo.mdx

@@ -3,7 +3,7 @@ layout: 'articles'
 date: "2020-08-20"
 title: "How to use Next.js with Strapi and Apollo"
 category: "javascript"
-tags: ["react", "javascript", "cms"]
+tags: ["react.js", "next.js", "cms"]
 description: "Learn how to use Next.js with Strapi and Apollo."
 ---
 

pages/articles/2020-10-06-authentication-in-next-js-with-strapi-and-next-auth.mdx

@@ -1,9 +1,9 @@
 ---
 layout: 'articles'
 date: "2020-10-06"
-title: "How to do authentication in Next.js using Strapi using NextAuth"
+title: "How to do authentication in Next.js using Strapi and NextAuth"
 category: "javascript"
-tags: ["react", "javascript", "cms"]
+tags: ["react.js", "next.js", "cms"]
 description: "Learn how to build an authentication system in a Next.js application with Strapi and NextAuth."
 ---