Agregar tiempo de lectura

Crea un plugin de remark que añada una propiedad de tiempo de lectura al frontmatter de tus archivos Markdown o MDX. Utiliza esta propiedad para mostrar el tiempo de lectura de cada página.

Receta

Instalar paquetes auxiliares

Instala estos dos paquetes auxiliares:

reading-time para calcular el tiempo de lectura en minutos
mdast-util-to-string para extraer todo el texto de tu documento Markdown

npm install reading-time mdast-util-to-string

pnpm add reading-time mdast-util-to-string

yarn add reading-time mdast-util-to-string

Crear un plugin de remark

Este plugin utiliza el paquete mdast-util-to-string para obtener el texto del archivo Markdown. Luego, este texto se pasa al paquete reading-time para calcular el tiempo de lectura en minutos.

import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() {
  return function (tree, { data }) {
    const textOnPage = toString(tree);
    const readingTime = getReadingTime(textOnPage);
    // readingTime.text nos dará el tiempo de lectura en minutos como un  string legible,
    // p. ej. "3 min read"
    data.astro.frontmatter.minutesRead = readingTime.text;
  };
}

Agrega el plugin a tu configuración de la siguiente manera:

import { defineConfig } from 'astro/config';
import { remarkReadingTime } from './remark-reading-time.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkReadingTime],
  },
});

Ahora todos los documentos Markdown tendrán una propiedad calculada minutesRead en su frontmatter.

Mostrar tiempo de lectura

Si tus publicaciones de blog están almacenadas en una colección de contenido, accede a remarkPluginFrontmatter desde la función entry.render(). Luego, muestra minutesRead en tu plantilla donde desees que aparezca.

---
import { CollectionEntry, getCollection } from 'astro:content';

export async function getStaticPaths() {
  const blog = await getCollection('blog');
  return blog.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content, remarkPluginFrontmatter } = await entry.render();
---

<html>
  <head>...</head>
  <body>
    ...
    <p>{remarkPluginFrontmatter.minutesRead}</p>
    ...
  </body>
</html>

Si estás utilizando una plantilla de Markdown, utiliza la propiedad minutesRead del frontmatter desde Astro.props en tu plantilla de diseño.

---
const { minutesRead } = Astro.props.frontmatter;
---

<html>
  <head>...</head>
  <body>
    <p>{minutesRead}</p>
    <slot />
  </body>
</html>

Contribuir

Comunidad

Agregar tiempo de lectura

Receta

¿Qué tienes en mente?

Crear un problema en GitHub

Envíanos comentarios

Envíanos comentarios