Upgrade Gatsby and MUI

.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

external/pxl_documentation.json

@@ -1285,7 +1285,7 @@
         "def": {
           "name": "class Client",
           "declaration": "Client(self, token: str, server_url: str = 'work.withpixie.ai', use_encryption: bool = False, channel_fn: Callable[[str], grpc.Channel] = None, conn_channel_fn: Callable[[str], grpc.aio._base_channel.Channel] = None )",
-          "docstring": "Client is the main entry point to the Pixie API.\n\nTo setup the client, you need to generate an API token\nand pass it in as the first argument.\nSee: https://docs.px.dev/using-pixie/api-quick-start/\nfor more info."
+          "docstring": "Client is the main entry point to the Pixie API.\n\nTo setup the client, you need to generate an API token\nand pass it in as the first argument.\nSee: [https://docs.px.dev/using-pixie/api-quick-start/](https://docs.px.dev/using-pixie/api-quick-start/)\nfor more info."
         },
         "methods": [
           {
@@ -1384,7 +1384,7 @@
         "def": {
           "name": "class Row",
           "declaration": "Row(self, table: pxapi.data._TableStream, data: List[Any])",
-          "docstring": "Row represents a row of data for a particular table. You can easily access\ndata in the row by using the column name from the associated table.\n\nSpecifically designed to avoid allocation memory for the relation for each row.\n\nExamples:\n  \u003e\u003e\u003e tableA = Table(\"a\", relation=((\"cola\",int), (\"colb\", int), (\"colc\", string)))\n  \u003e\u003e\u003e row = Row(tableA, [1,2,\"three\"])\n  \u003e\u003e\u003e row[\"cola\"]\n  1\n  \u003e\u003e\u003e row[\"colb\"]\n  2\n  \u003e\u003e\u003e row[\"colc\"]\n  \"three\"\n  \u003e\u003e\u003e row\n  { \"cola\": 1, \"colb\": 2, \"colc\": \"three\" }"
+          "docstring": "Row represents a row of data for a particular table. You can easily access\ndata in the row by using the column name from the associated table.\n\nSpecifically designed to avoid allocation memory for the relation for each row.\n\nExamples:\n  \u003e\u003e\u003e tableA = Table(\"a\", relation=((\"cola\",int), (\"colb\", int), (\"colc\", string)))\n  \u003e\u003e\u003e row = Row(tableA, [1,2,\"three\"])\n  \u003e\u003e\u003e row[\"cola\"]\n  1\n  \u003e\u003e\u003e row[\"colb\"]\n  2\n  \u003e\u003e\u003e row[\"colc\"]\n  \"three\"\n  \u003e\u003e\u003e row\n  {`{ \"cola\": 1, \"colb\": 2, \"colc\": \"three\" }`}"
         },
         "methods": []
       },
@@ -6145,7 +6145,7 @@
       {
         "name": "redact_pii_best_effort",
         "brief": "Make a best effort to redact Personally Identifiable Information (PII).",
-        "desc": "Replace instances of PII with '\u003cREDACTED_$TYPE\u003e' eg. '\u003cREDACTED_EMAIL\u003e' or '\u003cREDACTED_IPv4\u003e'. Currently, it will (on a best effort basis) redact IP addresses, email addresses, MAC addresses, IMEI numbers, credit card numbers, and IBAN numbers. However, the redaction is not perfect, so it should not be used in a context where privacy needs to be guaranteed.",
+        "desc": "Replace instances of PII with {`'\u003cREDACTED_$TYPE\u003e'`} eg. {`'\u003cREDACTED_EMAIL\u003e'`} or {`'\u003cREDACTED_IPv4\u003e'`}. Currently, it will (on a best effort basis) redact IP addresses, email addresses, MAC addresses, IMEI numbers, credit card numbers, and IBAN numbers. However, the redaction is not perfect, so it should not be used in a context where privacy needs to be guaranteed.",
         "examples": [
           {
             "value": "```\ndf.redacted = px.redact_pii_best_effort(df.req_body)\n```"

gatsby-browser.js

@@ -22,13 +22,21 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 import React from 'react';
+import * as ReactDOM from 'react-dom';
 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';
 
+export const  replaceHydrateFunction = () => {
+  return (element, container, callback) => {
+    ReactDOM.render(element, container, callback);
+  };
+};
+
 export const onClientEntry = () => {
   processClientEntry();
 };

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,11 @@ const algolia = {
 
 const plugins = [
   'gatsby-plugin-sitemap',
-  {
-    resolve: 'gatsby-plugin-material-ui',
-
-  },
+  'gatsby-plugin-sharp',
+  'gatsby-plugin-react-helmet',
+  'gatsby-plugin-material-ui',
   'gatsby-plugin-styled-components',
+  'gatsby-plugin-netlify',
   {
     resolve: 'gatsby-plugin-mdx',
     options: {
@@ -76,7 +77,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 +95,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 +138,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'],
+      },
     },
   },
   {
@@ -156,15 +153,14 @@ const plugins = [
       display: 'block',
     },
   },
-  '@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 +169,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,26 @@ 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
+    context: SitePageContext
+  }
+  type SitePageFields {
+    slug: String
+    id: String
+    title: String
+    level: Int
+    directory: Boolean
+  }
+  type SitePageContext {
+    description: String
+  }
+  `;
   createTypes(typeDefs);
 };