decaporg / gatsby-starter-decap-cms

Example Gatsby + Decap CMS project
https://gatsby-netlify-cms.netlify.app/
MIT License
2.07k stars 979 forks source link

BlogRoll not using "count" property #844

Open SalazarJosh opened 2 years ago

SalazarJosh commented 2 years ago

Feature request

What is the expected behavior? The BlogRoll has a count property that doesn't look to be implemented.

What is motivation or use case for adding/changing the behavior? We should be able to use this count property to determine the number of blog posts to return. For example, I have a "latest from the blog" section that only shows the latest 3 blog posts.

How should this be implemented in your opinion? The BlogRoll component should receive props and pass that to the BlogRollTemplate. That count can be used to slice the initial data or as part of the .map() function.

I'm doing the latter with a ternary operator to keep the count property optional. {posts && posts.slice(0, (this.props.count != undefined ? this.props.count : this.props.data.length)).map(({ node: post }) => { ... }

Are you willing to work on this yourself? yes

maxcell commented 2 years ago

Interesting @SalazarJosh! So you'd like the count to be used to return back how many blog posts you'd want to get back? In my mind I was thinking this count would be only a read only to give back the total number of blog posts that we have. I think given that we're not using it, it might be be better for us to remove it.

We could use the count to be more like a "limit" since our page query ends up getting all blog posts in src/components/BlogRoll.js https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/ca9d29cf97da7deb31827e9c8af666f281a72c7c/src/components/BlogRoll.js#L80-L84 So in here we'd want to add a new limit key and that way it only ever would show the latest 3 blog posts:

  query BlogRollQuery { 
    allMarkdownRemark( 
      sort: { order: DESC, fields: [frontmatter___date] } 
      filter: { frontmatter: { templateKey: { eq: "blog-post" } } },
      limit: 3
) {