Wrapping up: useful plugins for Gatsby
Tags: gatsby, jamstack
Published: 2020-02-27 21:42:40

*Illustration by Katerina Limpitsouni [undraw.co/illustrations](undraw.co)*

Recently I started migrating an older Drupal based blog to a combination of Gatsby and Netlify CMS ([source](https://github.com/patricksevat/de-europeanen-jamstack)), 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](https://www.gatsbyjs.org/packages/gatsby-plugin-algolia/)
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](https://www.gatsbyjs.org/docs/adding-pagination/). A quick gist from `gatsby-node.js`:

```javascript
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](https://www.gatsbyjs.org/docs/importing-assets-into-files/). 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$/`;

```javascript
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](https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/).

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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) which allows browsers to pick the most appropriate size.

## PWA support in Gatsby

We all want that 100 in [Lighthouse](https://developers.google.com/web/tools/lighthouse), right? To get the 100 in PWA we must enable two plugins: [`gatsby-plugin-manifest`](https://www.gatsbyjs.org/packages/gatsby-plugin-manifest) and [`gatsby-plugin-offline`](https://www.gatsbyjs.org/packages/gatsby-plugin-offline). Further reading can be done [here](https://www.gatsbyjs.org/docs/progressive-web-app/).

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.