page-stats
Lightweight reading statistics — word count, reading time, and last-modified date. SSR-adoptable.
Overview
The <page-stats> component displays reading statistics for a target content element. It computes word count and estimated reading time, and can show the last-modified date.
It is designed for SSR adoption: if the SSG pre-renders stats at build time, the component detects existing markup and adopts it without re-rendering.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-for |
string | — | ID of the target content element to analyze |
data-wpm |
number | 238 |
Words per minute for reading time calculation |
data-show |
string | reading-time |
Comma-separated stats: reading-time, word-count, last-modified |
Usage
CSR — Auto-computed
Point data-for at a content element and the component computes stats on connect:
<page-stats data-for="article-content" data-show="reading-time,word-count"></page-stats>SSR — Pre-rendered
Render stats at build time. The component adopts existing <dl> markup without re-rendering:
<page-stats> <dl class="page-stats-list"> <dl-item> <dt class="sr-only">Reading time</dt> <dd><time datetime="PT5M">5 min read</time></dd> </dl-item> </dl></page-stats>Progressive Enhancement
Without JavaScript, pre-rendered stats are visible and useful. The <time> element with datetime is machine-readable. With JavaScript, the component computes stats dynamically from the target element.
Accessibility
Labels use class="sr-only" to provide screen reader context while keeping the visual display compact. The <dl> structure groups each label-value pair semantically via <dl-item>.