Added reading time timer

astro.config.mjs

@@ -1,7 +1,11 @@
 import { defineConfig } from "astro/config";
+import { remarkReadingTime } from "./src/plugins/remarkReadingTime";
 import sitemap from "@astrojs/sitemap";
 
 export default defineConfig({
 	site: "https://popov.link",
 	integrations: [sitemap()],
+	markdown: {
+		remarkPlugins: [remarkReadingTime],
+	},
 });

package-lock.json

@@ -12,6 +12,8 @@
         "@astrojs/rss": "^4.0.7",
         "@astrojs/sitemap": "^3.1.6",
         "astro": "^4.15.2",
+        "mdast-util-to-string": "^4.0.0",
+        "reading-time": "^1.5.0",
         "typescript": "^5.5.4"
       },
       "devDependencies": {
@@ -2245,9 +2247,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001657",
+      "version": "1.0.30001658",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001657.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001658.tgz",
-      "integrity": "sha512-DPbJAlP8/BAXy3IgiWmZKItubb3TYGP0WscQQlVGIfT4s/YlFYVuJgyOsQNP7rJRChx/qdMeLJQJP0Sgg2yjNA==",
+      "integrity": "sha512-N2YVqWbJELVdrnsW5p+apoQyYt51aBMSsBZki1XZEfeBCexcM/sf4xiAHcXQBkuOwJBXtWF7aW1sYX6tKebPHw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2614,12 +2616,12 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.6",
+      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -2724,9 +2726,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.14",
+      "version": "1.5.16",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.16.tgz",
-      "integrity": "sha512-bEfPECb3fJ15eaDnu9LEJ2vPGD6W1vt7vZleSVyFhYuMIKm3vz/g9lt7IvEzgdwj58RjbPKUF2rXTCN/UW47tQ==",
+      "integrity": "sha512-2gQpi2WYobXmz2q23FrOBYTLcI1O/P4heW3eqX+ldmPVDQELRqhiebV380EhlGG12NtnX1qbK/FHpN0ba+7bLA==",
       "license": "ISC"
     },
     "node_modules/emmet": {
@@ -4528,9 +4530,9 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
+      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -4959,6 +4961,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
+      "license": "MIT"
+    },
     "node_modules/rehype": {
       "version": "13.0.1",
       "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz",

package.json

@@ -15,6 +15,8 @@
     "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.1.6",
     "astro": "^4.15.2",
+    "mdast-util-to-string": "^4.0.0",
+    "reading-time": "^1.5.0",
     "typescript": "^5.5.4"
   },
   "devDependencies": {

src/components/CanonicalURL.astro

@@ -1,5 +0,0 @@
----
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
----
-
-<link href={canonicalURL} rel="canonical" />

src/layouts/PostLayout.astro

@@ -1,24 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<style>
-	.header {
-		text-align: center;
-	}
-</style>
-
-<BaseLayout>
-	<div class="header">
-		<h1>Title</h1>
-		<p>
-			<small>
-				Posted
-				<time datetime="#">#</time>
-				&nbsp;by&nbsp;Valentin Popov&nbsp;‐
-				<strong>1 min read</strong>
-			</small>
-		</p>
-	</div>
-	<slot />
-</BaseLayout>

src/pages/blog/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
-import Layout from "../../layouts/PostLayout.astro";
+import Layout from "../../layouts/PageLayout.astro";
 
 export async function getStaticPaths() {
 	const posts = await getCollection("blog");
@@ -12,9 +12,26 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
-const { Content } = await post.render();
+const { Content, remarkPluginFrontmatter } = await post.render();
 ---
 
+<style>
+	.header {
+		text-align: center;
+	}
+</style>
+
 <Layout>
+	<div class="header">
+		<h1>Title</h1>
+		<p>
+			<small>
+				Posted
+				<time datetime="#">#</time>
+				&nbsp;by&nbsp;Valentin Popov&nbsp;‐
+				<strong>{remarkPluginFrontmatter.minutesRead}</strong>
+			</small>
+		</p>
+	</div>
 	<Content />
 </Layout>

src/pages/feed.xml.js

@@ -1,5 +1,5 @@
-import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
+import rss from "@astrojs/rss";
 
 export async function GET(context) {
 	const posts = await getCollection("blog");

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../layouts/PageLayout.astro";
 import { getCollection } from "astro:content";
+import Layout from "../layouts/PageLayout.astro";
 
 const posts = await getCollection("blog");
 ---

src/plugins/remarkReadingTime.ts

@@ -0,0 +1,11 @@
+import type { RemarkPlugin } from "@astrojs/markdown-remark";
+import { toString } from "mdast-util-to-string";
+import getReadingTime from "reading-time";
+
+export function remarkReadingTime(): RemarkPlugin {
+	return function (tree, { data }) {
+		const textOnPage = toString(tree);
+		const readingTime = getReadingTime(textOnPage);
+		data.astro.frontmatter.minutesRead = readingTime.text;
+	};
+}