feat(code): Migrate code blocks to Expressive Code

Princesseuh · Jul 9, 2023 · 63c9cfd · 63c9cfd
1 parent 0d2a48e
commit 63c9cfd
Show file tree

Hide file tree

Showing 5 changed files with 1,244 additions and 888 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -3,6 +3,8 @@ import tailwind from "@astrojs/tailwind";
 import AutoImport from "astro-auto-import";
 import { defineConfig } from "astro/config";
 
+import expressiveCode from "astro-expressive-code";
+
 // https://astro.build/config
 export default defineConfig({
   publicDir: "./static",
@@ -23,7 +25,9 @@ export default defineConfig({
   },
   compressHTML: true,
   image: {
-    service: { entrypoint: "./src/imageService.ts" },
+    service: {
+      entrypoint: "./src/imageService.ts",
+    },
   },
   integrations: [
     tailwind({
@@ -42,6 +46,48 @@ export default defineConfig({
         },
       ],
     }),
+    expressiveCode({
+      theme: "material-theme-darker",
+      plugins: [
+        {
+          name: "custom-style",
+          baseStyles: () => `
+            .frame.is-terminal:not(.has-title) .header {display: none;}
+            .frame .header {border-bottom: 2px solid #313131;}
+            .frame.is-terminal .header::before {display: none;}
+            .frame.is-terminal:not(.has-title) {
+              --button-spacing: 0.4rem;
+            }
+            .frame.is-terminal:not(.has-title) code, .frame.is-terminal:not(.has-title) pre {
+              border-radius: 4px
+            }
+            .frame.is-terminal .header {
+              justify-content: initial;
+              font-weight: initial;
+              padding-left: 1rem;
+              color: #fff;
+            }
+            `,
+          hooks: [],
+        },
+      ],
+      frames: {
+        styleOverrides: {
+          frameBoxShadowCssValue: "none",
+          tooltipSuccessBackground: "#e65161",
+        },
+      },
+      styleOverrides: {
+        uiLineHeight: "inherit",
+        codeFontSize: "0.875rem",
+        codeLineHeight: "1.25rem",
+        borderRadius: "4px",
+        borderWidth: "0px",
+        codePaddingInline: "1rem",
+        codeFontFamily:
+          'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
+      },
+    }),
     mdx(),
   ],
 });
diff --git a/package.json b/package.json
@@ -14,26 +14,26 @@
     "update-data": "tsx ./scripts/update-catalogue-info.ts --silent"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^3.1.3",
+    "@astrojs/tailwind": "^4.0.0",
     "@types/eslint": "^8.40.2",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.3.1",
+    "@types/node": "^20.4.0",
     "@types/prettier": "^2.7.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
-    "astro": "2.6.4",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "astro": "2.8.0",
     "astro-auto-import": "^0.3.0",
     "astro-icon": "0.8.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-astro": "^0.27.1",
+    "eslint-plugin-astro": "^0.27.2",
     "eslint-plugin-prettier": "^4.2.1",
     "kleur": "^4.1.5",
     "prettier": "^2.8.8",
     "prettier-plugin-astro": "^0.10.0",
     "quick-score": "^0.2.0",
     "quicklink": "^2.3.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.6"
   },
   "pnpm": {
     "packageExtensions": {
@@ -52,8 +52,8 @@
   "packageManager": "pnpm@8.6.2",
   "dependencies": {
     "@astrojs/mdx": "^0.19.7",
-    "@types/github-slugger": "^2.0.0",
     "@types/igdb-api-node": "^5.0.0",
+    "astro-expressive-code": "^0.12.1",
     "dotenv": "^16.3.1",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",