Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
gatsby-plugin-page-progress
Advanced tools
gatsby-plugin-page-progress
Progress indicator for the top of pages as user scrolls
gatsby-plugin-page-progress
Add a page progress indicator to your Gatsby project 😎 The progress bar moves as you scroll down the page.
Useful for blog sites and other reading material so users know how far they've read into an article or page.
Install
npm i gatsby-plugin-page-progress
Options Example
Inside gatsby-config.js
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: ["/", { regex: "^/blog" }],
excludePaths: ["/blog/beep-beep-lettuce"],
height: 3,
prependToBody: false,
color: `#663399`,
footerHeight: 500,
headerHeight: 0,
},
},
];
If you'd like the progression bar to appear on all pages of your project,
you can simply add the name of the plugin to your plugins array in gatsby-config.js
plugins: ["gatsby-plugin-page-progress"];
Options
includePaths
Required: ❌
Accepts: [string | object]
Default: []
Supports multiple paths. This option enables the plugin to include an array of paths. You can use regex to define multiple path inclusions. See examples below
excludePaths
Required: ❌
Accepts: [string | object]
Default: []
Supports multiple paths. This option enables the plugin to exclude an array of paths. You can use regex to multiple path exclusions. Defining paths to exclude will take precedence over
includePathdefinitions. See examples below
prependToBody
Required: ❌
Accepts: boolean
Default: false
If
false, the bar is appended to the<body>. Iftrue, the bar is prepended to the<body>.
height
Required: ❌
Accepts: number
Default: 3
Sets the
heightof the progress bar.
color
Required: ❌
Accepts: string
Default: #663399
Sets the
colorof the progress bar.
footerHeight
Required: ❌
Accepts: number
Default: 0
Sets the height of the footer. The width of the progress bar will be scaled appropriately to reach 100% before reaching the page footer.
headerHeight
Required: ❌
Accepts: number
Default: 0
Sets the height of the header. The width of the progress bar will be scaled appropriately to reach 100% while offsetting the height of a fixed header and moves the progress bar below the header.
Examples
Only include the root path:
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: ["/"],
excludePaths: [],
},
},
];
Include the root path, plus all paths under the /blog route:
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: ["/", { regex: "^/blog" }],
excludePaths: [],
},
},
];
This plugin calls the constructor function for RegExp. That's why we define any regex that we want to use inside an object. For more information on how to write regular expressions using the RegExp constructor use MDN for reference.
Exclude only the root path:
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: [],
excludePaths: ["/"],
},
},
];
Include the root path, plus every path under the /blog route, but exclude a specific path under /blog:
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: ["/", { regex: "^/blog" }],
excludePaths: ["/blog/awesome/article"],
},
},
];
Include the root path, plus all paths under the /blog route, but exclude all paths under /blog that end with 'react'':
plugins: [
{
resolve: "gatsby-plugin-page-progress",
options: {
includePaths: ["/", { regex: "^/blog" }],
excludePaths: [{ regex: "^/blog.+react$" }],
},
},
];
Remember that exclusions always take precedence over inclusions. In the case above - If the plugin finds any path that begins with
/blogand ends withreactit will not apply the progress indicator because it already knows to exclude that route 😁 Inversely, if we were on a route under/blogthat didn't end withreact, it would apply the progress indicator because the exclusion rule wouldn't apply to that route.
FAQs
Progress indicator for the top of pages as user scrolls
The npm package gatsby-plugin-page-progress receives a total of 64 weekly downloads. As such, gatsby-plugin-page-progress popularity was classified as not popular.
We found that gatsby-plugin-page-progress demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 16 Jun 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024