Adds MDX support and a Tab component for the different examples

website/gatsby-browser.js

@@ -1 +1,10 @@
+// https://github.com/FormidableLabs/prism-react-renderer/issues/53#issuecomment-546653848
+import Prism from "prismjs";
 import "prismjs/themes/prism-tomorrow.css";
+
+(typeof global !== "undefined" ? global : window).Prism = Prism;
+require("prismjs/components/prism-csharp");
+require("prismjs/components/prism-graphql");
+require("prismjs/components/prism-json");
+require("prismjs/components/prism-bash");
+require("prismjs/components/prism-sql");

website/gatsby-config.js

@@ -38,6 +38,30 @@ module.exports = {
     `gatsby-plugin-ts`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
+    `gatsby-remark-reading-time`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        extensions: [`.mdx`, `.md`],
+        gatsbyRemarkPlugins: [
+          {
+            resolve: `gatsby-remark-mermaid`,
+            options: {
+              mermaidOptions: {
+                fontFamily: "sans-serif",
+              },
+            },
+          },
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 800,
+              quality: 90,
+            },
+          },
+        ],
+      },
+    },
     {
       resolve: `gatsby-plugin-react-redux`,
       options: {
@@ -80,58 +104,6 @@ module.exports = {
       },
     },
     `gatsby-transformer-json`,
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [
-          {
-            resolve: `gatsby-remark-autolink-headers`,
-            options: {
-              offsetY: 60,
-              icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>`,
-            },
-          },
-          `gatsby-remark-reading-time`,
-          {
-            resolve: `gatsby-remark-mermaid`,
-            options: {
-              mermaidOptions: {
-                fontFamily: "sans-serif",
-              },
-            },
-          },
-          {
-            resolve: `gatsby-remark-code-buttons`,
-            options: {
-              tooltipText: `Copy`,
-              toasterText: "Copied code example",
-            },
-          },
-          {
-            resolve: `gatsby-remark-prismjs`,
-            options: {
-              showLineNumbers: false,
-              inlineCodeMarker: `±`,
-              languageExtensions: [
-                {
-                  language: "sdl",
-                  extend: "graphql",
-                  definition: {},
-                  insertBefore: {},
-                },
-              ],
-            },
-          },
-          {
-            resolve: `gatsby-remark-images`,
-            options: {
-              maxWidth: 800,
-              quality: 90,
-            },
-          },
-        ],
-      },
-    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
@@ -215,7 +187,7 @@ module.exports = {
         feeds: [
           {
             query: `{
-              allMarkdownRemark(
+              allMdx(
                 limit: 100
                 filter: { frontmatter: { path: { regex: "//blog(/.*)?/" } } }
                 sort: { order: DESC, fields: [frontmatter___date] },
@@ -244,14 +216,14 @@ module.exports = {
             }`,
             serialize: ({
               query: {
-                allMarkdownRemark,
+                allMdx,
                 site: {
                   pathPrefix,
                   siteMetadata: { siteUrl },
                 },
               },
             }) =>
-              allMarkdownRemark.edges.map(({ node }) => {
+              allMdx.edges.map(({ node }) => {
                 const date = new Date(Date.parse(node.frontmatter.date));
                 const imgSrcPattern = new RegExp(
                   `(${pathPrefix})?/static/`,

website/gatsby-node.js

@@ -8,7 +8,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   );
   const result = await graphql(`
     {
-      blog: allMarkdownRemark(
+      blog: allMdx(
         limit: 1000
         filter: { frontmatter: { path: { regex: "//blog(/.*)?/" } } }
         sort: { order: DESC, fields: [frontmatter___date] }
@@ -124,7 +124,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
 
-  if (node.internal.type === `MarkdownRemark`) {
+  if (node.internal.type === `Mdx`) {
     const value = createFilePath({ node, getNode });
     createNodeField({
       name: `slug`,

website/mdx.types.ts

@@ -0,0 +1,34 @@
+declare module "@mdx-js/react" {
+  import * as React from "react";
+  type ComponentType =
+    | "a"
+    | "blockquote"
+    | "code"
+    | "del"
+    | "em"
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "hr"
+    | "img"
+    | "inlineCode"
+    | "li"
+    | "ol"
+    | "p"
+    | "pre"
+    | "strong"
+    | "sup"
+    | "table"
+    | "td"
+    | "thematicBreak"
+    | "tr"
+    | "ul";
+  export interface MDXProviderProps {
+    children: React.ReactNode;
+    components: Record<any, React.ComponentType<any>>;
+  }
+  export class MDXProvider extends React.Component<MDXProviderProps> {}
+}

website/package.json

@@ -23,12 +23,15 @@
   },
   "dependencies": {
     "@darth-knoppix/gatsby-plugin-feed": "^2.0.2",
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
     "algoliasearch": "^4.8.3",
     "gatsby": "^2.30.1",
     "gatsby-image": "^2.9.0",
     "gatsby-plugin-disqus": "^1.2.2",
     "gatsby-plugin-google-analytics": "^2.9.0",
     "gatsby-plugin-manifest": "^2.10.0",
+    "gatsby-plugin-mdx": "^1.7.1",
     "gatsby-plugin-offline": "^3.8.0",
     "gatsby-plugin-react-helmet": "^3.8.0",
     "gatsby-plugin-react-redux": "^1.1.0-0",
@@ -38,16 +41,14 @@
     "gatsby-plugin-styled-components": "^3.8.0",
     "gatsby-plugin-ts": "^2.2.3",
     "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-remark-autolink-headers": "^2.9.0",
-    "gatsby-remark-code-buttons": "^2.0.4",
     "gatsby-remark-images": "^3.9.0",
     "gatsby-remark-mermaid": "^2.1.0",
-    "gatsby-remark-prismjs": "^3.11.0",
     "gatsby-remark-reading-time": "^1.1.0",
     "gatsby-source-filesystem": "^2.9.0",
     "gatsby-transformer-json": "^2.9.0",
-    "gatsby-transformer-remark": "^2.14.0",
     "gatsby-transformer-sharp": "^2.10.0",
+    "github-slugger": "^1.3.0",
+    "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.23.0",
     "puppeteer": "^5.5.0",
     "react": "^17.0.1",
@@ -62,6 +63,7 @@
   },
   "devDependencies": {
     "@types/algoliasearch": "^3.34.10",
+    "@types/prismjs": "^1.16.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
@@ -81,4 +83,4 @@
       "pre-commit": "pretty-quick --pattern \"./**/*\" --staged"
     }
   }
-}
+}

website/src/blog/2019-01-24-schema-stitching.md

@@ -171,7 +171,7 @@ foo(id:123) {
 
 Since, we did not want to cram a query like this into one string we allow this to be done with a flat path.
 
-```
+```text
 foo(id:$arguments:arg1).bar.baz(top:1)
 ```
 
@@ -307,7 +307,7 @@ HTTP directives let you decorate a schema SDL and thus let you map REST services
 
 Moreover, we will introduce a cast feature to our delegation path. This will basically allow you to use fragments without having to write the code.
 
-```
+```text
 foo.bar<baz>(a:1).qux(b:1)
 ```
 

website/src/components/articles/article-elements.tsx

@@ -60,23 +60,6 @@ export const ArticleContent = styled.div`
     }
   }
 
-  > .gatsby-code-button-container {
-    padding: 0;
-  }
-
-  > .gatsby-highlight {
-    padding-right: 0;
-    padding-left: 0;
-
-    > pre[class*="language-"] {
-      padding: 30px 20px;
-
-      ::before {
-        left: 20px;
-      }
-    }
-  }
-
   @media only screen and (min-width: 820px) {
     > * {
       padding-right: 50px;
@@ -108,10 +91,6 @@ export const ArticleContent = styled.div`
       }
     }
 
-    > .gatsby-code-button-container {
-      padding: 0;
-    }
-
     > .gatsby-highlight {
       > pre[class*="language-"] {
         padding-right: 50px;