feat(gatsby): add mdx plugin

mdluo · Feb 18, 2020 · af064aa · af064aa
1 parent 5c157c9
commit af064aa
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 54 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,6 +1,44 @@
 const path = require('path');
 const pxtorem = require('postcss-pxtorem');
 
+const gatsbyRemarkPlugins = [
+ {
+ resolve: 'gatsby-remark-images',
+ options: {
+ maxWidth: 960,
+ },
+ },
+ {
+ resolve: 'gatsby-remark-responsive-iframe',
+ options: { wrapperStyle: 'margin-bottom: 1.0725rem' },
+ },
+ {
+ resolve: `gatsby-remark-vscode`,
+ options: {
+ extensionDataDirectory: path.resolve('extensions'),
+ extensions: [
+ {
+ identifier: 'akamud.vscode-theme-onelight',
+ version: '2.1.0',
+ },
+ ],
+ colorTheme: 'Atom One Light',
+ wrapperClassName: ({ parsedOptions }) => {
+ if (parsedOptions.ln === false) {
+ return 'no-ln';
+ }
+ },
+ getLineClassName: ({ codeFenceOptions }) => {
+ if (codeFenceOptions.ln === false) {
+ return 'no-ln';
+ }
+ },
+ },
+ },
+ 'gatsby-remark-copy-linked-files',
+ 'gatsby-remark-autolink-headers',
+];
+
 module.exports = {
  siteMetadata: {
  title: `mdluo's blog`,
@@ -89,45 +127,10 @@ module.exports = {
  },
  },
  {
- resolve: `gatsby-transformer-remark`,
+ resolve: `gatsby-plugin-mdx`,
  options: {
- plugins: [
- {
- resolve: 'gatsby-remark-images',
- options: {
- maxWidth: 960,
- },
- },
- {
- resolve: 'gatsby-remark-responsive-iframe',
- options: { wrapperStyle: 'margin-bottom: 1.0725rem' },
- },
- {
- resolve: `gatsby-remark-vscode`,
- options: {
- extensionDataDirectory: path.resolve('extensions'),
- extensions: [
- {
- identifier: 'akamud.vscode-theme-onelight',
- version: '2.1.0',
- },
- ],
- colorTheme: 'Atom One Light',
- wrapperClassName: ({ parsedOptions }) => {
- if (parsedOptions.ln === false) {
- return 'no-ln';
- }
- },
- getLineClassName: ({ codeFenceOptions }) => {
- if (codeFenceOptions.ln === false) {
- return 'no-ln';
- }
- },
- },
- },
- 'gatsby-remark-copy-linked-files',
- 'gatsby-remark-autolink-headers',
- ],
+ extensions: [`.md`, `.mdx`],
+ gatsbyRemarkPlugins,
  },
  },
  `gatsby-transformer-sharp`,

diff --git a/src/gatsby/createPages.ts b/src/gatsby/createPages.ts
@@ -11,10 +11,7 @@ import { LoadPagesQuery } from 'generated/types/gatsby';
  */
 export const schema = graphql`
  query loadPages($limit: Int!) {
- allMarkdownRemark(
- limit: $limit
- filter: { frontmatter: { draft: { ne: true } } }
- ) {
+ allMdx(limit: $limit, filter: { frontmatter: { draft: { ne: true } } }) {
  edges {
  node {
  frontmatter {
@@ -49,7 +46,7 @@ export const createPages: GatsbyNode['createPages'] = async ({
  * Optional Chaining and Nullish Coalescing
  * https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
  */
- (result?.data?.allMarkdownRemark?.edges ?? []).forEach(({ node }) => {
+ (result?.data?.allMdx?.edges ?? []).forEach(({ node }) => {
  const { slug } = node.frontmatter;
  createPage({
  // Path for this page — required

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -9,7 +9,7 @@ import Layout from '../components/Layout';
 const Index: React.FC = () => {
  const data = useStaticQuery<GetPostsQuery>(graphql`
  query GetPosts {
- allMarkdownRemark(
+ allMdx(
  sort: { order: DESC, fields: frontmatter___date }
  filter: { frontmatter: { type: { eq: "post" } } }
  ) {
@@ -28,7 +28,7 @@ const Index: React.FC = () => {
  `);
  return (
  <Layout padding={false}>
- {(data?.allMarkdownRemark?.edges ?? []).map(({ node }) => (
+ {(data?.allMdx?.edges ?? []).map(({ node }) => (
  <article className="border-bottom px-3 pt-3 pb-2">
  <Link
  className="text-gray-dark link-hover-gray-light"

diff --git a/src/templates/post.tsx b/src/templates/post.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import { graphql } from 'gatsby';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { DiscussionEmbed } from 'disqus-react';
 
 import Octicon, { Calendar, Tag, Link } from '@primer/octicons-react';
@@ -17,7 +18,7 @@ interface Props {
 
 export const query = graphql`
  query GetPostBySlug($slug: String!) {
- markdownRemark(frontmatter: { slug: { eq: $slug } }) {
+ mdx(frontmatter: { slug: { eq: $slug } }) {
  frontmatter {
  type
  slug
@@ -26,7 +27,7 @@ export const query = graphql`
  link
  tags
  }
- html
+ body
  excerpt
  }
  site {
@@ -39,11 +40,11 @@ export const query = graphql`
 
 const Post: React.FC<Props> = ({ data }) => {
  const {
- markdownRemark,
+ mdx,
  site: { siteMetadata },
  } = data;
 
- const { type, title, date, slug, tags, link } = markdownRemark.frontmatter;
+ const { type, title, date, slug, tags, link } = mdx.frontmatter;
 
  return (
  <Layout>
@@ -67,10 +68,9 @@ const Post: React.FC<Props> = ({ data }) => {
  )}
  </p>
  )}
- <div
- className="markdown-body mt-5 mb-6"
- dangerouslySetInnerHTML={{ __html: markdownRemark.html }}
- />
+ <div className="markdown-body mt-5 mb-6">
+ <MDXRenderer>{mdx.body}</MDXRenderer>
+ </div>
  <DiscussionEmbed
  shortname={siteMetadata.disqus}
  config={{
@@ -79,7 +79,7 @@ const Post: React.FC<Props> = ({ data }) => {
  identifier: slug,
  }}
  />
- <SEO title={title} description={markdownRemark.excerpt} />
+ <SEO title={title} description={mdx.excerpt} />
  </Layout>
  );
 };