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

• Monica Powell's egghead lesson for the logic of creating "buckets" of time filled with emoji
• Bryan Robinson's "Create a Plugin with 11ty" demonstration on "Learn With Jason"
• Default read time from Medium's recommendation (Psst - disagree? Change the wpm value)