From 397e3211d70feb66837c073aedef82c59ba75cba Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Tue, 5 Nov 2024 18:12:45 +0700 Subject: [PATCH] docs: update est readingTime blog post (#409) Resolves #406 --- .../how-to-add-an-estimated-reading-time.md | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/content/blog/how-to-add-an-estimated-reading-time.md b/src/content/blog/how-to-add-an-estimated-reading-time.md index 80f568cc3..69255e27a 100644 --- a/src/content/blog/how-to-add-an-estimated-reading-time.md +++ b/src/content/blog/how-to-add-an-estimated-reading-time.md @@ -75,12 +75,14 @@ import { SITE } from "@config"; import { defineCollection, z } from "astro:content"; const blog = defineCollection({ - type: "content", + type: "content_layer", + loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }), schema: ({ image }) => z.object({ // others... canonicalURL: z.string().optional(), readingTime: z.string().optional(), // 👈🏻 readingTime frontmatter + // others... }), }); @@ -131,7 +133,7 @@ const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => { export default getPostsWithRT; ``` -Step (6) Refactor `getStaticPaths` of `/src/pages/posts/[slug]/index.astro` as the following +Step (6) Refactor `getStaticPaths` of `src/pages/posts/[slug]/index.astro` as the following ```ts --- @@ -217,7 +219,7 @@ Files that use `getSortedPosts` function are as follow - src/pages/index.astro - src/pages/search.astro - src/pages/rss.xml.ts -- src/pages/posts/index.astro +- src/pages/posts/[...page].astro - src/pages/posts/[slug]/index.astro - src/utils/getPostsByTag.ts @@ -241,21 +243,20 @@ const postsByTag = await getPostsByTag(posts, tag); // new code ✅ Moreover, update the `getStaticPaths` of `src/pages/tags/[tag]/[page].astro` like this: ```ts -export async function getStaticPaths() { +export async function getStaticPaths({ paginate }: GetStaticPathsOptions) { const posts = await getCollection("blog"); - const tags = getUniqueTags(posts); // Make sure to await the promises const paths = await Promise.all( tags.map(async ({ tag, tagName }) => { const tagPosts = await getPostsByTag(posts, tag); - const totalPages = getPageNumbers(tagPosts.length); - return totalPages.map(page => ({ - params: { tag, page: String(page) }, - props: { tag, tagName }, - })); + return paginate(tagPosts, { + params: { tag }, + props: { tagName }, + pageSize: SITE.postPerPage, + }); }) ); @@ -274,19 +275,21 @@ But in this section, I'm gonna show you how I would display `readingTime` in my Step (1) Update `Datetime` component to display `readingTime` ```tsx -import { LOCALE } from "@config"; +// other codes -export interface Props { - datetime: string | Date; +interface Props extends DatetimesProps, EditPostProps { size?: "sm" | "lg"; className?: string; - readingTime?: string; // new type + readingTime: string | undefined; // new type } export default function Datetime({ - datetime, + pubDatetime, + modDatetime, size = "sm", - className, + className = "", + editPost, + postId, readingTime, // new prop }: Props) { return ( @@ -294,6 +297,7 @@ export default function Datetime({ ({readingTime}) {/* display reading time */} + {size === "lg" && } // other codes ); @@ -302,11 +306,11 @@ export default function Datetime({ Step (2) Then, pass `readingTime` props from its parent component. -file: Card.tsx +file: `Card.tsx` ```ts export default function Card({ href, frontmatter, secHeading = true }: Props) { - const { title, pubDatetime, modDatetime description, readingTime } = frontmatter; + const { title, pubDatetime, modDatetime description, readingTime } = frontmatter; // don't forget to add readingTime here too return ( ...