@@ -33,7 +33,9 @@ export function remarkReadingTime() {
33
33
return function (tree , { data }) {
34
34
const textOnPage = toString (tree);
35
35
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 ;
37
39
};
38
40
}
39
41
```
@@ -88,15 +90,19 @@ export const collections = { blog };
88
90
Step (5) Create a new file called ` getPostsWithRT.ts ` under ` src/utils ` directory.
89
91
90
92
``` ts
91
- import type { MarkdownInstance } from " astro" ;
92
93
import type { CollectionEntry } from " astro:content" ;
93
94
import { slugifyStr } from " ./slugify" ;
94
95
96
+ interface Frontmatter {
97
+ frontmatter: {
98
+ title: string ;
99
+ minutesRead: string ;
100
+ };
101
+ }
102
+
95
103
export const getReadingTime = async () => {
96
104
// 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" );
100
106
101
107
// Then, set those frontmatter value in a JS Map with key value pair
102
108
const mapFrontmatter = new Map ();
@@ -106,7 +112,7 @@ export const getReadingTime = async () => {
106
112
const { frontmatter } = await globPost ();
107
113
mapFrontmatter .set (
108
114
slugifyStr (frontmatter .title ),
109
- frontmatter .readingTime
115
+ frontmatter .minutesRead
110
116
);
111
117
})
112
118
);
@@ -125,7 +131,7 @@ const getPostsWithRT = async (posts: CollectionEntry<"blog">[]) => {
125
131
export default getPostsWithRT ;
126
132
```
127
133
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
129
135
130
136
``` ts
131
137
-- -
@@ -212,7 +218,7 @@ Files that use `getSortedPosts` function are as follow
212
218
- src/pages/posts/index.astro
213
219
- src/pages/rss.xml.ts
214
220
- src/pages/posts/index.astro
215
- - src/pages/posts/[slug].astro
221
+ - src/pages/posts/[slug]/index .astro
216
222
- src/utils/getPostsByTag.ts
217
223
218
224
All you have to do is like this
0 commit comments