[docs] Add link to live demo to KPI example (#2341)

Signed-off-by: Bharat Kashyap <[email protected]>
Co-authored-by: Bharat Kashyap <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>

docs/data/pages.ts

@@ -17,8 +17,8 @@ const pages: MuiPage[] = [
       {
         pathname: '/toolpad/examples',
         children: [
-          { pathname: '/toolpad/examples/npm-stats', title: 'KPI tracker' },
-          { pathname: '/toolpad/examples/admin-app', title: 'Basic CRUD application' },
+          { pathname: '/toolpad/examples/npm-stats', title: 'npm stats' },
+          { pathname: '/toolpad/examples/basic-crud-app', title: 'Basic CRUD application' },
           { pathname: '/toolpad/examples/qr-generator', title: 'QR Code generator' },
         ],
       },

docs/data/toolpad/getting-started/first-app.md

@@ -17,7 +17,7 @@ By the end, you should be able to:
 
 ## Prerequisites
 
-Make sure to [install Node](https://nodejs.org/en) on your system.
+Make sure to [install Node.js](https://nodejs.org/en) on your system.
 
 ## Building your first application
 

docs/pages/toolpad/examples/admin-app.js → docs/pages/toolpad/examples/basic-crud-app.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../examples/admin-app/README.md?@mui/markdown';
+import * as pageProps from '../../../../examples/basic-crud-app/README.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs disableAd {...pageProps} />;

docs/pages/toolpad/examples/qr-generator.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../examples/qrcode-generator/README.md?@mui/markdown';
+import * as pageProps from '../../../../examples/qr-generator/README.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs disableAd {...pageProps} />;

docs/public/_redirects

@@ -28,6 +28,7 @@
 /toolpad/data-binding/binding-state/ /toolpad/concepts/managing-state/ 301
 /toolpad/data-binding/event-handling/ /toolpad/concepts/managing-state/#event-handling 301
 /toolpad/deployment/ /toolpad/concepts/deployment/ 301
+/toolpad/examples/admin-app/ /toolpad/examples/basic-crud-app/ 301
 
 # Create separate namespace on https://mui.com
 

examples/basic-crud-app/README.md

@@ -0,0 +1,44 @@
+# Basic CRUD application
+
+<p class="description">An admin application to showcase how CRUD operations work in Toolpad.</p>
+
+<a href="https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/basic-crud-app" target="_blank">
+  <img src="https://mui.com/static/toolpad/docs/examples/basic-crud-app.png" alt="Basic CRUD app" style="aspect-ratio: 1.8" width="100%">
+</a>
+
+## Check out the live app
+
+<p></p>
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/basic-crud-app)
+
+## How to run
+
+Download the example [or clone the repo](https://github.com/mui/mui-toolpad):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/mui-toolpad/tar.gz/master | tar -xz --strip=2  mui-toolpad-master/examples/basic-crud-app
+cd basic-crud-app
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad:
+
+1. How to use backend functions.
+2. Using a Form and other components.
+3. How to delete or add a row in a data grid.
+4. How to bind query parameters with a component.
+
+## The source
+
+[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/basic-crud-app)

examples/npm-stats/README.md

@@ -1,16 +1,48 @@
-# KPI tracker
+# npm stats
 
-<p class="description">This Analytics dashboard shows how to track a KPI from a third party data source.</p>
+<p class="description">This analytics dashboard shows how to track a KPI from a third-party data source.</p>
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/marketing/npm-stats.png", "alt": "Analytics dashboard", "caption": "Analytics dashboard showing download stats of Toolpad NPM package"}}
+<a href="https://npm-stats.onrender.com/prod/pages/evZC-gp" target="_blank">
+  <img src="https://mui.com/static/toolpad/docs/examples/npm-stats.png" alt="npm stats app" style="aspect-ratio: 1.8" width="100%">
+</a>
+
+## Check out the live app
+
+<p></p>
+
+[![Render Badge]](https://npm-stats.onrender.com/prod/pages/evZC-gp)
+
+[Render Badge]: https://img.shields.io/badge/Render-purple?style=for-the-badge&color=%234350e9&link=https%3A%2F%2Fnpm-stats.onrender.com%2Fprod%2Fpages%2FevZC-gp
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/npm-stats)
 
-This app demonstrates following capabilities of Toolpad:
+## How to run
+
+Download the example [or clone the repo](https://github.com/mui/mui-toolpad):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/mui-toolpad/tar.gz/master | tar -xz --strip=2  mui-toolpad-master/examples/npm-stats
+cd npm-stats
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad:
 
 1. How to use a thrid party REST API to fetch data to a Toolpad app.
 2. How to use custom components like charts.
-3. How to use pre built MUI components like Date Picker.
+3. How to use pre-built MUI components like Date Picker.
 4. How to transform data.
 
+## The source
+
 [Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/npm-stats)

examples/npm-stats/toolpad/pages/page/page.yml

@@ -83,7 +83,7 @@ spec:
         - component: Text
           name: text
           props:
-            value: NPM stats
+            value: npm stats
             variant: h3
     - component: PageRow
       name: pageRow

examples/qr-generator/README.md

@@ -2,15 +2,43 @@
 
 <p class="description">A basic Toolpad application that can be used to turn any text or URL into a QR code.</p>
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/marketing/qr-generator.png", "alt": "QR code generator", "caption": "QR code generator"  }}
+<a href="https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/qr-generator" target="_blank">
+  <img src="https://mui.com/static/toolpad/docs/examples/qr-generator.png" alt="QR generator" style="aspect-ratio: 1.8" width="100%">
+</a>
+
+## Check out the live app
+
+<p></p>
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/qr-generator)
 
-This app demonstrates following capabilities of Toolpad:
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/mui-toolpad):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/mui-toolpad/tar.gz/master | tar -xz --strip=2  mui-toolpad-master/examples/qr-generator
+cd qr-generator
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad:
 
 1. Using a custom function that takes parameters.
 2. Importing an external npm package.
 3. Using a TextInput and Image component.
 4. Binding a TextInput component with a query parameter.
 
+## The source
+
 [Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/qr-generator)

examples/with-prisma/README.md

@@ -4,7 +4,7 @@
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/marketing/with-prisma.png", "alt": "Toolpad example with prisma", "caption": "Toolpad example with prisma"  }}
 
-This app demonstrates following capabilities of Toolpad:
+This app demonstrates the following capabilities of Toolpad:
 
 1. Reusing your models in Toolpad UI