Skip to content

Latest commit

 

History

History
118 lines (96 loc) · 4.08 KB

reading-time.mdx

File metadata and controls

118 lines (96 loc) · 4.08 KB
Raw
title description i18nReady type
Ajout du temps de lecture
Construire un plugin remark pour ajouter le temps de lecture à vos fichiers Markdown ou MDX.
true
recipe

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Créez un plugin remark 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. Installer les paquets d'aide 
Installez ces deux paquets d'aide :
- [`reading-time`](https://www.npmjs.com/package/reading-time) pour calculer les minutes de lecture
- [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) pour extraire tout le texte de votre markdown

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install reading-time mdast-util-to-string
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add reading-time mdast-util-to-string
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add reading-time mdast-util-to-string
  ```
  </Fragment>
</PackageManagerTabs>

  1. Créer un plugin remark.

    Ce plugin utilise le paquet mdast-util-to-string pour obtenir le texte du fichier Markdown. Ce texte est ensuite transmis au paquet reading-time pour calculer le temps de lecture en minutes.

    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 nous donnera les minutes lues sous la forme d'une chaîne de caractères conviviale,
    // Ex: "3 min read"
    data.astro.frontmatter.minutesRead = readingTime.text;
  };
}

  2. Ajouter le plugin à votre configuration :

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

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

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

  3. Afficher le temps de lecture

    Si vos articles de blog sont stockés dans une collection de contenu, accédez au remarkPluginFrontmatter à partir de la fonction entry.render(). Ensuite, insérez minutesRead dans votre template à l'endroit où vous voulez qu'il apparaisse.

    ---
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 vous utilisez une mise en page Markdown, utilisez la propriété minutesRead du frontmatter de Astro.props dans votre template.

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

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