Managing Content Collections with Astro and KendoReact Typography

See how to manage content collections with Astro and styled with the KendoReact Typography component for a polished presentation.

Astro has recently become a popular tool for developers building high-performance, content-driven websites. It’s a static site generator that pre-renders content at build time, making it an ideal choice for sites that prioritize speed without sacrificing interactivity.

For a more detailed introduction to Astro and integrating React with Astro, be sure to check out our previously written articles—Integrating React with Astro and An Introduction to Astro—A Web Framework for Content-Driven Websites.

In this article, we’ll take a closer look at managing content collections with Astro, focusing on how it allows for more seamless creation and editing of Markdown content. Additionally, we’ll use the React Typography component from Progress Kendo UI to style and present that content within a React app.

Creating a New Astro Project

To get started, we’ll first create a new Astro project. We’ll open our terminal, navigate to the directory where we want to create your project, and run one of the following commands:

npm create astro@latest
 
---
 
yarn create astro

Once the setup wizard guides us through the process, we’ll navigate to our project folder (assuming we’ve named it astro-content-collections):

cd astro-content-collections

We’ll then start the local development server:

npm run dev

With our local server runnning, our new Astro site will be available at http://localhost:4321.

Organizing Content with Content Collections

Astro’s content collections make it easy to organize and work with Markdown (.md) or MDX (.mdx) content files. These collections can be placed inside the src/content/ directory, where each folder represents a collection. For this article, we’ll create a simple blog collection that contains a single post.

src/
  content/
    blog/
      post.md

We’ll then add sample Markdown content for the post.md file that lives in the src/content/blog folder.

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

Each Markdown file within the collection represents a content entry. With Astro’s built-in content API, we can easily query and display these entries on our pages. For example, in our root src/pages/index.astro file, we can retrieve all blog posts using the following code:

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

The getCollection method returns all entries in the blog collection while getEntry retrieves the single post collection entry we’ve created. The console.log we have in the example above will display the data in the terminal as this content is server-rendered by default.

Instead of using the content APIs to retrieve our content, we could instead render the HTML content of a Markdown collection entry by rendering the Astro <Content /> component. This can be accessed using the render method of the collection entry.

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

With this, we’ll now be presented with the rendered HTML content of our Markdown post.

We’ve presented our content but our content lacks visual structure or typography enhancements. We’ll now try and introduce the KendoReact Typography component for styling.

Using KendoReact Typography

The KendoReact Typography component provides a comprehensive set of text elements, including headings, paragraphs and code snippets that help present content in a React application.

Check out this out-of-the-box Kendo UI CLI tool, which can scaffold your Astro project with KendoReact: https://www.telerik.com/kendo-react-ui/components/getting-started/astro#create-an-astro-project-using-kendo-cli

To integrate KendoReact with Astro’s React components, we first need to install React within our Astro project.

npx astro add react

This sets up the necessary dependencies, allowing us to use React components in our .astro files. Next, let’s install KendoReact Typography:

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

Once installed, we can create a simple React component to display the Markdown content. Here’s an example of how to use the Typography component from KendoReact to style our content in a MarkdownRenderer component:

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>
  );
}

In the above example, we’re accessing the title from the Markdown metadata and displaying the body of the content as a paragraph.

In our root index.astro file, we can now use this newly created component to render the content:

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

In the above example, we use the getEntry method to retrieve the specific blog post from our content collection. We then pass the post’s content to our MarkdownRenderer component, which presents it using KendoReact Typography.

Voila! Our Markdown content is now styled using KendoReact Typography, making it both readable and more visually appealing.

For a deep-dive into creating consistent text styles with the KendoReact Typography component, be sure to check out this previous article we’ve written—Creating Consistent Text Styling with the KendoReact Typography Component.

Things to Keep in Mind

When rendering React components within Astro, there are some important considerations to keep in mind. First, our current Markdown renderer implementation will need to handle all the different HTML elements that might appear in our Markdown content. We’ve kept things simple in this article but we’ll need to handle HTML elements like multiple heading levels, lists, code blocks, tables, etc.

Additionally, client-side interactivity needs to be handled appropriately if we want interactivity in our React Markdown component. Remember that Astro’s partial hydration model means we need to explicitly specify which components should be interactive using client directives like client:load or client:visible (see Astro Docs—Client Directives for more details).

While we’ve focused on using a Markdown rendering approach with KendoReact Typography, we could also explore leveraging Astro’s slot system with a utility-first CSS library like Tailwind CSS that works well with Astro and content collections. We’ll look to explore this approach in an upcoming article!

Wrap-up

Content collections in Astro provide a powerful way to manage and organize a website’s content, while KendoReact Typography can help provide professional-grade styling capabilities. By combining these tools, we can create content-rich websites that are both performant and visually polished.

For more details on Astro’s content collections, be sure to check out the official documentation: Astro Docs—Content Collections.

For more details on KendoReact’s Typography components, be sure to check out the official documentation: KendoReact documentation—Typography Overview.

And don’t forget: KendoReact comes with a free 30-day trial! So if you haven’t already given it a spin, today is the day!

Try KendoReact