Wrapping up: useful plugins for Gatsby

Illustration by Katerina Limpitsouni undraw.co/illustrations

Recently I started migrating an older Drupal based blog to a combination of Gatsby and Netlify CMS (source), both of which I had no prior experience with. In this blog series I'll talk you through the experiences, hurdles and solutions. In part 6 I'll give some advice how to implement common features.

Typescript in Gatsby

My starter template did not provide Typescript out of the box, luckily there's a plugin for that 🎉. Just install gatsby-plugin-typescript and add it to your plugin array. You can now either rename your .js(x) files to .ts(x) with no further config needed.

Search functionality in Gatsby

This would be one of the domains where beforehand I'd expect GraphQL to excel, however, GraphQL is not available in the browser... d'oh!

To get search working browser side there are 2 approaches:

1. API based using Algolia and its Gatsby plugin
2. Creating an index and querying in the browser ("local search"). I took this approach and used the @gatsby-contrib/gatsby-plugin-elasticlunr-search plugin.

❗ Be aware that for websites with lots of websites the created index can get bloated really, really fast. Keep an eye on your bundle size!

Pagination in Gatsby

For my "all blogs page" I wanted to add pagination. For this to work you do not need an external plugin, but you can follow the approach described on the Gatsby docs. A quick gist from gatsby-node.js:

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions

  return graphql(`
    # big GraphQL query
  `).then(result => {
    const posts = result.data.allMarkdownRemark.edges;
    const blogs = posts.filter(post => post.node.frontmatter.templateKey === 'blog-post');
    const blogsPerPage = 6
    const numPages = Math.ceil(blogs.length / blogsPerPage)

    Array.from({ length: numPages })
    .forEach((_, i) => {
      createPage({
        path: i === 0 ? `/blog` : `/blog/${ i + 1 }`,
        component: path.resolve("./src/templates/blog-overview.tsx"),
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          numPages,
          currentPage: i + 1,
        },
      })
    });

    // more code
  })
}

Styling SVG in Gatsby

Using SVG files works out of the box in Gatsby via Webpack. However, the drawback is that Webpack converts smaller SVG files into a data-URI. This works fine, but the downside is that you can no longer target the SVG file in css, for example to change the fill property.

To overcome this I've installed gatsby-plugin-react-svg plugin which I've configured to include this RegEx /\.inline\.svg$/;

import Paperclip from '../img/paperclip-logo.inline.svg';

const FooComponent = () => {
  return <Paperclip title="an paperclip icon" />
}

Image optimalization in Gatsby

One of the most useful plugins that came with the Gatsby + Netlify CMS starter template are the gatsby-transformer-sharp and gatsy-plugin-sharp plugins.

These plugin autogenerate images in the newer webp format which takes less size while retaining quality. Furthermore, it can also generate smaller versions of images if you know that full-size is not needed (for example in a card component). And for places where you do want larger sizes, the plugins can also create an srcset which allows browsers to pick the most appropriate size.

PWA support in Gatsby

We all want that 100 in Lighthouse, right? To get the 100 in PWA we must enable two plugins: gatsby-plugin-manifest and gatsby-plugin-offline. Further reading can be done here.

Big thanks to all readers ❤! I'd love to hear your thoughts in the comments or via Twitter!

This blog is part of a series on how I migrated away from a self-hosted Drupal blog to a modern JAM stack with Gatsby and Netlify CMS.