Updating dependencies (#1046)

* fix: docs menu

* Removing explicit dompurify version locking

* Upgrading to node 20

* Renaming whitelist to allowlist

* Upgrading webpack

* Fixing some graphql queries and not mixing import and require in the same files

* Upgrading the monaco editor component and removing faulty config

---------

Co-authored-by: Johannes Tuchscherer <[email protected]>
Co-authored-by: JGAntunes <[email protected]>

Author: 3 people

.github/workflows/deploy.yaml

@@ -16,9 +16,11 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: yarn
-
+          
+      - name: playwright
+        run: npx playwright install --with-deps
       - name: build
         run: make deps build-staging
 
@@ -44,7 +46,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: yarn
 
       - name: build

.github/workflows/preview.yaml

@@ -13,9 +13,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: yarn
-
+      - name: playwright
+        run: npx playwright install --with-deps
       - name: build
         run: make deps build-staging
 

.github/workflows/test.yaml

@@ -10,6 +10,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: yarn
       - run: make deps test

Makefile

@@ -11,17 +11,17 @@ deps:
 	yarn --silent --frozen-lockfile
 
 .PHONY: test
-test:
+test: deps
 	yarn run test
 
 .PHONY: serve
 serve: deps
-	yarn start
+	GOOGLE_ANALYTICS_TRACKING_ID=fake_token yarn start
 
 .PHONY: build-staging
 build-staging: 
 	yarn build-staging
 
 .PHONY: build-production
 build-production: 
-	yarn build
+	yarn build

gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
     title: "kURL.sh",
     apiUrl: process.env.API_URL
   },
+  trailingSlash: "ignore",
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-netlify`,
@@ -46,13 +47,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-env-variables`,
       options: {
-        whitelist: ["KURL_INSTALLER_URL", "KURL_BUNDLE_URL"]
+        allowList: ["KURL_INSTALLER_URL", "KURL_BUNDLE_URL"]
       },
     },
-    {
-      resolve: `gatsby-plugin-create-client-paths`,
-      options: { prefixes: [`/index/*`, `/download/*`, `/docs/*`, `/add-ons/*`] },
-    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {

gatsby-node.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const MonacoWebpackPlugin = require(`monaco-editor-webpack-plugin`);
 
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
   if (stage === 'build-html') {
@@ -11,24 +10,7 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
             use: loaders.null(),
           },
         ],
-      },
-      plugins: [
-        new MonacoWebpackPlugin({
-          languages: [
-            "yaml",
-            "json"
-          ],
-          features: [
-            "coreCommands",
-            "folding",
-            "bracketMatching",
-            "clipboard",
-            "find",
-            "colorDetector",
-            "codelens"
-          ]
-        })
-      ]
+      }
     });
   }
 };
