npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-plugin-page-progress

v2.2.1

Published

Progress indicator for the top of pages as user scrolls

Downloads

334

Readme

gatsby-plugin-page-progress

npm npm (tag) npm bundle size npm

Add a page progress indicator to your Gatsby project 😎 The progress bar moves as you scroll down the page.

Page Progress Example

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 includePath definitions. See examples below

prependToBody

Required: ❌

Accepts: boolean

Default: false

If false, the bar is appended to the <body>. If true, the bar is prepended to the <body>.

height

Required: ❌

Accepts: number

Default: 3

Sets the height of the progress bar.

color

Required: ❌

Accepts: string

Default: #663399

Sets the color of 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 /blog and ends with react it will not apply the progress indicator because it already knows to exclude that route 😁 Inversely, if we were on a route under /blog that didn't end with react, it would apply the progress indicator because the exclusion rule wouldn't apply to that route.