refactor: compute reading time from body, drop legacy remark plugin for Astro 7

Author: kreatoo

astro.config.mjs

@@ -1,12 +1,8 @@
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
-import { readingTimePlugin } from './src/plugins/readingTimePlugin.js';
 import siteConfig from './site.config.mjs';
 
 export default defineConfig({
   site: siteConfig.SITE_URL,
   integrations: [sitemap()],
-  markdown: {
-    remarkPlugins: [readingTimePlugin],
-  },
 });

bun.lock

@@ -15,8 +15,7 @@
     "@astrojs/sitemap": "^3.7.2",
     "astro": "^7.0.0",
     "isomorphic-git": "^1.37.5",
-    "marked": "^18.0.0",
-    "mdast-util-to-string": "^4.0.0"
+    "marked": "^18.0.0"
   },
   "devDependencies": {
     "typescript": "^6.0.2"

package.json

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import PostMeta from './PostMeta.astro';
 import { getPostTitle } from '../utils/content';
 import { getPostComputedMetadataById } from '../utils/postMetadata';
+import { getReadingTime } from '../utils/readingTime';
 import siteConfig from '../../site.config.mjs';
 
 export interface Props {
@@ -11,6 +12,7 @@ export interface Props {
 
 const { post } = Astro.props;
 const { description, date, tags, readTime, commitHash } = post.data;
+const effectiveReadTime = readTime ?? getReadingTime(post.body ?? '');
 const title = getPostTitle(post);
 const postUrl = `/blog/${post.id.replace(/\.md$/, '')}/`;
 
@@ -23,7 +25,7 @@ const effectiveCommitURL = siteConfig.SHOW_COMMIT_INFO ? computed?.commitURL : u
 <article class="blog-post" data-title={title} data-description={description} data-tags={tags.join(',')}>
     <h3>
         <a href={postUrl} class="post-link">{title}</a>
-        {effectiveDate && <PostMeta date={effectiveDate} commitURL={effectiveCommitURL} commitHash={effectiveCommitHash} readTime={readTime} />}
+        {effectiveDate && <PostMeta date={effectiveDate} commitURL={effectiveCommitURL} commitHash={effectiveCommitHash} readTime={effectiveReadTime} />}
     </h3>
     {description && <p class="post-description">{description}</p>}
 </article>

src/components/BlogCard.astro

@@ -2,7 +2,7 @@ import { defineCollection, z } from 'astro:content';
 import { glob } from 'astro/loaders';
 
 const blog = defineCollection({
-  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
+  loader: glob({ pattern: '**/*.md', base: './src/content/blog', retainBody: true }),
   schema: z.object({
     author: z.string().default('Kreato'),
     tags: z.array(z.string()).default([]),

src/content.config.ts

@@ -6,6 +6,7 @@ import ThemeSettings from '../components/ThemeSettings.astro';
 import type { CollectionEntry } from 'astro:content';
 import { getPostTitle } from '../utils/content';
 import { getPostComputedMetadataById } from '../utils/postMetadata';
+import { getReadingTime } from '../utils/readingTime';
 import { render } from 'astro:content';
 
 export interface Props {
@@ -15,6 +16,7 @@ export interface Props {
 
 const { entry, relatedPosts = [] } = Astro.props;
 const { title: frontmatterTitle, description, author, date, tags, readTime } = entry.data;
+const effectiveReadTime = readTime ?? getReadingTime(entry.body ?? '');
 const title = frontmatterTitle || getPostTitle(entry);
 const { Content } = await render(entry);
 
@@ -47,12 +49,12 @@ const structuredData = {
         <h1>{title}</h1>
         <p class="post-meta">
           {tags.length > 0 && <TagList tags={tags} />}
-          {tags.length > 0 && (author || effectiveDate || readTime) && <span class="meta-separator">·</span>}
+          {tags.length > 0 && (author || effectiveDate || effectiveReadTime) && <span class="meta-separator">·</span>}
           {author && <span>by {author}</span>}
-          {author && (effectiveDate || readTime) && <span class="meta-separator">·</span>}
+          {author && (effectiveDate || effectiveReadTime) && <span class="meta-separator">·</span>}
           {effectiveDate && <time datetime={effectiveDate.toISOString()}>{effectiveDate.toLocaleDateString()}</time>}
-          {effectiveDate && readTime && <span class="meta-separator">·</span>}
-          {readTime && <span>{readTime}</span>}
+          {effectiveDate && effectiveReadTime && <span class="meta-separator">·</span>}
+          {effectiveReadTime && <span>{effectiveReadTime}</span>}
         </p>
       </header>
       <div class="content">

src/layouts/BlogLayout.astro

@@ -1,6 +1,26 @@
 export function calculateReadingTime(content) {
   const wordsPerMinute = 200;
-  const words = content.trim().split(/\s+/).length;
+  const words = content.trim().split(/\s+/).filter(Boolean).length;
   const minutes = Math.ceil(words / wordsPerMinute);
   return `~${minutes} min read`;
 }
+
+function stripMarkdown(body = '') {
+  return body
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/~~~[\s\S]*?~~~/g, ' ')
+    .replace(/`[^`]*`/g, ' ')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/^>{1,}\s+/gm, ' ')
+    .replace(/^#{1,6}\s+/gm, ' ')
+    .replace(/^\s*[-*+]\s+/gm, ' ')
+    .replace(/[*_~]/g, ' ')
+    .replace(/^\s*[-*_]{3,}\s*$/gm, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+export function getReadingTime(body) {
+  return calculateReadingTime(stripMarkdown(body));
+}