https://github.com/thigoap/eleventy-plugin-reader-bar

A plugin to add a reader bar into your Eleventy template as you scroll the page.
https://github.com/thigoap/eleventy-plugin-reader-bar

eleventy eleventy-plugin

Last synced: 3 months ago
JSON representation

A plugin to add a reader bar into your Eleventy template as you scroll the page.

• Host: GitHub
• URL: https://github.com/thigoap/eleventy-plugin-reader-bar
• Owner: thigoap
• Created: 2020-08-25T02:58:05.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-26T13:27:39.000Z (over 2 years ago)
• Last Synced: 2024-07-08T09:59:28.755Z (4 months ago)
• Topics: eleventy, eleventy-plugin
• Language: JavaScript
• Homepage: https://thigoap.github.io/11ty-plugin-reader-bar-demo/
• Size: 43.9 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-starred - thigoap/eleventy-plugin-reader-bar - A plugin to add a reader bar into your Eleventy template as you scroll the page. (others)

README

        
# Reader Bar Plugin for Eleventy

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

## Installation

Available on [npm](https://www.npmjs.com/package/eleventy-plugin-reader-bar).

`npm install eleventy-plugin-reader-bar`

## Configuration

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

```js

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" %}`;

2. In your post/content template:

  - Add the shortcode `{% readerBar %}` after the content;

  - Check templates specific shortcodes in [Examples](#examples) section; 

## Customization

You can customize the height, colors of the bar, and its padding top:

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

- padding top: space between the top of the screen and the bar (default: 2px)

### 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

`{% readerBar "8px" "#ff0000" "#0000ff" "0px" %}` displays the reader bar as the example above and no padding top

**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" "3px" }}}`

## See a demo

[11ty Plugin Reader Bar Demo](https://thigoap.github.io/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