chore: implemented custom astro components for mdx

Author: ringoldsdev

astro.config.mjs

@@ -13,6 +13,8 @@ import { rehypeHeadingIds } from "@astrojs/markdown-remark";
 
 import sectionize from "@hbsnow/rehype-sectionize";
 
+import rehypeShiftHeading from "rehype-shift-heading";
+
 // https://astro.build/config
 export default defineConfig({
 	site: "https://ringoldsdev.github.io/",
@@ -30,8 +32,20 @@ export default defineConfig({
 		rehypePlugins: [
 			rehypeHeadingIds,
 			sectionize,
-			rehypeAutolinkHeadings,
-			// [rehypeAutolinkHeadings, { behavior: "wrap" }],
+			[rehypeShiftHeading, { shift: 1 }],
+			// 			[
+			// 				rehypeAutolinkHeadings,
+			// 				{
+			// 					behavior: "append",
+			// 					content: {
+			// 						type: Node,
+			// 						value: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+			//   <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+			// </svg>
+			// `,
+			// 					},
+			// 				},
+			// 			],
 		],
 	},
 });

package.json

@@ -21,8 +21,10 @@
 		"alpinejs": "^3.14.9",
 		"astro": "^5.7.12",
 		"rehype-autolink-headings": "^7.1.0",
+		"rehype-shift-heading": "^2.0.0",
 		"rehype-slug": "^6.0.0",
 		"remark-toc": "^9.0.0",
+		"slugify": "^1.6.6",
 		"tailwindcss": "^4.1.5"
 	},
 	"devDependencies": {

pnpm-lock.yaml

@@ -0,0 +1,13 @@
+---
+import slugify from 'slugify';
+
+const id = await Astro.slots.render("default").then((content) => {
+  return slugify(content, { lower: true });
+});
+
+---
+
+<h2 id={id}>
+  <slot />
+  <a href=`#${id}`>@</a>
+</h2>

src/components/h2.astro

@@ -0,0 +1,13 @@
+---
+import slugify from 'slugify';
+
+const id = await Astro.slots.render("default").then((content) => {
+  return slugify(content, { lower: true });
+});
+
+---
+
+<h3 id={id}>
+  <slot />
+  <a href=`#${id}`>@</a>
+</h3>

src/components/h3.astro

@@ -0,0 +1,13 @@
+---
+import slugify from 'slugify';
+
+const id = await Astro.slots.render("default").then((content) => {
+  return slugify(content, { lower: true });
+});
+
+---
+
+<h4 id={id}>
+  <slot />
+  <a href=`#${id}`>@</a>
+</h4>

src/components/h4.astro

@@ -2,6 +2,10 @@
 import { getCollection, render } from 'astro:content';
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
+import h2 from '../../components/H2.astro';
+import h3 from '../../components/h3.astro';
+import h4 from '../../components/h4.astro';
+
 export async function getStaticPaths() {
   const posts = await getCollection('blog');
   return posts.map(post => ({
@@ -13,6 +17,12 @@ export async function getStaticPaths() {
 const { post } = Astro.props;
 const { Content, headings } = await render(post);
 
+const components = {
+  h2,
+  h3,
+  h4
+};
+
 ---
 
 <!-- https://medium.com/@rezahedi/how-to-build-table-of-contents-in-astro-and-sectionize-the-markdown-content-78bee84e6a7f -->
@@ -34,7 +44,7 @@ const { Content, headings } = await render(post);
         {post.data.description}
       </p>   
 
-      <Content/>
+      <Content components={components}/>
     </article>
   </div>
 </BaseLayout>