Merge pull request #5 from milan-codes/develop

Added reading time to posts

Author: milan-codes

src/components/BlogPostCard.svelte

@@ -18,6 +18,7 @@
         </a>
     <p class="text-gray-600 dark:text-gray-400">{post.frontmatter.description}</p>
     <ul class="flex flex-wrap">
+        <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm">{post.readingTime} min read</li>
         {#each post.frontmatter.tags as tag}
             <li class="mr-3 text-gray-400 dark:text-gray-600 text-sm font-medium hover:underline"><a href={`/tags/${tag}`}>{`#${tag}`}</a></li>
         {/each}

src/pages/blog.astro

@@ -0,0 +1,25 @@
+---
+import BlogPostCard from "../../components/BlogPostCard.svelte";
+import Navbar from "../../components/Navbar.svelte";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+const allPosts = await Astro.glob("./*.md");
+const nonDraftPosts = allPosts.filter((post) => !post.frontmatter.draft);
+const orderedPosts = nonDraftPosts.sort((a, b) => {
+  const aDate = new Date(a.frontmatter.pubDate);
+  const bDate = new Date(b.frontmatter.pubDate);
+  return bDate.valueOf() - aDate.valueOf();
+});
+const postsWithReadingTime = orderedPosts.map((post) => {
+  const wordCount = post.rawContent().split(" ").length;
+  const readingTime = Math.ceil(wordCount / 200);
+  return {
+    ...post,
+    readingTime,
+  };
+});
+---
+
+<BaseLayout title="Milán Herke - Blog">
+  <Navbar />
+  {postsWithReadingTime.map((post) => <BlogPostCard post={post} />)}
+</BaseLayout>