/grunt-assemble-wordcount

Assemble middleware for displaying a word-count, and estimated reading time on blog posts or pages.

Primary LanguageJavaScriptMIT LicenseMIT

grunt-assemble-wordcount NPM version

Assemble plugin for displaying wordcount and average reading time to blog posts or pages.

Quickstart

In the command line, run:

npm install grunt-assemble-wordcount --save

Next, register the plugin with Assemble:

assemble: {
  options: {
    plugins: ['grunt-assemble-wordcount', 'other/plugins/*']
  }
}

Visit the plugins docs for more info or for help getting started.

Options

speed

Type: Number Default: 300

Average "words per minute" to use for calculating reading time. This plugin uses 300 as the default based on the averages listed in this Forbes article.

seconds

Type: Boolean Default: undefined

Define seconds: true in the option to display seconds and minutes. Example: 7 min, 47 sec. (by default time is rendered in 1 minute increments, e.g. 8 min).

placement

Type: String Default: prepend

Determines whether the wordcount and reading time will be prepended or appended. Example:

selector

Type: String Default: .wordcount

The selector to target for the element that wraps the content that contains the words to count.

countSelector

Type: String Default: .label-wordcount

The selector to use for the element that will render the wordcount.

timeSelector

Type: String Default: .label-reading-time

The selector to use for the element that will render the estimated reading time.

Usage Examples

Basic example

In your templates

  • class="wordcount" must wrap the content that the plugin should run against
  • class="label-wordcount" on the element that should render the wordcount.
  • class="label-reading-time" on the element that should render the reading time.
<!-- Blog Posts -->
<div class="wordcount">
  <span class="label-wordcount"> words</span>
  <span class="label-reading-time"> read</span>
  {{> body }}
</div>

Rendered HTML

<!-- Blog Posts -->
<div class="wordcount">
  <span class="label-wordcount" data-wordcount="1561">1561 words</span>
  <span class="label-reading-time" data-reading-time="7 min">7 min read</span>
  <p>In deserunt venison doner velit cow pastrami magna dolore ut jerky proident
  esse laborum. Fatback strip steak biltong tri-tip beef pork belly spare ribs
  in ut capicola. Sunt qui t-bone jerky est culpa. Deserunt duis adipisicing
  ullamco ex, eiusmod beef salami labore non chuck occaecat tenderloin shank
  cillum. Quis t-bone hamburger pancetta aliqua dolor. Magna eu ground round
  aliqua...
</div>

Change selectors

The default selector is .wordcount. You can change this in the options as follows:

options: {
  plugins: ['grunt-assemble-wordcount'],
  wordcount: {
    selector: '.foo',
    countSelector: '.bar'
    timeSelector: '.baz'
  }
}

And in your templates:

<!-- Blog Posts -->
<div class="foo">
  {{> post }}
</div>

Then in post.hbs:

<!-- Post -->
<article class="post">
  <h1>Breaking News</h1>
  <span class="bar"> words</span>
  <span class="baz"> read</span>
</article>

Display seconds

In the plugin's options, define seconds: true:

options: {
  plugins: ['grunt-assemble-wordcount'],
  wordcount: {
    seconds: true
  }
}

The result will look something like this:

<span class="label-wordcount" data-wordcount="1561">1561 words</span>
<span class="label-reading-time" data-reading-time="7 minutes, 48 seconds">7 minutes, 48 seconds read</span>

If less than 1 minute, the results will look something like this:

<span class="label-wordcount" data-wordcount="12">12 words</span>
<span class="label-reading-time" data-reading-time="2 seconds">2 seconds read</span>

Placement

By default, wordcount and reading time are prepended to the text node of the specified element. Example:

<span class="label-wordcount" data-wordcount="1561">1561 words</span>
<span class="label-reading-time" data-reading-time="7 minutes, 48 seconds">7 minutes, 48 seconds read</span>

You can change this to append in the options:

options: {
  wordcount: {
    placement: 'append'
  }
}

And this template:

<span class="label-wordcount">Words: </span>
<span class="label-reading-time">Estimated reading time: </span>

Would result in:

<span class="label-wordcount" data-wordcount="1561">Words: 1561</span>
<span class="label-reading-time" data-reading-time="7 minutes, 48 seconds">Estimated reading time: 8 minutes</span>

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Authors

Jon Schlinkert

Other grunt-assemble plugins

License

Copyright © 2015 Jon Schlinkert Released under the MIT license.

This file was generated by verb-cli on September 25, 2015.