Astro JS - Manage Contents

Quiz

Contents in Astro

Astro is known for its optimization and management of contents to improve the performance of your application. It allows you to create and add plugins to your project that can help you manage the contents of your application. In this chapter, we will discuss how to create and add plugins for:

Last Modified Time
Reading Time

Add Last Modified Time

Astro provides a way to add last modified time to your pages. This is useful for SEO purposes and to show the last updated time of your page. You can use the lastModified property in the frontmatter of your page to add the last modified time. Follow the steps below to add last modified time to your pages.

Step 1: Install the Package

To add last modified time to your pages, you need to install the npm package of day.js. Run the following command in your terminal:

>> npm install dayjs

Step 2: Create Plugin

Next step is to create a plugin that will add the last modified time to your pages. This plugin uses execSync to run a Git command that returns the timestamp of the latest commit in ISO 8601 format. The timestamp is then added to the frontmatter of the file.

// src/plugins/remark-last-modified.js

import { execSync } from "child_process";

export function remarkModifiedTime() {
  return function (tree, file) {
    const filepath = file.history[0];
    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
    file.data.astro.frontmatter.lastModified = result.toString();
  };
}

Step 3: Configure the Plugin

Now you need to configure the plugin in the astro.config.mjs file. Open the astro.config.mjs file and add the following code:

// astro.config.mjs

import { defineConfig } from 'astro/config';
import { remarkModifiedTime } from './remark-modified-time.mjs';

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

Step 4: Use the Last Modified Time

Now you can use the last modified time in your pages. If your content is stored in a content collection, access the remarkPluginFrontmatter from the render(entry) function. Then render lastModified in your template wherever you would like it to appear.

Here is an example of how to use the last modified time in your pages:

 
// src/pages/index.astro

---
import { getCollection, render } from 'astro:content';
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

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

const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
  .utc()
  .format("HH:mm:ss DD MMMM YYYY UTC");
---

<html>
    <head>...</head>
    <body>
        ...
        <p>Last Modified: {lastModified}</p>
        ...
    </body>
</html>

Add Reading Time

Astro also provides a way to add reading time to your pages. This is useful for SEO purposes and to show the expected reading time of your page. You can use the readingTime property in the frontmatter of your page to add the reading time. Follow the steps below to add reading time to your pages.

Step 1: Install the Package

To add reading time to your pages, you need to install the npm package of reading-time. You need to install two packages.

The reading-time to calculate minutes read
The mdast-util-to-string to extract all text from your markdown file

Run the following command in your terminal:

>> npm install reading-time mdast-util-to-string

Step 2: Create Plugin

Next step is to create a plugin that will add the reading time to your pages. This plugin uses the mdast-util-to-string package to get the Markdown fileâs text. This text is then passed to the reading-time package to calculate the reading time in minutes. The reading time is then added to the frontmatter of the file.

// src/plugins/remark-reading-time.js

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);
    data.astro.frontmatter.minutesRead = readingTime.text;
  };
}

Step 3: Configure the Plugin

Now you need to configure the plugin in the astro.config.mjs file. Open the astro.config.mjs file and add the following code:

// astro.config.mjs

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

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

Step 4: Use the Reading Time

Now you can use the reading time in your pages. If your blog posts are stored in a content collection, access the remarkPluginFrontmatter from the render(entry) function. Then, render minutesRead in your template wherever you would like it to appear.

Here is an example of how to use the reading time in your pages:

---
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>...</head>
  <body>
    ...
    <p>{remarkPluginFrontmatter.minutesRead}</p>
    ...
  </body>
</html>

Print Page