feat: add collapsable code block sections

Author: ghostdevv

astro.config.mjs

@@ -1,4 +1,5 @@
 // @ts-check
+import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
 import { serendipity } from './src/lib/shiki/serendipity-shiki';
 import { rehypeGithubAlerts } from 'rehype-github-alerts';
 import expressiveCode from 'astro-expressive-code';
@@ -28,6 +29,11 @@ export default defineConfig({
 		svelte(),
 		sitemap(),
 		expressiveCode({
+			plugins: [pluginCollapsibleSections()],
+			defaultProps: {
+				collapseStyle: 'collapsible-auto',
+			},
+
 			themes: [serendipity],
 			shiki: {
 				langs: [await shikiLang('caddyfile')],
@@ -58,6 +64,11 @@ export default defineConfig({
 					inlineButtonBackgroundHoverOrFocusOpacity: '1',
 					inlineButtonBackgroundActiveOpacity: '1',
 				},
+				collapsibleSections: {
+					openBackgroundColorCollapsible:
+						'var(--background-tertiary)',
+					closedBackgroundColor: 'var(--background-tertiary)',
+				},
 			},
 		}),
 	],

package.json

@@ -19,6 +19,7 @@
 		"@astrojs/rss": "^4.0.12",
 		"@astrojs/sitemap": "^3.4.1",
 		"@astrojs/svelte": "7.1.0",
+		"@expressive-code/plugin-collapsible-sections": "^0.41.3",
 		"@fortawesome/free-brands-svg-icons": "^6.7.2",
 		"@fortawesome/free-solid-svg-icons": "^6.7.2",
 		"astro": "^5.8.2",

pnpm-lock.yaml

@@ -132,5 +132,10 @@
 			background: transparent;
 			border-radius: 4px;
 		}
+
+		// Fix collapsable code allignment
+		.ec-section summary :is(.expand, .collapse) {
+			vertical-align: middle;
+		}
 	}
 }