Skip to content

Instantly share code, notes, and snippets.

View danilowoz's full-sized avatar

Danilo Woznica danilowoz

View GitHub Profile
@danilowoz
danilowoz / 2.1-gatsby-node.js
Last active April 28, 2019 19:19
Creating a blog post list page
const postsPerPage = 9
const postsWithoutFeatured = posts.filter(({ node }) => {
return !node.frontmatter.featured
})
const numPages = Math.ceil(postsWithoutFeatured.length / postsPerPage)
@danilowoz
danilowoz / 2.2-gatsby-node.js
Last active April 28, 2019 19:19
Creating a blog post list page
Array.from({ length: numPages }).forEach((_, i) => {
createPage({
path: i === 0 ? `/blog` : `/blog/page/${i + 1}`,
component: blogListLayout,
context: {
limit: postsPerPage,
skip: i * postsPerPage,
currentPage: i + 1,
numPages,
},
import React from "react"
import { graphql, Link } from "gatsby"
const BlogPostList = ({ data, pageContext }) => {
const { allMarkdownRemark } = data
return (
<>
{allMarkdownRemark.edges.map(({ node }) => {
const imageSource = node.frontmatter.image.childImageSharp.fluid.src
@danilowoz
danilowoz / 3.1-gatsby-node.js
Last active April 28, 2019 19:50
Getting the categories
const blogCategoryLayout = path.resolve(`./src/layouts/blog-category.js`)
@danilowoz
danilowoz / 3.2-gatsby-node.js
Created April 28, 2019 19:49
Getting the categories
const categories = []
posts.forEach((post, index) => {
post.node.frontmatter.category.forEach(cat => categories.push(cat))
createPage({
path: post.node.fields.slug,
component: blogLayout,
context: {
slug: post.node.fields.slug,
@danilowoz
danilowoz / 3.3-gatsby-node.js
Created April 28, 2019 19:51
Getting the categories
const countCategories = categories.reduce((prev, curr) => {
prev[curr] = (prev[curr] || 0) + 1
return prev
}, {})
@danilowoz
danilowoz / 3.4-gatsby-node.js
Created April 28, 2019 19:57
Getting the categories
const kebabCase = require(`lodash.kebabcase`)
const allCategories = Object.keys(countCategories)
allCategories.forEach((cat, i) => {
const link = `/blog/category/${kebabCase(cat)}`
Array.from({
length: Math.ceil(countCategories[cat] / postsPerPage),
}).forEach((_, i) => {
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>
@danilowoz
danilowoz / 4-gatsby-node.js
Created April 28, 2019 20:01
Next and prev post
posts.forEach((post, index, arr) => {
post.node.frontmatter.category.forEach(cat => categories.push(cat))
const prev = arr[index - 1]
const next = arr[index + 1]
createPage({
path: post.node.fields.slug,
component: blogLayout,
context: {
@danilowoz
danilowoz / 4.1-blog-post.js
Created April 28, 2019 20:02
Next and prev post
const BlogPost = ({ data, pageContext }) => {
const { markdownRemark } = data
const { prev, next } = pageContext
return (
<>
...
{prev && (
<Link to={prev.node.fields.slug}>