How to add an Estimated Reading Time to Astro Blog? about astro-paper HOT 10 CLOSED

// file: src/content/_schemas.ts
import { z } from "astro:content";

export const blogSchema = z
  .object({
    author: z.string().optional(),
    pubDatetime: z.date(),
    readingTime: z.string().optional(), // 👈🏻 optional readingTime frontmatter
    title: z.string(),
    postSlug: z.string().optional(),
    featured: z.boolean().optional(),
    draft: z.boolean().optional(),
    tags: z.array(z.string()).default(["others"]),
    ogImage: z.string().optional(),
    description: z.string(),
  })
  .strict();

export type BlogFrontmatter = z.infer<typeof blogSchema>;

// file: src/pages/posts/[slug].astro 

---
import { CollectionEntry, getCollection } from "astro:content";
import Posts from "@layouts/Posts.astro";
import PostDetails from "@layouts/PostDetails.astro";
import getSortedPosts from "@utils/getSortedPosts";
import getPageNumbers from "@utils/getPageNumbers";
import slugify from "@utils/slugify";
import { SITE } from "@config";
import type { BlogFrontmatter } from "@content/_schemas"; //  👈🏻 import frontmatter type

export interface Props {
  post: CollectionEntry<"blog">;
  frontmatter: BlogFrontmatter; //  👈🏻 specify frontmatter type in Props
}

export async function getStaticPaths() {
  const mapFrontmatter = new Map();
  
  // Get all posts using glob. This is to get the updated frontmatter
  const globPosts = await Astro.glob<BlogFrontmatter>(
    "../../content/blog/*.md"
  );

  // Then, set those frontmatter value in a JS Map with key value pair
  // (post-slug, frontmatter)
  globPosts.map(({ frontmatter }) => {
    mapFrontmatter.set(slugify(frontmatter), frontmatter);
  });

  const posts = await getCollection("blog", ({ data }) => !data.draft);

  const postResult = posts.map(post => ({
    params: { slug: slugify(post.data) },
    props: { post, frontmatter: mapFrontmatter.get(slugify(post.data)) }, // add extra frontmatter props
  }));

  const pagePaths = getPageNumbers(posts.length).map(pageNum => ({
    params: { slug: String(pageNum) },
  }));

  return [...postResult, ...pagePaths];
}

const { slug } = Astro.params;
const { post, frontmatter } = Astro.props;  // restructure frontmatter property

const posts = await getCollection("blog");

const sortedPosts = getSortedPosts(posts);

const totalPages = getPageNumbers(sortedPosts.length);

const currentPage =
  slug && !isNaN(Number(slug)) && totalPages.includes(Number(slug))
    ? Number(slug)
    : 0;
const lastPost = currentPage * SITE.postPerPage;
const startPost = lastPost - SITE.postPerPage;

const paginatedPosts = sortedPosts.slice(startPost, lastPost);
---

{
  post ? (
    <PostDetails post={post} frontmatter={frontmatter} /> // add frontmatter as prop to PostDetails component
  ) : (
    <Posts
      posts={paginatedPosts}
      pageNum={currentPage}
      totalPages={totalPages.length}
    />
  )
}

// file: getPostsWithRT.ts
import type { BlogFrontmatter } from "@content/_schemas";
import type { MarkdownInstance } from "astro";
import slugify from "./slugify";
import type { CollectionEntry } from "astro:content";

export const getReadingTime = async () => {
  // Get all posts using glob. This is to get the updated frontmatter
  const globPosts = import.meta.glob<MarkdownInstance<BlogFrontmatter>>(
    "../content/blog/*.md"
  );

  // Then, set those frontmatter value in a JS Map with key value pair
  const mapFrontmatter = new Map();
  const globPostsValues = Object.values(globPosts);
  await Promise.all(
    globPostsValues.map(async globPost => {
      const { frontmatter } = await globPost();
      mapFrontmatter.set(slugify(frontmatter), frontmatter.readingTime);
    })
  );

  return mapFrontmatter;
};

const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => {
  const mapFrontmatter = await getReadingTime();
  return posts.map(post => {
    post.data.readingTime = mapFrontmatter.get(slugify(post.data));
    return post;
  });
};

export default getPostsWithRT;

// file: utils/getSortedPosts
import type { CollectionEntry } from "astro:content";
import getPostsWithRT from "./getPostsWithRT";

const getSortedPosts = async (posts: CollectionEntry<"blog">[]) => { // make sure that this func must be async 
  const postsWithRT = await getPostsWithRT(posts); // add reading time 
  return postsWithRT
    .filter(({ data }) => !data.draft)
    .sort(
      (a, b) =>
        Math.floor(new Date(b.data.pubDatetime).getTime() / 1000) -
        Math.floor(new Date(a.data.pubDatetime).getTime() / 1000)
    );
};

export default getSortedPosts;

const sortedPosts = getSortedPosts(posts); // old code
const sortedPosts = await getSortedPosts(posts); // new code

file: src/layouts/PostDetails.astro
---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Tag from "@components/Tag.astro";
import Datetime from "@components/Datetime";
import type { CollectionEntry } from "astro:content";
import { slugifyStr } from "@utils/slugify";

export interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;

const { title, author, description, ogImage, pubDatetime, tags, readingTime } =
  post.data; // we can now directly access readingTime from frontmatter

....
---