Ajout du temps de lecture

Créez un module d’extension mdast qui ajoute une propriété de temps de lecture au frontmatter de vos fichiers Markdown ou MDX. Utilisez cette propriété pour afficher le temps de lecture de chaque page.

Recette

1. Installez les paquets suivants en fonction du processeur Markdown utilisé :

   Sätteri
   • reading-time pour calculer le temps de lecture
   • @astrojs/markdown-satteri pour configurer le processeur satteri()
   • satteri pour créer un module d’extension mdast pour Sätteri

   npm

   npm install reading-time @astrojs/markdown-satteri satteri

   pnpm

   pnpm add reading-time @astrojs/markdown-satteri satteri

   Yarn

   yarn add reading-time @astrojs/markdown-satteri satteri

   Unified
   • reading-time pour calculer le temps de lecture
   • mdast-util-to-string pour extraire tout le texte de votre Markdown
   • @astrojs/markdown-remark pour utiliser le processeur unified()

   npm

   npm install reading-time mdast-util-to-string @astrojs/markdown-remark

   pnpm

   pnpm add reading-time mdast-util-to-string @astrojs/markdown-remark

   Yarn

   yarn add reading-time mdast-util-to-string @astrojs/markdown-remark

2. Créez un module d’extension mdast.

   Ce module d’extension récupère le texte du fichier Markdown. Ce texte est ensuite transmis au paquet reading-time pour calculer le temps de lecture en minutes.

   Sätteri

   src/mdast/mdast-reading-time.ts

   import getReadingTime from "reading-time";
   import { defineMdastPlugin } from "satteri";
   
   export const mdastReadingTimePlugin = defineMdastPlugin({
     name: "mdast-reading-time",
     after(root, context) {
       const textOnPage = context.textContent(root);
       const readingTime = getReadingTime(textOnPage);
   
       if (context.data.astro !== undefined) {
         // readingTime.text donnera le temps de lecture sous forme de chaîne conviviale,
         // c'est-à-dire "3 min de lecture"
         context.data.astro.frontmatter.minutesRead = readingTime.text;
       }
     },
   });

   Unified

   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 donnera le temps de lecture sous la forme d'une chaîne de caractères conviviale (en anglais),
       // c.-à-d. "1 min read"
       data.astro.frontmatter.minutesRead = readingTime.text;
     };
   }

3. Ajoutez le module d’extension à votre configuration :

   Sätteri

   astro.config.mjs

   import { satteri } from "@astrojs/markdown-satteri";
   import { defineConfig } from "astro/config";
   import { mdastReadingTimePlugin } from "./src/mdast/mdast-reading-time";
   
   export default defineConfig({
     markdown: {
       processor: satteri({
         mdastPlugins: [mdastReadingTimePlugin],
       }),
     },
   });

   Unified

   astro.config.mjs

   import { unified } from "@astrojs/markdown-remark";
   import { defineConfig } from "astro/config";
   import { remarkReadingTime } from "./remark-reading-time.mjs";
   
   export default defineConfig({
     markdown: {
       processor: unified({
         remarkPlugins: [remarkReadingTime],
       }),
     },
   });

   Désormais, tous les documents Markdown auront une propriété minutesRead calculée dans leur frontmatter.

4. Affichez le temps de lecture

   Si vos articles de blog sont stockés dans une collection de contenu, accédez à remarkPluginFrontmatter depuis la fonction render(). Ensuite, affichez minutesRead dans votre modèle à l’endroit où vous souhaitez qu’il apparaisse.

   src/pages/posts/[slug].astro

   ---
   import { getCollection, render } from "astro:content";
   
   export async function getStaticPaths() {
     const blog = await getCollection("blog");
     return blog.map((entry) => ({
       params: { slug: entry.id },
       props: { entry },
     }));
   }
   
   const { entry } = Astro.props;
   const { Content, remarkPluginFrontmatter } = await render(entry);
   ---
   
   <html>
     <head>
       <meta charset="utf-8" />
       <title>{entry.data.title}</title>
     </head>
     <body>
       <title>{entry.data.title}</title>
       <p>{remarkPluginFrontmatter.minutesRead}</p>
       <Content />
     </body>
   </html>

   Si vous utilisez une mise en page Markdown, utilisez la propriété minutesRead du frontmatter accessible depuis Astro.props dans votre modèle de mise en page.

   src/layouts/BlogLayout.astro

   ---
   const { minutesRead } = Astro.props.frontmatter;
   ---
   
   <html>
     <head>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>{minutesRead}</p>
       <slot />
     </body>
   </html>