Software Development & Management

Calendar for gatsby

2 min min read - August 26, 2018

I've just updated my blog by adding something that is essential for traditional blogging: chronological indexing.

Won't spend much time explaining as you may see this messy blog source code on my GitHub

Idea

  • Need to added field frontmatter.yearWithMonth to the page

    • That can be done by various plugins or simply in onCreateNode of /gatsby-node.js (see on GitHub)

    gatsby-node.js

    // ..
    // Create slugs for files.
    // Slug will used for blog page path.
    exports.onCreateNode = ({ node, actions, getNode }) => {
    // ...
    // exptract date elements for indexing
    // yearWithMonth allows concatenation otherwise difficult/impossible while
    // graphql aggregation/filtering
    if (node.frontmatter && node.frontmatter.updatedDate) {
    const parts = node.frontmatter.updatedDate.split('-')
    node.frontmatter.year = parts[0]
    node.frontmatter.month = parts[1]
    node.frontmatter.day = parts[2]
    node.frontmatter.yearWithMonth = parts.slice(0, 2).join('-')
    }
    // ...
    }
  • Can query by that field to show year/month pages

    • You can add that query to any page you want to show calendar on (see on GitHub)
    # Get calendar
    calendar: allMarkdownRemark {
    group(field: frontmatter___updatedDate) {
    fieldValue
    totalCount
    }
    }
    • Also you can create component printing list of months like categories (see on GitHub)
  • You can build pages for each month by groupingby newly created field

    • That can be done using createPages of /gatsby-node.js (Example on GitHub)
    exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions

    return new Promise((resolve, reject) => {
    // added monthsPage to the templates
    const templates = ['blogPost', 'tagsPage', 'blogPage', 'monthsPage'].reduce(
    (mem, templateName) => {
    return Object.assign({}, mem, {
    [templateName]: path.resolve(
    `src/templates/${kebabCase(templateName)}.jsx`
    ),
    })
    },
    {}
    )
    // added yearWithMonth to frontmatter
    graphql(
    `
    {
    posts: allMarkdownRemark {
    edges {
    node {
    fields {
    slug
    }
    frontmatter {
    tags
    yearWithMonth
    }
    }
    }
    }
    }
    `

    ).then(result => {
    if (result.errors) {
    return reject(result.errors)
    }
    const posts = result.data.posts.edges.map(p => p.node)

    // ...
    // Create months pages
    posts
    .reduce(
    (mem, post) =>
    cleanArray(mem.concat(get(post, 'frontmatter.yearWithMonth'))),
    []
    )
    .forEach(month => {
    createPage({
    path: `/blog/months/${kebabCase(month)}/`,
    component: slash(templates.monthsPage),
    context: {
    month,
    },
    })
    })

    resolve()
    })
    })
    }

Next article

Private

I just came from a refreshing holiday. It wasn't restful by any means. No, it was quite a job looking after my two-year-old son while travelling. While the setting was lovely I did not sleep longer and actually, I was far more physically tired than usual (luckily all to allow my wife to rest a bit). All of that came with quite an unusual outcome. As thanks to the new job, I could finally after years enjoy wireless time off I lost much need to look into my social media accounts. I did it still, but much less than normal.

read more…

2 min min read - September 14, 2018

Previous article

Private

I decided to dig in my history and find records of my internet activity since the begining. And I've been here for a while, constantly rediscovering myself. Why I want to do? For myself, for my memories, but also to show how I developed so maybe someone can learn from it to. This post will be used as a list for research and will be updated continously...

read more…

6 min min read - August 25, 2018