feat: use astro-expressive-code improves code block functionality

astro.config.mjs

@@ -2,8 +2,13 @@ import mdx from "@astrojs/mdx"
 import react from "@astrojs/react"
 import sitemap from "@astrojs/sitemap"
 import tailwind from "@astrojs/tailwind"
+import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections"
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers"
+import expressiveCode from "astro-expressive-code"
 import { defineConfig } from "astro/config"
 
+import robotsTxt from "astro-robots-txt"
+
 // https://astro.build/config
 export default defineConfig({
   output: "static",
@@ -13,5 +18,18 @@ export default defineConfig({
       plugins: () => [],
     },
   },
-  integrations: [react(), tailwind(), mdx(), sitemap()],
+  integrations: [
+    react(),
+    tailwind(),
+    sitemap(),
+    expressiveCode({
+      plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
+      themes: ["material-theme-lighter", "material-theme-darker"],
+      defaultProps: {
+        showLineNumbers: true,
+      },
+    }),
+    mdx(),
+    robotsTxt(),
+  ],
 })

lefthook.yml

@@ -2,13 +2,13 @@ pre-commit:
   commands:
     prettier-js:
       glob: "*.{js,jsx,ts,tsx,astro}"
-      run: prettier --write {staged_files}
+      run: npx prettier --write {staged_files}
     eslint-fix:
       glob: "*.{js,jsx,ts,tsx,astro}"
-      run: eslint --fix {staged_files}
+      run: npx eslint --fix {staged_files}
     eslint:
       glob: "*.{js,jsx,ts,tsx,astro}"
-      run: eslint {staged_files}
+      run: npx eslint {staged_files}
     prettier-other:
       glob: "*.{json,css,md}"
-      run: prettier --write {staged_files}
+      run: npx prettier --write {staged_files}

package.json

@@ -16,11 +16,15 @@
     "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
+    "@expressive-code/plugin-collapsible-sections": "^0.38.3",
+    "@expressive-code/plugin-line-numbers": "^0.38.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "^5.1.0",
+    "astro-expressive-code": "^0.38.3",
     "astro-google-analytics": "^1.0.3",
     "astro-og-canvas": "^0.5.5",
+    "astro-robots-txt": "^1.0.0",
     "canvaskit-wasm": "^0.39.1",
     "lefthook": "^1.10.0",
     "lucide-react": "^0.468.0",

src/components/react/theme-toggle.tsx

@@ -4,6 +4,10 @@ export function ThemeToggle() {
   const updateTheme = () => {
     const isDark = document.documentElement.classList.contains("dark")
     localStorage.setItem("theme", isDark ? "dark" : "light")
+    document.documentElement.setAttribute(
+      "data-theme",
+      isDark ? "material-theme-darker" : "material-theme-lighter",
+    )
   }
 
   const handleToggleClick = () => {

src/config/en/links.mdx

@@ -2,11 +2,11 @@ export const title = "My Link"
 
 <h3 class="my-10 text-center text-xl font-bold">{title}</h3>
 
-```json
-name: "Guoqi Sun"
-description: "Try, fail, retry. That's the rhythm of growth."
-link: "https://blog.sunguoqi.com"
-avatar: "https://assets.guoqi.dev/images/avatar.png"
+```js
+name: "Guoqi Sun",
+description: "Try, fail, retry. That's the rhythm of growth.",
+link: "https://blog.sunguoqi.com",
+avatar: "https://assets.guoqi.dev/images/avatar.png",
 ```
 
 <h4 class="my-10 text-center">
@@ -14,9 +14,9 @@ avatar: "https://assets.guoqi.dev/images/avatar.png"
   and I will add it as soon as possible.
 </h4>
 
-```json
-name: "your site name"
-description: "your site description"
-link: "your site link"
-avatar: "your site avatar"
+```js
+name: "your site name",
+description: "your site description",
+link: "your site link",
+avatar: "your site avatar",
 ```

src/layouts/base.astro

@@ -58,6 +58,16 @@ const config = lang === "zh" ? zh : en
 
         if (theme === "dark") {
           document.documentElement.classList.add("dark")
+          document.documentElement.setAttribute(
+            "data-theme",
+            "material-theme-darker",
+          )
+        } else {
+          document.documentElement.classList.remove("dark")
+          document.documentElement.setAttribute(
+            "data-theme",
+            "material-theme-lighter",
+          )
         }
       }
 

src/pages/robots.txt.ts

@@ -1,17 +0,0 @@
-import type { APIRoute } from "astro"
-import { common } from "~/config"
-
-const robots = `
-User-agent: *
-Disallow:
-
-User-agent: *
-Allow: /
-
-Sitemap: ${new URL("sitemap-index.xml", common.domain).href}
-`.trim()
-
-export const GET: APIRoute = () =>
-  new Response(robots, {
-    headers: { "Content-Type": "text/plain" },
-  })