Gatsby on Aamnah - Frontend Web Developer

Dynamically generate Mdx pages based on file name

Thu, 14 May 2020 04:50:55 +0500

I followed some article to setup generating pages for MDX content. That tutorial used the path value defined in frontmatter to build the page. Which is bothersome because now i gotta specify a path in frontmatter every time. Otherwsie the build will fail. I’m coming from Jekyll and Hugo, and the path was always optional.

I’d much rather it take the filename as the basis for the URL, which i have now managed to do, by following yet another article.

Dates in Gatsby GraphQL

Sun, 03 May 2020 14:34:23 +0500

tl;dr: pass a Momentjs date string as the value for formatString parameter for date

1date(formatString: 'YYYY, MMM DD')

 1query BlogQuery {
 2  allFile(
 3    filter: { sourceInstanceName: { in: ["blog", "notes"] } }
 4    sort: { order: DESC, fields: childMdx___frontmatter___date }
 5  ) {
 6    nodes {
 7      id
 8      name # filename
 9      base # filename.ext
10      absolutePath # the file path
11      dir # absolutePath minus base
12      childMdx {
13        frontmatter {
14          title
15          path # the URL path
16          description
17          date(formatString: "YYYY, MMM DD") # 2020, May 03
18        }
19      }
20    }
21  }
22}

Automatically figuring out `lastmod`

I thought i could use the mtime value to automatically figure out the lastmod value that i usually put in frontmatter when i update an existing post. Just in case i forget to update lastmod, it’d use mtime to figure out the date the file was modified on the system.

Syntax highlighting for fenced code blocks in Gatsby MDX

Fri, 01 May 2020 00:00:00 +0500

My Gatsby setup uses MDX. And i need to add syntax highlighting to the fenced code blocks

Had to install the prism-react-renderer plugin

1npm install --save prism-react-renderer

And in my gatsby-browser.js i needed to add the following code

 1import React from 'react'
 2import { MDXProvider } from '@mdx-js/react'
 3import Highlight, { defaultProps, theme } from 'prism-react-renderer'
 4import github from 'prism-react-renderer/themes/github'
 5
 6/* eslint-disable */
 7const component = {
 8  pre: (props) => {
 9    const className = props.children.props.className || ''
10    const matches = className.match(/language-(?<lang>.*)/)
11    return (
12      <Highlight
13        {...defaultProps}
14        code={props.children.props.children}
15        language={matches && matches.groups && matches.groups.lang ? matches.groups.lang : ''}
16        theme={github}
17      >
18        {({ className, style, tokens, getLineProps, getTokenProps }) => (
19          <pre className={className} style={style}>
20            {tokens.map((line, i) => (
21              <div {...getLineProps({ line, key: i })}>
22                {line.map((token, key) => (
23                  <span {...getTokenProps({ token, key })} />
24                ))}
25              </div>
26            ))}
27          </pre>
28        )}
29      </Highlight>
30    )
31  },
32}
33export const wrapRootElement = ({ element }) => {
34  return <MDXProvider components={component}>{element}</MDXProvider>
35}

And that’s it. Now all fenced code blocks in Markdown will show proper syntax highlighting

Adding an SVG component to Gatsby (React)

Mon, 06 Apr 2020 22:00:10 +0500

For React projects created with create-react-app, you can not import an SVG as ReactComponent, and that adds it as an inline SVG. In Gatsby it doesn’t work.

This code would not work

1import { ReactComponent as Logo } from './logo.svg'
2function App() {
3  return (
4    <div>
5      {/* Logo is an actual React component */}
6      <Logo />
7    </div>
8  )
9}

You’ll get the following error instead

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Importing the SVG as an image would work. But that’s an image, defeats the entire purpose of using an SVG in the first place. You can not make an image file show different variants based on media queries in a straightforward and contained way. Besides, Gatsby’s own <Image> component is great for static images.

Common GraphQL queries for Gatsby

Sun, 29 Mar 2020 13:11:25 +0500

NOTES:

can’t do string interpolation or use props in a static query

Get all files in a specific folder

You can do that with sourceInstanceName on file

1{
2  allFile(filter: { sourceInstanceName: { eq: "notes" } }) {
3    nodes {
4      sourceInstanceName
5      name
6    }
7  }
8}

notes is the folder in the above query, and you’ll get the names of all files in that folder. Without that filter, you’ll get something like this

Adding a contact form to Gatsby using Netlify Forms

Sun, 29 Mar 2020 13:11:24 +0500

You need to give your form a name. This name will identify your Form in Netlify
Add the data-netlify="true" and data-netlify-honeypot="bot-field" to the <form>
You also need to add a hidden input field with a value attribute that matches your form name
Every input field must have a name. This will show up in form submissions.

1<form name="Contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
2  {/* You still need to add the hidden input with the form name to your JSX form */}
3  <input type="hidden" name="form-name" value="Contact" />
4  ...
5</form>

The issues i had were: