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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions