Add support to MDX in blog

astro.config.mjs

@@ -6,8 +6,11 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
 import image from '@astrojs/image';
+import mdx from "@astrojs/mdx";
 import partytown from '@astrojs/partytown';
 
+import { remarkReadingTime } from './src/utils/frontmatter.js';
+
 import { SITE } from './src/config.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -28,6 +31,7 @@ export default defineConfig({
 		}),
 		sitemap(),
 		image(),
+		mdx(),
 
 		/* Disable this integration if you don't use Google Analytics (or other external script). */
 		partytown({
@@ -35,6 +39,11 @@ export default defineConfig({
 		}),
 	],
 
+	markdown: {
+    remarkPlugins: [remarkReadingTime],
+    extendDefaultPlugins: true,
+  },
+
 	vite: {
 		resolve: {
 			alias: {

data/blog/astrowind-template-in-depth.md

@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 08 2022"
+publishDate: "Aug 08 2022"
 title: "AstroWind template in depth"
 description: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti."
 image: "~/assets/images/hero.jpg"

data/blog/get-started-website-with-astro-tailwind-css.md

@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 12 2022"
+publishDate: "Aug 12 2022"
 title: "Get started with AstroWind to create a website using Astro and Tailwind CSS"
 description: "Lorem ipsum dolor sit amet"
 excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"

data/blog/how-to-customize-astrowind-to-your-brand.md

@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 10 2022"
+publishDate: "Aug 10 2022"
 title: "How to customize AstroWind template to suit your branding"
 description: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
 image: "~/assets/images/colors.jpg"

data/blog/markdown-elements-demo-post.mdx

@@ -1,12 +1,11 @@
 ---
-pubDate: "Aug 02 2022"
+publishDate: "Aug 02 2022"
 title: "Markdown elements demo post"
 description: "Lorem ipsum dolor sit amet"
 excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
 image: "~/assets/images/astronaut.jpg"
 tags: [markdown, astro, blog]
 ---
-
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 ## <a name="Headings"></a>Headings

data/blog/useful-resources-to-create-websites.md

@@ -1,5 +1,5 @@
 ---
-pubDate: "Aug 09 2022"
+publishDate: "Aug 09 2022"
 title: "Useful tools and resources to create a professional website"
 description: "Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus ridiculus elementum. Phasellus sollicitudin dignissim parturient."
 image: "~/assets/images/tools.jpg"

package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@astrojs/image": "^0.7.0",
+    "@astrojs/mdx": "^0.11.4",
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/rss": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
@@ -31,6 +32,7 @@
     "eslint-plugin-astro": "^0.19.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "limax": "^v2.1.0",
+    "mdast-util-to-string": "^3.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-astro": "^0.5.4",
     "reading-time": "^1.5.0",
@@ -39,5 +41,6 @@
   },
   "engines": {
     "node": "^14.15.0 || >=16.0.0"
-  }
+  },
+  "dependencies": {}
 }

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;
 };