A custom Remark plugin that creates reading stats.
npm install @sveltek/remark-reading-statsA 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.
- Helps estimate how long it will take to read content
- Stores reading details to frontmatter for easy access
- Focuses on simplicity and performance
``sh`via pnpm
pnpm add -D @sveltek/remark-reading-stats
`sh`via npm
npm install -D @sveltek/remark-reading-stats
`ts
import { svelteMarkdown } from '@sveltek/markdown'
import { remarkReadingStats } from '@sveltek/remark-reading-stats'
svelteMarkdown({
plugins: {
remark: [[remarkReadingStats, options]],
},
})
`
`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]],
},
},
],
})
`
`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]],
},
},
],
})
`
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}
{readingStats.text}
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: 200Specifies how many words per minute an average reader can read.
`ts
{
wordsPerMinute: 200,
}
``Developed in ðŸ‡ðŸ‡· Croatia, © Sveltek.
Released under the MIT license.