[docs] Polish to match standard (#4344)

Co-authored-by: Pedro Ferreira <[email protected]>

docs/data/toolpad/core/components/page-container/page-container.md

@@ -47,7 +47,7 @@ The breadcrumbs contains **ACME / Home / Orders** when you visit the path **/hom
 
 {{"demo": "TitleBreadcrumbsPageContainer.js", "height": 300, "hideToolbar": true}}
 
-## Dynamic Routes
+## Dynamic routes
 
 When you use the `PageContainer` on a dynamic route, you'll likely want to set a title and breadcrumbs belonging to the specific path. You can achieve this with the `title` and `breadcrumbs` property of the `PageContainer`
 

docs/data/toolpad/core/components/persistent-state/persistent-state.md

@@ -47,11 +47,11 @@ For complex data types you can pair these hooks with a typed validation library
 
 {{"demo": "LocalStorageStateZod.js"}}
 
-## Session Storage
+## Session storage
 
 The `useSessionStorageState` hook works identical to the [`useLocalStorageState`](#local-storage) hook, except that it reads and writes from `window.sessionStorage` instead of `window.localStorage`.
 
-## Search Parameters
+## Search parameters
 
 🚧 Coming soon
 

docs/data/toolpad/core/introduction/base-concepts.md

@@ -15,7 +15,7 @@ import Button from '@mui/material/Button';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 ```
 
-## Component Hierarchy
+## Component hierarchy
 
 The Toolpad Core library is designed to work under different React runtimes such as Next.js, Vite, or even your custom setup. Many of its components rely on functionality of the specific runtime they are used under. The key component in making the components runtime-aware is the `AppProvider`.
 
@@ -106,6 +106,6 @@ In this example:
 - The `slots` prop allows you to replace entire parts of the component.
 - The `slotProps` prop lets you pass additional props to specific slots.
 
-## Next Steps
+## Next steps
 
 Now that you understand the basic concepts of Toolpad Core, you're ready to start integrating it into your project. Head over to the [integration docs](/toolpad/core/introduction/integration/) to learn more.

docs/data/toolpad/core/introduction/examples.md

@@ -5,7 +5,7 @@ title: Examples
 
 # Toolpad Core - Examples
 
-<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly:</p>
+<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly.</p>
 
 <!-- #default-branch-switch -->
 

docs/data/toolpad/core/introduction/installation.md

@@ -4,47 +4,47 @@ title: Toolpad Core - Installation
 
 # Installation
 
-## Manual Installation
+<p class="description">Learn how to install Toolpad Core in your local environment.</p>
+
+## Manual installation
 
 Use your preferred package manager to install `@toolpad/core` in your project:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install -S @toolpad/core
-```
-
-```bash yarn
-yarn add @toolpad/core
+npm install @toolpad/core
 ```
 
 ```bash pnpm
 pnpm add @toolpad/core
 ```
 
+```bash yarn
+yarn add @toolpad/core
+```
+
 </codeblock>
 
 The Toolpad Core package has a peer dependency on `@mui/material` and `@mui/icons-material`. If you aren't using these already in your project, you can install them with:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install -S @mui/material @mui/icons-material @emotion/react @emotion/styled
-```
-
-```bash yarn
-yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
 ```bash pnpm
 pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled
 ```
 
-</codeblock>
+```bash yarn
+yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
+```
 
-## Automatic Installation
+</codeblock>
 
-<p class="description">Learn how to install Toolpad Core in your local environment.</p>
+## Automatic installation
 
 1. Run the following command to start Toolpad Core:
 

docs/data/toolpad/core/introduction/integration.md

@@ -12,17 +12,17 @@ This guide will walk you through the process of adding Toolpad Core to an existi
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install -S @toolpad/core
-```
-
-```bash yarn
-yarn add @toolpad/core
+npm install @toolpad/core
 ```
 
 ```bash pnpm
 pnpm add @toolpad/core
 ```
 
+```bash yarn
+yarn add @toolpad/core
+```
+
 </codeblock>
 
 ## Next.js App Router
@@ -31,7 +31,7 @@ Use the following steps to integrate Toolpad Core into your Next.js app:
 
 ### 1. Wrap your application with `AppProvider`
 
-In your root layout file (e.g., `app/layout.tsx`), wrap your application with the `AppProvider`:
+In your root layout file (for example, `app/layout.tsx`), wrap your application with the `AppProvider`:
 
 ```tsx title="app/layout.tsx"
 import { AppProvider } from '@toolpad/core/AppProvider';

docs/data/toolpad/studio/concepts/deployment.md

@@ -26,6 +26,10 @@ Install required depdencies via:
 npm install
 ```
 
+```bash pnpm
+pnpm install
+```
+
 ```bash yarn
 yarn
 ```
@@ -42,14 +46,14 @@ This command will create an optimized production build for the Toolpad Studio ap
 npm run build
 ```
 
-```bash yarn
-yarn build
-```
-
 ```bash pnpm
 pnpm build
 ```
 
+```bash yarn
+yarn build
+```
+
 </codeblock>
 
 ## Start step
@@ -64,6 +68,10 @@ To serve the app once built, run:
 npm run start
 ```
 
+```bash pnpm
+pnpm start
+```
+
 ```bash yarn
 yarn start
 ```

docs/data/toolpad/studio/concepts/file-structure.md

@@ -1,6 +1,6 @@
 # File structure
 
-<p class="description">Toolpad Studio's accessibility to the file-system makes it powerful. Here's how: </p>
+<p class="description">Toolpad Studio's accessibility to the file-system makes it powerful. Here's how.</p>
 
 Toolpad Studio is file-system based, which means that an app's entire configuration is stored in files within your project. You can inspect and edit them from your IDE. You'll also use your own tools to author custom functions and components. This is how the project structure looks like in the file-system:
 

docs/data/toolpad/studio/getting-started/installation.md

@@ -13,14 +13,14 @@ Then run the command:
 npx create-toolpad-app@latest --studio my-toolpad-app
 ```
 
-```bash yarn
-yarn create toolpad-app --studio my-toolpad-app
-```
-
 ```bash pnpm
 pnpm create toolpad-app --studio my-toolpad-app
 ```
 
+```bash yarn
+yarn create toolpad-app --studio my-toolpad-app
+```
+
 </codeblock>
 
 This will run the `create-toolpad-app` CLI which initializes the directory `./my-toolpad-app` with a Toolpad Studio application.
@@ -41,14 +41,14 @@ Then start the development mode
 npm run dev
 ```
 
-```bash yarn
-yarn dev
-```
-
 ```bash pnpm
 pnpm dev
 ```
 
+```bash yarn
+yarn dev
+```
+
 </codeblock>
 
 This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad Studio editor.
@@ -60,17 +60,17 @@ Start by installing the required dependencies:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install -S @toolpad/studio
-```
-
-```bash yarn
-yarn add @toolpad/studio
+npm install @toolpad/studio
 ```
 
 ```bash pnpm
 pnpm add @toolpad/studio
 ```
 
+```bash yarn
+yarn add @toolpad/studio
+```
+
 </codeblock>
 
 Then you'll have to add the Toolpad Studio scripts to your `package.json`:
@@ -94,14 +94,14 @@ Now you can start your Toolpad Studio application using one of the commands:
 npm run toolpad-studio:dev
 ```
 
-```bash yarn
-yarn toolpad-studio:dev
-```
-
 ```bash pnpm
 pnpm toolpad-studio:dev
 ```
 
+```bash yarn
+yarn toolpad-studio:dev
+```
+
 </codeblock>
 
 When you run this command, Toolpad Studio will automatically initialize a new application in the **./my-toolpad-app** folder.

docs/data/toolpad/studio/index.md

@@ -4,6 +4,6 @@ title: Toolpad Studio docs - Home
 
 # Toolpad Studio
 
-<p class="description">Toolpad Studio docs</p>
+<p class="description">Toolpad Studio docs.</p>
 
 Low code tool, for developers, powered by MUI.