config change

.vscode/settings.json

@@ -8,9 +8,12 @@
 
 	"editor.fontFamily": "Fira Code",
 	"editor.fontLigatures": true,
-	"prettier.documentSelectors": [
+	"markdownlint.config": {
-		"**/*.svelte"
+		"MD033": {
-	],
+			"allowed_elements": ["a"]
+		}
+	},
+	"prettier.documentSelectors": ["**/*.svelte"],
 	"tailwindCSS.classAttributes": [
 		"class",
 		"accent",

mdsvex.config.js

@@ -1,17 +1,17 @@
 import { defineMDSveXConfig as defineConfig } from 'mdsvex';
-import headings from 'remark-autolink-headings';
 import remarkExternalLinks from 'remark-external-links';
-import slug from 'remark-slug';
 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 remarkHeadingsPermaLinks from './src/lib/utils/remark-headings-permalinks.js';
 import { toString } from 'mdast-util-to-string';
 import rehypeWrap from 'rehype-wrap-all';
 import rehypeImgSize from 'rehype-img-size';
 import { h } from 'hastscript';
 import { visit } from 'unist-util-visit';
+
+import remarkUnwrapImages from 'remark-unwrap-images';
 import remarkToc from 'remark-toc';
-import getHeadings from './src/lib/utils/get-headings.js';
+import rehypeSlug from 'rehype-slug';
+
 // import { highlightCode } from './src/lib/utils/highlighter.js';
 
 /** @type {import('mdsvex').MdsvexOptions} */
@@ -20,55 +20,58 @@ const config = defineConfig({
 	smartypants: {
 		dashes: 'oldschool'
 	},
-	// Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files
+	/* Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files */
-	// highlight: {},
 	// 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: [
-		[rehypeWrap, { selector: 'table', wrapper: 'div.overflow-auto' }],
+		[rehypeSlug]
-		[rehypeImgSize, { dir: './static' }],
+
-		[
+		// 	[rehypeWrap, { selector: 'table', wrapper: 'div.overflow-auto' }],
-			/** Custom rehype plugin to add loading="lazy" to all images */
+		// 	[rehypeImgSize, { dir: './static' }],
-			() => {
+		// 	[
-				return (tree) => {
+		// 		/** Custom rehype plugin to add loading="lazy" to all images */
-					visit(tree, 'element', (node) => {
+		// 		() => {
-						if (node.tagName === 'img') {
+		// 			return (tree) => {
-							node.properties.loading = 'lazy';
+		// 				visit(tree, 'element', (node) => {
-						}
+		// 					if (node.tagName === 'img') {
-					});
+		// 						node.properties.loading = 'lazy';
-				};
+		// 					}
-			}
+		// 				});
-		]
+		// 			};
+		// 		}
+		// 	]
 	],
 	remarkPlugins: [
-		[remarkToc, { maxDepth: 3, tight: true }][
+		[remarkToc, { maxDepth: 3, tight: true }],
+		[
 			(remarkExternalLinks,
 			{
 				target: '_blank'
 			})
 		],
-		slug,
+		[remarkUnwrapImages]
-		[
+		// 	[
-			headings,
+		// 		headings,
-			{
+		// 		{
-				behavior: 'append',
+		// 			behavior: 'append',
-				linkProperties: {},
+		// 			linkProperties: {},
-				content: function (node) {
+		// 			content: function (node) {
-					return [
+		// 				return [
-						h('span.icon.icon-link header-anchor', {
+		// 					h('span.icon.icon-link header-anchor', {
-							ariaLabel: toString(node) + ' permalink'
+		// 						ariaLabel: toString(node) + ' permalink'
-						})
+		// 					})
-					];
+		// 				];
-				}
+		// 			}
-			}
+		// 		}
-		],
+		// 	],
-		remarkSetImagePath,
+		// 	remarkSetImagePath,
-		remarkLinkWithImageAsOnlyChild,
+		// 	remarkLinkWithImageAsOnlyChild,
-		remarkHeadingsPermaLinks,
+		// 	remarkHeadingsPermaLinks,
-		getHeadings
+		// 	getHeadings
 	]
 });
 

mdsvex.config.ts

@@ -0,0 +1,50 @@
+import { MdsvexOptions, defineMDSveXConfig as defineConfig } from 'mdsvex';
+import headings from 'rehype-autolink-headings';
+import remarkExternalLinks from 'remark-external-links';
+import slug from 'rehype-slug';
+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 { toString } from 'mdast-util-to-string';
+import rehypeWrap from 'rehype-wrap-all';
+import rehypeImgSize from 'rehype-img-size';
+import { h } from 'hastscript';
+import { visit } from 'unist-util-visit';
+import remarkToc from 'remark-toc';
+// import { highlightCode } from './src/lib/utils/highlighter.js';
+
+const config: MdsvexOptions = defineConfig({
+	extensions: ['.svelte.md', '.md', '.svx'],
+	smartypants: {
+		dashes: 'oldschool'
+	}
+	// Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files
+	// highlight: {},
+	// layout: {
+	// 	blog: './src/lib/components/blog/_blog-layout.svelte',
+	// 	project: './src/lib/components/projects/_project-layout.svelte',
+	// 	_: './src/lib/components/fallback/_layout.svelte'
+	// },
+	// rehypePlugins: [
+	// 	[rehypeWrap, { selector: 'table', wrapper: 'div.overflow-auto' }],
+	// 	[rehypeImgSize, { dir: './static' }],
+	// 	[slug],
+	// 	[
+	// 		headings,
+	// 		{
+	// 			behavior: 'prepend',
+	// 			headingProperties: {},
+	// 			content: '<i class="fa-regular fa-link"></i>'
+	// 		}
+	// 	]
+	// ],
+	// remarkPlugins: [
+	// 	[remarkToc, { maxDepth: 3, tight: true }],
+	// 	[remarkExternalLinks, { target: '_blank', rel: 'noreferrer' }],
+	// 	remarkSetImagePath,
+	// 	remarkLinkWithImageAsOnlyChild,
+	// 	remarkHeadingsPermaLinks,
+	// 	getHeadings
+	// ]
+});
+
+export default config;

playwright/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Testing Page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

playwright/index.ts

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';

src/app.html

@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
-		<link rel="icon" href="/Logo.png" />
+		<link rel="icon" href="/images/profile-pic.png" />
 		<!-- <link
 			rel="icon"
 			href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 18 16'><text x='0' y='14'>🚀</text></svg>"

src/lib/config.ts

@@ -2,12 +2,11 @@ import { dev } from '$app/environment';
 
 export const title = "Matt's Propaganda Machine";
 export const description =
-	'A blog, portfolio of Matt Morin - a complex organism radically living on planet Earth, staring into the abyss and trying to code his way out of it.';
+	'A blog & portfolio of Matt Morin - a complex organism radically living on planet Earth, staring into the abyss and trying to code his way out of it.';
 export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in';
 export const author = 'Matt Morin';
 
-export const email = 'mailto:matt.b.morin@pm.me';
+export const email = 'matt.b.morin@protonmail.com';
-export const LinkedIn = 'https://www.linkedin.com/in/matthieu-morin/';
 export const github = 'https://github.com/matthieu42morin';
 
 // prettier-ignore

tsconfig.json

@@ -6,7 +6,7 @@
 		"noEmit": true,
 		"target": "esnext",
 		"module": "esnext",
-		"moduleResolution": "node",
+		"moduleResolution": "Bundler",
 		"allowSyntheticDefaultImports": true,
 		"strict": true,
 		"skipLibCheck": true,
@@ -16,7 +16,7 @@
 		"resolveJsonModule": true,
 		"sourceMap": true
 	},
-	"include": ["./scripts/**/*", "./test/*.js", "./*.js"],
+	"include": ["./scripts/**/*", "./test/*.js", "./*.js", "mdsvex.config.ts", "svelte.config.ts"],
 	"exclude": ["node_modules/*"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//