Allow to use the showReadingTime in standard docs

[Josh-Cena]

After discussing with @slorber we decided to do this anyway, although this issue shows no effort to demonstrate "why" and "how". We would simply move blog.readingTime to siteConfig.markdown.readingTime.

markdown: {
  readingTime({ pluginName, pluginId, defaultReadingTime, ...args }) {
     if (pluginName === "docusaurus-plugin-content-docs")
       return defaultReadingTime(args);
     // Don't calculate reading time for other plugins
     return null;
  }
}

I don't really think it would be useful to most people, so I'm reluctant to have the docs plugin provide first-class support for this. We'll see how hard it would be to make different plugins interoperate under the same option, since the entire idea of Markdown configuration is quite new.

[AryanSingh]

is therea anyway to add read time to a doc currenlty?

[slorber]

is therea anyway to add read time to a doc currenlty?

The only way is probably to create a remark plugin that computes it, and expose it as a export const readingTime = 42 on the doc.

Otherwise we'll have to provide this in core to make it easier

[AryanSingh]

@slorber is it possible to add, can you tell me how to add it, i will try to fork and add myself, if you can't add it in the main repo

[rymaclen]

I would enjoy having this feature in the docs of docusaurus. I give time-constrained demos and workshops, so knowing roughly how long it takes to go through the entire guide and each page would be amazing. Especially useful when writing it and useful to my students as they can see how long each section will take them to go through it.

[jpboudreault]

This feature would be useful for the doc plugin.

[singharyan02]

@slorber a remark plugin for this already exists https://www.npmjs.com/package/remark-reading-time, can you give some pointers on integration. I can't find much documentation on integrating custom remark plugin

[slorber]

@singharyan02 each 3 core content plugins have a remarkPlugin option:

https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#remarkPlugins

I can't provide guidance on integrating third-party plugins: each plugins can implement the behavior they want and you can create your own too. I recommend waiting for the MDX 2 upgrade (PR https://github.com/facebook/docusaurus/pull/8288 for docusaurus v3) before rushing on a remark solution that will only work in v2.

[flamecopper]

Hi there, I have already done this on Docusaurus v3, how do I actually implement the read time on the docs? npm install --save @docusaurus/plugin-content-docs

[flamecopper]

When I try to do this it is showing this:

      remarkPlugins: [require('remark-reading-time')],

@slorber a remark plugin for this already exists https://www.npmjs.com/package/remark-reading-time, can you give some pointers on integration. I can't find much documentation on integrating custom remark plugin

When I try to [ERROR] Error [ERR_REQUIRE_ESM]: require() of ES Module /home/osboxes/Desktop/17052023/training/node_modules/remark-reading-time/index.js from /home/osboxes/Desktop/17052023/training/docusaurus.config.js not supported. Instead change the require of index.js in /home/osboxes/Desktop/17052023/training/docusaurus.config.js to a dynamic import() which is available in all CommonJS modules. at Object. (/home/osboxes/Desktop/17052023/training/docusaurus.config.js:42:27) at module.exports (/home/osboxes/Desktop/17052023/training/node_modules/import-fresh/index.js:32:59) at loadSiteConfig (/home/osboxes/Desktop/17052023/training/node_modules/@docusaurus/core/lib/server/config.js:36:55) at async loadContext (/home/osboxes/Desktop/17052023/training/node_modules/@docusaurus/core/lib/server/index.js:31:63) at async load (/home/osboxes/Desktop/17052023/training/node_modules/@docusaurus/core/lib/server/index.js:74:21) at async Command.start (/home/osboxes/Desktop/17052023/training/node_modules/@docusaurus/core/lib/commands/start.js:42:19)

[Josh-Cena]

@flamecopper Please see https://docusaurus.io/docs/markdown-features/plugins#installing-plugins

[flamecopper]

async function createConfig() { const readtime = (await import('remark-reading-time')).default; [...] remarkPlugins: [readtime],

Hi there, I have already done the following but the readtime is nbot showing up in the docs. Please advise.

[slorber]

@flamecopper the plugin above is not showing any reading time on your UI because its role is not to display anything on the UI. This plugin is not coupled to Docusaurus, it is a generic plugin.

The role of that plugin is to make the "reading time data" accessible so that you can choose yourself where you want to display it. You can swizzle Docusaurus components, access that newly produced data and display it anywhere you want in the UI, but it is not done automatically.

If you read the install instructions, there's a section for MDX users, that you didn't really follow carefully: https://github.com/mattjennings/remark-reading-time#mdx

import readingTime from "remark-reading-time";
import readingMdxTime from "remark-reading-time/mdx";

Basically, what this does is just exposing export const readingTime = 42 on all your MDX docs, and nothing else. It's now your responsibility to consume that newly exposed data the way you want.

Note the plugin was last updated 2 years old, I'm not even 100% sure it's still relevant for MDX v2 so be prepared to debug it eventually. At first sight, it looks good to me and should work, but didn't try.

[rymaclen]

I think trying to get a plugin to do this is a great workaround, but it should be a native feature that we can toggle. Like in the blogs.