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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions