Saltearse al contenido

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

Sección titulada Receta
  1. Instalar paquetes auxiliares

Instala estos dos paquetes auxiliares:

Ventana de terminal
npm install reading-time mdast-util-to-string
  1. 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.

remark-reading-time.mjs
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;
  };
}
  1. Agrega el plugin a tu configuración de la siguiente manera:
astro.config.mjs
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.

  1. 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.

src/pages/posts/[slug].astro
---
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.

src/layouts/BlogLayout.astro
---
const { minutesRead } = Astro.props.frontmatter;
---


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