[website] Modernize the Base UI website

[michaldudak]

Overview

Created a new documentation website for Base UI. It does not use any of the Material UI-specific components from the Core repo, which simplifies the setup.

Notable changes in comparison to the old site:

• Using the Next.js App Router and React Server Components.
• Using MDX instead of the custom Markdown parser (@mui/markdown). This enables the use of arbitrary components in the docs, potentially improving consistency (for things like installation instructions etc.).
• New mechanisms for including and showing demos. The previous functions were tied to the webpack loader from @mui/markdown. Using RSC allowed us to greatly simplify the implementation of the loader.
• Demo viewer uses unstyled base components.
• Live editing of demos is currently not supported.
• Material UI components are not used. We use custom-styled Base UI components where needed.
• The site is styled using plain CSS.
• There is no need to generate .js/.ts pages per component anymore. The site uses dynamic routes to render markdown for each component using a single page.tsx file.

Breaking changes

• Documentation files should be written using mdx (just for consistency, as plain markdown is still supported).
• Components such as ComponentLinkHeader must be included as JSX elements (<ComponentLinkHeader />) instead of {{ "component": ... }} syntax.
• The <p class="description"> in docs is replaced by the <Description /> component. It does not need children, as the content is taken from the description field in frontmatter.
• The ComponentPageTabs component is no longer used.
• Demos are included using the <Demo demo="(demo name)" /> component. The demo prop does not require extension and can point to either a file or a directory containing multiple variants.
• Demos must have the "use client"; directive (this is strictly necessary only for demos using MUI System, but can prevent weird errors elsewhere as well).
• Callouts (:::info, :::warning, etc.) are replaced by the <Callout type="..." /> component.
• pnpm docs:api no longer generates pages. Next.js dynamic routes are used, so a single page component can render multiple pages.
• pages.ts no is longer split into categories. Instead, all the components are listed alphabetically.

To do

• SEO metadata
• Callout components
• Update all the pages to use components for common parts
• ComponentLinkHeader component
• Accessible demo toolbar
• Demo file selector as tabs
• Demo controls
  • Reset
  • Focus
  • Copy source
  • Expand/collapse code
  • View source on GitHub
• CodeSandbox generation
• StackBlitz generation
• Code blocks in dark mode
• Fix link checker script
• Fix visual regression tests
• Next/previous page links
• "Edit this page on GitHub" link
• Fix the Google Analytics component
• Render Tailwind CSS demos
• Remember package manager selection between pages and sessions
• Remember styling engine selection between pages and sessions

Moved to separate issues

• Light/dark mode switcher
• Responsive sidebars
• Feedback component
• Source code preview generation (TBD if needed)

[mui-bot]

Netlify deploy preview

https://deploy-preview-538--base-ui.netlify.app/

Generated by 🚫 dangerJS against 1976926