Add collapsible code sections

Author: djhi

docs_headless/ec.config.mjs

@@ -0,0 +1,9 @@
+import { defineEcConfig } from 'astro-expressive-code';
+import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
+
+export default defineEcConfig({
+    plugins: [pluginCollapsibleSections()],
+    defaultProps: {
+        collapseStyle: 'collapsible-auto',
+    },
+});

docs_headless/package.json

@@ -13,6 +13,7 @@
     "@astrojs/mdx": "^4.3.1",
     "@astrojs/starlight": "^0.34.8",
     "@astrojs/starlight-tailwind": "^4.0.1",
+    "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.6.1",
     "astro-expressive-code": "^0.41.3",

docs_headless/src/content/docs/mui/guides/Architecture.md

@@ -139,14 +139,18 @@ React-admin avoids components that accept an overwhelming number of props, which
 
 For example, while you cannot directly pass a list of actions to the `<Edit>` component, you can achieve the same result by passing an `actions` component:
 
-```jsx
+```jsx "actions={<PostEditActions />}" collapse={1-4, 8-11}
 // File name: src/PostEdit.tsx
 import { Button } from '@mui/material';
-import { TopToolbar, ShowButton } from 'react-admin';
+import { ShowButton, TextInput, TopToolbar } from 'react-admin';
+import { RichTextInput } from 'ra-input-rich-text'; 
 
 export const PostEdit = () => (
     <Edit actions={<PostEditActions />}>
-        ...
+        <SimpleForm>
+            <TextInput source="title" />
+            <RichTextInput source="body" />
+        </SimpleForm>
     </Edit>
 );
 
@@ -163,7 +167,7 @@ This approach enables you to override specific parts of the logic of a component
 The trade-off with this approach is that sometimes react-admin may require you to override several components just to enable one specific feature. For instance, to override the Menu, you must first create a custom layout using your menu as the `<Layout menu>` prop, then pass it as the `<Admin layout>` prop:
 
 ::: code-group labels=[src/MyLayout.tsx, src/App.tsx]
-```tsx
+```tsx "import { Menu } from './Menu';" "menu={Menu}"
 import { Layout } from 'react-admin';
 import { Menu } from './Menu';
 
@@ -173,7 +177,7 @@ export const MyLayout = ({ children }) => (
     </Layout>
 );
 ```
-```tsx
+```tsx "import { MyLayout }  from './MyLayout';" "layout={MyLayout}"
 import { Admin } from 'react-admin';
 import { MyLayout }  from './MyLayout';
 

yarn.lock

@@ -2184,6 +2184,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expressive-code/plugin-collapsible-sections@npm:^0.41.3":
+  version: 0.41.3
+  resolution: "@expressive-code/plugin-collapsible-sections@npm:0.41.3"
+  dependencies:
+    "@expressive-code/core": "npm:^0.41.3"
+  checksum: 28050a5822c15f7ac24f857bf975662671a9097805fc9f7cf049c41be73a7da2211fa927b2638a2aad1357830171624fe7d0049e2cea8ce46d1636786429a2e9
+  languageName: node
+  linkType: hard
+
 "@expressive-code/plugin-frames@npm:^0.41.3":
   version: 0.41.3
   resolution: "@expressive-code/plugin-frames@npm:0.41.3"
@@ -19159,6 +19168,7 @@ __metadata:
     "@astrojs/mdx": "npm:^4.3.1"
     "@astrojs/starlight": "npm:^0.34.8"
     "@astrojs/starlight-tailwind": "npm:^4.0.1"
+    "@expressive-code/plugin-collapsible-sections": "npm:^0.41.3"
     "@tailwindcss/vite": "npm:^4.1.11"
     astro: "npm:^5.6.1"
     astro-expressive-code: "npm:^0.41.3"