[!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

# via pnpm
pnpm add -D @sveltek/remark-reading-stats

# via npm
npm install -D @sveltek/remark-reading-stats

Usage

Global

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

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

Layouts

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]],
      },
    },
  ],
})

Entries

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.

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.

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.

<!-- ReadingTime.svelte -->

<script lang="ts">
  import { page } from '$app/state'

  let readingStats = $derived(page.data.page?.readingStats)
</script>

{#if readingStats}
  <div>
    <p>{readingStats.text}</p>
  </div>
{/if}

Or use it directly within markdown pages.

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

Reading Time: {frontmatter.readingStats.text}

API

readingStats

• Type: ReadingStats

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

Options

wordsPerMinute

• Type: number
• Default: 200

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

{
  wordsPerMinute: 200,
}

License

Developed in 🇭🇷 Croatia, © Sveltek.

Released under the MIT license.