fix: Component in docs ignore error (#55)

xsky-fe · Aug 15, 2019 · 0890682 · 0890682
1 parent 0e153d0
commit 0890682
Show file tree

Hide file tree

Showing 5 changed files with 411 additions and 52 deletions.
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -21,7 +21,12 @@ module.exports = {
         name: `content`,
       },
     },
-    `gatsby-mdx`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        extensions: [`.mdx`, `.md`],
+      },
+    },
     `gatsby-plugin-typescript`,
     `gatsby-plugin-react-helmet`,
     `gatsby-transformer-react-docgen`,

diff --git a/docs/package.json b/docs/package.json
@@ -12,8 +12,8 @@
     "@types/react-dom": "^16.8.4",
     "bootstrap-sass": "3.4.1",
     "gatsby": "^2.8.2",
-    "gatsby-mdx": "^0.6.3",
     "gatsby-plugin-manifest": "^2.1.1",
+    "gatsby-plugin-mdx": "^1.0.24",
     "gatsby-plugin-offline": "^2.1.1",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sass": "^2.0.11",

diff --git a/docs/src/templates/components-post.js b/docs/src/templates/components-post.js
@@ -8,7 +8,7 @@ import Playground from '../components/Playground';
 import SideNav from '../components/SideNav';
 import Header from '../components/Header';
 import Toc from '../components/Toc';
-import MDXRenderer from 'gatsby-mdx/mdx-renderer';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 const components = {
   h2: props => <LinkedHeading h="3" {...props} />,
@@ -37,7 +37,7 @@ class BlogPostTemplate extends React.Component {
             <div className="Main__Body">
               <Header post={post} />
               <MDXProvider components={components}>
-                <MDXRenderer>{post.code.body}</MDXRenderer>
+                <MDXRenderer>{post.body}</MDXRenderer>
               </MDXProvider>
             </div>
             <div className="prev-next-nav">
@@ -73,9 +73,7 @@ export const pageQuery = graphql`
     mdx(fields: { slug: { eq: $slug } }) {
       id
       excerpt(pruneLength: 160)
-      code {
-        body
-      }
+      body
       fields {
         slug
       }

diff --git a/docs/src/templates/default.js b/docs/src/templates/default.js
@@ -4,7 +4,7 @@ import Playground from '../components/Playground';
 import { MDXProvider } from '@mdx-js/react';
 import { graphql } from 'gatsby';
 import Header from '../components/Header';
-import MDXRenderer from 'gatsby-mdx/mdx-renderer';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 const showComponents = {
   code: props => <Playground {...props} isShow />,
@@ -17,7 +17,7 @@ export default props => {
     <Layout>
       <Header post={post} />
       <MDXProvider components={showComponents}>
-        <MDXRenderer>{post.code.body}</MDXRenderer>
+        <MDXRenderer>{post.body}</MDXRenderer>
       </MDXProvider>
     </Layout>
   );
@@ -28,9 +28,7 @@ export const pageQuery = graphql`
     mdx(fields: { slug: { eq: $slug } }) {
       id
       excerpt(pruneLength: 160)
-      code {
-        body
-      }
+      body
       fields {
         slug
       }