[docs] Start Toolpad Core docs

[bharatkashyap]

• Closes [docs] Refine the @toolpad/core docs introduction section #3420

• The example referred to in the docs added by this PR is in [docs] Add Toolpad core tutorial example #3617

• Create an outline for the Introduction page: https://deploy-preview-3383--mui-toolpad-docs.netlify.app/toolpad/core/introduction/

[Janpot]

Does it make sense to introduce a new flag for this? Perhaps we can add a tutorial example?

Suggested change

	yarn create toolpad-app --tutorial my-first-project
	yarn create toolpad-app --core --example tutorial

[Janpot]

Would it make sense to already include them in the package.json of the tutorial template?

[Janpot]

Can we format the tutorial with sections, instead of a numbered list? That way we get navigation on the right.

Perhaps it makes sense to have two sections?

## bootstrapping the application

commands to get started

## creating a page

bootstrapping 1 page + making it appear in navigation

Then this is where is where we can continue with https://deploy-preview-3611--mui-toolpad-docs.netlify.app/toolpad/core/introduction/dashboard-tutorial/

[Janpot]

Can we replace this with a live demo of what you'd see? The demo doesn't have to actually be running a Next.js app, we can hide the source code.

[Janpot]

Same for this one?

[bharatkashyap]

In the case of a demo component, there is no easy way to represent the change in the page content alongside the navigation, which is what the GIF depicts

[Janpot]

Can't the user just click on the different navigation entries? We'll have to create router adapter for this for the demo, not sure whether that's already possible at the moment. But I suspect it could look a bit like

// in-memory router for demos

const [pathname, setPathname] = React.useState(initialPathname);
const [searchParams, setSearchParams] = React.useState(new URLSearchParams());
const navigate = React.useCallback((url, options) => {
  const {pathname, searchParams} = new URL(url, window.location.href);
  setPathname(pathname);
  setSearchParams(searchParams);
},  [])

const routerAdapter = { pathname, searchParams, navigate }

return <AppProvider routerAdapter={routerAdapter}>{/* ... */}</AppProvider>

cc @apedroferreira

[bharatkashyap]

Can't the user just click on the different navigation entries?

They could; I meant that the dashboard content wouldn't actually change on clicking the different navigation entries in the current behaviour. Agree on using an in-memory router adapter to make navigation work for the demos.

Perhaps we can merge this and ship an improved version with an in-memory router once that is complete?

[Janpot]

Sure