@reecem/h-bar

h-bar lightweight announcement bar

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

h-bar Announcement banner

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://cdn.jsdelivr.net/npm/@reecem/h-bar@latest/dist/hBar.min.js"></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.

<script src="../hBar.js"></script>
<!-- or -->
<script src"https://cdn.jsdelivr.net/npm/@reecem/h-bar@latest/dist/hBar.min.js" 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>

The initialization object currently has this structure and defaults:

{
    url: "https://your.blog/api/....",
    onCompleted: "callback function",
    postLink: "The link url, can be force and no need to fetch from API",
    postTitle: "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 */}
    options: {
        theme: "gray",
        secondaryLinks: [],
        onCompleted: null,
        fetchOptions: {
            "method": "GET",
            "mode": "cors",
            "cache": "no-cache",
            "headers": {
                "Accept": "application/json"
            },
            "redirect": "follow"
        }
    },
    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",
    }
}

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
        };
    }
})

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 zsh.rce@gmail.com instead of using the issue tracker.

Credits

• ReeceM
• All Contributors

Support

License

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