Merge pull request #2 from howtographql/mdx-config

Mdx config

Author: rohit-ravikoti

oss

@@ -7,7 +7,8 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "site": "yarn workspace @howtographql/oss"
+    "site": "yarn workspace @howtographql/oss",
+    "theme": "yarn workspace @howtographql/gatsby-theme"
   },
   "workspaces": {
     "packages": [

package.json

@@ -1 +1,4 @@
-require('prismjs/themes/prism-tomorrow.css');
+import { wrapRootElement as wrap } from "./wrap-root-element";
+// require("prismjs/themes/prism-tomorrow.css");
+
+export const wrapRootElement = wrap;

packages/gatsby-theme/gatsby-browser.js

@@ -12,31 +12,30 @@ module.exports = (opts = {}) => {
       "gatsby-plugin-sharp",
       "gatsby-plugin-typescript",
       "gatsby-plugin-root-import",
-      "gatsby-transformer-remark",
       "gatsby-image",
       "gatsby-plugin-styled-components",
       "gatsby-plugin-offline",
       {
         resolve: `gatsby-mdx`,
         options: {
-          decks: [],
-          defaultLayouts: {
-            default: require.resolve("./src/components/postLayout.tsx"),
-            ...mdxLayouts
-          },
-          extensions: [".mdx", ".md"],
-          gatsbyRemarkPlugins: [
-            {
-              resolve: "gatsby-remark-prismjs",
-              options: {
-                classPrefix: "language-",
-                inlineCodeMarker: {
-                  tsx: "tsx"
-                },
-                aliases: {}
-              }
-            }
-          ]
+          // decks: [],
+          // defaultLayouts: {
+          //   default: require.resolve("./src/components/postLayout.tsx"),
+          //   ...mdxLayouts
+          // },
+          extensions: [".mdx", ".md"]
+          // gatsbyRemarkPlugins: [
+          //   {
+          //     resolve: "gatsby-remark-prismjs",
+          //     options: {
+          //       classPrefix: "language-",
+          //       inlineCodeMarker: {
+          //         tsx: "tsx"
+          //       },
+          //       aliases: {}
+          //     }
+          //   }
+          // ]
         }
       },
       {

packages/gatsby-theme/gatsby-config.js

@@ -1,8 +1,10 @@
 // const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope');
-const { getTutorialPath } = require('./src/utils/getTutorialPath.js');
+const { getTutorialPath } = require("./src/utils/getTutorialPath.js");
+const path = require("path");
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
+  const postLayout = require.resolve(`./src/components/postLayout.tsx`);
 
   const { data } = await graphql(`
     {
@@ -23,10 +25,10 @@ exports.createPages = async ({ graphql, actions }) => {
     const tutorialPath = getTutorialPath(node.fileAbsolutePath);
     createPage({
       path: tutorialPath,
-      component: node.fileAbsolutePath,
+      component: postLayout, // node.fileAbsolutePath,
       context: {
-        pagePath: node.frontmatter.path,
-      },
+        pagePath: node.frontmatter.path
+      }
     });
   });
 };

packages/gatsby-theme/gatsby-node.js

@@ -44,13 +44,15 @@
     "gatsby-plugin-styled-components": "^3.0.7",
     "gatsby-plugin-typescript": "^2.0.11",
     "gatsby-plugin-typography": "^2.2.13",
-    "gatsby-remark-prismjs": "^3.2.5",
     "gatsby-source-filesystem": "^2.0.24",
     "gatsby-transformer-remark": "^2.3.2",
     "gatsby-transformer-sharp": "^2.1.17",
+    "mdx-utils": "^0.1.1",
+    "prism-react-renderer": "^0.1.6",
     "prismjs": "^1.15.0",
     "prop-types": "^15.7.2",
     "react-helmet": "^5.2.0",
+    "react-live": "^2.0.1",
     "react-typography": "^0.16.19",
     "styled-components": "^4.1.3",
     "typography": "^0.16.19"
@@ -89,4 +91,4 @@
       "html"
     ]
   }
-}
+}

packages/gatsby-theme/package.json

@@ -0,0 +1,50 @@
+import React from 'react'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import DraculaTheme from 'prism-react-renderer/themes/dracula'
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
+import Prism from 'prismjs/components/prism-core';
+
+Prism.languages.graphql = { comment: /#.*/, string: { pattern: /"(?:\\.|[^\\"\r\n])*"/, greedy: !0 }, number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i, "boolean": /\b(?:true|false)\b/, variable: /\$[a-z_]\w*/i, directive: { pattern: /@[a-z_]\w*/i, alias: "function" }, "attr-name": /[a-z_]\w*(?=\s*(?:\([^()]*\))?:)/i, keyword: [{ pattern: /(fragment\s+(?!on)[a-z_]\w*\s+|\.{3}\s*)on\b/, lookbehind: !0 }, /\b(?:query|fragment|mutation)\b/], operator: /!|=|\.{3}/, punctuation: /[!(){}\[\]:=,]/ };
+
+export const Code = (props) => {
+  return <div style={{ position: "relative" }}>
+    <CodeRenderer {...props} />
+    <button
+      style={{ position: "absolute", top: 10, right: 10 }}
+      onClick={() => {
+        // Copying code here!
+      }}
+    >
+      Copy
+    </button>
+  </div>
+}
+
+const CodeRenderer = ({ codeString, language, ...props }) => {
+  console.log(codeString, language);
+  if (props['react-live']) {
+    return (
+      <LiveProvider code={codeString} noInline={true}>
+        <LiveEditor />
+        <LiveError />
+        <LivePreview />
+      </LiveProvider>
+    )
+  } else {
+    return (
+      <Highlight {...defaultProps} theme={DraculaTheme} Prism={Prism} code={codeString} language={language}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={style}>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    )
+  }
+}

packages/gatsby-theme/src/components/code.tsx

@@ -0,0 +1,2 @@
+declare module 'gatsby-mdx';
+declare module 'prismjs/components/prism-core';

packages/gatsby-theme/src/components/index.d.ts

@@ -1,7 +1,9 @@
-import { RouterProps } from '@reach/router';
 import * as React from 'react';
+import { RouterProps } from '@reach/router';
 import { PostQueryData } from '../interfaces/PostQuery.interface';
 import Layout from './layout';
+import { MDXRenderer } from "gatsby-mdx";
+import { graphql } from "gatsby";
 
 type PostLayoutProps = PostQueryData & RouterProps;
 
@@ -14,15 +16,30 @@ const PostLayout: React.FunctionComponent<PostLayoutProps> = ({
   }
 
   const { title, date } = data.mdx.frontmatter;
-  const { location, children } = props;
+  const { location } = props;
 
   return (
     <Layout location={location}>
       <h1>{title}</h1>
       <em>{date}</em>
-      {children}
+      <MDXRenderer>{data.mdx.code.body}</MDXRenderer>
     </Layout>
   );
 };
 
 export default PostLayout;
+
+export const pageQuery = graphql`
+  query MDXQuery($pagePath: String!) {
+    mdx(frontmatter: { path: { eq: $pagePath } }) {
+      id
+      code {
+        body
+      }
+      frontmatter {
+        path
+        title
+      }
+    }
+  }
+`;

packages/gatsby-theme/src/components/postLayout.tsx

@@ -12,6 +12,10 @@ export const useAllTutorialQuery = () => {
             frontmatter {
               path
               title
+              description
+            }
+            code {
+              body
             }
           }
         }

packages/gatsby-theme/src/hooks/useAllTutorialQuery.ts

@@ -0,0 +1 @@
+declare module 'gatsby-mdx/mdx-renderer';

packages/gatsby-theme/src/index.d.ts

@@ -4,7 +4,11 @@ export interface PostQueryData {
       frontmatter: {
         path: string;
         title: string;
+        date: Date
       };
+      code: {
+        body: any
+      }
     };
   };
 }

packages/gatsby-theme/src/interfaces/PostQuery.interface.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { MDXProvider } from "@mdx-js/react";
+import { preToCodeBlock } from "mdx-utils";
+import { Code } from "./src/components/code";
+
+// components is its own object outside of render so that the references to
+// components are stable
+const components = {
+  pre: preProps => {
+    const props = preToCodeBlock(preProps);
+    // if there's a codeString and some props, we passed the test
+    if (props) {
+      return <Code {...props} />;
+    } else {
+      // it's possible to have a pre without a code in it
+      return <pre {...preProps} />;
+    }
+  }
+};
+export const wrapRootElement = ({ element }) => {
+  return <MDXProvider components={components}>{element}</MDXProvider>;
+};