feat: add remark reading time

src/layouts/BlogPost.astro

@@ -6,7 +6,8 @@ import { Picture } from "astro:assets";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage, readingTime } =
+    Astro.props;
 ---
 
 <BaseLayout title={title} description={description}>
@@ -32,6 +33,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
                     }
                 </div>
                 <h1>{title}</h1>
+                <p>{readingTime}</p>
                 <hr />
             </div>
             <slot />
@@ -55,9 +57,8 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
         box-shadow: var(--box-shadow);
     }
     .prose {
-        width: 768px;
-        max-width: calc(100% - 2em);
         color: rgb(var(--gray-dark));
+        text-wrap: pretty;
     }
     .title {
         margin-bottom: 1em;

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

@@ -7,6 +7,7 @@ import Ul from "../../components/Ul.astro";
 import Ol from "../../components/Ol.astro";
 import Li from "../../components/Li.astro";
 import Link from "../../components/Link.astro";
+import { getEntry } from "astro:content";
 
 export async function getStaticPaths() {
     const posts = await getCollection("blog");
@@ -18,7 +19,8 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
-const { Content } = await render(post);
+const { Content, remarkPluginFrontmatter } = await render(post);
+const readingTime = remarkPluginFrontmatter.minutesRead;
 
 const components = {
     ul: Ul,
@@ -29,6 +31,6 @@ const components = {
 };
 ---
 
-<BlogPost {...post.data}>
+<BlogPost {...post.data} readingTime={readingTime}>
     <Content components={components} />
 </BlogPost>

src/remark/remark-reading-time.ts

@@ -0,0 +1,12 @@
+import getReadingTime from "reading-time";
+import { toString } from "mdast-util-to-string";
+
+export function remarkReadingTime() {
+  return function (tree: any, { data }: { data: any }) {
+    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/styles/global.css

@@ -93,6 +93,9 @@ ol:not(ul ol, ol ol) {
     margin-bottom: 2em;
 }
 
+.footnotes {
+    margin-left: 2rem;
+}
 .footnotes ol {
     list-style: outside;
 }