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:
- API based using Algolia and its Gatsby plugin
- 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.
Top comments (0)