[docs] Revise Joy UI "Overview" page copy (#34087)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs/data/joy/getting-started/overview/overview.md

@@ -4,14 +4,18 @@ title: Overview
 
 # Joy UI - Overview
 
-<p class="description">Joy UI is a library of beautifully designed React UI components.</p>
+<p class="description">Joy UI is a library of beautifully designed React UI components built to spark joy in the development process.</p>
 
-It features foundational components such as the ones you'd find in Material UI and it comes with a beautifully designed default theme so you can rapidly start your own design system.
-You should see Joy UI as a starting point.
-It comes with a lot of customization features so you match it to your desired look and feel.
+## Introduction
+
+Joy UI is an open-source React component library that implements MUI's own in-house design [principles](#principles).
+
+It includes foundational pre-built components that look beautiful by default, and give you plenty of room to customize their look and feel.
+
+Use Joy UI to spark joy in the creative process of building your next app.
 
 :::warning
-**Note:** as of today, Joy UI is in active development, with an alpha version soon to be released.
+Joy UI is currently in active development, and breaking changes are to be expected.
 
 We're adding new components and features regularly, and you're welcome to contribute!
 
@@ -20,40 +24,42 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package%
 
 ## Advantages of Joy UI
 
-- **Ship faster:** Joy UI gives you a significant amount of prebuilt components you need to develop web apps, with a sleek and carefully designed look and feel, allowing you to achieve a good-looking result without a dedicated designer.
-- **Extensive customization:** you're encouraged to customize each and every tiny piece of the Joy UI components so they match your desired design.
-- **Accessibility in mind:** Joy UI components are built on top of [MUI Base's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for several accessibility features out of the box.
-  We do our best to make all components screen reader-friendly, also offering suggestions for optimizing accessibility throughout our documentation.
+- **Ship faster:** Joy UI gives you pre-built components with a sleek and carefully designed look and feel, so you don't need design skills to ship beautiful UIs rapidly.
+- **Extensive customization options:** you can customize each and every tiny piece of Joy UI's components to match your own unique design.
+- **Accessibility in mind:** Joy UI components are built on top of [MUI Base's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for many accessibility features out of the box.
+  We do our best to make all components screen reader-friendly, and also offer suggestions for optimizing accessibility throughout our documentation.
 
 ## Joy UI vs. Material UI
 
-Joy UI is meant to feature the same list of components you'd find in Material UI, with similar philosophy around component API and customization extensibility, but without the Material Design look & feel.
+Joy UI is intended to serve as an alternative to Material UI for designs that don't adhere to Material Design specifications.
+These two sister libraries feature many of the same components, and similarly designed component APIs, so you can quickly start building with one if you've used the other before.
 
-If you ever wanted to use Material UI for the breadth of supported components, carefully written component API, and reliability of a tried and tested library but hesitated because of Material Design, Joy UI is here to solve that for you and act as the best alternative for that.
+Try Joy UI if you appreciate the comprehensiveness and reliability of Material UI, but don't need all of the additional baggage that comes along with Material Design.
 
 ## Principles
 
-### Keep it essential
+### Include only what's essential
 
 Joy UI should work with the least amount of effort possible.
-We're striving for the essential only, both in the component API and design (look & feel).
+We're striving for the essential only, both in the component API and design (look and feel).
+
 Components should have only what they need to do the job.
-What is considered essential will be drawn from MUI's experience over the years developing component libraries, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.
+What is considered essential is drawn from MUI's experience over the years developing component libraries, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.
 
-### Looks great out-of-the-box
+### Make it beautiful out of the box
 
 Joy UI needs to be simple yet characteristic.
 Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely.
+
 We aim to spark delight with simplicity and attention to detail.
 You should feel like your UI looks great from the start.
 
 ### Encourage creativity
 
-We're aiming for Joy UI to be entirely customizable, and seen as a great starting point.
-This is meant to encourage you to extend, change, and revamp how Joy UI looks.
-Be creative by making it your own.
+Working with Joy UI shouldn't feel stiff or rigid—you should feel inspired and empowered to change, extend, and revamp Joy UI's appearance and behavior with ease.
+We want it to become your go-to starting point for building UIs.
 
-### Focus on developer experience
+### Prioritize developer experience
 
-A great developer experience is not only the quality of the code we ship but also how clear the documentation is, and what learning resources are available for developers.
-We hope that bundling it all together brings joy.
+A great developer experience is not only about the quality of the code we ship, but also about how clear the documentation is, and what learning resources are available for developers.
+We hope that every step of the experience brings you joy.

docs/src/modules/components/AppLayoutDocs.js

@@ -5,6 +5,7 @@ import { styled } from '@mui/material/styles';
 import { exactProp } from '@mui/utils';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import NoSsr from '@mui/material/NoSsr';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import EditPage from 'docs/src/modules/components/EditPage';
@@ -81,22 +82,20 @@ function AppLayoutDocs(props) {
     throw new Error('Missing description in the page');
   }
 
-  const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
+  const { canonicalAs } = pathnameToLanguage(router.asPath);
   let productName = 'MUI';
-  if (asPathWithoutLang.startsWith('/material-ui')) {
+  if (canonicalAs.startsWith('/material-ui/')) {
     productName = 'Material UI';
-  }
-  if (asPathWithoutLang.startsWith('/base')) {
+  } else if (canonicalAs.startsWith('/base/')) {
     productName = 'MUI Base';
-  }
-  if (asPathWithoutLang.startsWith('/x')) {
+  } else if (canonicalAs.startsWith('/x/')) {
     productName = 'MUI X';
-  }
-  if (asPathWithoutLang.startsWith('/system')) {
+  } else if (canonicalAs.startsWith('/system/')) {
     productName = 'MUI System';
-  }
-  if (asPathWithoutLang.startsWith('/toolpad')) {
+  } else if (canonicalAs.startsWith('/toolpad/')) {
     productName = 'MUI Toolpad';
+  } else if (canonicalAs.startsWith('/joy-ui/')) {
+    productName = 'Joy UI';
   }
 
   return (

docs/src/modules/components/AppNavDrawer.js

@@ -17,7 +17,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
 import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
-import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
+import { pathnameToLanguage, pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
@@ -290,7 +290,7 @@ export default function AppNavDrawer(props) {
   const mobile = useMediaQuery((theme) => theme.breakpoints.down('lg'));
 
   const drawer = React.useMemo(() => {
-    const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
+    const { canonicalAs } = pathnameToLanguage(router.asPath);
 
     const navItems = renderNavItems({ onClose, pages, activePage, depth: 0, t });
 
@@ -391,7 +391,7 @@ export default function AppNavDrawer(props) {
               <SvgMuiLogo width={30} />
             </Box>
           </NextLink>
-          {asPathWithoutLang.startsWith('/material-ui/') && (
+          {canonicalAs.startsWith('/material-ui/') && (
             <ProductIdentifier
               name="Material UI"
               metadata="MUI Core"
@@ -408,7 +408,7 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
-          {asPathWithoutLang.startsWith('/joy-ui/') && (
+          {canonicalAs.startsWith('/joy-ui/') && (
             <ProductIdentifier
               name="Joy UI"
               metadata="MUI Core"
@@ -417,7 +417,7 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
-          {asPathWithoutLang.startsWith('/system/') && (
+          {canonicalAs.startsWith('/system/') && (
             <ProductIdentifier
               name="MUI System"
               metadata="MUI Core"
@@ -431,7 +431,7 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
-          {asPathWithoutLang.startsWith('/base/') && (
+          {canonicalAs.startsWith('/base/') && (
             <ProductIdentifier
               name="MUI Base"
               metadata="MUI Core"
@@ -440,11 +440,11 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
-          {asPathWithoutLang.startsWith('/x/introduction') && (
+          {canonicalAs.startsWith('/x/introduction/') && (
             <ProductIdentifier name="Advanced components" metadata="MUI X" />
           )}
-          {(asPathWithoutLang.startsWith('/x/react-data-grid') ||
-            asPathWithoutLang.startsWith('/x/api/data-grid')) && (
+          {(canonicalAs.startsWith('/x/react-data-grid/') ||
+            canonicalAs.startsWith('/x/api/data-grid/')) && (
             <ProductIdentifier
               name="Data Grid"
               metadata="MUI X"
@@ -455,8 +455,8 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
-          {(asPathWithoutLang.startsWith('/x/react-date-pickers') ||
-            asPathWithoutLang.startsWith('/x/api/date-pickers')) && (
+          {(canonicalAs.startsWith('/x/react-date-pickers/') ||
+            canonicalAs.startsWith('/x/api/date-pickers/')) && (
             <ProductIdentifier
               name="Date pickers"
               metadata="MUI X"