danilowoz

const blogCategoryLayout = path.resolve(`./src/layouts/blog-category.js`) 

danilowoz

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

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,
    },

danilowoz

const postsPerPage = 9
const postsWithoutFeatured = posts.filter(({ node }) => {
      return !node.frontmatter.featured
})
const numPages = Math.ceil(postsWithoutFeatured.length / postsPerPage)

danilowoz

const blogListLayout = path.resolve(`./src/layouts/blog-list.js`)

danilowoz

import React from "react"
import { graphql } from "gatsby"

const BlogPost = ({ data }) => {
  const { markdownRemark } = data
  const imageSource = markdownRemark.frontmatter.image.childImageSharp.fluid.src

  return (
    <>
      <img src={imageSource} alt={markdownRemark.frontmatter.title} />

danilowoz

const path = require(`path`)

// 1. This is called once the data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ graphql, actions }) => {
  // 1.1 Getting the method to create pages
  const { createPage } = actions
  // 1.2 Tell which layout Gatsby should use to thse pages
  const blogLayout = path.resolve(`./src/layouts/blog-post.js`)

  // 2 Return the method with the query

danilowoz

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    const [month, day, year] = new Date(node.frontmatter.date)
      .toLocaleDateString("en-EN", {
        year: "numeric",

danilowoz

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 600px; 
}

.item {

danilowoz

import * as React from 'react'

interface IState {
  offSet: number
}

interface IProp {
  force?: number
  offsetComp?: number
  children(offSet: number): React.ReactNode