fix: site build throw error (#125)

* upgrade yarn.lock * node 12 * 🔒 lock gatsby-transformer-remark version gatsbyjs/gatsby#21188 (comment)
antvis · Apr 22, 2020 · 0d3d55f · 0d3d55f
1 parent db644fd
commit 0d3d55f
Show file tree

Hide file tree

Showing 4 changed files with 255 additions and 168 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -8,16 +8,16 @@ jobs:
 
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 10.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 10.x
+          node-version: 12.x
       - name: npm install, test and build
         run: |
           yarn install
           yarn lint
           yarn test
           yarn tsc
-          yarn workspace example build
+          yarn run build
         env:
           CI: true
diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json
@@ -72,7 +72,7 @@
     "gatsby-remark-reading-time": "^1.0.1",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-source-github": "^0.0.2",
-    "gatsby-transformer-remark": "^2.6.24",
+    "gatsby-transformer-remark": "2.7.3",
     "git-url-parse": "^11.1.2",
     "i18next": "^19.0.0",
     "indent-string": "^4.0.0",

diff --git a/@antv/gatsby-theme-antv/site/templates/example.tsx b/@antv/gatsby-theme-antv/site/templates/example.tsx
@@ -11,6 +11,7 @@ import { groupBy } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import Drawer from 'rc-drawer';
 import { useMedia } from 'react-use';
+import RehypeReact from 'rehype-react';
 import Article from '../components/Article';
 import SEO from '../components/Seo';
 import Tabs from '../components/Tabs';
@@ -136,14 +137,17 @@ export default function Template({
   }
   const {
     frontmatter,
-    html,
+    htmlAst,
     fields: { slug },
     parent: { relativePath },
   } = markdownRemark;
   const {
     siteMetadata: { examples = [], githubUrl, playground },
   } = site;
   const { t, i18n } = useTranslation();
+  const renderAst = new RehypeReact({
+    createElement: React.createElement,
+  }).Compiler;
   const groupedEdges = groupBy(
     edgesInExamples,
     ({
@@ -299,10 +303,7 @@ export default function Template({
       </div>
       <div className={styles.galleryContent}>
         <h1>{frontmatter.title}</h1>
-        <div
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
+        <div>{renderAst(htmlAst)}</div>
         {Categories.map((category: string, i) => (
           <div key={i}>
             {category !== 'OTHER' && (
@@ -372,10 +373,7 @@ export default function Template({
           </a>
         </Tooltip>
       </h1>
-      <div
-        /* eslint-disable-next-line react/no-danger */
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
+      <div>{renderAst(htmlAst)}</div>
       <Tabs
         slug={exampleRootSlug}
         active={activeTab}
@@ -473,7 +471,7 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
-          html
+          htmlAst
           fields {
             slug
           }