feat: switch markdown parser to remark + friends

package.json

@@ -1,66 +1,71 @@
 {
-  "name": "coredump",
+	"name": "coredump",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev",
+		"dev": "vite dev",
-    "build": "vite build",
+		"build": "vite build",
-    "preview": "vite preview",
+		"preview": "vite preview",
-    "test": "playwright test",
+		"test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+		"format": "prettier --write ."
-  },
+	},
-  "devDependencies": {
+	"devDependencies": {
-    "@faker-js/faker": "^8.4.1",
+		"@faker-js/faker": "^8.4.1",
-    "@playwright/test": "^1.28.1",
+		"@playwright/test": "^1.28.1",
-    "@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/eslint": "^8.56.0",
+		"@types/eslint": "^8.56.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+		"@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.19",
+		"autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
+		"eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
+		"eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
+		"eslint-plugin-svelte": "^2.35.1",
-    "postcss": "^8.4.38",
+		"postcss": "^8.4.38",
-    "prettier": "^3.1.1",
+		"prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
+		"svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
+		"svelte-check": "^3.6.0",
-    "svelte-typewriter": "^3.2.3",
+		"svelte-typewriter": "^3.2.3",
-    "tailwindcss": "^3.4.3",
+		"tailwindcss": "^3.4.3",
-    "tslib": "^2.4.1",
+		"tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+		"typescript": "^5.0.0",
-    "vite": "^5.0.3"
+		"vite": "^5.0.3"
-  },
+	},
-  "type": "module",
+	"type": "module",
-  "trustedDependencies": [
+	"trustedDependencies": [
-    "svelte-preprocess",
+		"svelte-preprocess",
-    "@sveltejs/kit",
+		"@sveltejs/kit",
-    "esbuild",
+		"esbuild",
-    "@sveltejs/adapter-vercel"
+		"@sveltejs/adapter-vercel"
-  ],
+	],
-  "dependencies": {
+	"dependencies": {
-    "@fontsource/geist-mono": "^5.0.2",
+		"@fontsource/geist-mono": "^5.0.2",
-    "@fontsource/geist-sans": "^5.0.2",
+		"@fontsource/geist-sans": "^5.0.2",
-    "@fontsource/merriweather": "^5.0.12",
+		"@fontsource/merriweather": "^5.0.12",
-    "@fontsource/zilla-slab": "^5.0.12",
+		"@fontsource/zilla-slab": "^5.0.12",
-    "@svelte-put/toc": "^5.0.1",
+		"@svelte-put/toc": "^5.0.1",
-    "@sveltejs/adapter-vercel": "^5.2.0",
+		"@sveltejs/adapter-vercel": "^5.2.0",
-    "bits-ui": "^0.21.2",
+		"bits-ui": "^0.21.2",
-    "clsx": "^2.1.0",
+		"clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
+		"dayjs": "^1.11.10",
-    "marked": "^12.0.1",
+		"mode-watcher": "^0.3.0",
-    "marked-alert": "^2.0.1",
+		"rehype-katex": "^7.0.0",
-    "marked-katex-extension": "^5.0.1",
+		"rehype-stringify": "^10.0.0",
-    "mode-watcher": "^0.3.0",
+		"remark-gfm": "^4.0.0",
-    "svelte-radix": "^1.1.0",
+		"remark-gh-alerts": "^0.0.3",
-    "svelte-sonner": "^0.3.21",
+		"remark-math": "^6.0.0",
-    "tailwind-merge": "^2.2.2",
+		"remark-parse": "^11.0.0",
-    "tailwind-variants": "^0.2.1",
+		"remark-rehype": "^11.1.0",
-    "vaul-svelte": "^0.3.0"
+		"svelte-radix": "^1.1.0",
-  },
+		"svelte-sonner": "^0.3.21",
-  "packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
+		"tailwind-merge": "^2.2.2",
+		"tailwind-variants": "^0.2.1",
+		"unified": "^11.0.4",
+		"vaul-svelte": "^0.3.0"
+	},
+	"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
 }

src/lib/components/Blog/Article.svelte

@@ -32,7 +32,7 @@
 		<slot name="mobile-toc" />
 	</header>
 
-	<div class="markdown-body mt-8 font-serif">
+	<div class="markdown-body my-8 font-serif">
 		{@html doc.content}
 	</div>
 </article>

src/lib/styles/markdown.css

@@ -46,10 +46,8 @@
 		padding: 0.5em;
 	}
 
-	blockquote {
+	blockquote:not(.markdown-alert) {
-		padding-left: 1em;
+		@apply border-l-2 border-l-muted-foreground my-4 pl-4 italic;
-		font-style: italic;
-		border-left: solid 1px #fa6432;
 	}
 
 	table {
@@ -115,7 +113,7 @@
 		@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
 	}
 	.markdown-alert-title {
-		@apply flex items-center font-medium text-xl font-sans;
+		@apply font-medium text-xl font-sans;
 	}
 	.markdown-alert-caution > .markdown-alert-title {
 		@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
@@ -147,4 +145,19 @@
 	.markdown-alert-warning > .markdown-alert-title {
 		@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
 	}
+	.markdown-alert .markdown-alert-title .octicon {
+		margin-right: 0.5rem;
+		overflow: visible !important;
+
+		-webkit-mask: var(--oct-icon) no-repeat;
+		mask: var(--oct-icon) no-repeat;
+		-webkit-mask-size: 100% 100%;
+		mask-size: 100% 100%;
+		background-color: currentColor;
+		color: inherit;
+		display: inline-block;
+		vertical-align: -0.125em;
+		width: 1em;
+		height: 1em;
+	}
 }

src/routes/blog/[year]/[slug]/+page.svelte

@@ -4,7 +4,6 @@
 	import Article from '$lib/components/Blog/Article.svelte';
 	import { toc, createTocStore } from '@svelte-put/toc';
 	import StickyToc from '$lib/components/Toc/StickyToc.svelte';
-
 	const tocStore = createTocStore();
 
 	export let data: PageData;
@@ -14,7 +13,7 @@
 		primaryTags: ['Computer Science', 'Mathematics'],
 		secondaryTags: ['Calculus', 'Taylor Series'],
 		time: Date.now() / 1000,
-		content: data.markdown,
+		content: data.content!,
 		blurb: 'A short and succinct, yet descriptive blurb about the post.',
 		description:
 			'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'

src/routes/blog/[year]/[slug]/+page.ts

@@ -1,24 +1,34 @@
 import type { PageLoad } from './$types.js';
-import { marked } from 'marked';
+import { unified } from 'unified';
-import markedKatex from 'marked-katex-extension';
+import rehypeKatex from 'rehype-katex';
-import markedAlert from 'marked-alert';
+import rehypeStringify from 'rehype-stringify';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import remarkGfm from 'remark-gfm';
+import remarkGhAlerts from 'remark-gh-alerts';
 
 export const prerender = true;
 
-const options = {
-	throwOnError: false
-};
-
-marked.use(markedKatex(options));
-marked.use(markedAlert());
-
 export const load: PageLoad = async ({ fetch }) => {
 	try {
 		const data = await fetch('/test.md');
-		const markdown = await marked.parse(await data.text());
+		const content = String(
+			await unified()
+				.use(remarkParse)
+				.use(remarkGfm)
+				.use(remarkGhAlerts)
+				.use(remarkMath)
+				.use(remarkRehype)
+				.use(rehypeKatex)
+				.use(rehypeStringify)
+				.process(await data.text())
+		);
+
+		if (typeof content === 'undefined') throw new Error('No content');
 
 		return {
-			markdown
+			content
 		};
 	} catch (e) {
 		return {