@@ -71,10 +53,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const releaseNotesListTemplate = path.resolve(__dirname, 'src/templates/ReleaseNotesListTemplate.js');
   const results = await graphql(`
     {
-      allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___weight] }
-        limit: 1000
-      ) {
+      allMarkdownRemark(sort: {frontmatter: {weight: DESC}}, limit: 1000) {
         edges {
           node {
             fields {

package.json

@@ -12,60 +12,63 @@
   "author": "Jelena <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@babel/plugin-proposal-decorators": "^7.6.0",
     "@bugsnag/js": "^7.1.0",
     "@bugsnag/plugin-react": "^7.16.2",
     "@docsearch/react": "3",
     "classnames": "^2.2.6",
     "core-js": "^2.6.5",
-    "gatsby": "^2.15.22",
-    "gatsby-cli": "^2.7.50",
-    "gatsby-plugin-create-client-paths": "^2.1.11",
-    "gatsby-plugin-env-variables": "^1.0.1",
-    "gatsby-plugin-google-analytics": "^2.1.31",
-    "gatsby-plugin-netlify": "^2.1.17",
-    "gatsby-plugin-react-helmet": "^3.1.8",
-    "gatsby-plugin-sass": "^2.1.15",
-    "gatsby-remark-autolink-headers": "^2.11.0",
-    "gatsby-remark-mermaid": "^2.1.0",
-    "gatsby-source-filesystem": "^2.1.26",
-    "gatsby-transformer-remark": "^2.16.0",
+    "eslint-config-react-app": "7.0.1",
+    "gatsby": "5.14.0",
+    "gatsby-plugin-env-variables": "^2.3.0",
+    "gatsby-plugin-google-analytics": "^5.14.0",
+    "gatsby-plugin-netlify": "^5.1.1",
+    "gatsby-plugin-react-helmet": "6.14.0",
+    "gatsby-plugin-sass": "6.14.0",
+    "gatsby-remark-autolink-headers": "6.14.0",
+    "gatsby-remark-mermaid": "^5.0.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-remark": "6.14.0",
     "json2yaml": "^1.1.0",
     "lodash": "^4.17.19",
-    "monaco-editor": "^0.18.1",
-    "monaco-editor-webpack-plugin": "^1.7.0",
+    "monaco-editor": "^0.52.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "playwright": "^1.49.0",
     "prop-types": "^15.7.2",
     "puppeteer": "^7.0.4",
     "query-string": "^6.12.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-github-button": "^0.1.11",
     "react-helmet": "^5.2.1",
     "react-modal": "^3.11.2",
-    "react-monaco-editor": "^0.31.0",
-    "react-router-dom": "^5.0.1",
+    "react-monaco-editor": "^0.56.2",
+    "react-router-dom": "7.0.2",
     "react-select": "^3.0.5",
     "react-tooltip": "^3.11.1",
     "semver": "^7.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "babel-jest": "^29.1.0",
     "babel-loader": "^8.0.6",
-    "babel-preset-gatsby": "^0.2.36",
+    "babel-preset-gatsby": "^3.14.0",
     "chai": "^4.3.6",
     "copy-webpack-plugin": "^5.0.4",
     "css-hot-loader": "^1.4.4",
     "css-loader": "^3.2.0",
     "file-loader": "^4.2.0",
+    "gatsby-cli": "5.14.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-template": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.1.1",
+    "jest": "^29.7.0",
     "mocha": "^10.0.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.18.2",
@@ -74,57 +77,7 @@
     "sass": "^1.49.9",
     "sass-loader": "^11.1.1",
     "style-loader": "^1.0.0",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.8",
+    "webpack": "5.97.0",
     "webpack-dev-server": "^3.8.0"
-  },
-  "resolutions": {
-    "minimist": "^1.2.8",
-    "flat": "^5.0.2",
-    "socket.io-parser": "^3.4.2",
-    "loader-utils": "^1.4.1",
-    "parse-url": "^8.1.0",
-    "shell-quote": "^1.7.3",
-    "eventsource": "^1.1.1",
-    "xmlhttprequest-ssl": "^1.6.1",
-    "body-parser": "^1.20.3",
-    "glob-parent": "^5.1.2",
-    "socket.io": "^2.5.1",
-    "node-forge": "^1.3.0",
-    "follow-redirects": "^1.14.7",
-    "sanitize-html": "^2.7.1",
-    "ws": "^7.5.10",
-    "axios": "^0.21.2",
-    "mermaid": "^8.13.8",
-    "object-path": "^0.11.8",
-    "@braintree/sanitize-url": "^6.0.1",
-    "ansi-regex": "^5.0.1",
-    "debug": "^4.3.4",
-    "engine.io": "^3.6.1",
-    "express": "^4.20.0",
-    "hosted-git-info": "^3.0.8",
-    "is-svg": "^4.3.0",
-    "json5": "^2.2.2",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.4",
-    "semver": "^7.5.2",
-    "@hapi/hoek": "^8.5.1",
-    "acorn": "^6.4.1",
-    "ansi-html": "^0.0.8",
-    "braces": "^3.0.3",
-    "d3-color": "^3.1.0",
-    "dns-packet": "^1.3.2",
-    "graphql-playground-html": "^1.6.22",
-    "http-cache-semantics": "^4.1.1",
-    "kind-of": "^6.0.3",
-    "minimatch": "^3.0.5",
-    "node-fetch": "^2.6.7",
-    "nth-check": "^2.0.1",
-    "serialize-javascript": "^6.0.0",
-    "terser": "^4.8.1",
-    "trim": "^0.0.3",
-    "websocket-extensions": "^0.1.4",
-    "y18n": "^5.0.5",
-    "dompurify": "2.4.2"
   }
 }

src/components/DownloadAirgapBundle.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link } from "@reach/router";
+import { Link } from "gatsby";
 
 import CodeSnippet from "./shared/CodeSnippet";
 import Loader from "./shared/Loader";

src/components/Kurlsh.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link } from "@reach/router";
+import { Link } from "gatsby";
 
 import ReactTooltip from "react-tooltip";
 import json2yaml from "json2yaml";

src/components/Sidebar.js

@@ -13,8 +13,8 @@ export default class Sidebar extends Component {
         query={graphql`
       {
         allMarkdownRemark(
-          filter: { fields: { collection: { eq: "markdown-pages" } } }
-          sort: { fields: [frontmatter___weight], order: ASC }
+          filter: {fields: {collection: {eq: "markdown-pages"}}}
+          sort: {frontmatter: {weight: ASC}}
         ) {
           edges {
             node {