From 334ff355b03920ccb05a8c08301e588e3933138c Mon Sep 17 00:00:00 2001
From: Thi Van Le <vannnyle@gmail.com>
Date: Thu, 10 Feb 2022 13:27:32 +0200
Subject: [PATCH 1/5] fix: blog draft filter in gatsby-node

---
 .eslintrc.js                                  |  1 +
 gatsby-node.js                                | 21 ++++---
 .../blog-post/popular-posts/popular-posts.jsx | 59 -------------------
 .../blog/featured-posts/featured-posts.jsx    |  4 +-
 .../featured-posts/popular-posts/index.js     |  1 -
 .../popular-posts/index.js                    |  0
 .../popular-posts/popular-posts.jsx           |  6 +-
 src/templates/blog-post.jsx                   |  4 +-
 8 files changed, 23 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/pages/blog-post/popular-posts/popular-posts.jsx
 delete mode 100644 src/components/pages/blog/featured-posts/popular-posts/index.js
 rename src/components/{pages/blog-post => shared}/popular-posts/index.js (100%)
 rename src/components/{pages/blog/featured-posts => shared}/popular-posts/popular-posts.jsx (88%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 99550ac2d..ffd8d4ed0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
     'no-shadow': 'off',
     'react/no-array-index-key': 'off',
     'react/jsx-props-no-spreading': 'off',
+    'react/function-component-definition': 'off',
     'react/no-danger': 'off',
     'react/jsx-sort-props': [
       'error',
diff --git a/gatsby-node.js b/gatsby-node.js
index 295b0fec7..368fbe589 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -3,8 +3,9 @@ const Path = require('path');
 
 const { slugify } = require('./src/utils/slugify');
 
-const BLOG_POSTS_PER_PAGE = 9;
+const DRAFT_FILTER = process.env.NODE_ENV === 'production' ? [false] : [true, false];
 
+const BLOG_POSTS_PER_PAGE = 9;
 const slugifyCategory = (item) => (item === '*' ? 'blog/' : `blog/categories/${slugify(item)}/`);
 
 // Create Blog Posts
@@ -22,6 +23,9 @@ async function createBlogPosts({ graphql, actions }) {
           frontmatter {
             path
           }
+          fields {
+            draft
+          }
         }
       }
     }
