Upgrade Gatsby and MUI

Signed-off-by: Tanisha Agarwal <tanisha.agarwal@joshtechnologygroup.com>

Author: tanisha-agarwal

.eslintrc.json

@@ -35,9 +35,17 @@
     },
     "plugins": [
         "react",
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "import"
     ],
     "rules": {
-        "quotes": [2, "single", "avoid-escape"]
+        "quotes": [2, "single", "avoid-escape"],
+        "react/function-component-definition": [
+            2,
+            {
+              "namedComponents": "arrow-function",
+              "unnamedComponents": "arrow-function"
+            }
+        ]
     }
 }

.nvmrc

@@ -0,0 +1 @@
+lts/*

content/en/04-tutorials/02-pxl-scripts/01-write-pxl-scripts/index.md

@@ -3,8 +3,6 @@ title: "How to Write a PxL Script"
 metaTitle: "Tutorials | PxL Scripts | How to Write a PxL Script"
 metaDescription: "Write Custom PxL Scripts"
 order: 10
-redirect_from:
-    - /tutorials/pxl-scripts
 ---
 
 ## Overview

gatsby-browser.js

@@ -26,6 +26,7 @@ import MainThemeProvider from './src/components/mainThemeProvider.tsx';
 import './src/global.css';
 import SidebarProvider from './src/components/sidebar/sidebarProvider.tsx';
 import SearchProvider from './src/components/search-context.tsx';
+// eslint-disable-next-line import/extensions
 import { processClientEntry, runZoom } from './src/components/image-zoom-modal.plugin.ts';
 import TabSwitcherProvider from './src/components/tabSwitcherProvider.tsx';
 

gatsby-config.js

@@ -49,6 +49,7 @@ const algolia = {
     apiKey: algoliaApiKey,
     indexName: algoliaIndex, // for all queries
     // eslint-disable-next-line global-require
+    // eslint-disable-next-line import/extensions
     queries: require('./src/utils/algolia-queries.ts').queries,
     settings: {
       // optional, any index settings
@@ -63,11 +64,25 @@ const algolia = {
 
 const plugins = [
   'gatsby-plugin-sitemap',
+  'gatsby-plugin-sharp',
+  'gatsby-plugin-emotion',
+  'gatsby-plugin-react-helmet',
+  'gatsby-plugin-material-ui',
+  'gatsby-plugin-styled-components',
+  'gatsby-transformer-json',
   {
-    resolve: 'gatsby-plugin-material-ui',
-
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      name: 'external',
+      path: `${__dirname}/external`,
+    },
+  },
+  {
+    resolve: 'gatsby-transformer-remark',
+    options: {
+      plugins: ['gatsby-remark-images'],
+    },
   },
-  'gatsby-plugin-styled-components',
   {
     resolve: 'gatsby-plugin-mdx',
     options: {
@@ -76,7 +91,7 @@ const plugins = [
           resolve: 'gatsby-remark-relative-images',
         },
         {
-          resolve: require.resolve('./src/plugins/gatsby-plugin-code-tabs.ts'),
+          resolve: require.resolve('./src/plugins/gatsby-plugin-code-tabs'),
         },
         {
           resolve: 'gatsby-remark-images',
@@ -94,21 +109,17 @@ const plugins = [
       extensions: ['.mdx', '.md'],
     },
   },
-  'gatsby-plugin-sharp',
-  'gatsby-plugin-emotion',
-  'gatsby-plugin-force-trailing-slashes',
-  'gatsby-plugin-react-helmet',
   {
-    resolve: 'gatsby-plugin-react-helmet-canonical-urls',
+    resolve: 'gatsby-source-filesystem',
     options: {
-      siteUrl: 'https://docs.px.dev',
+      name: 'en',
+      path: `${__dirname}/content/`,
     },
   },
   {
-    resolve: 'gatsby-source-filesystem',
+    resolve: 'gatsby-plugin-react-helmet-canonical-urls',
     options: {
-      name: 'en',
-      path: `${__dirname}/content/`,
+      siteUrl: 'https://docs.px.dev',
     },
   },
   {
@@ -141,9 +152,9 @@ const plugins = [
   {
     resolve: 'gatsby-plugin-sass',
     options: {
-      includePaths: ['node_modules', './src/scss'],
-      // eslint-disable-next-line global-require
-      implementation: require('sass'),
+      sassOptions: {
+        includePaths: ['node_modules', './src/scss'],
+      },
     },
   },
   {
@@ -158,13 +169,13 @@ const plugins = [
   },
   '@pauliescanlon/gatsby-mdx-embed',
   'gatsby-plugin-remove-serviceworker',
+  'gatsby-plugin-meta-redirect',
   {
     resolve: 'gatsby-redirect-from',
     options: {
       query: 'allMdx',
     },
   },
-  'gatsby-plugin-meta-redirect',
 ];
 
 if ('GATSBY_ALGOLIA_APP_ID' in process.env) {
@@ -173,6 +184,7 @@ if ('GATSBY_ALGOLIA_APP_ID' in process.env) {
 
 module.exports = {
   pathPrefix: config.gatsby.pathPrefix,
+  trailingSlash: 'always',
   siteMetadata: {
     title: config.siteMetadata.title,
     description: config.siteMetadata.description,

gatsby-node.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
 /*
  * Copyright 2018- The Pixie Authors.
  *
@@ -262,15 +263,24 @@ exports.createPages = ({
     );
   });
 };
-exports.onCreateWebpackConfig = ({ actions }) => {
+exports.onCreateWebpackConfig = ({ actions, plugins }) => {
   actions.setWebpackConfig({
     resolve: {
       modules: [path.resolve(__dirname, 'src'), 'node_modules'],
       alias: { $components: path.resolve(__dirname, 'src/components') },
+      fallback: { 
+        fs: false,
+        path: require.resolve('path-browserify'),
+        process: require.resolve('process/browser'),
+        buffer: require.resolve('buffer'),
+      },
     },
-    node: {
-      fs: 'empty',
-    },
+    plugins: [
+      plugins.provide({
+        process: 'process/browser',
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    ],
   });
 };
 
@@ -441,13 +451,22 @@ exports.onCreateNode = ({
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
-            type Mdx implements Node {
-            frontmatter: MdxFrontmatter
-            }
-            type MdxFrontmatter @infer {
-
-            hidden: Boolean
-            }
-            `;
+  type Mdx implements Node {
+    frontmatter: MdxFrontmatter
+  }
+  type MdxFrontmatter @infer {
+    hidden: Boolean
+  }
+  type SitePage implements Node {
+    fields: SitePageFields
+  }
+  type SitePageFields {
+    slug: String
+    id: String
+    title: String
+    level: Int
+    directory: Boolean
+  }
+  `;
   createTypes(typeDefs);
 };