From 2f362eaf0937360a0f2a81bac41be81111fa06a8 Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Fri, 6 Sep 2024 08:21:27 +0000
Subject: Added reading time timer

---
 src/components/CanonicalURL.astro |  5 -----
 src/layouts/PostLayout.astro      | 24 ------------------------
 src/pages/blog/[...slug].astro    | 21 +++++++++++++++++++--
 src/pages/feed.xml.js             |  2 +-
 src/pages/index.astro             |  2 +-
 src/plugins/remarkReadingTime.ts  | 11 +++++++++++
 6 files changed, 32 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/CanonicalURL.astro
 delete mode 100644 src/layouts/PostLayout.astro
 create mode 100644 src/plugins/remarkReadingTime.ts

(limited to 'src')

diff --git a/src/components/CanonicalURL.astro b/src/components/CanonicalURL.astro
deleted file mode 100644
index 0081f71..0000000
--- a/src/components/CanonicalURL.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
----
-
-<link href={canonicalURL} rel="canonical" />
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
deleted file mode 100644
index 37bbe37..0000000
--- a/src/layouts/PostLayout.astro
+++ /dev/null
@@ -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>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index c94fe52..a142db4 100644
--- a/src/pages/blog/[...slug].astro
+++ b/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>
diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js
index 0fcc82f..a509386 100644
--- a/src/pages/feed.xml.js
+++ b/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");
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bc98c67..c4f5577 100644
--- a/src/pages/index.astro
+++ b/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");
 ---
diff --git a/src/plugins/remarkReadingTime.ts b/src/plugins/remarkReadingTime.ts
new file mode 100644
index 0000000..93f7b00
--- /dev/null
+++ b/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;
+	};
+}
-- 
cgit v1.2.3