@sveltek/remark-reading-stats

A custom Remark plugin that creates reading stats.

> [!NOTE]
>
> While the API is solid and mostly complete, some changes may still occur before the first stable release.
>
> Ideas, suggestions and code contributions are welcome.
>
> If you find any issues or bugs, please report them so the project can be improved.

Core Concepts

- Helps estimate how long it will take to read content
- Stores reading details to frontmatter for easy access
- Focuses on simplicity and performance

Installation

``sh


via pnpm


pnpm add -D @sveltek/remark-reading-stats
`

`sh


via npm


npm install -D @sveltek/remark-reading-stats
`

Usage

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { remarkReadingStats } from '@sveltek/remark-reading-stats'

svelteMarkdown({
plugins: {
remark: [[remarkReadingStats, options]],
},
})
`

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { remarkReadingStats } from '@sveltek/remark-reading-stats'

svelteMarkdown({
layouts: [
{
name: 'layout-name',
path: 'path/to/custom/file.svelte',
plugins: {
remark: [[remarkReadingStats, options]],
},
},
],
})
`

$3

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { remarkReadingStats } from '@sveltek/remark-reading-stats'

svelteMarkdown({
entries: [
{
name: 'entry-name',
path: 'path/to/custom/file.svelte',
plugins: {
remark: [[remarkReadingStats, options]],
},
},
],
})
`

Example

Import and pass the plugin directly into the array.

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { remarkReadingStats } from '@sveltek/remark-reading-stats'

svelteMarkdown({
plugins: {
remark: [remarkReadingStats],
},
})
`

It is also possible to further customize the plugin as needed.

`ts
import { svelteMarkdown } from '@sveltek/markdown'
import {
remarkReadingStats,
type RemarkReadingStatsOptions,
} from '@sveltek/remark-reading-stats'

const remarkReadingStatsOptions: RemarkReadingStatsOptions = {
wordsPerMinute: 300, // Specifies how many words per minute an average reader can read
}

svelteMarkdown({
plugins: {
remark: [[remarkReadingStats, remarkReadingStatsOptions]],
},
})
`

After installation and setup, access the readingStats object from frontmatter data.

Keep in mind that this depends on how you load your markdown pages and may vary from project to project.

Here is a simple example of a ReadingTime.svelte component that gets page data from a parent layout and generates it within a template.

`svelte


{#if readingStats}



{/if}
`

Or use it directly within markdown pages.

`md
---
title: Support page
description: Our friendly team is here to help.
---

Reading Time: {frontmatter.readingStats.text}
`

API

$3

- Type: ReadingStats

`ts
interface ReadingStats {
minutes: number
words: number
text: string
}
`

Options

$3

- Type: number
- Default: 200

Specifies how many words per minute an average reader can read.

`ts
{
wordsPerMinute: 200,
}
``

License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the MIT license.