@@ -29,7 +33,7 @@ async function createBlogPosts({ graphql, actions }) {
 
   blogPosts.forEach((file) => {
     // skip page creation if post has `draft` flag
-    if (process.env.NODE_ENV === 'production' && file.frontmatter.draft) {
+    if (process.env.NODE_ENV === 'production' && file.fields.draft) {
       return;
     }
 
@@ -88,11 +92,15 @@ async function createBlogPages({ graphql, actions, reporter }) {
     categories.map(async (category) =>
       graphql(
         `
-          query CategoryPostsQuery($tag: String!) {
+          query CategoryPostsQuery($tag: String!, $draftFilter: [Boolean]!) {
             allMdx(
               filter: {
                 fileAbsolutePath: { regex: "/posts/" }
-                fields: { isFeatured: { eq: false }, categories: { glob: $tag } }
+                fields: {
+                  isFeatured: { eq: false }
+                  categories: { glob: $tag }
+                  draft: { in: $draftFilter }
+                }
               }
               limit: 1000
             ) {
@@ -104,7 +112,7 @@ async function createBlogPages({ graphql, actions, reporter }) {
             }
           }
         `,
-        { tag: category }
+        { tag: category, draftFilter: DRAFT_FILTER }
       ).then((result) => {
         if (result.errors) throw result.errors;
         const posts = result.data.allMdx.edges;
@@ -124,8 +132,7 @@ async function createBlogPages({ graphql, actions, reporter }) {
               currentCategory: category,
               categories,
               // get all posts with draft: 'false' if NODE_ENV is production, otherwise render them all
-              draftFilter:
-                process.env.NODE_ENV === 'production' ? Array.of(false) : Array.of(true, false),
+              draftFilter: DRAFT_FILTER,
               canonicalUrl: `${process.env.GATSBY_DEFAULT_SITE_URL}/${path}`,
               slug: path,
             },
diff --git a/src/components/pages/blog-post/popular-posts/popular-posts.jsx b/src/components/pages/blog-post/popular-posts/popular-posts.jsx
deleted file mode 100644
index 8d49c351d..000000000
--- a/src/components/pages/blog-post/popular-posts/popular-posts.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { graphql, useStaticQuery } from 'gatsby';
-import React from 'react';
-
-import BlogPostCard from 'components/shared/blog-post-card';
-import Container from 'components/shared/container';
-import Heading from 'components/shared/heading';
-
-const title = 'Popular posts';
-
-const PopularPosts = () => {
-  const {
-    allPopularPosts: { posts },
-  } = useStaticQuery(graphql`
-    query PopularPosts {
-      allPopularPosts: allMdx(
-        filter: {
-          fileAbsolutePath: { regex: "/posts/" }
-          fields: { isPopular: { eq: true }, isFeatured: { eq: false } }
-        }
-        limit: 3
-        sort: { order: DESC, fields: fileAbsolutePath }
-      ) {
-        posts: nodes {
-          fields {
-            externalUrl
-            ogImageUrl
-          }
-          frontmatter {
-            path
-            date(locale: "en", formatString: "MMM DD, yyyy")
-            categories
-            title
-            ogSummary
-            ogImage {
-              childImageSharp {
-                gatsbyImageData(width: 550)
-              }
-            }
-          }
-          fileAbsolutePath
-        }
-      }
-    }
-  `);
-  return (
-    <section className="mt-10 md:mt-20 lg:mt-28">
-      <Container>
-        <Heading tag="h2">{title}</Heading>
-        <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
-          {posts.map(({ frontmatter, fields }, index) => (
-            <BlogPostCard {...frontmatter} {...fields} key={index} />
-          ))}
-        </div>
-      </Container>
-    </section>
-  );
-};
-
-export default PopularPosts;
diff --git a/src/components/pages/blog/featured-posts/featured-posts.jsx b/src/components/pages/blog/featured-posts/featured-posts.jsx
index f69f99cbd..f2e5b8f47 100644
--- a/src/components/pages/blog/featured-posts/featured-posts.jsx
+++ b/src/components/pages/blog/featured-posts/featured-posts.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Container from 'components/shared/container';
+import PopularPosts from 'components/shared/popular-posts';
 
 import FeaturedStory from './featured-story';
-import PopularPosts from './popular-posts';
 
 const FeaturedPosts = ({ featuredStory }) => (
   <section className="mt-6 md:mt-10 lg:mt-16">
@@ -14,7 +14,7 @@ const FeaturedPosts = ({ featuredStory }) => (
         {...featuredStory.frontmatter}
         {...featuredStory.fields}
       />
-      <PopularPosts className="flex flex-col col-span-full" />
+      <PopularPosts className="flex flex-col col-span-full" titleTheme="gray" />
     </Container>
   </section>
 );
diff --git a/src/components/pages/blog/featured-posts/popular-posts/index.js b/src/components/pages/blog/featured-posts/popular-posts/index.js
deleted file mode 100644
index 5f359253f..000000000
--- a/src/components/pages/blog/featured-posts/popular-posts/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './popular-posts';
diff --git a/src/components/pages/blog-post/popular-posts/index.js b/src/components/shared/popular-posts/index.js
similarity index 100%
rename from src/components/pages/blog-post/popular-posts/index.js
rename to src/components/shared/popular-posts/index.js
diff --git a/src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx b/src/components/shared/popular-posts/popular-posts.jsx
similarity index 88%
rename from src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx
rename to src/components/shared/popular-posts/popular-posts.jsx
index 2cc50f1c5..3858f08bd 100644
--- a/src/components/pages/blog/featured-posts/popular-posts/popular-posts.jsx
+++ b/src/components/shared/popular-posts/popular-posts.jsx
@@ -7,7 +7,7 @@ import Heading from 'components/shared/heading';
 
 const blockTitle = 'Popular posts';
 
-const PopularPosts = ({ className }) => {
+const PopularPosts = ({ className, titleTheme }) => {
   const {
     allPopularPosts: { posts },
   } = useStaticQuery(graphql`
@@ -44,7 +44,7 @@ const PopularPosts = ({ className }) => {
   `);
   return (
     <div className={className}>
-      <Heading tag="h2" theme="gray" size="xxs">
+      <Heading tag="h2" theme={titleTheme} size={titleTheme === 'gray' ? 'xxs' : 'md'}>
         {blockTitle}
       </Heading>
       <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
@@ -58,10 +58,12 @@ const PopularPosts = ({ className }) => {
 
 PopularPosts.propTypes = {
   className: PropTypes.string,
+  titleTheme: PropTypes.oneOf(['gray']),
 };
 
 PopularPosts.defaultProps = {
   className: null,
+  titleTheme: null,
 };
 
 export default PopularPosts;
diff --git a/src/templates/blog-post.jsx b/src/templates/blog-post.jsx
index 388b32f57..c570e8033 100644
--- a/src/templates/blog-post.jsx
+++ b/src/templates/blog-post.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import 'prismjs/themes/prism.css';
 
 import Content from 'components/pages/blog-post/content';
-import PopularPosts from 'components/pages/blog-post/popular-posts';
+import PopularPosts from 'components/shared/popular-posts';
 
 import MainLayout from '../layouts/main';
 
@@ -30,7 +30,7 @@ const BlogPostPage = (props) => {
   return (
     <MainLayout showBanner={shouldShowBanner} pageMetadata={seoMetadata}>
       <Content path={path} html={html} date={date} title={title} tags={tags} summary={ogSummary} />
-      <PopularPosts />
+      <PopularPosts className="mt-10 md:mt-20 lg:mt-28" />
     </MainLayout>
   );
 };

From 8b7a7a9150f0ea803176b126fadff2058a19a7f7 Mon Sep 17 00:00:00 2001
From: Thi Van Le <vannnyle@gmail.com>
Date: Thu, 10 Feb 2022 16:26:05 +0200
Subject: [PATCH 2/5] chore: swap plugin params in gatsby-config

---
 gatsby-config.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 7531f6e91..f6631c889 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -47,19 +47,6 @@ module.exports = {
               disableBgImageOnAlpha: true,
             },
           },
-          {
-            resolve: 'gatsby-remark-prismjs',
-            options: {
-              // Class prefix for <pre> tags containing syntax highlighting;
-              // defaults to 'language-' (eg <pre class="language-js">).
-              // If your site loads Prism into the browser at runtime,
-              // (eg for use with libraries like react-live),
-              // you may use this to prevent Prism from re-processing syntax.
-              // This is an uncommon use-case though;
-              // If you're unsure, it's best to use the default value.
-              classPrefix: 'language-',
-            },
-          },
           {
             resolve: 'gatsby-remark-video',
             options: {
@@ -73,6 +60,19 @@ module.exports = {
               loop: true,
             },
           },
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              // Class prefix for <pre> tags containing syntax highlighting;
+              // defaults to 'language-' (eg <pre class="language-js">).
+              // If your site loads Prism into the browser at runtime,
+              // (eg for use with libraries like react-live),
+              // you may use this to prevent Prism from re-processing syntax.
+              // This is an uncommon use-case though;
+              // If you're unsure, it's best to use the default value.
+              classPrefix: 'language-',
+            },
+          },
           'gatsby-remark-responsive-iframe',
         ],
       },

From dd892190f1817217e5c702f20bb7762f9fc89875 Mon Sep 17 00:00:00 2001
From: Thi Van Le <vannnyle@gmail.com>
Date: Thu, 10 Feb 2022 17:28:17 +0200
Subject: [PATCH 3/5] fix: wrap popular posts with container

---
 .../shared/popular-posts/popular-posts.jsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/shared/popular-posts/popular-posts.jsx b/src/components/shared/popular-posts/popular-posts.jsx
index 3858f08bd..0cd8d02f8 100644
--- a/src/components/shared/popular-posts/popular-posts.jsx
+++ b/src/components/shared/popular-posts/popular-posts.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import BlogPostCard from 'components/shared/blog-post-card';
+import Container from 'components/shared/container';
 import Heading from 'components/shared/heading';
 
 const blockTitle = 'Popular posts';
@@ -44,14 +45,16 @@ const PopularPosts = ({ className, titleTheme }) => {
   `);
   return (
     <div className={className}>
-      <Heading tag="h2" theme={titleTheme} size={titleTheme === 'gray' ? 'xxs' : 'md'}>
-        {blockTitle}
-      </Heading>
-      <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
-        {posts.map(({ frontmatter, fields }, index) => (
-          <BlogPostCard {...frontmatter} {...fields} key={index} />
-        ))}
-      </div>
+      <Container>
+        <Heading tag="h2" theme={titleTheme} size={titleTheme === 'gray' ? 'xxs' : 'md'}>
+          {blockTitle}
+        </Heading>
+        <div className="grid gap-6 mt-6 md:mt-8 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
+          {posts.map(({ frontmatter, fields }, index) => (
+            <BlogPostCard {...frontmatter} {...fields} key={index} />
+          ))}
+        </div>
+      </Container>
     </div>
   );
 };

From e257a20adb60bbed61661360d3973df2b4ac03a1 Mon Sep 17 00:00:00 2001
From: Thi Van Le <vannnyle@gmail.com>
Date: Thu, 10 Feb 2022 17:43:09 +0200
Subject: [PATCH 4/5] fix: replace tags undefined with Fragment

---
 src/components/pages/blog-post/content/content.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/blog-post/content/content.jsx b/src/components/pages/blog-post/content/content.jsx
index 3f237a28c..fdfacae29 100644
--- a/src/components/pages/blog-post/content/content.jsx
+++ b/src/components/pages/blog-post/content/content.jsx
@@ -1,7 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import BlogAuthor from 'components/shared/blog-author';
 import Container from 'components/shared/container';
@@ -9,8 +9,10 @@ import Heading from 'components/shared/heading';
 
 import SocialShare from './social-share';
 
+// eslint-disable-next-line react/prop-types
 const Wrapper = ({ children }) => <div className="prose md:prose-lg !max-w-none">{children}</div>;
-const components = { wrapper: Wrapper, BlogAuthor };
+// eslint-disable-next-line react/jsx-no-useless-fragment
+const components = { wrapper: Wrapper, BlogAuthor, undefined: (props) => <Fragment {...props} /> };
 const Content = ({ date, title, summary, html, path, tags }) => {
   const postUrl = `${process.env.GATSBY_DEFAULT_SITE_URL}${path}`;
   return (

From 985c17dacab87e134d80f41737a6eb161ededa8d Mon Sep 17 00:00:00 2001
From: Thi Van Le <vannnyle@gmail.com>
Date: Thu, 10 Feb 2022 17:50:46 +0200
Subject: [PATCH 5/5] fix: set prop not required

---
 src/components/pages/blog/posts-board/posts-board.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/blog/posts-board/posts-board.jsx b/src/components/pages/blog/posts-board/posts-board.jsx
index 0d65cb851..625e236cc 100644
--- a/src/components/pages/blog/posts-board/posts-board.jsx
+++ b/src/components/pages/blog/posts-board/posts-board.jsx
@@ -45,7 +45,7 @@ PostsBoard.propTypes = {
   posts: PropTypes.arrayOf(
     PropTypes.shape({
       frontmatter: PropTypes.shape({
-        path: PropTypes.string.isRequired,
+        path: PropTypes.string,
         ogImage: PropTypes.shape({
           childImageSharp: PropTypes.shape({
             gatsbyImageData: PropTypes.shape(),