Gestion des collections de contenu : typographie Astro et KendoReact

Découvrez comment gérer des collections de contenu avec Astro et stylisé avec le composant KendoReact Typography pour une présentation soignée.

Astro est récemment devenu un outil populaire pour les développeurs créant des sites Web hautes performances axés sur le contenu. Il s’agit d’un générateur de site statique qui pré-rend le contenu au moment de la construction, ce qui en fait un choix idéal pour les sites qui privilégient la vitesse sans sacrifier l’interactivité.

Pour une introduction plus détaillée à Astro et à l’intégration de React avec Astro, n’oubliez pas de consulter nos articles précédemment rédigés :Intégration de React avec Astro et Une introduction à Astro : un framework Web pour les sites Web axés sur le contenu.

Dans cet article, nous examinerons de plus près la gestion des collections de contenu avec Astro, en nous concentrant sur la façon dont cela permet une création et une édition plus transparentes du contenu Markdown. De plus, nous utiliserons le Typographie de réaction composant de Progress Kendo UI pour styliser et présenter ce contenu dans une application React.

Créer un nouveau projet Astro

Pour commencer, nous allons d’abord créer un nouveau projet Astro. Nous allons ouvrir notre terminal, accéder au répertoire dans lequel nous souhaitons créer votre projet et exécuter l’une des commandes suivantes :

npm create astro@latest
 
---
 
yarn create astro

Une fois que l’assistant de configuration nous guide tout au long du processus, nous accéderons à notre dossier de projet (en supposant que nous l’ayons nommé astro-content-collections) :

cd astro-content-collections

Nous allons ensuite démarrer le serveur de développement local :

npm run dev

Avec notre serveur local en marche, notre nouveau site Astro sera disponible sur http://localhost:4321.

Organisation du contenu avec des collections de contenu

Astro collections de contenu faciliter l’organisation et le travail avec Markdown (.md) ou MDX (.mdx) fichiers de contenu. Ces collections peuvent être placées à l’intérieur du src/content/ répertoire, où chaque dossier représente une collection. Pour cet article, nous allons créer une collection de blogs simple contenant un seul article.

src/
  content/
    blog/
      post.md

Nous ajouterons ensuite un exemple de contenu Markdown pour le post.md fichier qui réside dans le src/content/blog dossier.

---
title: "Getting Started with Astro"
description: "An introduction to Astro for content-driven websites."
date: "2024-10-22"
---
 
Astro is a powerful static site generator that pre-renders content, making your website fast and efficient.

Chaque fichier Markdown de la collection représente une entrée de contenu. Avec Astro intégré API de contenunous pouvons facilement interroger et afficher ces entrées sur nos pages. Par exemple, dans notre racine src/pages/index.astro fichier, nous pouvons récupérer tous les articles du blog en utilisant le code suivant :

---
import { getCollection, getEntry } from 'astro:content';
 
const allBlogPosts = await getCollection('blog');
const postBlog = await getEntry('blog', 'post');
 
console.log('allBlogPosts', allBlogPosts)
console.log('postBlog', postBlog)
---

Le obtenirCollection La méthode renvoie toutes les entrées du blog collecte pendant obtenirEntrée récupère le single post entrée de collection que nous avons créée. Le console.log que nous avons dans l’exemple ci-dessus affichera les données dans le terminal car ce contenu est rendu par le serveur par défaut.

Au lieu d’utiliser les API de contenu pour récupérer notre contenu, nous pourrions restituer le contenu HTML d’une entrée de collection Markdown en rendant l’Astro <Content /> composant. Celui-ci est accessible en utilisant le render méthode de saisie de la collection.

---
import { getCollection, getEntry } from 'astro:content';
const postBlog = await getEntry('blog', 'post');
const { Content } = await postBlog.render();
---
 

<Content />

Avec cela, le contenu HTML rendu de notre article Markdown nous sera maintenant présenté.

Nous avons présenté notre contenu mais notre contenu manque de structure visuelle ou d’améliorations typographiques. Nous allons maintenant essayer d’introduire le composant KendoReact Typography pour le style.

Utiliser la typographie KendoReact

Le KendoRéagir Le composant Typographie fournit un ensemble complet d’éléments de texte, notamment des titres, des paragraphes et des extraits de code qui aident à présenter le contenu dans une application React.

