Modules
npm install gatsby-source-filesystem
npm install gatsby-plugin-mdx
npm install @mdx-js/mdx
npm install @mdx-js/react
npm install gatsby-remark-images
npm install gatsby-remark-responsive-iframe
npm install gatsby-remark-copy-linked-files
npm install gatsby-remark-smartypants
npm install gatsby-remark-prismjs
npm install gatsby-transformer-sharp
npm install gatsby-plugin-sharp
npm install gatsby-plugin-react-helmet
gatsby-browser.js
require("prismjs/themes/prism-solarizedlight.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")
gatsby-config.js
module.exports = {
plugins: [
// TODO: install: gatsby-plugin-feed
// TODO: gatsby-plugin-manifest
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/mdx-pages`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: ['.mdx', '.md'],
// a workaround to solve mdx-remark plugin compat issue
// https://github.com/gatsbyjs/gatsby/issues/15486
plugins: [
`gatsby-remark-images`,
],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
linkImagesToOriginal: false,
maxWidth: 800,
quality: 82,
loading: "eager",
disableBgImage: true,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: `gatsby-remark-copy-linked-files`,
},
{
resolve: `gatsby-remark-smartypants`,
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: '›',
aliases: { sh: "bash" },
showLineNumbers: false,
noInlineHighlight: false,
escapeEntities: {},
},
},
],
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
],
}
gatsby-node.js
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostV1Layout = require.resolve(`./src/components/blog-post-v1.js`)
const result = await graphql(`
{
allMdx {
edges {
node {
frontmatter {
slug
}
}
}
}
}
`)
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result.data.allMdx.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.slug,
component: blogPostV1Layout,
context: {
slug: node.frontmatter.slug,
},
})
})
}
src/components/blog-post-v1.js
import { graphql } from 'gatsby';
import { MDXRenderer } from 'gatsby-plugin-mdx';
import React from 'react';
export const query = graphql`
query($slug: String!) {
mdx(frontmatter: { slug: { eq: $slug } }) {
frontmatter {
title
slug
}
body
}
}
`;
const Post = ({ data: { mdx: post } }) => {
const { title } = post.frontmatter;
const { body } = post;
return (
<div>
<h1>{title}</h1>
<MDXRenderer>{body}</MDXRenderer>
</div>
);
};
export default Post;
src/mdx-pages/hw.mdx
---
title: Hey, MDX
date: February 15, 2021
slug: /hello-world
---
This is the `hello-world.mdx` file.
Here's some new test text in quote: "this is a test"
THis is some quotes in a block quote:
> This is the "block quote test". Aren't it cool?
And a spacer-line
```javascript
const test = "asdf"
--------------------------------------------------------------------------------
### src/index.js
```javascript
import React from "react"
import { useStaticQuery, Link, graphql } from "gatsby"
export default function Home() {
const data = useStaticQuery(
graphql`query {
allMdx {
totalCount
edges {
node {
id
frontmatter {
title
slug
}
excerpt
}
}
}
}`
)
return (
<main>
<div>
<h4>{data.allMdx.totalCount} Posts</h4>
{data.allMdx.edges.map(({ node }) => (
<div key={node.id}>
<h3>
<Link to={node.frontmatter.slug}>
{node.frontmatter.title}{" "}
</Link>
</h3>
<p>{node.excerpt}</p>
</div>
))}
</div>
</main>
)
}