From eb2e1d58a4f1ad866dfcf5fc75730b2c01cf3aee Mon Sep 17 00:00:00 2001 From: Owen Young Date: Fri, 22 Jan 2021 20:39:42 +0800 Subject: [PATCH 1/3] feat: support filter, limit options for blog-theme --- packages/gatsby-theme-blog-core/README.md | 2 ++ .../gatsby-theme-blog-core/gatsby-node.js | 31 +++++++++++++------ .../src/templates/posts-query.js | 8 +++-- .../utils/default-options.js | 5 ++- packages/gatsby-theme-blog/README.md | 2 ++ 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/gatsby-theme-blog-core/README.md b/packages/gatsby-theme-blog-core/README.md index 63a973f3..bcbc9cb8 100755 --- a/packages/gatsby-theme-blog-core/README.md +++ b/packages/gatsby-theme-blog-core/README.md @@ -62,6 +62,8 @@ module.exports = { | `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. | | `excerptLength` | `140` | Length of the auto-generated excerpt of a blog post | | `imageMaxWidth` | `1380` | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. | +| `filter` | `{}` | Set the posts filter, for example: `{frontmatter: { draft: {ne: true} }}` | +| `limit` | `1000` | Set the posts length | #### Example usage diff --git a/packages/gatsby-theme-blog-core/gatsby-node.js b/packages/gatsby-theme-blog-core/gatsby-node.js index a298640b..3978d396 100644 --- a/packages/gatsby-theme-blog-core/gatsby-node.js +++ b/packages/gatsby-theme-blog-core/gatsby-node.js @@ -268,18 +268,28 @@ const PostsTemplate = require.resolve(`./src/templates/posts-query`) exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { const { createPage } = actions - const { basePath, imageMaxWidth } = withDefaults(themeOptions) + const { basePath, imageMaxWidth, filter, limit } = withDefaults(themeOptions) - const result = await graphql(` - { - allBlogPost(sort: { fields: [date, title], order: DESC }, limit: 1000) { - nodes { - id - slug + const result = await graphql( + ` + query($limit: Int!, $filter: BlogPostFilterInput) { + allBlogPost( + sort: { fields: [date, title], order: DESC } + filter: $filter + limit: $limit + ) { + nodes { + id + slug + } } } + `, + { + filter, + limit, } - `) + ) if (result.errors) { reporter.panic(result.errors) @@ -310,6 +320,9 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { createPage({ path: basePath, component: PostsTemplate, - context: {}, + context: { + filter, + limit, + }, }) } diff --git a/packages/gatsby-theme-blog-core/src/templates/posts-query.js b/packages/gatsby-theme-blog-core/src/templates/posts-query.js index 8bcca270..66543916 100644 --- a/packages/gatsby-theme-blog-core/src/templates/posts-query.js +++ b/packages/gatsby-theme-blog-core/src/templates/posts-query.js @@ -4,7 +4,7 @@ import PostsPage from "../components/posts" export default PostsPage export const query = graphql` - query PostsQuery { + query PostsQuery($limit: Int!, $filter: BlogPostFilterInput) { site { siteMetadata { title @@ -14,7 +14,11 @@ export const query = graphql` } } } - allBlogPost(sort: { fields: [date, title], order: DESC }, limit: 1000) { + allBlogPost( + sort: { fields: [date, title], order: DESC } + filter: $filter + limit: $limit + ) { nodes { id excerpt diff --git a/packages/gatsby-theme-blog-core/utils/default-options.js b/packages/gatsby-theme-blog-core/utils/default-options.js index bc88904d..45ebd595 100644 --- a/packages/gatsby-theme-blog-core/utils/default-options.js +++ b/packages/gatsby-theme-blog-core/utils/default-options.js @@ -4,12 +4,15 @@ module.exports = (themeOptions) => { const assetPath = themeOptions.assetPath || `content/assets` const excerptLength = themeOptions.excerptLength || 140 const imageMaxWidth = themeOptions.imageMaxWidth || 1380 - + const filter = themeOptions.filter || {} + const limit = themeOptions.limit || 1000 return { basePath, contentPath, assetPath, excerptLength, imageMaxWidth, + filter, + limit, } } diff --git a/packages/gatsby-theme-blog/README.md b/packages/gatsby-theme-blog/README.md index fcb7d3bf..8953f176 100755 --- a/packages/gatsby-theme-blog/README.md +++ b/packages/gatsby-theme-blog/README.md @@ -71,6 +71,8 @@ module.exports = { | `excerptLength` | `140` | Length of the auto-generated excerpt of a blog post | | `webfontURL` | `''` | URL for the webfont you'd like to include. Be sure that your local theme does not override it. | | `imageMaxWidth` | `1380` | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. | +| `filter` | `{}` | Set the posts filter, for example: `{frontmatter: { draft: {ne: true} }}` | +| `limit` | `1000` | Set the posts length | #### Example configuration From 04c53378a3d5003b762414df48b501ea2a49835a Mon Sep 17 00:00:00 2001 From: Lennart Date: Mon, 12 Apr 2021 15:21:03 +0200 Subject: [PATCH 2/3] Update README.md --- packages/gatsby-theme-blog-core/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-blog-core/README.md b/packages/gatsby-theme-blog-core/README.md index bcbc9cb8..a6702ae7 100755 --- a/packages/gatsby-theme-blog-core/README.md +++ b/packages/gatsby-theme-blog-core/README.md @@ -62,8 +62,8 @@ module.exports = { | `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. | | `excerptLength` | `140` | Length of the auto-generated excerpt of a blog post | | `imageMaxWidth` | `1380` | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. | -| `filter` | `{}` | Set the posts filter, for example: `{frontmatter: { draft: {ne: true} }}` | -| `limit` | `1000` | Set the posts length | +| `filter` | `{}` | Set the posts filter, for example: `{ frontmatter: { draft: {ne: true} } }` | +| `limit` | `1000` | Set the amount of pages that should be generated | #### Example usage From 17c94dbacfe16ec8516bf890cb02443c2096eff2 Mon Sep 17 00:00:00 2001 From: Lennart Date: Mon, 12 Apr 2021 15:33:55 +0200 Subject: [PATCH 3/3] Update README.md --- packages/gatsby-theme-blog/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-blog/README.md b/packages/gatsby-theme-blog/README.md index 8953f176..5c8fbbe3 100755 --- a/packages/gatsby-theme-blog/README.md +++ b/packages/gatsby-theme-blog/README.md @@ -71,8 +71,8 @@ module.exports = { | `excerptLength` | `140` | Length of the auto-generated excerpt of a blog post | | `webfontURL` | `''` | URL for the webfont you'd like to include. Be sure that your local theme does not override it. | | `imageMaxWidth` | `1380` | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. | -| `filter` | `{}` | Set the posts filter, for example: `{frontmatter: { draft: {ne: true} }}` | -| `limit` | `1000` | Set the posts length | +| `filter` | `{}` | Set the posts filter, for example: `{ frontmatter: { draft: {ne: true} } }` | +| `limit` | `1000` | Set the amount of pages that should be generated | #### Example configuration