New code blocks 🎨 and mermaid 🧜‍♀️ diagrams (#127)

* deps: update

* remove old font stuff

* remove pnpm-lock

What is this still doing here o_O

* refactor: CodeBlock to use Shiki from Astro

* refactor: use Shiki language IDs for code fences

* refactor: use astro-mermaid for mermaid diagrams

* style: add more article padding when using hiding sidebars

* fix: find languages by aliases as well

* fix: make style global

* fmt: prettier

Author: carsakiller

astro.config.mjs

@@ -1,14 +1,14 @@
 import { defineConfig, fontProviders } from "astro/config";
 
 import mdx from "@astrojs/mdx";
-import rehypeMermaid from "rehype-mermaid";
 import { modifiedTime } from "./src/plugins/modifiedTime.mjs";
 import rehypeMdxCodeProps from "rehype-mdx-code-props";
+import mermaid from "astro-mermaid";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://luals.github.io",
-  integrations: [mdx()],
+  integrations: [mdx(), mermaid({ theme: "dark" })],
   image: {
     domains: ["avatars.githubusercontent.com"],
   },
@@ -30,13 +30,7 @@ export default defineConfig({
     },
   ],
   markdown: {
-    /** We use our own syntax highlight from highlight.js */
-    syntaxHighlight: false,
-    smartypants: false,
-    rehypePlugins: [
-      () => rehypeMermaid({ mermaidConfig: { darkMode: true, theme: "dark" } }),
-      rehypeMdxCodeProps,
-    ],
+    rehypePlugins: [rehypeMdxCodeProps],
     remarkPlugins: [modifiedTime],
   },
   trailingSlash: "always",

bun.lock

@@ -16,27 +16,23 @@
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@types/lodash": "^4.17.24",
-    "astro": "^6.1.9",
+    "astro": "^6.1.10",
+    "astro-mermaid": "^2.0.1",
     "autoprefixer": "^10.5.0",
     "axios": "^1.15.2",
     "dayjs": "^1.11.20",
     "fuse.js": "^7.3.0",
-    "highlight.js": "^11.11.1",
-    "jsdom": "29.0.2",
+    "jsdom": "^29.1.0",
     "lodash": "^4.18.1",
     "mermaid": "^11.14.0",
-    "playwright": "^1.59.1",
     "rehype-mdx-code-props": "^3.0.1",
-    "rehype-mermaid": "^3.0.0",
     "sass": "^1.99.0",
     "sharp": "^0.34.5",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@playwright/test": "^1.59.1",
+    "@types/lodash": "^4.17.24",
     "@types/bun": "latest",
-    "@types/canvas-confetti": "^1.9.0",
     "@types/jsdom": "^28.0.1",
     "@types/node-fetch": "^2.6.13",
     "@types/node-fetch-cache": "^3.0.5",
@@ -47,6 +43,6 @@
   },
   "private": true,
   "peerDependencies": {
-    "typescript": "^5.8.3"
+    "typescript": "^6.0.3"
   }
 }