diff --git a/.eslintrc.json b/.eslintrc.json index ad3a2a8c..e3e714c2 100644 --- a/.eslintrc.json +++ b/.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" + } + ] } } diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..b009dfb9 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/* diff --git a/content/en/04-tutorials/02-pxl-scripts/01-write-pxl-scripts/index.md b/content/en/04-tutorials/02-pxl-scripts/01-write-pxl-scripts/index.md index 8c276ac2..29e8ed17 100644 --- a/content/en/04-tutorials/02-pxl-scripts/01-write-pxl-scripts/index.md +++ b/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 diff --git a/external/pxl_documentation.json b/external/pxl_documentation.json index 90b6c2e7..3464fb1e 100644 --- a/external/pxl_documentation.json +++ b/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```" diff --git a/gatsby-browser.js b/gatsby-browser.js index ae60a753..2568c52e 100644 --- a/gatsby-browser.js +++ b/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(); }; diff --git a/gatsby-config.js b/gatsby-config.js index eb92d9e4..acff71fa 100755 --- a/gatsby-config.js +++ b/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, diff --git a/gatsby-node.js b/gatsby-node.js index 749dcf56..ae366798 100644 --- a/gatsby-node.js +++ b/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); }; diff --git a/package.json b/package.json index f391f20c..22b8c886 100644 --- a/package.json +++ b/package.json @@ -18,107 +18,101 @@ "snyk-protect": "snyk-protect" }, "resolutions": { - "potrace": "./tools/no-potrace" + "potrace": "./tools/no-potrace", + "lodash": "^4.17.21" }, "dependencies": { - "@apollo/react-hooks": "^3.1.3", - "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@emotion/core": "^10.0.10", - "@emotion/styled-base": "^10.0.10", - "@material-ui/core": "^4.11.0", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.56", - "@material-ui/styles": "^4.10.0", - "@mdx-js/loader": "^1.0.10", - "@mdx-js/mdx": "^1.0.10", - "@mdx-js/react": "^1.0.6", - "@mdx-js/runtime": "^1.6.16", - "@pauliescanlon/gatsby-mdx-embed": "0.0.19", - "@playlyfe/gql": "^2.6.1", - "@snyk/protect": "^1.717.0", - "@styled-icons/fa-solid": "^10.15.1", - "@types/react-helmet": "^5.0.15", - "algoliasearch": "^4.4.0", - "apollo-boost": "^0.4.4", - "apollo-cache-inmemory": "^1.3.2", - "apollo-client": "^2.6.4", - "apollo-link-context": "^1.0.19", - "apollo-link-http": "^1.5.16", - "babel-plugin-styled-components": "^1.10.6", - "dotenv": "^6.2.0", - "emotion-server": "^10.0.9", - "emotion-theming": "^10.0.10", - "emotion": "^10.0.9", - "gatsby-link": "^2.4.6", - "gatsby-plugin-algolia": "^0.11.2", - "gatsby-plugin-emotion": "4.3.4", - "gatsby-plugin-force-trailing-slashes": "1.0.4", + "@apollo/client": "^3.6.9", + "@apollo/react-hooks": "^4.0.0", + "@babel/plugin-proposal-export-default-from": "^7.12.13", + "@emotion/css": "^11.10.0", + "@emotion/react": "^11.10.0", + "@emotion/server": "^11.10.0", + "@emotion/styled": "^11.10.0", + "@mdx-js/mdx": "^1.6.22", + "@mdx-js/react": "^1.6.22", + "@mdx-js/runtime": "^2.0.0-next.9", + "@mui/icons-material": "^5.8.4", + "@mui/lab": "^5.0.0-alpha.94", + "@mui/material": "^5.10.0", + "@mui/styles": "^5.9.3", + "@rebass/components": "^4.0.0-1", + "@snyk/protect": "^1.986.0", + "@styled-icons/fa-solid": "^10.32.0", + "algoliasearch": "^4.13.0", + "assert": "^2.0.0", + "babel-plugin-styled-components": "^2.0.7", + "dotenv": "^14.3.2", + "gatsby": "^4.14.1", + "gatsby-link": "^4.0.0", + "gatsby-plugin-algolia": "^0.26.0", + "gatsby-plugin-feed": "^4.12.1", "gatsby-plugin-google-fonts": "^1.0.1", - "gatsby-plugin-gtag": "^1.0.10", - "gatsby-plugin-layout": "^1.0.15", - "gatsby-plugin-material-ui": "^2.1.9", - "gatsby-plugin-mdx": "^1.0.44", + "gatsby-plugin-gtag": "^1.0.13", + "gatsby-plugin-image": "^2.9.1", + "gatsby-plugin-material-ui": "^4.1.0", + "gatsby-plugin-mdx": "^3.15.2", "gatsby-plugin-meta-redirect": "^1.1.1", - "gatsby-plugin-react-css-modules-scss-support": "^0.1.0", + "gatsby-plugin-react-helmet": "^5.9.0", "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0", - "gatsby-plugin-react-helmet": "^3.0.12", "gatsby-plugin-remove-serviceworker": "^1.0.0", - "gatsby-plugin-sass": "^2.1.27", - "gatsby-plugin-segment-js": "^3.1.0", - "gatsby-plugin-sharp": "^2.6.11", - "gatsby-plugin-sitemap": "^2.0.12", - "gatsby-plugin-styled-components": "^3.3.10", - "gatsby-plugin-typescript": "^2.3.1", - "gatsby-redirect-from": "^0.2.4", - "gatsby-remark-copy-linked-files": "^2.0.11", - "gatsby-remark-images": "3.0.10", - "gatsby-remark-relative-images": "^0.2.3", - "gatsby-source-filesystem": "^2.0.29", - "gatsby-theme-material-ui": "^1.0.10", - "gatsby-transformer-remark": "^2.3.8", - "gatsby": "2.23.3", - "graphql-tag": "^2.10.3", - "graphql": "^14.2.1", + "gatsby-plugin-sass": "^5.9.0", + "gatsby-plugin-segment-js": "^3.7.1", + "gatsby-plugin-sharp": "^4.9.1", + "gatsby-plugin-sitemap": "^5.12.1", + "gatsby-plugin-styled-components": "^5.22.0", + "gatsby-plugin-typescript": "^4.20.0", + "gatsby-redirect-from": "^0.5.0", + "gatsby-remark-copy-linked-files": "^5.12.1", + "gatsby-remark-images": "^6.12.1", + "gatsby-remark-relative-images": "^2.0.2", + "gatsby-source-filesystem": "^4.9.1", + "gatsby-transformer-sharp": "^4.9.0", + "graphql-tag": "^2.12.6", "is-absolute-url": "^2.1.0", - "js-cookie": "^2.2.1", + "js-cookie": "^3.0.1", + "lodash": "^4.17.21", "lodash.groupby": "^4.6.0", "lodash.startcase": "^4.4.0", - "lodash": "^4.17.20", - "prism-react-renderer": "^1.0.2", - "prop-types": "^15.7.2", + "path-browserify": "^1.0.1", + "prism-react-renderer": "^1.3.5", + "process": "^0.11.10", + "prop-types": "^15.8.1", + "react": "^17.0.2", "react-body-classname": "^1.3.1", - "react-dom": "^16.8.6", - "react-emotion": "9.2.12", - "react-helmet": "^5.2.0", - "react-live": "^2.0.1", - "react-markdown": "^4.2.2", + "react-dom": "^17.0.2", + "react-emotion": "^10.0.0", + "react-helmet": "^6.1.0", + "react-live": "^2.2.3", + "react-markdown": "^8.0.3", "react-scrollspy": "^3.4.3", - "react": "^16.13.1", - "remark-containers": "^1.1.2", - "sass": "^1.42.1", - "slugify": "^1.3.6", - "styled-components": "^4.4.1", - "system-components": "^3.0.3", - "typescript": "^3.9.5", + "remark-containers": "^1.2.0", + "sass": "^1.54.4", + "slugify": "^1.6.5", + "styled-components": "^5.3.0", "unist-util-visit": "^2.0.3" }, "devDependencies": { - "@types/node": "^12.12.31", - "@types/react-dom": "^16.9.5", - "@types/react": "^16.9.25", - "@typescript-eslint/eslint-plugin": "^2.24.0", - "@typescript-eslint/parser": "^2.19.0", - "eslint-config-airbnb-typescript": "^7.2.1", - "eslint-config-airbnb": "^18.0.1", - "eslint-config-standard": "^14.1.0", - "eslint-plugin-import": "^2.20.1", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-node": "^11.0.0", - "eslint-plugin-promise": "^4.2.1", - "eslint-plugin-react-hooks": "^2.5.0", - "eslint-plugin-react": "^7.19.0", - "eslint": "^7.16.0", - "prettier": "^1.17.1" + "@types/js-cookie": "^3.0.1", + "@types/mdx-js__react": "^1.5.5", + "@types/node": "^17.0.21", + "@types/react": "^17.0.39", + "@types/react-dom": "^17.0.13", + "@types/react-helmet": "^6.1.5", + "@typescript-eslint/eslint-plugin": "^5.33.0", + "@typescript-eslint/parser": "^5.33.0", + "eslint": "^8.21.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-airbnb-typescript": "^17.0.0", + "eslint-config-standard": "^17.0.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^6.0.0", + "eslint-plugin-react": "^7.30.1", + "eslint-plugin-react-hooks": "^4.6.0", + "gatsby-plugin-netlify": "^5.0.1", + "prettier": "^2.7.1", + "typescript": "^4.6.2" }, "snyk": true } diff --git a/src/YoutubeEmbed.tsx b/src/YoutubeEmbed.tsx index b33cb585..d95924b3 100644 --- a/src/YoutubeEmbed.tsx +++ b/src/YoutubeEmbed.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import './components/styles.css'; -import withStyles from '@material-ui/core/styles/withStyles'; +import { withStyles } from '@mui/styles'; const YoutubeEmbed = withStyles(() => ({ videoResponsive: { diff --git a/src/apollo/client.ts b/src/apollo/client.ts index 03e4075e..3597f929 100644 --- a/src/apollo/client.ts +++ b/src/apollo/client.ts @@ -16,10 +16,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { InMemoryCache } from 'apollo-cache-inmemory'; -import { ApolloClient } from 'apollo-client'; -import { setContext } from 'apollo-link-context'; -import { createHttpLink } from 'apollo-link-http'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'; +import { setContext } from '@apollo/client/link/context'; const cloudFetch = (uri, options) => window.fetch(uri, options).then((resp) => { const result = {}; @@ -30,7 +29,7 @@ const cloudFetch = (uri, options) => window.fetch(uri, options).then((resp) => { return result; }); -const cloudLink = createHttpLink({ +const cloudLink = new HttpLink({ uri: 'https://withpixie.ai/api/unauthenticated/graphql', fetch: cloudFetch, }); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index dd31872d..1df2c7d7 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -17,19 +17,21 @@ */ import React from 'react'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; -import MenuIcon from '@material-ui/icons/Menu'; -import { graphql, Link, StaticQuery } from 'gatsby'; import BodyClassName from 'react-body-classname'; +import { graphql, Link, StaticQuery } from 'gatsby'; +import { + AppBar, + Toolbar, + IconButton, + Hidden, + Button, + ClickAwayListener, +} from '@mui/material'; +import MenuIcon from '@mui/icons-material/Menu'; +import Brightness7Icon from '@mui/icons-material/Brightness7'; +import Brightness4Icon from '@mui/icons-material/Brightness4'; +import { makeStyles } from '@mui/styles'; -import Hidden from '@material-ui/core/Hidden'; -import Button from '@material-ui/core/Button'; -import Brightness7Icon from '@material-ui/icons/Brightness7'; -import Brightness4Icon from '@material-ui/icons/Brightness4'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import logoImg from '../images/pixie-logo-header.svg'; import slackIcon from './images/slack-icon.svg'; import githubIcon from './images/github-icon.svg'; @@ -37,16 +39,6 @@ import SearchResultsDropdown from './search-results-dropdown'; import languages from '../../available-languages'; const useStyles = makeStyles((theme) => ({ - appBar: { - zIndex: theme.zIndex.modal + 1, - }, - toolbar: { - flexGrow: 1, - [theme.breakpoints.up('md')]: { - padding: '0 30px', - paddingLeft: '5px', - }, - }, middle: { flexGrow: 1, }, @@ -80,25 +72,30 @@ const useStyles = makeStyles((theme) => ({ dropMenu: { position: 'absolute', top: `calc(${theme.overrides.MuiToolbar.root.minHeight} / 2 - 4px)`, - boxShadow: theme.palette.type === 'light' ? '0px 15px 130px 0px rgba(0,0,0,0.10)' : '0px 15px 130px 0px rgba(0,0,0,0.45)', + boxShadow: + theme.palette.mode === 'light' + ? '0px 15px 130px 0px rgba(0,0,0,0.10)' + : '0px 15px 130px 0px rgba(0,0,0,0.45)', right: 0, zIndex: 1, - backgroundColor: theme.palette.type === 'light' ? '#212324' : '#212324', + backgroundColor: theme.palette.mode === 'light' ? '#212324' : '#212324', width: '189px', borderRadius: '7px', }, langMenu: { position: 'absolute', top: `calc(${theme.overrides.MuiToolbar.root.minHeight} / 2 - 4px)`, - boxShadow: theme.palette.type === 'light' ? '0px 15px 130px 0px rgba(0,0,0,0.10)' : '0px 15px 130px 0px rgba(0,0,0,0.45)', + boxShadow: + theme.palette.mode === 'light' + ? '0px 15px 130px 0px rgba(0,0,0,0.10)' + : '0px 15px 130px 0px rgba(0,0,0,0.45)', right: 0, zIndex: 1, - backgroundColor: theme.palette.type === 'light' ? '#212324' : '#212324', + backgroundColor: theme.palette.mode === 'light' ? '#212324' : '#212324', borderRadius: '7px', - }, langMenuItem: { - color: theme.palette.type === 'light' ? '#B2B5BB' : '#B2B5BB', + color: theme.palette.mode === 'light' ? '#B2B5BB' : '#B2B5BB', fontSize: '14px', lineHeight: '24px', padding: '14px', @@ -114,7 +111,7 @@ const useStyles = makeStyles((theme) => ({ }, }, dropMenuItem: { - color: theme.palette.type === 'light' ? '#B2B5BB' : '#B2B5BB', + color: theme.palette.mode === 'light' ? '#B2B5BB' : '#B2B5BB', fontSize: '14px', lineHeight: '24px', padding: '14px', @@ -133,30 +130,25 @@ const useStyles = makeStyles((theme) => ({ display: 'block', }, }, - menuItem: { - color: '#ffffff', - }, - })); interface Props { - location: string, - availableLanguages: { lang: string, slug: string }[], - lang: string, - theme: string, - onThemeTypeSwitch: any - setDrawerOpen: any, - drawerOpen: boolean, - setSidebarOpen: any, - sidebarOpen: boolean + availableLanguages: { lang: string; slug: string }[]; + lang: string; + theme: string; + onThemeTypeSwitch: any; + setDrawerOpen: any; + drawerOpen: boolean; + setSidebarOpen: any; + sidebarOpen: boolean; } interface RenderProps { site: { siteMetadata: { - title: string - } - } + title: string; + }; + }; } const Header = ({ @@ -178,25 +170,42 @@ const Header = ({ const [openLanguageMenu, setOpenLanguageMenu] = React.useState(false); const classes = useStyles(); - const getLanguageLabel = (languageId) => (languageId === 'en' ? 'English' : languages.find((l) => l.id === languageId).label); + const getLanguageLabel = (languageId) => (languageId === 'en' + ? 'English' + : languages.find((l) => l.id === languageId).label); + return ( { const siteTitle = data.site.siteMetadata.title; return ( - + // eslint-disable-next-line @typescript-eslint/no-shadow + theme.zIndex.modal + 1 }}> - - + + @@ -205,20 +214,30 @@ const Header = ({
{ e.preventDefault(); onThemeTypeSwitch(); }} > - {theme === 'light' ? : } + {theme === 'light' ? ( + + ) : ( + + )} - - setOpenSupportMenu(false)}> + + setOpenSupportMenu(false)} + >
))} -
) : null} )} - - - + diff --git a/src/components/NextPrevious.tsx b/src/components/NextPrevious.tsx index 53c8721d..e497e220 100644 --- a/src/components/NextPrevious.tsx +++ b/src/components/NextPrevious.tsx @@ -17,33 +17,28 @@ */ import React from 'react'; -import Button from '@material-ui/core/Button'; -import withStyles from '@material-ui/core/styles/withStyles'; -// eslint-disable-next-line -import { Theme } from '@material-ui/core'; + +import { withStyles } from '@mui/styles'; +import { Button } from '@mui/material'; +import { styled } from '@mui/material/styles'; import Link from 'components/link'; import { urlFromSlug } from 'components/utils'; import nextBtn from '../images/btn-next-icon.svg'; import prevBtn from '../images/btn-prev-icon.svg'; -const NextPrevButton = withStyles((theme: Theme) => ({ - root: { - height: '62px', - fontSize: '16px', - lineHeight: '20px', - minWidth: '230px', - display: 'flex', - justifyContent: 'space-between', - marginBottom: '24px', - borderColor: theme.palette.type === 'light' ? '#DBDDE0' : '#353738', - }, - label: { - color: theme.palette.primary.main, - }, - -}))(Button); +const NextPrevButton = styled(Button)(({ theme }) => ({ + height: '62px', + fontSize: '16px', + lineHeight: '20px', + minWidth: '230px', + display: 'flex', + justifyContent: 'space-between', + marginBottom: '24px', + borderColor: theme.palette.mode === 'light' ? '#DBDDE0' : '#353738', + color: theme.palette.primary.main, +})); -const NextPrevious = withStyles((theme: Theme) => ({ +const NextPrevious = withStyles((theme) => ({ main: { paddingTop: theme.spacing(14), paddingBottom: theme.spacing(14), diff --git a/src/components/container.ts b/src/components/container.ts index 284493fa..01a86755 100644 --- a/src/components/container.ts +++ b/src/components/container.ts @@ -16,7 +16,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import system from 'system-components/emotion'; +import system from '@rebass/components'; export const Container = system( { diff --git a/src/components/cookies-banner/cookies-banner.tsx b/src/components/cookies-banner/cookies-banner.tsx index 9bc7d2d4..bbb9ffc5 100644 --- a/src/components/cookies-banner/cookies-banner.tsx +++ b/src/components/cookies-banner/cookies-banner.tsx @@ -16,11 +16,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import * as React from 'react'; -import { useState } from 'react'; +import React, { useState } from 'react'; import Cookies from 'js-cookie'; -import { makeStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import { makeStyles } from '@mui/styles'; +import Button from '@mui/material/Button'; const useStyles = makeStyles(() => ({ banner: { @@ -77,7 +76,12 @@ const CookiesBanner = () => { use of cookies . - diff --git a/src/components/footer.tsx b/src/components/footer.tsx index b3a22f22..0cc7a8e5 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -17,9 +17,8 @@ */ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; -import { Link } from 'gatsby'; import github from './images/github-icon.svg'; const useStyles = makeStyles(() => ({ @@ -75,11 +74,11 @@ const Footer = () => {