[docs] Restructure #2082

bharatkashyap · 2023-05-26T22:25:58Z

Preview: https://deploy-preview-2082--mui-toolpad-docs.netlify.app/toolpad/getting-started/first-app/
Closes Visually improve docs images #1981
Closes [docs] Restructure #2052

This PR attempts to:

restructure the docs into the sections mentioned in [docs] Restructure #2052
change content in most existing pages
add many new pages
change all of the existing media to adhere to a 1440x796 DPR 2.0 resolution
add an option to view images in full size.
Remove unused media files
Move the landing page content into the data folder

Deviations from the structure in #2052 have been made in two places:

"Deploy to Render" has been placed in Tutorials
A section on "Display mode" has been added to Concepts
The "How to guides" section on custom components has two children:
- Number (A number display component)
- Cube (A custom components which imports external libraries)

Updated arcade (with lesser steps) that I recorded at 1440X796 DPR 2.0. It is still coming with the vertical scrollbar.

…d into fix-docs-images

apedroferreira

Thanks, Bharat, this is a lot!

A few things I've noticed in the preview:

I can't preview / zoom into images in the preview
There seems to be no footer at the bottom of the docs pages, or even any padding at all? We used to have a footer there.
Maybe our tutorials section will be mixing up too many unrelated topics. Could we somehow have a Deployment section somewhere with subsections on different services we can deploy to?
Not sure what we agreed on about "display mode" - maybe it could be under "Embedding a Toolpad page?"

…docs

…ad into restructure-docs

oliviertassinari · 2023-05-31T17:27:22Z

The image open interaction on https://www.lennysnewsletter.com/p/how-figma-builds-product feels quite nice, with the complementary hover icon on the corner:

bharatkashyap · 2023-06-05T13:53:22Z

https://deploy-preview-2082--mui-toolpad-docs.netlify.app/toolpad/how-to-guides/customize-datagrid/

You're right, I'll do another pass on all the images to fix the aspect ratio/blurry GIF issues

…docs

siriwatknp · 2023-06-06T13:56:35Z

docs/data/toolpad/concepts/connecting-to-data.md

+
+  This corresponds to a function that you create on your file system, inside the `toolpad/resources` folder. For example, in `toolpad/resources/functions.ts`
+
+  ```tsx


Suggested change

```tsx

