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

@reecem/h-bar

v2.0.3

Published

Lightweight Announcement Bar

Downloads

16

Readme

h-bar lightweight announcement bar

An Announcement Banner that is lightweight and based on tailwindcss for the styling

npm version Total Downloads npm bundle size

The announcement bar uses native methods to make the library lightweight so that it can be loaded quickly, bar the webpack stuff.

Note The initial version makes use of the WordPress API to be able to get the latest post.

i.e. it expects a json structure like so: From a url like http://blog.example.com/wp-json/wp/v2/posts?per_page=1&_fields=id,title,link

[
    {
        "id": 175,
        "link": "https:\/\/blog.example.com\/how-to-hunt-a-vole\/",
        "title": {
            "rendered": "How To Hunt A Vole"
        }
    }
]

I plan to add more options and a parser callback that can be defined to extract a standard format.

Installation

You can install the package via npm:

npm i @reecem/h-bar

Or use jsDelivr:

    ...
    <script src="https://unpkg.com/@reecem/h-bar?umd"></script>
    ...

If you are customising the styling and overriding it with your own styling then you will also need an instance of your css or a tailwindcss file installed as only the classes needed are packaged with h-bar

Usage

You can import it directly into your javascript app or use it in the html.

Example

<script src="../hBar.js"></script>
<!-- or -->
<script src="https://unpkg.com/@reecem/h-bar?umd" defer></script>
<script>
    hBar.init({
        url: "http://blog.example.com/wp-json/wp/v2/posts?per_page=1&_fields=id,excerpt,title,link",
        secondaryLinks: [
            {
                title: "Docs",
                link: "http:://docs.example.com"
            },
            {
                title: "Support",
                link: "http://help.example.com"
            }
        ],
        options: {
            theme: "blue",
        }
    });

    hBar.fetchData()
</script>

All config values

The initialization object currently has this structure and defaults:

{
    url: "https://your.blog/api/....",
    onCompleted: "callback function",
    link: "The link url, can be force and no need to fetch from API",
    title: "The link url, can be force and no need to fetch from API",
    secondaryLinks: [
        {
            title: "Docs",
            link: "http:://docs.example.com"
        }
    ],
    parser: (data) => {/** Parser function */}
    dismissible: false, // dismissible banner flag
    dismissFor: new Date('2020-03-30'), // would dismiss it till end of March 30th 2020
    theme: "gray",
    headers: {
        "Authorization": "Bearer {TOKEN}"
    },
    customStyles: {
        wrapper: "hb-flex hb-w-full hd-flex-col md:hb-flex-row sm:hb-flex-row hb-text-sm hb-py-2 md:hb-px-20 hb-px-1 hb-items-center hb-justify-between",
        linkWrapper: "hb-flex hb-items-center",
        badge: "hb-px-2 hb-mx-2 hb-leading-relaxed hb-tracking-wider hb-uppercase hb-font-semibold hb-rounded-full hb-text-xs",
        postTitle: "hover:hb-underline",
        secondaryLink: "hb-mx-5 hb-cursor-pointer hover:hb-underline",
    }
}

Themes

Theme colors available: gray, lightGray, blue, green, indigo, orange, yellow, teal, red (the below images are in the order they exits)

gray banner lightGray banner blue banner green banner indigo banner orange banner yellow banner teal banner red banner

Parser function

There is the availability of adding a custom parser function to override any of the default ones provided by the package.

This is handy if you have a custom endpoint that say would return also the secondary links or has a different data structure.

The parser function should always return an object with the structure:

{
    title: String,
    link: String,
    /** the secondaryLinks is optional.
     * It will also override the links parsed in the init() arguments.
     */
    secondaryLinks: [
        {
            title: String,
            link: String,
        },
    ]
}

You can define the function inside the init() method as follows:


hBar.init({
    url: "https://api.github.com/repos/ReeceM/h-bar/releases",
    parser: (data) => {
        // getting the first release on the list of releases from github.
        const {name, html_url} = data[0];

        return {
            title: `Lateset version available ${name}`,
            link: html_url
        };
    }
})

Dismissing Notifications

Available from v0.3.0/v1.0.0

Temporary Dismissing To be able to dismiss a notification, please note it currently removes secondary links. It is therefore useful that you use this feature when just making announcements of a event or brief notification.

The way to activate session based dismissal is:

{
    //... rest of config
    dismissible: true,
    //... rest of config
}

This will just disable the banner for the current page visit, if the user reloads, its back.

Time based dismissing

To dismiss the banner until another time, you can set the dismissFor variable, this requires a Date() object.

When you set this and the banner is dismissed, the UTC milliseconds are stored in the localStorage, this is then read back when loading h-Bar.

{
    //... rest of config
    dismissible: true,
    dismissFor: new Date('2020-03-30'), // would dismiss it till end of march 30th
}

If you fail to set the value properly, it won't dismiss and the banner will show by default.

Testing

to come please make a PR if you know how to do it on JS.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker. You can also use the SECURITY doc.

Credits

Support

ko-fi

License

The MIT License (MIT). Please see License File for more information.