Skip to content

Commit c25013a

Browse files
authored
Merge pull request #6 from milan-codes/develop
Remark plugin for displaying reading time
2 parents f4e8281 + 38a2e1e commit c25013a

7 files changed

Lines changed: 36 additions & 11 deletions

File tree

astro.config.mjs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import tailwind from "@astrojs/tailwind";
88

99
// https://astro.build/config
1010
import partytown from "@astrojs/partytown";
11+
import { remarkReadingTime } from "./remark-reading-time.mjs";
1112

1213
// https://astro.build/config
1314
export default defineConfig({
@@ -21,7 +22,7 @@ export default defineConfig({
2122
}),
2223
],
2324
markdown: {
24-
remarkPlugins: ["remark-math"],
25+
remarkPlugins: ["remark-math", remarkReadingTime],
2526
rehypePlugins: ["rehype-katex"],
2627
},
2728
});

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"@astrojs/svelte": "^2.0.1",
1616
"@astrojs/tailwind": "^3.0.1",
1717
"astro": "^2.0.4",
18+
"mdast-util-to-string": "^4.0.0",
19+
"reading-time": "^1.5.0",
1820
"svelte": "^3.54.0",
1921
"tailwindcss": "^3.0.24"
2022
},

remark-reading-time.mjs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import getReadingTime from "reading-time";
2+
import { toString } from "mdast-util-to-string";
3+
4+
export function remarkReadingTime() {
5+
return function (tree, { data }) {
6+
const textOnPage = toString(tree);
7+
const readingTime = getReadingTime(textOnPage);
8+
data.astro.frontmatter.minutesRead = readingTime.text;
9+
};
10+
}

src/components/BlogPost.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<h1 class="text-sm text-gray-400 dark:text-gray-600 mt-8">{formattedPublishDate(frontmatter.pubDate)}</h1>
99
<h1 class="text-xl text-gray-900 dark:text-gray-100 tracking-wider">{frontmatter.title}</h1>
1010
<h1 class="text-gray-600 dark:text-gray-400">{frontmatter.description}</h1>
11+
<h1 class="mt-1 text-sm text-gray-400 dark:text-gray-600">{frontmatter.minutesRead}</h1>
1112
<div class="prose dark:prose-invert text-gray-600 dark:text-gray-400 my-8">
1213
<slot />
1314
</div>

src/components/BlogPostCard.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</a>
1919
<p class="text-gray-600 dark:text-gray-400">{post.frontmatter.description}</p>
2020
<ul class="flex flex-wrap">
21-
<li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.readingTime} min read</li>
21+
<li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.frontmatter.minutesRead}</li>
2222
{#each post.frontmatter.tags as tag}
2323
<li class="mr-3 text-gray-400 dark:text-gray-600 text-sm font-medium hover:underline"><a href={`/tags/${tag}`}>{`#${tag}`}</a></li>
2424
{/each}

src/pages/blog/index.astro

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,9 @@ const orderedPosts = nonDraftPosts.sort((a, b) => {
99
const bDate = new Date(b.frontmatter.pubDate);
1010
return bDate.valueOf() - aDate.valueOf();
1111
});
12-
const postsWithReadingTime = orderedPosts.map((post) => {
13-
const wordCount = post.rawContent().split(" ").length;
14-
const readingTime = Math.ceil(wordCount / 200);
15-
return {
16-
...post,
17-
readingTime,
18-
};
19-
});
2012
---
2113

2214
<BaseLayout title="Milán Herke - Blog">
2315
<Navbar />
24-
{postsWithReadingTime.map((post) => <BlogPostCard post={post} />)}
16+
{orderedPosts.map((post) => <BlogPostCard post={post} />)}
2517
</BaseLayout>

yarn.lock

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -647,6 +647,13 @@
647647
dependencies:
648648
"@types/unist" "*"
649649

650+
"@types/mdast@^4.0.0":
651+
version "4.0.0"
652+
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.0.tgz#9f9462d4584a8b3e3711ea8bb4a94c485559ab90"
653+
integrity sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==
654+
dependencies:
655+
"@types/unist" "*"
656+
650657
"@types/ms@*":
651658
version "0.7.31"
652659
resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
@@ -2192,6 +2199,13 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
21922199
dependencies:
21932200
"@types/mdast" "^3.0.0"
21942201

2202+
mdast-util-to-string@^4.0.0:
2203+
version "4.0.0"
2204+
resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz#7a5121475556a04e7eddeb67b264aae79d312814"
2205+
integrity sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==
2206+
dependencies:
2207+
"@types/mdast" "^4.0.0"
2208+
21952209
merge-stream@^2.0.0:
21962210
version "2.0.0"
21972211
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -2919,6 +2933,11 @@ readdirp@~3.6.0:
29192933
dependencies:
29202934
picomatch "^2.2.1"
29212935

2936+
reading-time@^1.5.0:
2937+
version "1.5.0"
2938+
resolved "https://registry.yarnpkg.com/reading-time/-/reading-time-1.5.0.tgz#d2a7f1b6057cb2e169beaf87113cc3411b5bc5bb"
2939+
integrity sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==
2940+
29222941
rehype-katex@^6.0.3:
29232942
version "6.0.3"
29242943
resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-6.0.3.tgz#83e5b929b0967978e9491c02117f55be3594d7e1"

0 commit comments

Comments
 (0)