improve some more

astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from "astro/config"
 import svelte from "@astrojs/svelte"
 import UnoCSS from "unocss/astro"
 import mdx from "@astrojs/mdx"
+import { remarkReadingTime } from "./remark-reading-time.mjs"
 
 // https://astro.build/config
 export default defineConfig({
@@ -15,5 +16,8 @@ export default defineConfig({
 	experimental: {
 		viewTransitions: true
 	},
-	trailingSlash: "always"
+	trailingSlash: "always",
+	markdown: {
+		remarkPlugins: [remarkReadingTime]
+	}
 })

package.json

@@ -14,6 +14,8 @@
 		"@astrojs/rss": "^2.4.3",
 		"@astrojs/svelte": "^3.1.0",
 		"astro": "^2.9.1",
+		"mdast-util-to-string": "^4.0.0",
+		"reading-time": "^1.5.0",
 		"svelte": "^4.1.1"
 	},
 	"devDependencies": {

remark-reading-time.mjs

@@ -0,0 +1,12 @@
+import getReadingTime from "reading-time"
+import { toString } from "mdast-util-to-string"
+
+export function remarkReadingTime() {
+	return function (tree, { data }) {
+		const textOnPage = toString(tree)
+		const readingTime = getReadingTime(textOnPage)
+		// readingTime.text will give us minutes read as a friendly string,
+		// i.e. "3 min read"
+		data.astro.frontmatter.minutesRead = readingTime.text
+	}
+}

src/components/BlogPost.astro

@@ -1,5 +1,8 @@
 ---
-const { title, url } = Astro.props
+const { title, url, minutesRead, pubDate } = Astro.props
 ---
 
-<li><a href={url}>{title}</a></li>
+<li>
+	<a href={url}>{title}</a> <br />
+	approximately {minutesRead}, published {pubDate.slice(0,10)}
+</li>

src/pages/blog.astro

@@ -1,13 +1,14 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import BlogPost from "../components/BlogPost.astro"
 const allPosts = await Astro.glob("../pages/posts/*.mdx")
 const pageTitle = "bitbloxhub's blog"
 ---
 <Layout title={pageTitle}>
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1>bitbloxhub's blog!</h1>
 		<ul class="text-base">
-			{allPosts.map((post) => <li ><a href={post.url}>{post.frontmatter.title}</a></li>)}
+			{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} minutesRead={post.frontmatter.minutesRead} pubDate={post.frontmatter.pubDate} />)}
 		</ul>
 	</main>
 </Layout>

src/pages/posts/first-post.mdx

@@ -4,8 +4,5 @@ title: "I have a new blog!"
 pubDate: 2023-07-22
 description: "This is the first post of my new blog."
 author: "bitbloxhub"
-image:
-	url: "https://docs.astro.build/assets/full-logo-light.png"
-	alt: "The full Astro logo."
 ---
 Welcome to my new blog i have built using astro!