Gatsby Headaches: Working with Media (Part 2)

Juan Diego Rodríguez, also known as Monknow, is a front-end developer hailing from Venezuela. He has a passion for creating stunning websites using the latest technologies. More about Juan Diego ↬

Receive weekly advice on front-end & UX, trusted by over 200,000 individuals.

Gatsby is a genuine Jamstack framework. It utilizes React-powered components that tap into APIs before optimizing and bundling everything into static files with elements of reactivity. This includes media files such as images, videos, and audio.

However, there isn't a single approach to managing media in a Gatsby project. We have plugins for all sorts of tasks, from querying your local filesystem and compressing files to inlining SVGs and delivering images in a responsive image format.

So, which plugins should be used for specific media types? And what about specific use cases for different media types? This can cause confusion as there are numerous plugins - some official, some not - that can handle one or more use cases - some outdated, some not.

This is the focus of our brief two-part series. In Part 1, we explored various strategies and techniques for managing images, videos, and audio in a Gatsby project.

Now, in Part 2, we will discuss another common type of media: documents. Specifically, we will address considerations for Gatsby projects that utilize Markdown and PDF files. We will also demonstrate a method for using 3D models before concluding.

In Gatsby, Markdown files are often used to programmatically create pages, like blog posts. You can write content in Markdown, parse it into your GraphQL data layer, source it into your components, and then bundle it as HTML static files during the build process.

Let's explore how to load, query, and handle the Markdown for an existing page in Gatsby.

The first step in your Gatsby project is to load the project's Markdown files into the GraphQL data layer. This can be done using the gatsby-source-filesystem plugin, which we used to query the local filesystem for image files in Part 1 of this series.

In gatsby-config.js, we specify the folder where Markdown files will be stored in the project:

Assume we have the following Markdown file located in the project's ./src/assets directory:

This example is divided into two main sections: the frontmatter and body. This is a typical structure for Markdown files.

We can use the gatsby-transformer-remark plugin to parse Markdown files into a GraphQL data layer. Once installed, we need to register it in the project's gatsby-config.js file:

Restart the development server and go to http://localhost:8000/___graphql in your browser. Here, we can experiment with Gatsby's data layer and check our Markdown file above by making a query using the title property (sample-markdown-file) in the frontmatter:

This should yield the following result:

Note that the content in the response is formatted in HTML. We can also query the original body as rawMarkdownBody or any of the frontmatter attributes.

Next, let's focus on strategies for handling Markdown content once it has been queried.

Web forms are at the heart of every significant interaction. Introducing Adam Silver’s Form Design Patterns, a practical guide to designing and building forms for the web.

dangerouslySetInnerHTML is a React feature that injects raw HTML content into a component’s rendered output by overriding the innerHTML property of the DOM node. It’s considered risky as it essentially bypasses React’s built-in mechanisms for rendering and sanitizing content, potentially leading to cross-site scripting (XSS) attacks if not handled with care.

That said, if...