feat(fluent-ui.com): Build code display component

fluent-org · Jun 6, 2019 · e34596d · e34596d
1 parent 706e1e7
commit e34596d
Show file tree

Hide file tree

Showing 13 changed files with 973 additions and 671 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -21,6 +21,7 @@
   ],
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
     "prettier/react",

diff --git a/packages/fluent-ui.com/gatsby-config.js b/packages/fluent-ui.com/gatsby-config.js
@@ -28,7 +28,15 @@ module.exports = {
       }
     },
     `gatsby-plugin-typescript`,
-    `gatsby-plugin-eslint`
+    `gatsby-plugin-eslint`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `docs`,
+        path: `${__dirname}/src/docs`
+      }
+    },
+    `gatsby-transformer-remark`
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

diff --git a/packages/fluent-ui.com/gatsby-node.js b/packages/fluent-ui.com/gatsby-node.js
@@ -5,3 +5,42 @@
  */
 
 // You can delete this file if you're not using it
+
+const path = require('path')
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions
+
+  const template = path.resolve(`src/components/template.tsx`)
+
+  return graphql(`
+    {
+      allMarkdownRemark {
+        nodes {
+          frontmatter {
+            title
+            components
+          }
+          rawMarkdownBody
+          html
+          fileAbsolutePath
+        }
+      }
+    }
+  `).then(result => {
+    if (result.errors) {
+      return Promise.reject(result.errors)
+    }
+
+    result.data.allMarkdownRemark.nodes.forEach(node => {
+      const {
+        frontmatter: { title }
+      } = node
+      createPage({
+        path: `/components/${title.toLowerCase()}`,
+        component: template,
+        context: { title } // additional data can be passed via context
+      })
+    })
+  })
+}
diff --git a/packages/fluent-ui.com/package.json b/packages/fluent-ui.com/package.json
@@ -35,13 +35,18 @@
     "gatsby-plugin-sharp": "^2.1.3",
     "gatsby-plugin-typescript": "^2.0.15",
     "gatsby-source-filesystem": "^2.0.38",
+    "gatsby-transformer-remark": "^2.3.12",
     "gatsby-transformer-sharp": "^2.1.21",
+    "markdown-to-jsx": "^6.10.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-live": "^2.1.2"
   },
   "devDependencies": {
+    "@types/markdown-to-jsx": "^6.9.0",
+    "@types/react-helmet": "^5.0.8",
     "eslint": "^5.16.0",
     "eslint-loader": "^2.1.2",
     "gatsby-plugin-eslint": "^2.0.5",