https://github.com/5t3ph/eleventy-plugin-emoji-readtime

Eleventy (11ty) plugin that provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator.
https://github.com/5t3ph/eleventy-plugin-emoji-readtime

11ty 11ty-plugin eleventy-plugin readtime

Last synced: 6 days ago
JSON representation

Eleventy (11ty) plugin that provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator.

• Host: GitHub
• URL: https://github.com/5t3ph/eleventy-plugin-emoji-readtime
• Owner: 5t3ph
• Created: 2020-10-24T18:56:34.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-11T05:42:37.000Z (over 3 years ago)
• Last Synced: 2024-10-31T11:51:38.581Z (13 days ago)
• Topics: 11ty, 11ty-plugin, eleventy-plugin, readtime
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime
• Size: 41 KB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Eleventy Plugin: Emoji Read Time

> Display an estimated read time for Eleventy content, optionally with an emoji visual indicator.

## To Use

This plugin provides a filter that can be applied by passing in the Eleventy-supplied `content` variable, which work best from the _layout_ used by the content. A simple string is returned, so the text formatting is up to you.

First, install the plugin in your project:

```bash

npm install @11tyrocks/eleventy-plugin-emoji-readtime

```

Then, include it in your `.eleventy.js` config file:

```js

const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");

module.exports = (eleventyConfig) => {

  eleventyConfig.addPlugin(emojiReadTime);

};

```

\*_Review config options and examples below for how to modify the output_

Finally, add it as a filter to `content` wherever you'd like it to display:

```html

{{ content | emojiReadTime }}

```


Example output with defaults:

```html

🍿 7 min. read

```

## Config Options

| Option     | Type    | Default   |

| ---------- | ------- | --------- |

| wpm        | number  | 275       |

| showEmoji  | boolean | true      |

| emoji      | string  | 🍿        |

| label      | string  | min. read |

| bucketSize | number  | 5         |

## Config Examples

Change the emoji in use, the words-per-minute (wpm), the label, and the `bucketSize`, where `bucketSize` is what minute is divided by to determine how many emoji to show:

```js

eleventyConfig.addPlugin(emojiReadTime, {

  emoji: "📕",

  label: "mins",

  wpm: 300,

  bucketSize: 3,

});

```

Which would output:

```html

📕📕 7 mins

```

### Remove emoji from being displayed

Or, remove the emoji and only display the number of minutes and a label:

```js

eleventyConfig.addPlugin(emojiReadTime, { showEmoji: false });

```

## Credits

- Monica Powell's [egghead lesson](https://egghead.io/lessons/javascript-format-reading-time-with-emojis-on-a-gatsby-page) for the logic of creating "buckets" of time filled with emoji

- Bryan Robinson's ["Create a Plugin with 11ty"](https://www.youtube.com/watch?v=aO-NFFKjnnE) demonstration on "Learn With Jason"

- Default read time from [Medium's recommendation](https://blog.medium.com/read-time-and-you-bc2048ab620c) (Psst - disagree? Change the `wpm` value)