Upgrade Gatsby

website/.gitignore

@@ -1,69 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# dotenv environment variables file
-.env
-
-# gatsby files
 .cache/
 public
-
-# Mac files
-.DS_Store
-
-# Yarn
-yarn-error.log
-.pnp/
-.pnp.js
-# Yarn Integrity file
-.yarn-integrity
+src/gatsby-types.d.ts

website/gatsby-config.ts

@@ -0,0 +1,52 @@
+import type { GatsbyConfig } from 'gatsby'
+
+// 1. custom env var
+// 2. netlify deployment
+// 3. main site
+const siteUrl = process.env.SITE_URL || process.env.DEPLOY_URL || 'https://nivo.rocks' // no trailing slash
+
+const config: GatsbyConfig = {
+    siteMetadata: {
+        title: `nivo`,
+        description: `Supercharged React dataviz components.`,
+        siteUrl,
+        og: {
+            siteName: 'nivo',
+            twitterCreator: '@benitteraphael',
+        },
+    },
+    // More easily incorporate content into your pages through
+    // automatic TypeScript type generation and better GraphQL IntelliSense.
+    // If you use VSCode you can also use the GraphQL plugin
+    // Learn more at: https://gatsby.dev/graphql-typegen
+    graphqlTypegen: true,
+    plugins: [
+        'gatsby-plugin-pnpm',
+        'gatsby-plugin-react-helmet',
+        {
+            resolve: 'gatsby-source-filesystem',
+            options: {
+                name: 'assets',
+                path: './src/assets',
+            },
+        },
+        'gatsby-plugin-image',
+        'gatsby-transformer-sharp',
+        'gatsby-plugin-sharp',
+        'gatsby-plugin-styled-components',
+        {
+            resolve: 'gatsby-plugin-manifest',
+            options: {
+                name: 'nivo',
+                short_name: 'nivo',
+                start_url: `/`,
+                background_color: '#333333',
+                theme_color: '#333333',
+                display: 'minimal-ui',
+                icon: `src/assets/icons/nivo-icon.png`, // This path is relative to the root of the site.
+            },
+        },
+    ],
+}
+
+export default config

website/gatsby-browser.js → website/gatsby-ssr.tsx

@@ -13,12 +13,3 @@ export const wrapPageElement = ({ element }) => (
         {element}
     </PageWrapper>
 )
-
-export const onServiceWorkerUpdateReady = () => {
-    const answer = window.confirm([
-        `The documentation has been updated,`,
-        `would you like to reload to display the latest version?`
-    ].join(''))
-
-    if (answer === true) window.location.reload()
-}

website/package.json

@@ -40,25 +40,25 @@
     "@types/styled-components": "^5.1.18",
     "babel-plugin-styled-components": "^2.0.2",
     "dedent-js": "^1.0.1",
-    "gatsby": "^4.25.6",
+    "gatsby": "^5.9.0",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-image": "^2.4.0",
-    "gatsby-plugin-manifest": "^4.4.0",
-    "gatsby-plugin-offline": "^5.4.0",
+    "gatsby-plugin-image": "^3.9.0",
+    "gatsby-plugin-manifest": "^5.9.0",
+    "gatsby-plugin-offline": "^6.9.0",
     "gatsby-plugin-pnpm": "^1.2.10",
-    "gatsby-plugin-react-helmet": "^5.4.0",
-    "gatsby-plugin-sharp": "^4.4.0",
-    "gatsby-plugin-styled-components": "^5.4.0",
-    "gatsby-source-filesystem": "^4.4.0",
-    "gatsby-transformer-sharp": "^4.4.0",
-    "prism-react-renderer": "^1.2.1",
+    "gatsby-plugin-react-helmet": "^6.9.0",
+    "gatsby-plugin-sharp": "^5.9.0",
+    "gatsby-plugin-styled-components": "^6.9.0",
+    "gatsby-source-filesystem": "^5.9.0",
+    "gatsby-transformer-sharp": "^5.9.0",
+    "prism-react-renderer": "^2.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
-    "react-markdown": "^7.1.1",
+    "react-markdown": "^8.0.7",
     "react-select": "^4.3.1",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.10",
     "d3-scale": "^3.2.3",
     "@types/d3-scale": "^3.2.3",
     "d3-shape": "^1.3.5",
@@ -69,11 +69,14 @@
     "@types/d3-format": "^1.4.1"
   },
   "scripts": {
-    "build": "NODE_OPTIONS=--max-old-space-size=8192 gatsby build",
+    "develop": "gatsby develop",
     "start": "gatsby develop",
-    "serve": "gatsby serve"
+    "build": "NODE_OPTIONS=--max-old-space-size=8192 gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "typecheck": "tsc --noEmit"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   }
 }

website/src/components/Highlight.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import HighlightBase, { defaultProps, Language } from 'prism-react-renderer'
+import { Highlight as HighlightBase } from 'prism-react-renderer'
 import { useTheme } from 'styled-components'
 
 interface HighlightProps {
     code: string
-    language: Language
+    language: string
 }
 
 export const Highlight = ({ code, language }: HighlightProps) => {
     const theme = useTheme()
 
     return (
-        <HighlightBase {...defaultProps} theme={theme.highlight} code={code} language={language}>
+        <HighlightBase theme={theme.highlight} code={code} language={language}>
             {({ style, tokens, getLineProps, getTokenProps }) => (
                 <pre
                     style={{

website/tsconfig.json

@@ -1,9 +1,15 @@
 {
-  "include": ["./src/**/*"],
-  "exclude": ["node_modules"],
+  "include": [
+    "./src/**/*",
+    "./gatsby-browser.tsx",
+    "./gatsby-node.ts",
+    "./gatsby-config.ts",
+    "./gatsby-ssr.tsx",
+    "./plugins/**/*"
+  ],
   "compilerOptions": {
-    "lib": ["ES2020", "DOM"],
-    "target": "es5",
+    "lib": ["dom", "esnext"],
+    "target": "esnext",
     "jsx": "react",
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
@@ -14,9 +20,6 @@
     "noFallthroughCasesInSwitch": true,
     "typeRoots": ["node_modules/@types/", "./src/@types/"],
     "strict": true,
-    "baseUrl": "./",
-    "paths": {
-      "core/*": ["./src/core/*"]
-    }
+    "baseUrl": "./"
   }
 }