Gatsby.js
Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps.
Static Site Generation is very common, Next.js and Nuxt.js both supports Static Site Generation. To me, Gatsby is like a wrapper of Next.js. Next.js give users the freedom to do whatever they like (get data from anywhere). Many syntax and features of Gatsby seem to be similar to next.js. Gatsby does not give that much freedom (not really, you can still do anything), instead, it did most of the stuff for you. With plugins, all data will be served through GraphQL.
What's special about Gatsby?
In my opinion, there are 2 special features about Gatsby
- Large number of plugins
- GraphQL
- The plugins can do whatever they want, whether reading files from disk or request data from external API, and serve the data through GraphQL.
- We can obtain everything through GraphQl which is quite cool.
- Based on React: Unlike typical Jamstack frameworks like hugo and jekyll who uses template engine, Gatsby uses React. I personally prefer react especially when writting complicated stuff.
Sample Usage
Layout
A layout component can be created and shared with many pages, but there is a problem.
Unlike Nuxt or Vue, who has an App.vue
file as the main page file. Each file in Gatsby are individual and the layout will be keep reloaded, and can cause some animation problem.
See How to prevent layout components from unmounting for solution. Read More.
Here is a sample I had in my project (with module type, i.e. import
rather than require
)
import React from "react";
import Layout from "./src/components/layout";
require("prismjs/themes/prism-okaidia.css");
require("prismjs/plugins/line-numbers/prism-line-numbers.css");
require(`katex/dist/katex.min.css`);
export function wrapPageElement({ element, props }) {
return <Layout {...props}>{element}</Layout>;
}
Basically this wrapper element will prevent the layout component from reloading when routing.
gatsby-source-filesystem
const data = useStaticQuery(graphql`
query {
allFile {
nodes {
name
relativePath
}
}
}
`);
Output
{
"data": {
"allFile": {
"nodes": [
{
"name": "icon",
"relativePath": "icon.png"
},
{
"name": "DataGenerationConversion",
"relativePath": "LearnSQL/Notes/DataGenerationConversion.md"
}
]
}
}
}
gatsby-plugin-mdx
gatsby-plugin-mdx parses md
or mdx
files and return their information such as
- tableOfContents
- slug
- wordCount
- frontmatter
- html and much more.
The plugin can use other plugsin from rehypePlugins
and remarkPlugins
.
gatsby-plugin-mathjax
https://www.gatsbyjs.com/plugins/gatsby-remark-mathjax/
Math Formulas can be rendered using mathjax with latex syntax.
Note: a cdn script tag must be added to React Helmet to load mathjax library.
Examples
Inline math euqation should work but doesn't seem to work on my case
Math Equation:
Gatsby Plugin
- Creating a Generic Plugin
- Creating a Local Plugin
- Creating a Source Plugin
- Creating a Transformer Plugin