base-ui
base-ui copied to clipboard
mui
[website] Modernize the Base UI website
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.
To do:
- [ ] SEO metadata
- [x] Callout components
- [ ] Update all the pages to use components for common parts
- [ ] Component links 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
- [ ] Source code preview 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
