Skip to content

Commit 88e5c43

Browse files
authored
docs: update estimated reading time blog post (satnaing#354)
Resolves satnaing#350
1 parent fc6b53f commit 88e5c43

File tree

1 file changed

+14
-8
lines changed

1 file changed

+14
-8
lines changed

src/content/blog/how-to-add-an-estimated-reading-time.md

+14-8
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export function remarkReadingTime() {
3333
return function (tree, { data }) {
3434
const textOnPage = toString(tree);
3535
const readingTime = getReadingTime(textOnPage);
36-
data.astro.frontmatter.readingTime = readingTime.text;
36+
// readingTime.text will give us minutes read as a friendly string,
37+
// i.e. "3 min read"
38+
data.astro.frontmatter.minutesRead = readingTime.text;
3739
};
3840
}
3941
```
@@ -88,15 +90,19 @@ export const collections = { blog };
8890
Step (5) Create a new file called `getPostsWithRT.ts` under `src/utils` directory.
8991

9092
```ts
91-
import type { MarkdownInstance } from "astro";
9293
import type { CollectionEntry } from "astro:content";
9394
import { slugifyStr } from "./slugify";
9495

96+
interface Frontmatter {
97+
frontmatter: {
98+
title: string;
99+
minutesRead: string;
100+
};
101+
}
102+
95103
export const getReadingTime = async () => {
96104
// Get all posts using glob. This is to get the updated frontmatter
97-
const globPosts = import.meta.glob("../content/blog/*.md") as Promise<
98-
CollectionEntry<"blog">["data"][]
99-
>;
105+
const globPosts = import.meta.glob<Frontmatter>("../content/blog/*.md");
100106

101107
// Then, set those frontmatter value in a JS Map with key value pair
102108
const mapFrontmatter = new Map();
@@ -106,7 +112,7 @@ export const getReadingTime = async () => {
106112
const { frontmatter } = await globPost();
107113
mapFrontmatter.set(
108114
slugifyStr(frontmatter.title),
109-
frontmatter.readingTime
115+
frontmatter.minutesRead
110116
);
111117
})
112118
);
@@ -125,7 +131,7 @@ const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => {
125131
export default getPostsWithRT;
126132
```
127133

128-
Step (6) Refactor `getStaticPaths` of `/src/pages/posts/[slug].astro` as the following
134+
Step (6) Refactor `getStaticPaths` of `/src/pages/posts/[slug]/index.astro` as the following
129135

130136
```ts
131137
---
@@ -212,7 +218,7 @@ Files that use `getSortedPosts` function are as follow
212218
- src/pages/posts/index.astro
213219
- src/pages/rss.xml.ts
214220
- src/pages/posts/index.astro
215-
- src/pages/posts/[slug].astro
221+
- src/pages/posts/[slug]/index.astro
216222
- src/utils/getPostsByTag.ts
217223
218224
All you have to do is like this

0 commit comments

Comments
 (0)