[docs] Improve the docs (#2366)

Author: oliviertassinari

docs/data/toolpad/landing/useCases.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import GradientText from 'docs/src/components/typography/GradientText';
-import ROUTES from '../../../src/route';
 
 const useCases = {
   overline: 'Use cases',
@@ -18,7 +17,7 @@ const useCases = {
       description:
         'Provide the stakeholders with simple apps to manage their daily operations. You can quickly build an app on Toolpad by calling APIs or writing custom functions. Your app remains secure as the code never leaves your network, and you can securely deploy it to any service you choose.',
       action: {
-        href: ROUTES.toolpadUtilityAppExample,
+        href: '/toolpad/examples/qr-generator/',
         label: 'View example',
       },
     },
@@ -29,7 +28,7 @@ const useCases = {
       description:
         'Enable your teams to quickly view and manage customer orders, queries, and refunds by creating admin apps that gather data from third-party APIs providers like Stripe, Twilio, Zendesk, etc. Toolpad allows end users to create, read, update, or delete records.',
       action: {
-        href: ROUTES.toolpadAdminExample,
+        href: '/toolpad/examples/basic-crud-app/',
         label: 'View example',
       },
     },
@@ -40,7 +39,7 @@ const useCases = {
       description:
         'Build BI dashboards to slice and dice any metric across various dimensions. Further, use them to monitor KPIs, track business goals, and identify trends and opportunities. Toolpad allows you to combine data from multiple sources and bind it by writing JavaScript anywhere.',
       action: {
-        href: ROUTES.toolpadBIExample,
+        href: '/toolpad/examples/npm-stats/',
         label: 'View example',
       },
     },

docs/src/components/landing/CodeBlock.js

@@ -9,8 +9,8 @@ import { alpha } from '@mui/material/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 
-export const code = [
-  `  
+const code = [
+  `
 import { PrismaClient, Prisma } from '@prisma/client';
 
 const prisma = new PrismaClient();
@@ -32,16 +32,16 @@ export async function deleteUser(id: number) {
 }`,
 
   `
-import Stripe from "stripe";
-import path from "path";
-import fs from "fs";
-import { exec } from "child_process";
+import Stripe from 'stripe';
+import path from 'path';
+import fs from 'fs';
+import { exec } from 'child_process';
 
-const stripe = new Stripe(...)
+const stripe = new Stripe(...);
 
 export async function downloadPDF(limit: number = 100) {
   let startingAfter;
-  let listInvoices;  
+  let listInvoices;
   do {
     listInvoices = await stripe.invoices.list({
       starting_after: startingAfter,
@@ -78,35 +78,38 @@ export async function downloadPDF(limit: number = 100) {
 `,
 
   `
-import mysql from 'mysql2/promise';  
+import mysql from 'mysql2/promise';
 import SSH2Promise from 'ssh2-promise';
 import * as fs from 'fs/promises';
 
 export async function getOrders() {
-  const sql = await fs.readFile('./getOrders.sql',
-  'utf8');
+  const sql = await fs.readFile('./getOrders.sql', {
+    encoding: 'utf8',
+  });
 
   const connection = await connectionFn(true);
   const [, rows] = await connection.query(sql);
-  connection.end();
+  await connection.end();
   return rows;
 }
 
 export async function updateOrder(order_id: number,
-  contacted_status: string) {    
-  
-  const sql = await fs.readFile('./updateOrder.sql',
-  'utf8');
-    
+  contacted_status: string) {
+
+  const sql = await fs.readFile('./updateOrder.sql', {
+    encoding: 'utf8',
+  });
+
   const connection = await connectionFn(true);
-  const [, rows] = await connection.execute(sql, { order_id, contacted_status });
-  connection.end();
-  return rows;    
-              
+  const [, rows] = await connection.execute(sql, {
+    order_id,
+    contacted_status,
+  });
+  await connection.end();
+  return rows;
 }
 
-async function connectionFn(multiple = false) {    
-
+async function connectionFn(multiple = false) {
   const ssh = new SSH2Promise({
     host: process.env.BASTION_HOST,
     port: 22,
@@ -115,26 +118,25 @@ async function connectionFn(multiple = false) {
   });
 
   const tunnel = await ssh.addTunnel({
-    remoteAddr: process.env.STORE_HOST,
+    remoteAddr: process.env.MYSQL_HOST,
     remotePort: 3306,
   });
 
   const connection = await mysql.createConnection({
     host: 'localhost',
     port: tunnel.localPort,
-    user: process.env.STORE_USERNAME,
-    password: process.env.STORE_PASSWORD,
-    database: process.env.STORE_DATABASE,
+    user: process.env.MYSQL_USERNAME,
+    password: process.env.MYSQL_PASSWORD,
+    database: process.env.MYSQL_DATABASE,
     multipleStatements: multiple,
     namedPlaceholders: true,
   });
 
   return connection;
-}
 }`,
 ];
 
-export const filenames = ['users.ts', 'stripeInvoice.tsx', 'orders.ts'];
+const filenames = ['users.ts', 'stripeInvoice.tsx', 'orders.ts'];
 
 export default function CodeBlock({ appMode, fileIndex, setFrameIndex }) {
   const tabsRef = React.useRef(null);

docs/src/components/landing/GithubStars.js

@@ -58,7 +58,7 @@ export default function GithubStars() {
           display: 'flex',
           alignItem: 'center',
           ml: 0.5,
-          color: theme.palette.primary[500],
+          color: theme.palette.primary[700],
           ...theme.applyDarkStyles({
             color: theme.palette.primary[200],
           }),

docs/src/components/landing/Hero.js

@@ -186,12 +186,12 @@ export default function Hero() {
             ]}
           />
         </Typography>
-        <Typography variant="h1" sx={{ my: 1, minWidth: { xs: 'auto', sm: 600 } }}>
+        <Typography variant="h1" sx={{ my: 2, minWidth: { xs: 'auto', sm: 600 } }}>
           Turn your <TypingAnimation wordIndex={wordIndex} setWordIndex={setWordIndex} />
           <br />
           <GradientText>into UIs</GradientText>
         </Typography>
-        <Typography color="text.secondary" sx={{ maxWidth: 520, mb: 2, textWrap: 'balance' }}>
+        <Typography color="text.secondary" sx={{ maxWidth: 520, mb: 3, textWrap: 'balance' }}>
           Build scalable and secure internal tools locally. Drag and drop to build UI, then connect
           to data sources with your own code.
         </Typography>
@@ -201,7 +201,7 @@ export default function Hero() {
         />
         <Box
           sx={{
-            mt: 2,
+            mt: 4,
             display: 'flex',
             alignItems: 'center',
             justifyContent: { xs: 'space-around', sm: 'start' },

docs/src/components/landing/UseCases.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Link from '@mui/material/Link';
+import Link from 'docs/src/modules/components/Link';
 import PropTypes from 'prop-types';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -15,10 +15,11 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import Grid from '@mui/material/Unstable_Grid2';
 import ROUTES from '../../route';
 
-const ImageContainer = styled(Box)(({ theme }) => [
+const ImageContainer = styled(Link)(({ theme }) => [
   {
     position: 'relative',
     width: '100%',
+    display: 'block',
     height: 'auto',
     borderRadius: 16,
     padding: 8,
@@ -108,7 +109,7 @@ export default function CardGrid() {
         />
         <Grid container spacing={5} sx={{ mt: { xs: 1, sm: 4 } }}>
           <Grid xs={12} md={6}>
-            <ImageContainer>
+            <ImageContainer noLinkStyle href="/toolpad/examples/basic-crud-app/">
               <Img
                 src="/static/toolpad/docs/examples/basic-crud-app.png"
                 width="2880"
@@ -119,23 +120,23 @@ export default function CardGrid() {
               icon={<AdminPanelSettingsRoundedIcon fontSize="small" color="primary" />}
               title="Admin panel"
               description="Enable your teams to quickly view and manage customer orders, queries, and refunds by creating admin apps that gather data from third-party APIs providers like Stripe, Twilio, Zendesk, etc. Toolpad allows end users to create, read, update, or delete records."
-              href={ROUTES.toolpadAdminExample}
+              href="/toolpad/examples/basic-crud-app/"
             />
           </Grid>
           <Grid xs={12} md={6}>
-            <ImageContainer>
+            <ImageContainer noLinkStyle href="/toolpad/examples/npm-stats/">
               <Img src="/static/toolpad/docs/examples/npm-stats.png" width="2880" height="1592" />
             </ImageContainer>
             <ContentCard
               icon={<DashboardRoundedIcon fontSize="small" color="primary" />}
               title="Analytics dashboard"
               description="Build Analytics dashboards to slice and dice any metric across various dimensions. Further, use them to monitor KPIs, track business goals, and identify trends and opportunities. Toolpad allows you to combine data from multiple sources and bind
                 it by writing JavaScript anywhere."
-              href={ROUTES.toolpadBIExample}
+              href="/toolpad/examples/npm-stats/"
             />
           </Grid>
           <Grid xs={12} md={6}>
-            <ImageContainer>
+            <ImageContainer noLinkStyle href="/toolpad/examples/qr-generator/">
               <Img
                 src="/static/toolpad/docs/examples/qr-generator.png"
                 width="2880"
@@ -148,7 +149,7 @@ export default function CardGrid() {
               description="Provide the stakeholders with simple apps to manage their daily operations. You can quickly build an app on Toolpad by calling APIs or writing custom functions.
                 Your app remains secure as the code never leaves your network, and you can
                 securely deploy it to any service you choose."
-              href={ROUTES.toolpadUtilityAppExample}
+              href="/toolpad/examples/qr-generator/"
             />
           </Grid>
           <Grid xs={12} md={6}>

docs/src/route.ts

@@ -3,9 +3,6 @@ const ROUTES = {
   toolpadQuickstart: '/toolpad/getting-started/first-app/',
   toolpadDocs: '/toolpad/getting-started/installation/',
   toolpadUpvote: 'https://github.com/mui/mui-toolpad/labels/waiting%20for%20%F0%9F%91%8D',
-  toolpadUtilityAppExample: '/toolpad/examples/qr-generator/',
-  toolpadAdminExample: '/toolpad/examples/admin-app/',
-  toolpadBIExample: '/toolpad/examples/npm-stats/',
   toolpadMoreExamples: 'https://github.com/mui/mui-toolpad/tree/master/examples',
   toolpadBetaBlog: 'https://mui.com/blog/2023-toolpad-beta-announcement/',
   // https://docs.netlify.com/site-deploys/overview/#deploy-contexts

examples/basic-crud-app/README.md

@@ -8,9 +8,7 @@
 
 ## 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)
+Not available yet. You can open [in dev mode with StackBlitz](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/basic-crud-app) in the meantime.
 
 ## How to run
 
@@ -30,6 +28,10 @@ npm install
 npm run dev
 ```
 
+or:
+
+[![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)
+
 ## What's inside
 
 This app demonstrates the following capabilities of Toolpad:

examples/npm-stats/README.md

@@ -8,13 +8,7 @@
 
 ## 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)
+https://npm-stats.onrender.com/prod/pages/evZC-gp
 
 ## How to run
 
@@ -34,6 +28,10 @@ npm install
 npm run dev
 ```
 
+or:
+
+[![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)
+
 ## What's inside
 
 This app demonstrates the following capabilities of Toolpad:

examples/qr-generator/README.md

@@ -8,9 +8,7 @@
 
 ## 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)
+Not available yet. You can open [in dev mode with StackBlitz](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/qr-generator) in the meantime.
 
 ## How to use
 
@@ -30,6 +28,10 @@ npm install
 npm run dev
 ```
 
+or:
+
+[![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)
+
 ## What's inside
 
 This app demonstrates the following capabilities of Toolpad: