feat(gatsby-theme-blog-core): Support filter, limit options (#98)

Co-authored-by: Lennart <[email protected]>
gatsbyjs · Apr 12, 2021 · 8f1ba38 · 8f1ba38
1 parent 335eb8e
commit 8f1ba38
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git 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 amount of pages that should be generated                                                            |
 
 #### Example usage
 

diff --git 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
@@ -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
@@ -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
@@ -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 amount of pages that should be generated                                                                                                                                                                                  |
 
 #### Example configuration