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

changebar

v1.0.1

Published

Changelog notifications widget for the web, powered by GitHub

Downloads

7

Readme

🔔 Changebar

NPM GitHub Vulnerabilities Minzipped size

Changebar is a GitHub-powered changelog notifications widget for the web. Easily tell your users what's new, fetched directly from GitHub by Staticaly CDN.

⭐ How it works

Add Changebar to your project with NPM:

npm install changebar

Import it to your project:

import Changebar from "changebar";

Initialize it with your button (which, on click, will open Changebar), GitHub repo and file with your changelog (respect Semantic Versioning for best results, see Keep a Changelog):

const notifications = new Changebar({
  element: "button#notifs",
  repo: "AnandChowdhary/changebar",
  file: "CHANGELOG.md"
});

Then, the magic happens:

  • Changebar will now use the GitHub API and find the most recent commit hash
  • This hash is used to get the most recent version of your Markdown file with the changelog
  • Staticaly CDN will serve the file from your most recent commit
  • The total number of "notifications" is the number of subheadings in your semantic changelog
  • Changebar will add the number of unread notifications to your button:

Notifications button

  • When a user clicks on the button, Changebar will show a beautiful notifications interface with your changelog, rendering Markdown and applying CSS rules
  • Using local storage, Changebar will remember how many notifications a user has already seen

🖼 Screenshot

Screenshot of Changebar

💻 Configuration

You can use the following options in the constructor:

new Changebar({
  element: "#notifs", // Button to add notifications to
  repo: "username/repository", // GitHub username/repo format
  file: "CHANGELOG.md", // Name of the file to look at
  heading: "h2", // Selector for headings in rendered HTML (optional)
  hide: "h1" // Hide these elements the rendered HTML (optional)
})

Changebar adds the changebar-is-fetching, changebar-has-error, and changebar-completed classes to your button to keep track of the Fetch requests.

It also adds the data-unread-count attribute with the number of unread notifications and the changebar-has-unread class if there are unread notifications.

Methods

You can use the following methods for programatical access:

| Method | Description | | - | - | | open() | Opens Changebar | | close() | Closes Changebar | | toggle() | Toggles the open state | | isOpen() | Returns whether Changebar is open |

For example, you can open Changebar like this:

changebar.open();

🛠️ Development

Start development server with HMR and prettier:

yarn start

Production

Build a production version:

yarn build

Changebar doesn't ship with any polyfills, just ES6 transpiled to ES5. You might want to add polyfills for the following in your build process, based on how backwards-compatible you want to be:

  • Fetch API (no IE, Chrome 42+, Firefox 40+)
  • Promise (No IE, Chrome 33+, Firefox 29+)
  • Array.prototype.includes() (No IE, Chrome 47+, Firefox 43+)
  • Element.classList (IE 10+, Chrome 8+, Firefox 3.6+)
  • ParentNode.querySelector() (IE 8+, Chrome 4+, Firefox 3.5+)

✍️ Todo

  • [x] Make it work
  • [ ] Tests
  • [ ] Better API with events

📝 License

MIT