Add support to MDX in blog

src/components/blog/ListItem.astro

@@ -43,7 +43,7 @@ const image = await findImage(post.image);
 		<footer class="mt-4">
 			<div>
 				<span class="text-gray-500 dark:text-slate-400">
-					<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~
+					<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~
 					{Math.ceil(post.readingTime)} min read
 				</span>
 			</div>

src/components/blog/SinglePost.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 	<article>
 		<header>
 			<p class="max-w-3xl mx-auto text-center">
-				<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+				<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min read
 			</p>
 			<h1
 				class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
@@ -34,7 +34,7 @@ const { post } = Astro.props;
 		<div
 			class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
 		>
-			<Fragment set:html={post.body} />
+			{post.Content ? <post.Content /> : <Fragment set:html={post.body} />}
 		</div>
 		<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
 			<PostTags tags={post.tags} />

src/pages/rss.xml.js

@@ -23,7 +23,7 @@ export const get = async () => {
 			link: getPermalink(post.slug, 'post'),
 			title: post.title,
 			description: post.description,
-			pubDate: post.pubDate,
+			publishDate: post.publishDate,
 		})),
 	});
 };

src/utils/frontmatter.js

@@ -0,0 +1,11 @@
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+export function remarkReadingTime() {
+  return function (tree, { data }) {
+    const text = toString(tree);
+    const readingTime = Math.ceil(getReadingTime(text).minutes);
+
+    data.astro.frontmatter.readingTime = readingTime;
+  };
+}

src/utils/posts.js

@@ -1,13 +1,11 @@
-import getReadingTime from 'reading-time';
-
 const getNormalizedPost = async (post) => {
-	const { frontmatter, compiledContent, rawContent, file } = post;
+	const { frontmatter, Content, file } = post;
 	const ID = file.split('/').pop().split('.').shift();
 
 	return {
 		id: ID,
 
-		pubDate: frontmatter.pubDate,
+		publishDate: frontmatter.publishDate,
 		draft: frontmatter.draft,
 
 		canonical: frontmatter.canonical,
@@ -15,19 +13,21 @@ const getNormalizedPost = async (post) => {
 
 		title: frontmatter.title,
 		description: frontmatter.description,
-		body: compiledContent(),
 		image: frontmatter.image,
 
+		Content: Content,
+		// or 'body' in case you consume from API
+
 		excerpt: frontmatter.excerpt,
 		authors: frontmatter.authors,
 		category: frontmatter.category,
 		tags: frontmatter.tags,
-		readingTime: Math.ceil(getReadingTime(rawContent()).minutes),
+		readingTime: frontmatter.readingTime,
 	};
 };
 
 const load = async function () {
-	const posts = import.meta.glob('~/../data/blog/**/*.md', {
+	const posts = import.meta.glob(['~/../data/blog/**/*.md', '~/../data/blog/**/*.mdx'], {
 		eager: true,
 	});
 
@@ -37,7 +37,7 @@ const load = async function () {
 	});
 
 	const results = (await Promise.all(normalizedPosts))
-		.sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+		.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf())
 		.filter((post) => !post.draft);
 	return results;
 };