Table of contents in blog (#46)

Author: prokawsar

mdsvex.config.js

@@ -1,17 +1,17 @@
-// import remarkPlugins from './src/plugins/remark/index.js';
 import relativeImages from 'mdsvex-relative-images'
 import rehypeExternalLinks from 'rehype-external-links'
+import rehypeSlug from 'rehype-slug'
 import rehypePlugins from './src/plugins/rehype/index.js'
+import remarkExportToc from './src/plugins/remark-toc.js'
 
 export default {
 	extensions: ['.md'],
 	smartypants: {
-		dashes: 'oldschool'
+		dashes: 'oldschool',
 	},
-	remarkPlugins: [relativeImages],
-	// remarkPlugins: [...Object.values(remarkPlugins)],
+	remarkPlugins: [remarkExportToc, relativeImages],
 	rehypePlugins: [
-		[rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
-		...Object.values(rehypePlugins)
-	]
+		[rehypeSlug, rehypeExternalLinks, { target: '_blank', rel: ['noopener', 'noreferrer'] }],
+		...Object.values(rehypePlugins),
+	],
 }

package-lock.json

@@ -43,6 +43,7 @@
 		"tailwindcss": "^3.4.4",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"unist-util-visit": "^5.0.0",
 		"vite": "^5.0.3",
 		"vite-plugin-compression2": "^1.3.3",
 		"vite-plugin-image-optimizer": "^1.1.8"

package.json

@@ -8,6 +8,7 @@
 
 html {
 	scroll-behavior: smooth;
+	scroll-padding-top: 80px;
 }
 
 @font-face {