wip: JWT blog post

Author: Pavel910

.prettierrc.js

@@ -1,12 +1,14 @@
 module.exports = {
     printWidth: 100,
     tabWidth: 2,
+    singleQuote: false,
+    trailingComma: "all",
     overrides: [
         {
             files: "*.js",
             options: {
-                tabWidth: 4
-            }
-        }
-    ]
+                tabWidth: 4,
+            },
+        },
+    ],
 };

README.md

@@ -1,21 +1,25 @@
 # gatsby-starter-default
+
 The default Gatsby starter.
 
 For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
 
 ## Install
 
 Make sure that you have the Gatsby CLI program installed:
+
 ```sh
 npm install --global gatsby-cli
 ```
 
 And run from your CLI:
+
 ```sh
 gatsby new gatsby-example-site
 ```
 
 Then you can run it by:
+
 ```sh
 cd gatsby-example-site
 gatsby develop

gatsby-browser.js

@@ -6,8 +6,8 @@
 
 // You can delete this file if you're not using it
 
-exports.onRouteUpdate = ({location, prevLocation}) => {
-  if (window.posthog) {
-    window.posthog.capture ('$pageview');
-  }
+exports.onRouteUpdate = ({ location, prevLocation }) => {
+    if (window.posthog) {
+        window.posthog.capture("$pageview");
+    }
 };

gatsby-config.js

@@ -1,103 +1,109 @@
 module.exports = {
-  siteMetadata: {
-    title: 'Webiny',
-  },
-  plugins: [
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
-    {
-      resolve: 'gatsby-plugin-google-fonts',
-      options: {
-        fonts: [
-          'source sans pro:300,400,500,600,700',
-          'source code pro:400,700',
-          'open sans:300,400,600,700',
-        ],
-      },
+    siteMetadata: {
+        title: "Webiny",
     },
-    {
-      resolve: 'gatsby-plugin-emotion',
-      options: {
-        sourceMap: true,
-        autoLabel: true,
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-google-marketing-platform',
-      options: {
-        dataLayer: {
-          // Preset dataLayer values
-          gaPropertyId: 'UA-35527198-1',
+    plugins: [
+        "gatsby-plugin-react-helmet",
+        "gatsby-plugin-sharp",
+        "gatsby-transformer-sharp",
+        {
+            resolve: "gatsby-plugin-google-fonts",
+            options: {
+                fonts: [
+                    "source sans pro:300,400,500,600,700",
+                    "source code pro:400,700",
+                    "open sans:300,400,600,700",
+                ],
+            },
         },
-        analytics: {
-          id: 'UA-35527198-1',
+        {
+            resolve: "gatsby-plugin-emotion",
+            options: {
+                sourceMap: true,
+                autoLabel: true,
+            },
         },
-        optimize: {
-          id: 'GTM-NJG8KQL',
-          timeout: 1000,
-          activateOn: 'observer',
+        {
+            resolve: "gatsby-plugin-google-marketing-platform",
+            options: {
+                dataLayer: {
+                    // Preset dataLayer values
+                    gaPropertyId: "UA-35527198-1",
+                },
+                analytics: {
+                    id: "UA-35527198-1",
+                },
+                optimize: {
+                    id: "GTM-NJG8KQL",
+                    timeout: 1000,
+                    activateOn: "observer",
+                },
+            },
         },
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-facebook-pixel',
-      options: {
-        pixelId: '581721448994639',
-      },
-    },
-    {
-      resolve: `gatsby-plugin-twitter-pixel`,
-      options: {
-        pixelId: 'o4gd9',
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-hotjar-tracking',
-      options: {
-        includeInDevelopment: false,
-        id: 637057,
-        sv: 6,
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-react-svg',
-      options: {
-        rule: {
-          include: /\.inline\.svg$/,
+        {
+            resolve: "gatsby-plugin-facebook-pixel",
+            options: {
+                pixelId: "581721448994639",
+            },
         },
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        path: `${__dirname}/src/blogPosts`,
-      },
-    },
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [
-          {
-            resolve: `gatsby-remark-images`,
+        {
+            resolve: `gatsby-plugin-twitter-pixel`,
             options: {
-              maxWidth: 800,
+                pixelId: "o4gd9",
             },
-          },
-          {
-            resolve: `gatsby-remark-copy-linked-files`,
+        },
+        {
+            resolve: "gatsby-plugin-hotjar-tracking",
             options: {
-              ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
+                includeInDevelopment: false,
+                id: 637057,
+                sv: 6,
             },
-          },
-          {
-            resolve: 'gatsby-remark-embed-gist',
-          },
-          {
-            resolve: '@weknow/gatsby-remark-twitter',
-          },
-        ],
-      },
-    },
-  ],
+        },
+        {
+            resolve: "gatsby-plugin-react-svg",
+            options: {
+                rule: {
+                    include: /\.inline\.svg$/,
+                },
+            },
+        },
+        {
+            resolve: "gatsby-source-filesystem",
+            options: {
+                path: `${__dirname}/src/blogPosts`
+            },
+        },
+        {
+            resolve: `gatsby-plugin-mdx`,
+            options: {
+                extensions: [`.mdx`]
+            },
+        },
+        {
+            resolve: `gatsby-transformer-remark`,
+            options: {
+                plugins: [
+                    {
+                        resolve: `gatsby-remark-images`,
+                        options: {
+                            maxWidth: 800,
+                        },
+                    },
+                    {
+                        resolve: `gatsby-remark-copy-linked-files`,
+                        options: {
+                            ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
+                        },
+                    },
+                    {
+                        resolve: "gatsby-remark-embed-gist",
+                    },
+                    {
+                        resolve: "@weknow/gatsby-remark-twitter",
+                    },
+                ],
+            },
+        },
+    ],
 };

gatsby-node.js

@@ -5,44 +5,40 @@
  */
 
 // You can delete this file if you're not using it
-exports.createPages = async ({actions, graphql, reporter}) => {
-  const {createPage} = actions;
+exports.createPages = async ({ actions, graphql, reporter }) => {
+    const { createPage } = actions;
 
-  const blogPostTemplate = require.resolve (
-    `./src/components/blog/blogTemplate.js`
-  );
+    const blogPostTemplate = require.resolve(`./src/components/blog/blogTemplate.js`);
 
-  const result = await graphql (`
-      {
-        allMarkdownRemark(
-          limit: 1000
-        ) {
-          edges {
-            node {
-              frontmatter {
-                slug
-              }
+    const result = await graphql(`
+        {
+            allMdx {
+                edges {
+                    node {
+                        frontmatter {
+                            slug
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     `);
 
-  // Handle errors
-  if (result.errors) {
-    reporter.panicOnBuild (`Error while running GraphQL query.`);
-    console.log (result);
-    return;
-  }
+    // Handle errors
+    if (result.errors) {
+        reporter.panicOnBuild(`Error while running GraphQL query.`);
+        console.log(result);
+        return;
+    }
 
-  result.data.allMarkdownRemark.edges.forEach (({node}) => {
-    createPage ({
-      path: node.frontmatter.slug,
-      component: blogPostTemplate,
-      context: {
-        // additional data can be passed via context
-        slug: node.frontmatter.slug,
-      },
+    result.data.allMdx.edges.forEach(({ node }) => {
+        createPage({
+            path: node.frontmatter.slug,
+            component: blogPostTemplate,
+            context: {
+                // additional data can be passed via context
+                slug: node.frontmatter.slug,
+            },
+        });
     });
-  });
 };

package.json

@@ -4,6 +4,8 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "@mdx-js/mdx": "^1.6.18",
+    "@mdx-js/react": "^1.6.18",
     "@weknow/gatsby-remark-twitter": "^0.2.3",
     "aos": "^2.3.4",
     "babel-plugin-emotion": "^9.2.3",
@@ -16,12 +18,14 @@
     "gatsby": "^2.0.0",
     "gatsby-image": "^2.4.18",
     "gatsby-link": "^2",
+    "gatsby-mdx-fix": "^0.0.3",
     "gatsby-plugin-emotion": "^2",
     "gatsby-plugin-facebook-pixel": "^1.0.3",
     "gatsby-plugin-google-analytics": "^2.0.17",
     "gatsby-plugin-google-fonts": "0.0.4",
     "gatsby-plugin-google-marketing-platform": "^0.1.20",
     "gatsby-plugin-hotjar-tracking": "^1.0.0",
+    "gatsby-plugin-mdx": "^1.2.40",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3",
     "gatsby-plugin-react-svg": "^3.0.0",
@@ -61,7 +65,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write 'src/**/*.js'",
+    "format": "prettier --write \"**/**/*.{js,jsx,ts,tsx,md}\" --config .prettierrc.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {