Upgrade to Gatsby 4 and fix images paths that broke builds (#3021)

* Upgrade packages to Gatsby 4 and fix images paths that broke builds * Update eslint and migrate from old rules * Update stylelint and fix resulting problems * Convert trends-chart color profile * Use light version of github stylesheet * Upgrade packages and configure SVGR/SVGO with external file Recommended by plugin author * Fix docs index cards styles to properly collapse * stylelint --fix * eslint --fix * Upgrade gatsby packages
iterative · Dec 2, 2021 · ef97b1b · ef97b1b
1 parent a5130da
commit ef97b1b
Show file tree

Hide file tree

Showing 50 changed files with 2,842 additions and 1,845 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,11 +2,12 @@
   "extends": [
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
+    "prettier",
     "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:json/recommended"
   ],
+  "plugins": ["@typescript-eslint"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -23,9 +24,18 @@
     }
   },
   "rules": {
-    "@typescript-eslint/interface-name-prefix": [
+    "@typescript-eslint/naming-convention": [
       "error",
-      { "prefixWithI": "always" }
+      {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "prefix": ["I"]
+      },
+      {
+        "selector": "variableLike",
+        "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+        "leadingUnderscore": "allow"
+      }
     ],
     "no-tabs": "error",
     "react/prop-types": "off",

diff --git a/.stylelintrc b/.stylelintrc
@@ -13,6 +13,8 @@
     }],
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["mixin"]
-    }]
-  },
+    }],
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null
+  }
 }
diff --git a/content/blog/2020-04-06-april-20-dvc-heartbeat.md b/content/blog/2020-04-06-april-20-dvc-heartbeat.md
@@ -44,9 +44,9 @@ COVID-19 pandemic: although there are new challenges (like caring for families
 while working from home) we've been able to weather the transition to fully
 remote work relatively well.
 
