Skip to content

Instantly share code, notes, and snippets.

@danilowoz
Created April 28, 2019 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danilowoz/05c54e03e61140c8b0c45f9c18f465e1 to your computer and use it in GitHub Desktop.
Save danilowoz/05c54e03e61140c8b0c45f9c18f465e1 to your computer and use it in GitHub Desktop.
import React from "react"
import kebabCase from "lodash.kebabcase"
import { graphql, Link } from "gatsby"
const BlogCategory = ({ data, pageContext }) => {
const { allMarkdownRemark } = data
return (
<>
<h1>Categories:</h1>
{pageContext.allCategories.map(cat => (
<Link to={`/blog/category/${kebabCase(cat)}`}>{cat}</Link>
))}
<br />
{allMarkdownRemark.edges.map(({ node }) => {
const imageSource = node.frontmatter.image.childImageSharp.fluid.src
return (
<>
<Link to={node.fields.slug}>
<img src={imageSource} alt={node.frontmatter.title} />
<h1>{node.frontmatter.title}</h1>
</Link>
<p>{node.frontmatter.date}</p>
<p>By {node.frontmatter.author}</p>
<p>
In:{" "}
{node.frontmatter.category.map(cat => (
<Link to={`/blog/category/${kebabCase(cat)}`}>{cat}</Link>
))}
</p>
</>
)
})}
<ul>
{Array.from({ length: pageContext.numPages }).map((item, i) => {
const index = i + 1
const category = kebabCase(pageContext.category)
const link =
index === 1
? `/blog/category/${category}`
: `/blog/category/${category}/page/${index}`
return (
<li>
{pageContext.currentPage === index ? (
<span>{index}</span>
) : (
<a href={link}>{index}</a>
)}
</li>
)
})}
</ul>
</>
)
}
export default BlogCategory
export const query = graphql`
query blogPostsListByCategory($category: String, $skip: Int!, $limit: Int!) {
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { category: { in: [$category] } } }
limit: $limit
skip: $skip
) {
edges {
node {
fields {
slug
}
frontmatter {
title
date
author
category
image {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment