@11tyrocks/eleventy-plugin-emoji-readtime

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

Usage no npm install needed!

<script type="module">
  import 11tyrocksEleventyPluginEmojiReadtime from 'https://cdn.skypack.dev/@11tyrocks/eleventy-plugin-emoji-readtime';
</script>

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:

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

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

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:

<p>{{ content | emojiReadTime }}</p>

Example output with defaults:

🍿 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:

eleventyConfig.addPlugin(emojiReadTime, {
  emoji: "📕",
  label: "mins",
  wpm: 300,
  bucketSize: 3,
});

Which would output:

📕📕 7 mins

Remove emoji from being displayed

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

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

Credits