Skip to content

Commit

Permalink
feat(gatsby-plugin-nprogress): Replace nprogress with `accessible-n…
Browse files Browse the repository at this point in the history
…progress` (#34038)

Co-authored-by: LekoArts <lekoarts@gmail.com>
  • Loading branch information
pranav0281999 and LekoArts committed Nov 22, 2021
1 parent 7d354be commit 3f65d17
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 16 deletions.
12 changes: 5 additions & 7 deletions packages/gatsby-plugin-nprogress/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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.
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-nprogress/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
jest.mock(`nprogress`)
jest.mock(`accessible-nprogress`)

import NProgress from "nprogress"
import NProgress from "accessible-nprogress"
import {
onClientEntry,
onRouteUpdateDelayed,
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-plugin-nprogress/src/gatsby-browser.js
Original file line number Diff line number Diff line change
@@ -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 }

Expand Down
9 changes: 5 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 3f65d17

Please sign in to comment.