feat(gatsby-plugin-nprogress): Replace nprogress with accessible-nprogress (#34038)

Co-authored-by: LekoArts <[email protected]>

Author: pranav0281999

packages/gatsby-plugin-nprogress/README.md

@@ -1,12 +1,14 @@
 # gatsby-plugin-nprogress
 
-Automatically shows the [nprogress](http://ricostacruz.com/nprogress/) indicator
+Automatically shows the [accessible-nprogress](https://github.com/nmackey/accessible-nprogress) indicator
 when a page is delayed in loading (which Gatsby considers as one second after
 clicking on a link).
 
 ## Install
 
-`npm install gatsby-plugin-nprogress`
+```shell
+npm install gatsby-plugin-nprogress
+```
 
 ## How to use
 
@@ -25,8 +27,4 @@ plugins: [
 ]
 ```
 
-In addition to `color` – a configuration option specific to
-`gatsby-plugin-nprogress` that saves some time
-[customizing the nprogress CSS](https://github.com/rstacruz/nprogress#customization)
-to match your site colors – you may pass all available
-[nprogress configuration options](https://github.com/rstacruz/nprogress#configuration).
+You can pass in the custom configuration option `color` to [customize the accessible-nprogress CSS](https://github.com/nmackey/accessible-nprogress#customization). You may also pass all available [accessible-nprogress configuration options](https://github.com/nmackey/accessible-nprogress#configuration) into the plugin, too.

packages/gatsby-plugin-nprogress/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "nprogress": "^0.2.0"
+    "accessible-nprogress": "^2.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",

packages/gatsby-plugin-nprogress/src/__tests__/gatsby-browser.js

@@ -1,6 +1,6 @@
-jest.mock(`nprogress`)
+jest.mock(`accessible-nprogress`)
 
-import NProgress from "nprogress"
+import NProgress from "accessible-nprogress"
 import {
   onClientEntry,
   onRouteUpdateDelayed,

packages/gatsby-plugin-nprogress/src/gatsby-browser.js

@@ -1,8 +1,8 @@
-import NProgress from "nprogress"
+import NProgress from "accessible-nprogress"
 
 const defaultOptions = { color: `#29d` }
 
-export const onClientEntry = (a, pluginOptions = {}) => {
+export const onClientEntry = (_gatsbyApi, pluginOptions = {}) => {
   // Merge default options with user defined options in `gatsby-config.js`
   const options = { ...defaultOptions, ...pluginOptions }
 

yarn.lock

@@ -5279,6 +5279,11 @@ accepts@^1.3.7, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+accessible-nprogress@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/accessible-nprogress/-/accessible-nprogress-2.1.2.tgz#8e65ebf4936db1752638e1cd2e8730f9bef311e9"
+  integrity sha512-reIwMbbt+ZGOmQLWPXGcPf5X1F4fzsZAekY9alCxpekxizRhQMAd/QInaA8k7WtwTcGMzD9hnYswGLcaJDRY/A==
+
 acorn-dynamic-import@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
@@ -18436,10 +18441,6 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nprogress@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
-
 nspell@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/nspell/-/nspell-2.1.2.tgz#429a1bcd4288e93bd0989e8fa5d4ab2c3950e00a"