-![](/static/uploads/images/2020-04-06/laptop_on_boat.jpeg)_Before social
-distancing started, DVC technical writer Jorge Orpinel Pérez has worked from a
-canoe. Check out more photos from his workations
+![](/uploads/images/2020-04-06/laptop_on_boat.jpeg)_Before social distancing
+started, DVC technical writer Jorge Orpinel Pérez has worked from a canoe. Check
+out more photos from his workations
 [on Instagram](https://www.instagram.com/workationer/)._
 
 **DVC sponsors DivOps.** In a time when many conferences are going remote out of
@@ -162,8 +162,7 @@ our attention.
   It's got nice coverage of DVC, code examples, and some deeply enjoyable
   artwork.
 
-![](/static/uploads/images/2020-04-06/monolith.jpeg)_From Juan Juan López
-López's
+![](/uploads/images/2020-04-06/monolith.jpeg)_From Juan Juan López López's
 [blog](https://medium.com/packlinkeng/a-complete-guide-about-how-to-break-the-data-monolith-caa2ab2d01f6)._
 
 Thanks for reading. As always, let us know what you're making with DVC and what

diff --git a/content/blog/2020-05-04-dvc-3-years-and-1-0-release.md b/content/blog/2020-05-04-dvc-3-years-and-1-0-release.md
@@ -66,8 +66,8 @@ answers user questions - we've been told our user support is one of DVC's
 Many of these folks put hours into their code contribution. We're grateful for
 their tenacity and generosity.
 
-![](/static/uploads/images/2020-05-04/vera-sativa.png)_Vera - 100th DVC
-contributor [on GitHub](https://github.com/verasativa/)._
+![](/uploads/images/2020-05-04/vera-sativa.png)_Vera - 100th DVC contributor
+[on GitHub](https://github.com/verasativa/)._
 
 **Documentation contributors.** Another
 [124 people contributed](https://github.com/iterative/dvc.org/graphs/contributors)

diff --git a/content/blog/2020-05-26-may-20-community-gems.md b/content/blog/2020-05-26-may-20-community-gems.md
@@ -128,5 +128,5 @@ synchronize an artifact, like a model or dataset, with its latest version using
 our [data registry use case](https://dvc.org/doc/use-cases/data-registries) for
 an example of sharing artifacts across projects.
 
-![](/static/uploads/images/2020-05-26/data-registry.png) _Using DVC for sharing
+![](/uploads/images/2020-05-26/data-registry.png) _Using DVC for sharing
 artifacts like datasets and models across projects and teammates._
diff --git a/content/blog/2021-08-17-august-21-dvc-heartbeat.md b/content/blog/2021-08-17-august-21-dvc-heartbeat.md
@@ -44,7 +44,7 @@ techniques to ensure quality data for ML projects. If the adroit summaries of
 complex concepts doesn't thrill you, the links to no less than 63 (😱) resources
 will get you on your way to data-centric nirvana.
 
-![Data Centric Framework](/uploads/images/2021/08-17/lj-miranda-data-centric.png)
+![Data Centric Framework](/uploads/images/2021-08-17/lj-miranda-data-centric.png)
 _LJ Miranda's Framework for putting data-centric machine learning into context
 [Source link](https://ljvmiranda921.github.io/notebook/2021/07/30/data-centric-ml/)_
 
@@ -223,7 +223,7 @@ would like to see from us, we'd be grateful if you'd fill out
 [**this survey**](https://docs.google.com/forms/d/e/1FAIpQLSdmwjs0ZkxDdODfZTvSwP2bVW4JAVVdxiYhQPyW5dSbsZC8qg/viewform?pli=1)
 to help us plan! 🙏🏼
 
-![DVC Online Course survey](/uploads/images/2021/08-17/survey.png) _Help us plan
+![DVC Online Course survey](/uploads/images/2021-08-17/survey.png) _Help us plan
 our Online Course! 🙏🏼
 [Source link](https://docs.google.com/forms/d/e/1FAIpQLSdmwjs0ZkxDdODfZTvSwP2bVW4JAVVdxiYhQPyW5dSbsZC8qg/viewform?pli=1))_
 

diff --git a/content/blog/2021-09-24-refactor.md b/content/blog/2021-09-24-refactor.md
@@ -47,7 +47,7 @@ else:
 
 For example, the AST for the code above will look like this:
 
-![Fundamentals of MLOps](/uploads/images/2021-09-22/ast.png) _Abstract Syntax
+![Fundamentals of MLOps](/uploads/images/2021-09-24/ast.png) _Abstract Syntax
 Tree_
 
 The top-most "root" node of this tree represents a single Python file. Each file

diff --git a/content/docs/use-cases/ci-cd-for-machine-learning.md b/content/docs/use-cases/ci-cd-for-machine-learning.md
@@ -9,7 +9,7 @@ feedback. [DVC](/) can manage data/models and reproducible pipelines, while
 
 [cml]: https://cml.dev
 
-![](/static/img/cicd4ml-0.png '=408') _Basic ML pipeline_
+![](/img/cicd4ml-0.png '=408') _Basic ML pipeline_
 
 The main benefits of CI/CD (continuous integration and continuous delivery) for
 ML are detailed below.
@@ -42,7 +42,7 @@ being run online:
 Normally, CI/CD is hard to set up, configure, and maintain -- especially for
 data and ML pipelines.
 
-![](/static/img/cicd4ml.png '=460') _Traditional ML meets CI/CD_
+![](/img/cicd4ml.png '=460') _Traditional ML meets CI/CD_
 
 [DVC](/) and [CML] remove most of this
 [management headache](https://papers.nips.cc/paper/2015/file/86df7dcfd896fcaf2674f757a2463eba-Paper.pdf)

diff --git a/content/docs/use-cases/versioning-data-and-model-files/tutorial.md b/content/docs/use-cases/versioning-data-and-model-files/tutorial.md
@@ -248,8 +248,6 @@ to be similar to `git checkout`. All we need to do in our case is to
 additionally run `dvc checkout` to get the right data into the
 <abbr>workspace</abbr>.
 
-![](/img/versioning.png)
-
 There are two ways of doing this: a full workspace checkout or checkout of a
 specific data or model file. Let's consider the full checkout first. It's pretty
 straightforward:

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -116,10 +116,7 @@ const plugins = [
   {
     resolve: 'gatsby-plugin-svgr',
     options: {
-      ref: true,
-      svgoConfig: {
-        plugins: [{ removeViewBox: false }]
-      }
+      ref: true
     }
   },
   'gatsby-transformer-sharp',
@@ -140,7 +137,7 @@ const plugins = [
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
-      /* eslint-disable @typescript-eslint/camelcase */
+      /* eslint-disable @typescript-eslint/naming-convention */
       background_color: '#eff4f8',
       display: 'minimal-ui',
       icon: 'static/favicon-512x512.png',
@@ -195,7 +192,7 @@ const plugins = [
           type: 'image/png'
         }
       ]
-      /* eslint-enable @typescript-eslint/camelcase */
+      /* eslint-enable @typescript-eslint/naming-convention */
     }
   },
   {
@@ -226,7 +223,7 @@ const plugins = [
               return Object.assign(
                 {},
                 {
-                  /* eslint-disable-next-line @typescript-eslint/camelcase */
+                  /* eslint-disable-next-line @typescript-eslint/naming-convention */
                   custom_elements: [{ 'content:encoded': html }],
                   title: node.title,
                   date: node.date,

diff --git a/package.json b/package.json
@@ -42,41 +42,41 @@
     "@reach/router": "^1.3.4",
     "@reach/tooltip": "^0.16.2",
     "classnames": "^2.2.6",
-    "color": "^4.0.1",
+    "color": "^4.0.2",
     "compression": "^1.7.4",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.26.0",
     "docsearch.js": "^2.6.3",
     "ease-component": "^1.0.0",
     "express": "^4.17.1",
     "fs-extra": "^10.0.0",
-    "gatsby": "^3.14.3",
-    "gatsby-link": "^3.14.0",
-    "gatsby-plugin-image": "^1.14.1",
+    "gatsby": "^4.3.0",
+    "gatsby-link": "^4.3.0",
+    "gatsby-plugin-image": "^2.3.0",
     "gatsby-plugin-parent-resolvers": "^1.0.1",
-    "github-markdown-css": "^4.0.0",
-    "graphql": "^15.6.1",
-    "iso-url": "^1.1.5",
+    "github-markdown-css": "^5.0.0",
+    "graphql": "^16.0.1",
+    "iso-url": "^1.2.1",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.21",
     "moment": "^2.25.3",
     "nanoid": "^3.1.30",
     "node-cache": "^5.1.0",
-    "perfect-scrollbar": "^1.5.0",
-    "postcss": "^8.3.9",
-    "pretty-quick": "^3.1.1",
+    "perfect-scrollbar": "^1.5.3",
+    "postcss": "^8.4.4",
+    "pretty-quick": "^3.1.2",
     "prismjs": "^1.25.0",
-    "promise-polyfill": "^8.1.3",
+    "promise-polyfill": "^8.2.1",
     "prop-types": "^15.7.2",
     "raf-polyfill": "^1.0.0",
     "react": "^17.0.2",
-    "react-collapse": "^5.0.1",
+    "react-collapse": "^5.1.1",
     "react-collapsible": "^2.7.0",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-popover": "^0.5.10",
     "react-slick": "^0.28.1",
-    "react-use": "^14.0.0",
+    "react-use": "^17.3.1",
     "rehype-react": "^6.2.1",
     "remark-preset-lint-recommended": "^5.0.0",
     "repo-link-check": "^0.8.0",
@@ -90,74 +90,74 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@svgr/webpack": "^5.3.1",
+    "@babel/core": "^7.16.0",
+    "@svgr/webpack": "^6.0.0",
     "@types/classnames": "^2.2.10",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/promise-polyfill": "^6.0.3",
-    "@types/react": "^16.9.32",
+    "@types/react": "^17.0.37",
     "@types/react-collapse": "^5.0.0",
-    "@types/react-dom": "^16.9.6",
-    "@types/react-helmet": "^5.0.15",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-helmet": "^6.1.4",
     "@types/react-popover": "^0.5.3",
-    "@types/react-slick": "^0.23.6",
+    "@types/react-slick": "^0.23.7",
     "@types/rehype-react": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "autoprefixer": "^10.3.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "autoprefixer": "^10.4.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-plugin-transform-define": "^2.0.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint": "^8.3.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.26.1",
-    "gatsby-plugin-catch-links": "^3.14.0",
-    "gatsby-plugin-feed": "^3.14.0",
-    "gatsby-plugin-google-analytics": "^3.14.0",
-    "gatsby-plugin-manifest": "^3.14.0",
-    "gatsby-plugin-postcss": "^4.14.0",
-    "gatsby-plugin-react-helmet": "^4.14.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "gatsby-plugin-catch-links": "^4.3.0",
+    "gatsby-plugin-feed": "^4.3.0",
+    "gatsby-plugin-google-analytics": "^4.3.0",
+    "gatsby-plugin-manifest": "^4.3.0",
+    "gatsby-plugin-postcss": "^5.3.0",
+    "gatsby-plugin-react-helmet": "^5.3.0",
     "gatsby-plugin-sentry": "^1.0.1",
-    "gatsby-plugin-sharp": "^3.14.1",
-    "gatsby-plugin-sitemap": "^4.10.0",
+    "gatsby-plugin-sharp": "^4.3.0",
+    "gatsby-plugin-sitemap": "^5.3.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "gatsby-plugin-twitter": "^3.14.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.25",
-    "gatsby-remark-autolink-headers": "^4.11.0",
-    "gatsby-remark-copy-linked-files": "^4.11.0",
+    "gatsby-plugin-twitter": "^4.3.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
+    "gatsby-remark-autolink-headers": "^5.3.0",
+    "gatsby-remark-copy-linked-files": "^5.3.0",
     "gatsby-remark-embed-gist": "^1.1.9",
     "gatsby-remark-embedder": "^5.0.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-images": "^5.11.0",
-    "gatsby-remark-prismjs": "^5.11.0",
-    "gatsby-remark-relative-images": "0.2.3",
-    "gatsby-remark-responsive-iframe": "^4.11.0",
-    "gatsby-remark-smartypants": "^4.11.0",
-    "gatsby-source-filesystem": "^3.14.0",
-    "gatsby-transformer-remark": "^4.11.0",
-    "gatsby-transformer-sharp": "^3.14.0",
+    "gatsby-remark-images": "^6.3.0",
+    "gatsby-remark-prismjs": "^6.3.0",
+    "gatsby-remark-relative-images": "2.0.2",
+    "gatsby-remark-responsive-iframe": "^5.3.0",
+    "gatsby-remark-smartypants": "^5.3.0",
+    "gatsby-source-filesystem": "^4.3.0",
+    "gatsby-transformer-remark": "^5.3.0",
+    "gatsby-transformer-sharp": "^4.3.0",
     "hast-util-select": "^4.0.0",
     "husky": "^4.2.3",
-    "jest": "^27.3.0",
-    "lint-staged": "^11.2.3",
+    "jest": "^27.4.0",
+    "lint-staged": "^12.1.2",
     "postcss-color-mod-function": "^3.0.3",
     "postcss-custom-media": "^8.0.0",
     "postcss-custom-properties": "^12.0.0",
     "postcss-mixins": "^8.1.0",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "rehype-parse": "^7.0.1",
     "rehype-stringify": "^8.0.0",
     "remark": "^13.0.0",
     "remark-html": "^13.0.1",
     "remark-parse": "^8.0.2",
-    "stylelint": "^13.3.0",
-    "stylelint-config-standard": "^22.0.0",
-    "typescript": "^3.8.3",
+    "stylelint": "^14.1.0",
+    "stylelint-config-standard": "^24.0.0",
+    "typescript": "^4.5.2",
     "unist-util-remove-position": "^3.0.0"
   },
   "husky": {

diff --git a/scripts/clear-cloudflare-cache.js b/scripts/clear-cloudflare-cache.js
@@ -42,9 +42,9 @@ module.exports = async function () {
         authorization: `Bearer ${CLOUDFLARE_TOKEN}`,
         'content-type': 'application/json'
       },
-      /* eslint-disable @typescript-eslint/camelcase */
+      /* eslint-disable @typescript-eslint/naming-convention */
       body: JSON.stringify({ purge_everything: true })
-      /* eslint-enable @typescript-eslint/camelcase */
+      /* eslint-enable @typescript-eslint/naming-convention */
     }
   )
 

diff --git a/src/components/Blog/Feed/Item/styles.module.css b/src/components/Blog/Feed/Item/styles.module.css
@@ -89,16 +89,16 @@
   max-height: 166px;
 
   &.overflown::after {
-    content: '';
+    content: "";
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
     height: 30px;
     background: linear-gradient(
       0deg,
-      rgba(238, 244, 248, 1) 0%,
-      rgba(238, 244, 248, 0) 100%
+      rgb(238 244 248 / 100%) 0%,
+      rgb(238 244 248 / 0%) 100%
     );
   }
 

diff --git a/src/components/Blog/FeedMeta/styles.module.css b/src/components/Blog/FeedMeta/styles.module.css
@@ -37,7 +37,7 @@
   margin-right: 14px;
 
   &::before {
-    content: '•';
+    content: "•";
     position: absolute;
     right: 100%;
     width: 0.55em;