first pass at hero component; markdown code cleanup

Author: tingeber

astro.config.mjs

@@ -6,6 +6,7 @@ import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, fontProviders } from 'astro/config';
+import expressiveCode from 'astro-expressive-code';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import Icons from 'unplugin-icons/vite';
 import { siteConfig } from './src/lib/config.ts';
@@ -26,13 +27,19 @@ export default defineConfig({
       },
       {
         provider: fontProviders.bunny(),
-        name: 'IBM Plex Serif',
-        weights: [300, 400, 500, 600, 700],
-        cssVariable: '--font-ibm-plex-serif',
+        name: 'IBM Plex Mono',
+        weights: [400],
+        cssVariable: '--font-ibm-plex-mono',
       },
     ],
   },
-
+  // markdown: {
+  //   shikiConfig: {
+  //     // Choose from Shiki's built-in themes (or add your own)
+  //     // https://shiki.style/themes
+  //     theme: 'catppuccin-frappe',
+  //   },
+  // },
   vite: {
     // TODO #1 - remove expect error when Astro updates to Vite 7
     // https://github.com/withastro/astro/issues/14030#issuecomment-3027129338
@@ -50,6 +57,22 @@ export default defineConfig({
     ],
   },
 
-  integrations: [react(), sitemap(), mdx()],
+  integrations: [
+    react(),
+    sitemap(),
+    // TODO: #1 make sure our mono font works with expressiveCode
+    expressiveCode({
+      themes: ['catppuccin-frappe'],
+      defaultProps: {
+        // Enable word wrap by default
+        wrap: true,
+        // Disable wrapped line indentation for terminal languages
+        overridesByLang: {
+          'bash,ps,sh': { preserveIndent: false },
+        },
+      },
+    }),
+    mdx(),
+  ],
   adapter: netlify(),
 });

package-lock.json

@@ -23,6 +23,7 @@
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
     "astro": "^5.15.9",
+    "astro-expressive-code": "^0.41.5",
     "canvas-confetti": "^1.9.3",
     "fuse.js": "^7.1.0",
     "marked": "^17.0.1",

package.json

@@ -58,7 +58,7 @@ const imageURL = ogImage ? new URL(ogImage.src, Astro.url).href : undefined;
 <meta property="twitter:image" content={imageURL} />
 
 <!-- Local Font Declaration -->
-<Font cssVariable="--font-ibm-plex-serif" preload />
+<Font cssVariable="--font-ibm-plex-mono" preload />
 <Font cssVariable="--font-inter" preload />
 
 <!-- Additional head content -->