Create coverImage and custom excerpt fields

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "babel-preset-gatsby",
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
+}

.eslintrc.yml

@@ -13,6 +13,9 @@ extends:
   - airbnb
   - prettier
 
+plugins:
+  - react-hooks
+
 rules:
   # best practices
   arrow-parens:
@@ -49,6 +52,9 @@ rules:
   import/no-extraneous-dependencies: 0
   import/prefer-default-export: 0
   object-curly-newline: 0
+  operator-linebreak:
+    - 2
+    - after
 
   react/jsx-filename-extension: 0
   react/jsx-one-expression-per-line: 0
@@ -58,6 +64,8 @@ rules:
   react/no-unescaped-entities: 0
   react/destructuring-assignment: 0
 
+  react-hooks/rules-of-hooks: error
+
 globals:
   document: true
   requestAnimationFrame: true

gatsby-node.js

@@ -98,3 +98,24 @@ exports.createPages = ({ actions, graphql }) => {
     return sortedPages
   })
 }
+
+exports.onCreateNode = async function({ node, getNodes }) {
+  const allNodes = getNodes()
+  const posts = allNodes.filter(n => n.internal.type === 'MarkdownRemark')
+  const atLeastOnePostHasCoverImage = posts.filter(
+    post => post.frontmatter.coverImage,
+  ).length
+  const coverImagePlaceholder = atLeastOnePostHasCoverImage ?
+    null :
+    '../images/placeholder/image-placeholder.png'
+
+  if (node.internal.type === 'MarkdownRemark') {
+    node.frontmatter = {
+      ...node.frontmatter,
+      coverImage: node.frontmatter.coverImage || coverImagePlaceholder,
+      excerpt: node.frontmatter.excerpt || '',
+    }
+  }
+
+  return node
+}

package.json

@@ -41,6 +41,8 @@
     "react-helmet": "^5.2.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "babel-eslint": "^10.0.1",
     "babel-preset-gatsby": "^0.1.6",
     "cssnano": "^4.1.8",
@@ -50,6 +52,7 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.12.3",
+    "eslint-plugin-react-hooks": "^1.4.0",
     "gatsby-remark-embed-video": "^1.7.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",

src/components/post.js

@@ -22,6 +22,9 @@ const Post = ({
   const nextPath = nextPost && nextPost.frontmatter.path
   const nextLabel = nextPost && nextPost.frontmatter.title
 
+  const isPlaceholder =
+    coverImage?.childImageSharp.fluid.sizes.indexOf('1px') !== -1
+
   return (
     <div className={style.post}>
       <div className={style.postContent}>
@@ -31,7 +34,7 @@ const Post = ({
         <div className={style.meta}>
           {date} {author && <>— Written by {author}</>}
         </div>
-        {coverImage && (
+        {coverImage && !isPlaceholder && (
           <Img
             fluid={coverImage.childImageSharp.fluid}
             className={style.coverImage}

src/styles/post.module.css

@@ -40,7 +40,7 @@
 
 .meta {
   font-size: 1rem;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
 .readMore {

src/templates/index.js

@@ -57,10 +57,7 @@ Index.propTypes = {
 export const postsQuery = graphql`
   query($limit: Int!, $skip: Int!) {
     allMarkdownRemark(
-      filter: {
-        fileAbsolutePath: { regex: "//posts//" }
-        frontmatter: { placeholder: { ne: true } }
-      }
+      filter: { fileAbsolutePath: { regex: "//posts//" } }
       sort: { fields: [frontmatter___date], order: DESC }
       limit: $limit
       skip: $skip