feat(v2): add blog post estimated reading time (#2531)

* feat: add estimated reading time to blog posts

* docs: add showReadingTime on plugin docs

* test: update plugin-content-blog tests to cover readingTime

* Update index.js

* Update using-plugins.md

* Update index.js

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -51,6 +51,7 @@ describe('loadBlog', () => {
       ...{prevItem: undefined},
     }).toEqual({
       permalink: '/blog/2019/01/01/date-matter',
+      readingTime: 0.02,
       source: path.join('@site', pluginPath, 'date-matter.md'),
       title: 'date-matter',
       description: `date inside front matter`,
@@ -68,6 +69,7 @@ describe('loadBlog', () => {
         .metadata,
     ).toEqual({
       permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
+      readingTime: 0.01,
       source: path.join(
         '@site',
         pluginPath,
@@ -89,6 +91,7 @@ describe('loadBlog', () => {
       ...{prevItem: undefined},
     }).toEqual({
       permalink: noDatePermalink,
+      readingTime: 0.01,
       source: noDateSource,
       title: 'no date',
       description: `no date`,

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -8,6 +8,7 @@
 import fs from 'fs-extra';
 import globby from 'globby';
 import path from 'path';
+import readingTime from 'reading-time';
 import {Feed} from 'feed';
 import {PluginOptions, BlogPost, DateLink} from './types';
 import {parse, normalizeUrl, aliasedSitePath} from '@docusaurus/utils';
@@ -85,7 +86,7 @@ export async function generateBlogPosts(
   {siteConfig, siteDir}: LoadContext,
   options: PluginOptions,
 ) {
-  const {include, routeBasePath, truncateMarker} = options;
+  const {include, routeBasePath, truncateMarker, showReadingTime} = options;
 
   if (!fs.existsSync(blogDir)) {
     return [];
@@ -144,6 +145,9 @@ export async function generateBlogPosts(
           date,
           tags: frontMatter.tags,
           title: frontMatter.title,
+          readingTime: showReadingTime
+            ? readingTime(content).minutes
+            : undefined,
           truncated: truncateMarker?.test(content) || false,
         },
       });

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -40,6 +40,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   blogPostComponent: '@theme/BlogPostPage',
   blogTagsListComponent: '@theme/BlogTagsListPage',
   blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
+  showReadingTime: true,
   remarkPlugins: [],
   rehypePlugins: [],
   truncateMarker: /<!--\s*(truncate)\s*-->/, // Regex.

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -31,6 +31,7 @@ export interface PluginOptions {
   remarkPlugins: string[];
   rehypePlugins: string[];
   truncateMarker: RegExp;
+  showReadingTime: boolean;
   feedOptions?: {
     type: FeedType;
     title?: string;
@@ -77,6 +78,7 @@ export interface MetaData {
   date: Date;
   tags: (Tag | string)[];
   title: string;
+  readingTime?: number;
   prevItem?: Paginator;
   nextItem?: Paginator;
   truncated: boolean;