feat: Add @remark-reading-time to Blog

Dynamically calculates time to read blog by looking at the .md tree

astro.config.mjs

@@ -1,8 +1,12 @@
 import { defineConfig } from 'astro/config';
 
 import expressiveCode from 'astro-expressive-code';
+import { remarkReadingTime } from './remark-reading-time.mjs';
 
 export default defineConfig({
-  site: 'https://salm.dev',
-  integrations: [expressiveCode()]
+    site: 'https://salm.dev',
+    markdown: {
+        remarkPlugins: [remarkReadingTime]
+    },
+    integrations: [expressiveCode()]
 });

package.json

@@ -15,6 +15,7 @@
     "@expressive-code/plugin-line-numbers": "^0.37.0",
     "astro": "^4.16.2",
     "astro-expressive-code": "^0.37.0",
+    "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0"
   },
   "devDependencies": {

remark-reading-time.mjs

@@ -1,14 +1,10 @@
-
 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 = Math.round(readingTime.minutes);
+    data.astro.frontmatter.minutesRead = readingTime.text;
   };
-
 }

src/layouts/BlogLayout.astro

@@ -10,9 +10,13 @@ export interface Props {
         pubDate: string;
         minutesRead: string;
         tags: string[];
+        discussion?: string;
+        discussion_link?: string;
     }
 }
 const { content } = Astro.props as Props;
+const hasTags = content.tags && content.tags.length > 0;
+const hasDiscussion = content.discussion && content.discussion_link;
 ---
 <Layout title={content.title + ' - salm.dev'} description={content.description} blog={true}>
     <main class="container">
@@ -24,23 +28,31 @@ const { content } = Astro.props as Props;
                     <time datetime={content.pubDate}>
                         {new Date(content.pubDate).toLocaleDateString('en-us', { year:"numeric", month:"long", day:"numeric"})}
                     </time>
-                    <span class="reading-time">{content.minutesRead} read</span>
+                    <span class="reading-time">{content.minutesRead} min read</span>
+                </p>                {hasDiscussion && (
+                <p class="discussion">
+                    <i class="fa-solid fa-comment"></i>
+                    Discussion:
+                    <a href={content.discussion_link} class="discussion-link" target="_blank" rel="noopener noreferrer">
+                        {content.discussion}
+                    </a>
                 </p>
+                )}
                 <p class="description">{content.description}</p>
             </header>
             <TableOfContents />
             <div class="post-content">
                 <slot />
             </div>
-            {content.tags && content.tags.length > 0 && (
-                <div class="tags">
-                    <h3>Tags:</h3>
-                    <ul>
-                        {content.tags.map(tag => (
-                            <li><a href={`/tags/${tag}`}>{tag}</a></li>
-                        ))}
-                    </ul>
-                </div>
+            {hasTags && (
+            <div class="tags">
+                <h3>Tags:</h3>
+                <ul>
+                    {content.tags.map(tag => (
+                    <li><a href={`/tags/${tag}`}>{tag}</a></li>
+                    ))}
+                </ul>
+            </div>
             )}
             <RelatedPosts tags={content.tags} currentPostUrl={content.url} />
         </article>
@@ -67,6 +79,28 @@ const { content } = Astro.props as Props;
         line-height: 1.2;
     }
 
+    .discussion {
+        text-align: center;
+        margin: 0.5rem 0 1rem 0;
+        font-size: 1rem;
+    }
+
+    .discussion i {
+        margin-right: 0.25rem;
+    }
+
+    .discussion-link {
+        color: var(--color-accent);
+        text-decoration: none;
+        border-bottom: none;
+        transition: color 0.3s ease;
+        margin-left: 0.25rem;
+    }
+
+    .discussion-link:hover {
+        color: var(--color-primary);
+        border-bottom: none;
+    }
     .back-link {
         display: inline-block;
         color: var(--color-secondary);

src/pages/blog/cli-productivity/index.md

@@ -4,7 +4,8 @@ pubDate: 2024/10/10
 title: "Spotlight: CLI Productivity"
 description: "My command-line-centric workflow where I do my best work."
 tags: ["productivity", "neovim", "tmux", "terminal efficiency"]
-minutesRead: "9"
+discussion: ["Hacker News"]
+discussion_link: "https://news.ycombinator.com/item?id=12345678"
 ---
 
 _You can achieve peak productivity with nothing but the command line and your web browser. I will describe my minimal, focused, keyboard-centric workflow where I do my best work._

src/pages/blog/ergonomics/index.md

@@ -4,7 +4,6 @@ pubDate: 2024/08/18
 title: "Preserving my Future Self"
 description: "I underwent an ergonomic overhaul to improve health and reduce strain."
 tags: ["ergonomics", "typing setup", "health", "split keyboards", "colemak-dh"]
-minutesRead: "6"
 ---
 
 ### Motivation

src/pages/blog/mit-iquhack-2024/index.md

@@ -3,8 +3,7 @@ layout: ../../../layouts/BlogLayout.astro
 pubDate: 2024/01/21
 title: "MIT's IQuHACK 2024"
 description: "We secured a Top 3 finish at MIT's quantum hackathon!" 
-tags: ["Quantum Computing", "Hackathon", "Student Experience"]
-minutesRead: "7"
+tags: ["quantum computing", "hackathon", "student experience"]
 ---
 
 ### Introduction

src/pages/blog/the-hollow-path/index.md

@@ -4,7 +4,6 @@ pubDate: 2024/09/28
 title: "Retrospective: The Hollow Path"
 description: "AI’s silent undoing of true mastery."
 tags: ["personal growth", "generative ai", "education"]
-minutesRead: "9"
 ---
 
 _Coming soon..._