Merge pull request cilium#5 from cilium/blog-fixes

fix: blog draft filter in gatsby-node

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',
         ],
       },

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,14 +23,17 @@ async function createBlogPosts({ graphql, actions }) {
           frontmatter {
             path
           }
+          fields {
+            draft
+          }
         }
       }
     }
   `);
 
   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,
             },

src/components/pages/blog-post/content/content.jsx

@@ -1,16 +1,18 @@
 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';
 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 (

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>
 );

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(),

src/components/pages/blog-post/popular-posts/popular-posts.jsx → src/components/shared/popular-posts/popular-posts.jsx

@@ -1,17 +1,18 @@
 import { graphql, useStaticQuery } from 'gatsby';
+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 title = 'Popular posts';
+const blockTitle = 'Popular posts';
 
-const PopularPosts = () => {
+const PopularPosts = ({ className, titleTheme }) => {
   const {
     allPopularPosts: { posts },
   } = useStaticQuery(graphql`
-    query PopularPosts {
+    query BlogPagePopularPosts {
       allPopularPosts: allMdx(
         filter: {
           fileAbsolutePath: { regex: "/posts/" }
@@ -43,17 +44,29 @@ const PopularPosts = () => {
     }
   `);
   return (
-    <section className="mt-10 md:mt-20 lg:mt-28">
+    <div className={className}>
       <Container>
-        <Heading tag="h2">{title}</Heading>
+        <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>
-    </section>
+    </div>
   );
 };
 
+PopularPosts.propTypes = {
+  className: PropTypes.string,
+  titleTheme: PropTypes.oneOf(['gray']),
+};
+
+PopularPosts.defaultProps = {
+  className: null,
+  titleTheme: null,
+};
+
 export default PopularPosts;

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>
   );
 };