Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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