Merge pull request 'chore(deps): update dependency preline to v4.0.1' (#313) from renovate/preline-4.x-lockfile into main

Dockerfile

@@ -29,7 +29,7 @@ ENV SITE_URL=https://www.alexlebens.dev
 ENV DIRECTUS_URL=https://directus.alexlebens.dev
 ENV PORT=4321
 
-LABEL version="2.2.2"
+LABEL version="2.2.4"
 LABEL description="Astro based personal website"
 
 EXPOSE $PORT

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -49,6 +49,8 @@
     "astro": "^5.17.1",
     "astro-compressor": "^1.2.0",
     "astro-icon": "^1.1.5",
+    "marked": "^17.0.1",
+    "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
     "motion": "^12.29.2",
     "preline": "^4.0.0",

pnpm-lock.yaml

@@ -74,6 +74,12 @@ importers:
       astro-icon:
         specifier: ^1.1.5
         version: 1.1.5
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
+      marked-shiki:
+        specifier: ^1.2.1
+        version: 1.2.1(marked@17.0.1)(shiki@3.21.0)
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
@@ -82,7 +88,7 @@ importers:
         version: 12.29.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       preline:
         specifier: ^4.0.0
-        version: 4.0.0
+        version: 4.0.1
       react:
         specifier: ^19.2.4
         version: 19.2.4
@@ -2493,11 +2499,11 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
-  datatables.net-dt@2.3.6:
+  datatables.net-dt@2.3.7:
-    resolution: {integrity: sha512-8OEUNCEfkeW+TuVUDlT1q6/XXOitgVzCdNqBivw8bK9DnaNk5F6JjT8lE2pQ4uAfoL/dTy2J+HKxTHeTh8HJlg==}
+    resolution: {integrity: sha512-OXXIliY5MXnI+284Gt73F+fEdnW2u5y9jiptlvjDDb3YlyqXU4E/YZUB262a068sM/+qakb6RixN1SWn18uF2g==}
 
-  datatables.net@2.3.6:
+  datatables.net@2.3.7:
-    resolution: {integrity: sha512-xQ/dCxrjfxM0XY70wSIzakkTZ6ghERwlLmAPyCnu8Sk5cyt9YvOVyOsFNOa/BZ/lM63Q3i2YSSvp/o7GXZGsbg==}
+    resolution: {integrity: sha512-AvsjG/Nkp6OxeyBKYZauemuzQCPogE1kOtKwG4sYjvdqGCSLiGaJagQwXv4YxG+ts5vaJr6qKGG9ec3g6vTo3w==}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -3730,6 +3736,17 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked-shiki@1.2.1:
+    resolution: {integrity: sha512-yHxYQhPY5oYaIRnROn98foKhuClark7M373/VpLxiy5TrDu9Jd/LsMwo8w+U91Up4oDb9IXFrP0N1MFRz8W/DQ==}
+    peerDependencies:
+      marked: '>=7.0.0'
+      shiki: '>=1.0.0'
+
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4463,8 +4480,8 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preline@4.0.0:
+  preline@4.0.1:
-    resolution: {integrity: sha512-O8GlqXGfZPBA4z4QHe0yRSrW8NQhIjvbXORpHdwOh+WPBQ/3CTFWCq77ZPdjBOjcwjVsWsq2JLkH/mdVLo8w2g==}
+    resolution: {integrity: sha512-/cyb8orusmZSymGDkCCmDvbfccK5n3fnRZ3uG59pKihxpagmJ6p1rwkXpX1uZ7VpEQrug7U8IYBJnFGaD+8Bdw==}
     hasBin: true
 
   prelude-ls@1.2.1:
@@ -8576,12 +8593,12 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
-  datatables.net-dt@2.3.6:
+  datatables.net-dt@2.3.7:
     dependencies:
-      datatables.net: 2.3.6
+      datatables.net: 2.3.7
       jquery: 4.0.0
 
-  datatables.net@2.3.6:
+  datatables.net@2.3.7:
     dependencies:
       jquery: 4.0.0
 
@@ -10070,6 +10087,13 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked-shiki@1.2.1(marked@17.0.1)(shiki@3.21.0):
+    dependencies:
+      marked: 17.0.1
+      shiki: 3.21.0
+
+  marked@17.0.1: {}
+
   math-intrinsics@1.1.0: {}
 
   maxmin@2.1.0:
@@ -11106,13 +11130,13 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preline@4.0.0:
+  preline@4.0.1:
     dependencies:
       '@floating-ui/dom': 1.7.5
       '@types/culori': 4.0.1
       apexcharts: 4.7.0
       culori: 4.0.2
-      datatables.net-dt: 2.3.6
+      datatables.net-dt: 2.3.7
       dropzone: 6.0.0-beta.2
       nouislider: 15.8.1
       vanilla-calendar-pro: 3.1.0

src/pages/blog/[...slug].astro

@@ -4,6 +4,9 @@ import getReadingTime from 'reading-time';
 import { readItems, readSingleton } from '@directus/sdk';
 
 import directus from '@lib/directus';
+import { marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { createHighlighter } from 'shiki';
 import { getDirectusImageURL } from '@lib/directusFunctions';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Image from '@components/ui/images/Image.astro';
@@ -23,6 +26,24 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories
   .filter((c) => c.slug === post.category)
   .pop() as CollectionEntry<'categories'>;
 const readingTime = getReadingTime(post.content);
+
+const highlighter = await createHighlighter({
+  themes: ['github-light', 'github-dark', 'monokai'],
+  langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
+});
+marked.use(markedShiki({
+  highlight(code, lang) {
+    return highlighter.codeToHtml(code, {
+      lang: lang || 'plaintext',
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    });
+  }
+}));
+const content = marked.parse(post.content);
 ---
 
 <BaseLayout
@@ -126,7 +147,7 @@ const readingTime = getReadingTime(post.content);
           <article
             class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-justify text-neutral-800 dark:text-neutral-200"
           >
-            <div set:html={post.content} />
+            <div set:html={content} />
           </article>
 
           <div

src/styles/global.css

@@ -60,6 +60,29 @@
       color var(--theme-transition),
       border-color var(--theme-transition);
   }
+
+  :root {
+    --shiki-fg: var(--shiki-light);
+    --shiki-bg: var(--color-neutral-200);
+  }
+
+  .dark {
+    --shiki-fg: var(--shiki-dark);
+    --shiki-bg: var(--color-neutral-800);
+  }
+
+  pre.shiki {
+    background-color: var(--shiki-bg) !important;
+    color: var(--shiki-fg) !important;
+  }
+
+  pre.shiki span {
+    color: var(--shiki-light);
+  }
+
+  .dark pre.shiki span {
+    color: var(--shiki-dark) !important;
+  }
 }
 
 /* Content reveal animations */