Adicione tempo de leitura

Crie um plugin remark que adiciona uma propriedade de tempo de leitura ao frontmatter dos seus arquivos Markdown ou MDX. Use essa propriedade para exibir o tempo de leitura de cada página.

Receita

Instale pacotes utilitários

Instale esses dois pacotes utilitários:

reading-time para calcular o tempo de leitura
mdast-util-to-string para obter o texto do arquivo 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

Crie um plugin remark.

Esse plugin usa o pacote mdast-util-to-string para obter o texto do arquivo Markdown. Esse texto é então passado para o pacote reading-time para calcular o tempo de leitura em minutos.

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

export function remarkReadingTime() {
  return function (tree, { data }) {
    const textoPagina = toString(tree);
    const tempoLeitura = getReadingTime(textoPagina);
    // tempoLeitura.text nos dará minutos lidos como uma string amigável
    // i.e. "3 min read"
    data.astro.frontmatter.minutesRead = tempoLeitura.text;
  };
}

Adicione o plugin à sua configuração:

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

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

Agora todos os documentos Markdown terão uma propriedade minutesRead calculada em seu frontmatter.

Exiba o Tempo de Leitura

Se seus posts de blog estiverem armazenados em uma coleção de conteúdo, acesse o remarkPluginFrontmatter da função entry.render(). Em seguida, renderize minutesRead em seu template onde você gostaria que ele aparecesse.

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

Se você estiver usando um layout Markdown, use a propriedade minutesRead do frontmatter de Astro.props no layout de seu template.

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

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

Contribua

Comunidade

Adicione tempo de leitura

Receita

O que passa em sua cabeça?

Criar uma Issue no GitHub

Enviar feedback

Enviar feedback