Norvell's Public Machinations
Miss any of our Open RFC calls?Watch the recordings here! »

eleventy-plugin-reader-bar

0.2.0 • Public • Published

Reader Bar Plugin for Eleventy

This plugin adds a Reader Bar into your template as you scroll the page.

Installation

Available on npm.

npm install eleventy-plugin-reader-bar

Configuration

Open up your Eleventy config file (.eleventy.js) and add the plugin:

const readerBar = require('eleventy-plugin-reader-bar')
 
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(readerBar)
}

Usage

  1. In your base template:
  • Create a div HTML Element with the class reader-bar-start;
  • This div must wrapp all the elements of the page, including the header (and optionally, the footer). If not, the bar will be 100% full before you scroll the entire page;
  • To not display the reader bar in your base/index page, add the customized shortcode {% readerBar "0px" %};
  1. In your post/content template:
  • Add the shortcode {% readerBar %} after the content;
  • Check templates specific shortcodes in Examples section;

Customization

You can customize the height and the colors of the bar:

  • height: the thickness of the bar. Value in px (default: 4px)
  • background color: color of the full width bar. Value can be literal or hexa (default: black)
  • fill color: color that fills the bar as you scroll the page. Value can be literal or hexa (default: orange)

Examples

{% readerBar %} displays the default reader bar (default works in liquid and nunjucks templates)

{% readerBar "0px" %} hides the reader bar (use in your base template, if necessary)

{% readerBar "8px" "red" %} displays the reader bar with height of 8px and a red background color

{% readerBar "8px" "#ff0000" "#0000ff" %} displays the reader bar with height of 8px, red background color and blue fill color

Obs for nunjucks templates: the arguments need to be comma separated. {% readerBar "8px", "#ff0000", "#0000ff" %}

Obs for handlebars templates: all parameters must be informed. {{{ readerBar "8px" "#ff0000" "#0000ff" }}}

See a demo

11ty Plugin Reader Bar Demo

or Run a sample locally

Clone the repository: git clone https://www.github.com/thigoap/eleventy-plugin-reader-bar.git

Run the sample locally: npm test

License

MIT

Install

npm i eleventy-plugin-reader-bar

DownloadsWeekly Downloads

10

Version

0.2.0

License

MIT

Unpacked Size

12.8 kB

Total Files

8

Last publish

Collaborators

  • avatar