docs

docs/astro.config.mjs

@@ -1,50 +1,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
-import { ExpressiveCodeTheme } from "@astrojs/starlight/expressive-code";
-import fs from "node:fs";
-import path from "node:path";
 import starlightImageZoom from "starlight-image-zoom";
 
-// Define allowed paths relative to project root
-const ALLOWED_PATHS = ["src/themes/expressive-code"];
-
-function readFileSyncSafe(url) {
-	if (url.protocol !== "file:") {
-		throw new Error("Invalid URL protocol");
-	}
-
-	// Convert URL to filesystem path and normalize
-	const filePath = path.normalize(url.pathname);
-
-	// Ensure path is within allowed directories
-	const isAllowed = ALLOWED_PATHS.some((allowedPath) =>
-		filePath.includes(path.normalize(allowedPath))
-	);
-
-	if (!isAllowed) {
-		throw new Error("Access to this directory is not allowed");
-	}
-
-	return fs.readFileSync(url, "utf-8");
-}
-
-const jsoncStringLight = readFileSyncSafe(
-	new URL(
-		"./src/themes/expressive-code/Snazzy-Light-color-theme.json",
-		import.meta.url
-	)
-);
-
-const jsoncStringDark = readFileSyncSafe(
-	new URL(
-		"./src/themes/expressive-code/aura-soft-dark-soft-text-color-theme.json",
-		import.meta.url
-	)
-);
-
-const darkMode = ExpressiveCodeTheme.fromJSONString(jsoncStringDark);
-const lightMode = ExpressiveCodeTheme.fromJSONString(jsoncStringLight);
-
 // https://astro.build/config
 export default defineConfig({
 	site: "https://userdocs.github.io",
@@ -59,19 +16,6 @@ export default defineConfig({
 			components: {
 				Header: "./src/components/Header.astro",
 			},
-			expressiveCode: {
-				themes: [darkMode, lightMode],
-				tabWidth: 0,
-				styleOverrides: {
-					borderRadius: "0.1rem",
-					frames: {
-						shadowColor: "none",
-					},
-				},
-				defaultProps: {
-					frame: "none",
-				},
-			},
 
 			social: {
 				github: "https://github.com/userdocs/qbittorrent-nox-static",

docs/ec.config.mjs

@@ -0,0 +1,62 @@
+import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
+import { ExpressiveCodeTheme } from "@astrojs/starlight/expressive-code";
+import fs from "node:fs";
+import path from "node:path";
+
+// Define allowed paths relative to project root
+const ALLOWED_PATHS = ["src/themes/expressive-code"];
+
+function readFileSyncSafe(url) {
+	if (url.protocol !== "file:") {
+		throw new Error("Invalid URL protocol");
+	}
+
+	// Convert URL to filesystem path and normalize
+	const filePath = path.normalize(url.pathname);
+
+	// Ensure path is within allowed directories
+	const isAllowed = ALLOWED_PATHS.some((allowedPath) =>
+		filePath.includes(path.normalize(allowedPath))
+	);
+
+	if (!isAllowed) {
+		throw new Error("Access to this directory is not allowed");
+	}
+
+	return fs.readFileSync(url, "utf-8");
+}
+
+const jsoncStringLight = readFileSyncSafe(
+	new URL(
+		"./src/themes/expressive-code/Snazzy-Light-color-theme.json",
+		import.meta.url
+	)
+);
+
+const jsoncStringDark = readFileSyncSafe(
+	new URL(
+		"./src/themes/expressive-code/aura-soft-dark-soft-text-color-theme.json",
+		import.meta.url
+	)
+);
+
+const darkMode = ExpressiveCodeTheme.fromJSONString(jsoncStringDark);
+const lightMode = ExpressiveCodeTheme.fromJSONString(jsoncStringLight);
+
+/** @type {import('@astrojs/starlight/expressive-code').StarlightExpressiveCodeOptions} */
+export default {
+	// Example: Using a custom plugin (which makes this `ec.config.mjs` file necessary)
+	plugins: [pluginCollapsibleSections()],
+	defaultProps: {
+		collapseStyle: "collapsible-start",
+		frame: "none",
+	},
+	themes: [darkMode, lightMode],
+	tabWidth: 0,
+	styleOverrides: {
+		borderRadius: "0.1rem",
+		frames: {
+			shadowColor: "none",
+		},
+	},
+};

docs/package.json

@@ -11,7 +11,9 @@
 	},
 	"dependencies": {
 		"@astrojs/starlight": "^0.31.0",
+		"@expressive-code/plugin-collapsible-sections": "^0.40.0",
 		"astro": "^5.1.7",
+		"expressive-code": "^0.40.0",
 		"gray-matter": "^4.0.3",
 		"sharp": "^0.32.5",
 		"starlight-image-zoom": "^0.9.0",