mdsvex

mdsvex.config.js

@@ -0,0 +1,73 @@
+import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+import remarkExternalLinks from 'remark-external-links';
+import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js';
+import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js';
+import rehypeImgSize from 'rehype-img-size';
+
+import remarkUnwrapImages from 'remark-unwrap-images';
+import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+
+// import { highlightCode } from './src/lib/utils/highlighter.js';
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const config = defineConfig({
+	extensions: ['.svelte.md', '.md', '.svx'],
+	smartypants: {
+		dashes: 'oldschool'
+	},
+	/* Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files */
+	// layout: {
+	// 	blog: './src/lib/components/blog/_blog-layout.svelte',
+	// 	project: './src/lib/components/projects/_project-layout.svelte',
+	// 	_: './src/lib/components/fallback/_layout.svelte'
+	// },
+	/* Plugins */
+	rehypePlugins: [
+		[rehypeSlug],
+		[rehypeImgSize]
+		// 	[
+		// 		/** Custom rehype plugin to add loading="lazy" to all images */
+		// 		() => {
+		// 			return (tree) => {
+		// 				visit(tree, 'element', (node) => {
+		// 					if (node.tagName === 'img') {
+		// 						node.properties.loading = 'lazy';
+		// 					}
+		// 				});
+		// 			};
+		// 		}
+		// 	]
+	],
+	remarkPlugins: [
+		[remarkToc, { maxDepth: 3, tight: true }],
+		[
+			(remarkExternalLinks,
+			{
+				target: '_blank'
+			})
+		],
+		[remarkUnwrapImages],
+		remarkSetImagePath,
+		remarkLinkWithImageAsOnlyChild
+		// 	[
+		// 		headings,
+		// 		{
+		// 			behavior: 'append',
+		// 			linkProperties: {},
+		// 			content: function (node) {
+		// 				return [
+		// 					h('span.icon.icon-link header-anchor', {
+		// 						ariaLabel: toString(node) + ' permalink'
+		// 					})
+		// 				];
+		// 			}
+		// 		}
+		// 	],
+
+		// 	remarkHeadingsPermaLinks,
+		// 	getHeadings
+	]
+});
+
+export default config;

package.json

@@ -33,6 +33,7 @@
     "@playwright/test": "^1.42.1",
     "@skeletonlabs/skeleton": "^2.9.0",
     "@skeletonlabs/tw-plugin": "^0.2.4",
+    "@sveltejs/amp": "^1.1.0",
     "@sveltejs/kit": "^2.5.4",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
@@ -40,12 +41,18 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.18",
+    "dropcss": "^1.0.16",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-svelte": "^2.35.1",
     "postcss": "^8.4.35",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
+    "rehype-img-size": "^1.0.1",
+    "remark-external-links": "^9.0.1",
+    "remark-slug": "^7.0.1",
+    "remark-toc": "^9.0.0",
+    "remark-unwrap-images": "^4.0.0",
     "svelte": "^4.2.12",
     "svelte-check": "^3.6.7",
     "svelte-maplibre": "^0.8.2",
@@ -53,6 +60,7 @@
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
+    "unist-util-visit": "^5.0.0",
     "vite": "^5.1.6",
     "vite-plugin-tailwind-purgecss": "^0.2.0",
     "vitest": "^0.32.4"

svelte.config.js

@@ -1,14 +1,20 @@
 import adapter from '@sveltejs/adapter-node';
 import preprocess from 'svelte-preprocess';
 
+// config extensions
+import { mdsvex } from 'mdsvex';
+import mdsvexConfig from './mdsvex.config.js';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	extensions: ['.svelte', ...(mdsvexConfig.extensions || [])],
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
 	preprocess: [
 		preprocess({
 			postcss: true
 		}),
+		mdsvex(mdsvexConfig)
 	],
 	kit: {
 		adapter: adapter({