```jsx

@bharatkashyap The docs does not support tsx yet, so better go with jsx to get the proper color for the tokens.

Here is the jsx version:

Thanks Jun! Changed it

prakhargupta1 · 2023-06-07T06:24:38Z

docs/data/toolpad/concepts/custom-components.md

+- `@mui/icons-material`
+
+:::warning
+Support for importing any `npm` package is not implemented yet. It's coming.


Is it true that a user can't install any npm package?
Is this also true for custom functions?

This isn't true for custom functions.

About the custom components, I borrowed from the existing docs https://mui.com/toolpad/building-ui/custom-components/#supported-features but I think this shouldn't be true anymore either. I'll change it

I've added a new how-to guide showcasing this feature for custom components

prakhargupta1 · 2023-06-07T06:27:29Z

docs/data/toolpad/concepts/managing-state.md

+
+Each property of component that may be bound to data present on the page is surrounded by a **Binding** button, which you can click to initiate data binding.
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/managing-state/binding-button.png", "alt": "Binding button", "caption": "The binding button", "zoom": false }}


Images of a section of Toolpad should be small. We should maintain the same scale.

Do you mean that the image should show the full tab even when talking about a specific section?

No, I mean this image should be smaller. Like the first image in: https://mui.com/toolpad/data-binding/binding-state/

Adding a width override to DocsImage so that custom widths can be set to images in cases like this. Capping the width to 300px in this case.

…ad into restructure-docs

apedroferreira

Other than the blurry gifs it looks good, but if you don't want to block the PR because of the GIFs or there are other issues I guess we can merge and fix after, not sure.

prakhargupta1 · 2023-06-07T15:32:49Z

docs/data/toolpad/concepts/display-mode.md

+<p class="description">Toolpad apps allow for a display mode configurable per-page</p>
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/display-mode/display-mode.png", "alt": "Display mode property ", "caption": "Display mode page property", "zoom": false }}
+


This image is big too.

prakhargupta1 · 2023-06-07T15:35:08Z

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

+1. Find the **rows** property in the inspector. Notice that there's a small **Bind** button to its right. Properties with this button next to them can be bound to state available on the page:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/getting-started/first-app/step-5.png", "alt": "Bind data", "caption": "The bindable rows property", "zoom": false, "indent": 1 }}
+


This image needs to be scaled down.

Janpot · 2023-06-07T17:00:03Z

Shall we center the images in the page?

bharatkashyap · 2023-06-07T17:45:23Z

Shall we center the images in the page?

Which ones do you mean?

Janpot · 2023-06-07T18:06:40Z

bharatkashyap · 2023-06-07T18:52:27Z

I've centred the uncentered images and replaced all blurred GIFs

bharatkashyap and others added 16 commits May 26, 2023 15:49

WIP restructure files

c41c351

WIP file restructure

c39f475

Complete file restructure

e1b40d0

WIP images, data folder restrucure

da3cb9a

Missed this

d906437

Fix: prettier

c5c1100

Update arcade

305cec0

Updated arcade (with lesser steps) that I recorded at 1440X796 DPR 2.0. It is still coming with the vertical scrollbar.

Remove scrollbars on arcade by fixing height

9c80eed

WIP

46fac69

WIP docs restructure 2

f8b01e4

WIP docs 4

9407cbd

first pass complete

f46b054

Merge branch 'master' into fix-docs-images

a993523

Fix Netlify build

af5147e

Merge branch 'fix-docs-images' of github.com:bharatkashyap/mui-toolpa…

566ad63

…d into fix-docs-images

Fix: markdownlint

9a582ac

bharatkashyap added the docs Improvements or additions to the documentation label May 26, 2023

bharatkashyap changed the title ~~Restructure docs~~ [docs] Restructure May 26, 2023

bharatkashyap mentioned this pull request May 26, 2023

[docs] Restructure #2045

Closed

bharatkashyap added 2 commits May 29, 2023 16:26

Move this to another branch

a6441e4

Merge branch 'master' into restructure-docs

04a8595

apedroferreira requested changes May 29, 2023

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 29, 2023

bharatkashyap added 2 commits May 30, 2023 14:43

Merge branch 'master' of github.com:mui/mui-toolpad into restructure-…

5fed29f

…docs

Merge branch 'restructure-docs' of github.com:bharatkashyap/mui-toolp…

21bbee7

…ad into restructure-docs

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 30, 2023

bharatkashyap added 2 commits May 30, 2023 19:28

Fix: missing page

903ef0f

Merge branch 'master' into restructure-docs

27884da

Try this

9b325ec

bharatkashyap added 3 commits June 6, 2023 14:50

Restructure

5072465

Review distorted images

31d69e0

Merge branch 'master' of github.com:mui/mui-toolpad into restructure-…

9732f15

…docs

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 6, 2023

siriwatknp reviewed Jun 6, 2023

View reviewed changes

bharatkashyap added 4 commits June 6, 2023 19:27

this causes Netlify to break

6566039

typo

32a81fd

Review: Jun

baa8866

Merge branch 'master' into restructure-docs

b41888e

prakhargupta1 reviewed Jun 7, 2023

View reviewed changes

Merge branch 'master' into restructure-docs

0a4bd54

prakhargupta1 reviewed Jun 7, 2023

View reviewed changes

bharatkashyap added 4 commits June 7, 2023 14:19

can import any npm in custom components

2415d12

Merge branch 'master' into restructure-docs

61f2edc

Merge branch 'restructure-docs' of github.com:bharatkashyap/mui-toolp…

90c3187

…ad into restructure-docs

Add width override

c88fd22

apedroferreira self-requested a review June 7, 2023 15:27

apedroferreira approved these changes Jun 7, 2023

View reviewed changes

prakhargupta1 reviewed Jun 7, 2023

View reviewed changes

Janpot approved these changes Jun 7, 2023

View reviewed changes

Fix: Review, scale down more smaller images

42530b5

Review: center more images, replace blurred GIFs

8df831b

bharatkashyap merged commit e638084 into mui:master Jun 7, 2023
8 checks passed

oliviertassinari mentioned this pull request Jul 6, 2023

[docs-infra] Allow to zoom on images mui/material-ui#36941

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Restructure #2082

[docs] Restructure #2082

bharatkashyap commented May 26, 2023 •

edited

Loading

apedroferreira left a comment •

edited

Loading

oliviertassinari commented May 31, 2023

bharatkashyap commented Jun 5, 2023

siriwatknp Jun 6, 2023

bharatkashyap Jun 6, 2023

prakhargupta1 Jun 7, 2023

bharatkashyap Jun 7, 2023 •

edited

Loading

bharatkashyap Jun 7, 2023

prakhargupta1 Jun 7, 2023

bharatkashyap Jun 7, 2023

prakhargupta1 Jun 7, 2023

bharatkashyap Jun 7, 2023

apedroferreira left a comment

prakhargupta1 Jun 7, 2023

prakhargupta1 Jun 7, 2023 •

edited by bharatkashyap

Loading

Janpot commented Jun 7, 2023

bharatkashyap commented Jun 7, 2023

Janpot commented Jun 7, 2023

bharatkashyap commented Jun 7, 2023


		This corresponds to a function that you create on your file system, inside the `toolpad/resources` folder. For example, in `toolpad/resources/functions.ts`

		```tsx


		Each property of component that may be bound to data present on the page is surrounded by a Binding button, which you can click to initiate data binding.

		{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/managing-state/binding-button.png", "alt": "Binding button", "caption": "The binding button", "zoom": false }}

		<p class="description">Toolpad apps allow for a display mode configurable per-page</p>

		{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/concepts/display-mode/display-mode.png", "alt": "Display mode property ", "caption": "Display mode page property", "zoom": false }}

		1. Find the rows property in the inspector. Notice that there's a small Bind button to its right. Properties with this button next to them can be bound to state available on the page:

		{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/getting-started/first-app/step-5.png", "alt": "Bind data", "caption": "The bindable rows property", "zoom": false, "indent": 1 }}

[docs] Restructure #2082

[docs] Restructure #2082

Conversation

bharatkashyap commented May 26, 2023 • edited Loading

apedroferreira left a comment • edited Loading

Choose a reason for hiding this comment

oliviertassinari commented May 31, 2023

bharatkashyap commented Jun 5, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bharatkashyap Jun 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apedroferreira left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prakhargupta1 Jun 7, 2023 • edited by bharatkashyap Loading

Choose a reason for hiding this comment

Janpot commented Jun 7, 2023

bharatkashyap commented Jun 7, 2023

Janpot commented Jun 7, 2023

bharatkashyap commented Jun 7, 2023

bharatkashyap commented May 26, 2023 •

edited

Loading

apedroferreira left a comment •

edited

Loading

bharatkashyap Jun 7, 2023 •

edited

Loading

prakhargupta1 Jun 7, 2023 •

edited by bharatkashyap

Loading