Découvrez cet outil CLI Kendo UI prêt à l’emploi, qui peut échafauder votre projet Astro avec KendoReact : https://www.telerik.com/kendo-react-ui/components/getting-started/astro#create-an-astro-project-using-kendo-cli

Pour intégrer KendoReact aux composants React d’Astro, nous devons d’abord installer React dans notre projet Astro.

npx astro add react

Cela configure les dépendances nécessaires, nous permettant d’utiliser les composants React dans notre .astro fichiers. Ensuite, installons KendoReact Typography :

npm install --save @progress/kendo-react-common

Une fois installé, nous pouvons créer un simple composant React pour afficher le contenu Markdown. Voici un exemple d’utilisation du Typography composant de KendoReact pour styliser notre contenu dans un MarkdownRenderer composant:

import React from "react";
import { Typography } from "@progress/kendo-react-common";
 
export default function MarkdownRenderer({ content }) {
  const { title } = content.data;
  const { body } = content;
 
  return (
    <div>
      <Typography.h1>{title}</Typography.h1>
      <Typography.p>{body}</Typography.p>
    </div>
  );
}

Dans l’exemple ci-dessus, nous accédons au titre à partir des métadonnées Markdown et affichons le corps du contenu sous forme de paragraphe.

Dans notre racine index.astro fichier, nous pouvons maintenant utiliser ce composant nouvellement créé pour restituer le contenu :

---
import MarkdownRenderer from '../components/MarkdownRenderer.jsx';
import { getEntry } from 'astro:content';
 
const postBlog = await getEntry('blog', 'post');
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Astro + KendoReact Typography</title>
  </head>
  <body>
    <main>
      <MarkdownRenderer content={postBlog} />
    </main>
  </body>
</html>

Dans l’exemple ci-dessus, nous utilisons le getEntry méthode pour récupérer l’article de blog spécifique de notre collection de contenu. Nous transmettons ensuite le contenu du message à notre MarkdownRenderer composant, qui le présente en utilisant la typographie KendoReact.

Voilà ! Notre contenu Markdown est désormais stylisé à l’aide de la typographie KendoReact, ce qui le rend à la fois lisible et plus attrayant visuellement.

Pour une analyse approfondie de la création de styles de texte cohérents avec le composant KendoReact Typography, assurez-vous de consulter cet article précédent que nous avons écrit :Création d’un style de texte cohérent avec le composant de typographie KendoReact.

Choses à garder à l’esprit

Lors du rendu des composants React dans Astro, il y a quelques considérations importantes à garder à l’esprit. Premièrement, notre implémentation actuelle du moteur de rendu Markdown devra gérer tous les différents éléments HTML susceptibles d’apparaître dans notre contenu Markdown. Nous avons gardé les choses simples dans cet article, mais nous devrons gérer des éléments HTML tels que plusieurs niveaux de titres, des listes, des blocs de code, des tableaux, etc.

De plus, l’interactivité côté client doit être gérée de manière appropriée si nous voulons de l’interactivité dans notre composant React Markdown. N’oubliez pas que le modèle d’hydratation partielle d’Astro signifie que nous devons spécifier explicitement quels composants doivent être interactifs à l’aide de directives client telles que client:load ou client:visible (voir Astro Docs – Directives client pour plus de détails).

Bien que nous nous soyons concentrés sur l’utilisation d’une approche de rendu Markdown avec la typographie KendoReact, nous pourrions également explorer l’exploitation de l’utilisation d’Astro. système de fentes avec une bibliothèque CSS utilitaire comme Tailwind CSS qui fonctionne bien avec Astro et les collections de contenu. Nous chercherons à explorer cette approche dans un prochain article !

Conclure

Les collections de contenu dans Astro offrent un moyen puissant de gérer et d’organiser le contenu d’un site Web, tandis que KendoReact Typography peut aider à fournir des capacités de style de qualité professionnelle. En combinant ces outils, nous pouvons créer des sites Web riches en contenu, à la fois performants et visuellement soignés.

Pour plus de détails sur les collections de contenu d’Astro, assurez-vous de consulter la documentation officielle : Astro Docs—Collections de contenu.

Pour plus de détails sur les composants Typographie de KendoReact, assurez-vous de consulter la documentation officielle : Documentation KendoReact—Présentation de la typographie.

Et n’oubliez pas : KendoReact est livré avec un essai gratuit de 30 jours ! Alors si vous ne l’avez pas encore essayé, c’est aujourd’hui le grand jour !

Essayez KendoReact