Skip to content

Add estimated reading time to articles and tutorial pages #5027

Description

@anshul23102

Problem

Readers browsing CodeHarborHub's content list cannot tell at a glance whether a tutorial takes 5 minutes or 45 minutes to complete, making it hard to choose content that fits their available study time.

Proposed Solution

Compute and display estimated reading time on every page via a remark plugin:

// plugins/remark-reading-time.js
module.exports = function readingTimePlugin() {
  return (tree, vfile) => {
    let wordCount = 0;
    visit(tree, 'text', node => {
      wordCount += node.value.split(/\s+/).filter(Boolean).length;
    });
    const minutes = Math.max(1, Math.round(wordCount / 200));
    vfile.data.frontMatter = { ...vfile.data.frontMatter, readingTime: minutes };
  };
};

Display X min read next to the publish date on both article cards (in listings) and the article header.

Additional Context

Level 2 feature. Code blocks should contribute a lower word weight (about 0.5x) since developers read code differently from prose.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions