From 4f04335f5617d9b1fde7c2c2313fe4f2fd48ac58 Mon Sep 17 00:00:00 2001 From: panr Date: Sat, 2 Mar 2019 16:49:41 +0100 Subject: [PATCH] Create coverImage and custom excerpt fields --- .babelrc | 9 + .eslintrc.yml | 8 + gatsby-node.js | 21 + package.json | 3 + src/components/post.js | 5 +- .../image-placeholder.png} | Bin src/posts/.features-placeholder.md | 11 - src/styles/post.module.css | 2 +- src/templates/index.js | 5 +- yarn.lock | 620 +++++++++--------- 10 files changed, 350 insertions(+), 334 deletions(-) create mode 100644 .babelrc rename src/images/{coverImagePlaceholder.png => placeholder/image-placeholder.png} (100%) delete mode 100644 src/posts/.features-placeholder.md diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..8d436a7 --- /dev/null +++ b/.babelrc @@ -0,0 +1,9 @@ +{ + "presets": [ + "babel-preset-gatsby", + ], + "plugins": [ + "@babel/plugin-proposal-optional-chaining", + "@babel/plugin-proposal-nullish-coalescing-operator" + ] +} diff --git a/.eslintrc.yml b/.eslintrc.yml index dc133ce..d6613a5 100644 --- a/.eslintrc.yml +++ b/.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 diff --git a/gatsby-node.js b/gatsby-node.js index 472458e..36fe6a0 100644 --- a/gatsby-node.js +++ b/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 +} diff --git a/package.json b/package.json index 69ee54d..24bfb88 100644 --- a/package.json +++ b/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", diff --git a/src/components/post.js b/src/components/post.js index a29b21d..51221f8 100644 --- a/src/components/post.js +++ b/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 (
@@ -31,7 +34,7 @@ const Post = ({
{date} {author && <>— Written by {author}}
- {coverImage && ( + {coverImage && !isPlaceholder && (