Add package manager plugin

Author: djhi

docs_headless/astro.config.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightSidebarTopics from 'starlight-sidebar-topics';
 import tailwindcss from '@tailwindcss/vite';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
@@ -24,6 +25,10 @@ export default defineConfig({
                         link: '/mui/guides/architecture',
                         icon: 'open-book',
                         items: [
+                            {
+                                label: 'Getting Started',
+                                slug: 'mui/guides/createreactadmin',
+                            },
                             {
                                 label: 'Guides & Concepts',
                                 items: [
@@ -635,6 +640,7 @@ export default defineConfig({
                 Sidebar: './src/components/CustomSidebar.astro',
             },
         }),
+        mdx(),
     ],
 
     vite: {

docs_headless/package.json

@@ -10,11 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^4.3.1",
     "@astrojs/starlight": "^0.34.8",
     "@astrojs/starlight-tailwind": "^4.0.1",
     "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.6.1",
     "sharp": "^0.34.2",
+    "starlight-package-managers": "^0.11.0",
     "starlight-sidebar-topics": "^0.6.0",
     "tailwindcss": "^4.1.11"
   },

docs_headless/src/content/docs/mui/guides/CreateReactAdmin.mdx

@@ -0,0 +1,119 @@
+---
+title: "The create-react-admin CLI"
+---
+
+import { PackageManagers } from 'starlight-package-managers';
+
+# `create-react-admin`
+
+Use `create-react-admin` to quickly bootstrap a react-admin project using [Vite](https://vitejs.dev/). It's the preferred way to create a new react-admin application.
+
+<iframe src="https://www.youtube-nocookie.com/embed/i_TbS7quzww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
+
+## Usage
+
+<PackageManagers type="dlx" pkg="create-react-admin@latest" args="your-admin-name" />
+Or
+<PackageManagers type="create" pkg="react-admin@latest" args="your-admin-name" />
+
+This will create an empty react-admin application in a directory called `your-admin-name`, powered by [Vite.js](./Vite.md), and install the dependencies.
+
+You can run the app with:
+
+```sh
+cd your-admin-name
+npm run dev
+```
+
+**Tip**: If you need to pass extra options, depending on the command you choose you may need to add `--` before the arguments:
+
+<PackageManagers type="dlx" pkg="create-react-admin@latest" args="your-admin-name --interactive" />
+Or
+<PackageManagers type="create" pkg="react-admin@latest" args="your-admin-name --interactive" />
+
+```sh
+# `npx` doesn't require the `--` before the arguments
+npx create-react-admin@latest your-admin-name --interactive
+# `npm create` does require the `--` before the arguments
+npm create react-admin@latest your-admin-name -- --interactive
+```
+
+## Options
+
+The command accepts the following options:
+
+* `--interactive`: Enable the CLI interactive mode
+* `--data-provider`: Set the data provider to use ("data-fakerest", "data-simple-rest", "data-json-server", "supabase" or "none")
+* `--auth-provider`: Set the auth provider to use ("local-auth-provider" or "none")
+* `--resource`: Add a resource that will be initialized with guessers (can be used multiple times). Set to "skip" to bypass the interactive resource step.
+* `--install`: Set the package manager to use for installing dependencies ("yarn", "npm", "bun" or "skip" to bypass the interactive install step)
+
+## `--interactive`
+
+When using this option, the terminal will ask you to choose:
+
+* a [data provider](./DataFetchingGuide.md#the-data-provider)
+* an [auth provider](./DataFetchingGuide.md#authentication)
+* the names of the [resources](./Resource.md) to add
+* the [package manager](#package-manager) to use to install the dependencies
+
+<video controls autoplay playsinline muted loop>
+  <source src="./img/create-react-admin.webm" type="video/webm"/>
+  <source src="./img/create-react-admin.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## `--data-provider`
+
+`create-react-admin` currently supports five presets for the application's data provider:
+
+* `fakerest`: A client-side data provider that use a JSON object for data, powered by [FakeRest](https://github.com/marmelab/FakeRest).
+* `json-server`: A data provider based on the [JSON Server](https://github.com/typicode/json-server) API
+* `simple-rest`: A data provider for [simple REST APIs](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest)
+* `supabase`: A data provider for [Supabase](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase). The auth-provider and resources steps will be skipped.
+* `none` (default): To configure the data provider yourself
+
+You can set your data provider directly with the `--data-provider` option:
+
+```sh
+npx create-react-admin@latest your-admin-name --data-provider json-server
+```
+
+## `--auth-provider`
+
+`create-react-admin` currently supports two presets to set the application's auth provider which are:
+
+* `local-auth-provider`: Hard coded username/password.
+* `none` (default): No authProvider.
+
+You can set your auth provider directly with the `--auth-provider` option:
+
+```sh
+npx create-react-admin@latest your-admin-name --auth-provider local-auth-provider
+```
+
+## `--resource`
+
+`create-react-admin` creates an empty app by default. You can initialize CRUD pages for some resources with the `--resource` option:
+
+```sh
+npx create-react-admin@latest your-admin-name --resource posts --resource comments
+```
+
+**Warning:** the `--resource` flag is incompatible with a `--data-provider supabase` due to a specific [`<AdminGuesser>` component](https://github.com/marmelab/ra-supabase/tree/main/packages/ra-supabase#usage) from `ra-supabase`.
+
+## `--install`
+
+`create-react-admin` can install dependencies using any of the following package managers:
+
+* `npm` (default)
+* `yarn`
+* `bun`
+* `pnpm`
+* `none` (if you want to install dependencies yourself)
+
+You choose an alternative package manager with the `--install` option:
+
+```sh
+npx create-react-admin@latest your-admin-name --install bun
+```

yarn.lock

@@ -112,7 +112,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@astrojs/mdx@npm:^4.2.3":
+"@astrojs/mdx@npm:^4.2.3, @astrojs/mdx@npm:^4.3.1":
   version: 4.3.1
   resolution: "@astrojs/mdx@npm:4.3.1"
   dependencies:
@@ -19156,13 +19156,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ra-core-doc@workspace:docs_headless"
   dependencies:
+    "@astrojs/mdx": "npm:^4.3.1"
     "@astrojs/starlight": "npm:^0.34.8"
     "@astrojs/starlight-tailwind": "npm:^4.0.1"
     "@tailwindcss/vite": "npm:^4.1.11"
     astro: "npm:^5.6.1"
     prettier: "npm:^3.2.5"
     prettier-plugin-astro: "npm:^0.14.1"
     sharp: "npm:^0.34.2"
+    starlight-package-managers: "npm:^0.11.0"
     starlight-sidebar-topics: "npm:^0.6.0"
     tailwindcss: "npm:^4.1.11"
   languageName: unknown
@@ -21841,6 +21843,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"starlight-package-managers@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "starlight-package-managers@npm:0.11.0"
+  peerDependencies:
+    "@astrojs/starlight": ">=0.22.0"
+  checksum: 3dee89f8a9317799108bbc53f45d918cc2e75c7a44bee63994788256ebc115143b44316a540082414fbb792eb7d55b888bab7c20c8b914609322f49f6540a8a5
+  languageName: node
+  linkType: hard
+
 "starlight-sidebar-topics@npm:^0.6.0":
   version: 0.6.0
   resolution: "starlight-sidebar-topics@npm:0.6.0"