feat(redesign): Homepage Hero component

astro/astro.config.mjs

@@ -2,14 +2,22 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import icon from 'astro-icon';
+import expressiveCode from 'astro-expressive-code';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://expressjs.com',
-  integrations: [mdx(), icon()],
-  markdown: {
-    shikiConfig: {
-      theme: 'github-dark',
-    },
-  },
+  integrations: [
+    expressiveCode({
+      themes: ['github-dark'],
+      styleOverrides: {
+        uiFontSize: 'var(--font-size-sm)',
+        codeFontSize: 'var(--font-size-sm)',
+        borderRadius: 'var(--radius-base)',
+        borderWidth: 'var(--border-width-1)',
+      },
+    }),
+    mdx(),
+    icon(),
+  ],
 });

astro/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@astrojs/mdx": "^4.3.13",
     "astro": "^5.18.0",
+    "astro-expressive-code": "^0.41.7",
     "astro-icon": "^1.1.5"
   },
   "devEngines": {