[docs] Fix ad exception in Joy UI (#35685)

mui · Jan 3, 2023 · a267ed6 · a267ed6
1 parent 8e067ee
commit a267ed6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 19 deletions.
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
@@ -51,7 +51,8 @@ const theme = extendTheme({
   ...getThemedComponents(),
 });
 
-export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) {
+export default function BrandingCssVarsProvider(props: { children: React.ReactNode }) {
+  const { children } = props;
   return (
     <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange>
       <NextNProgressBar />

diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js
@@ -176,7 +176,7 @@ function DemoSandbox(props) {
 
   return (
     <DemoErrorBoundary name={name} onResetDemoClick={onResetDemoClick} t={t}>
-      {canonicalAs.startsWith('/joy-ui') ? (
+      {canonicalAs.startsWith('/joy-ui/') ? (
         children
       ) : (
         <StylesProvider jss={jss}>

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import path from 'path';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/system';
+import { exactProp } from '@mui/utils';
+import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Demo from 'docs/src/modules/components/Demo';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import { exactProp } from '@mui/utils';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
-import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
 import AdGuest from 'docs/src/modules/components/AdGuest';
@@ -34,7 +35,7 @@ JoyModeObserver.propTypes = {
 export default function MarkdownDocs(props) {
   const theme = useTheme();
   const router = useRouter();
-  const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
+  const { canonicalAs } = pathnameToLanguage(router.asPath);
   const {
     disableAd = false,
     disableToc = false,
@@ -50,7 +51,7 @@ export default function MarkdownDocs(props) {
   const localizedDoc = docs[userLanguage] || docs.en;
   const { description, location, rendered, title, toc } = localizedDoc;
 
-  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
+  const isJoy = canonicalAs.startsWith('/joy-ui/');
   const Provider = isJoy ? CssVarsProvider : React.Fragment;
   const Wrapper = isJoy ? BrandingProvider : React.Fragment;
 
@@ -65,9 +66,11 @@ export default function MarkdownDocs(props) {
     >
       <Provider>
         {disableAd ? null : (
-          <AdGuest>
-            <Ad />
-          </AdGuest>
+          <Wrapper>
+            <AdGuest>
+              <Ad />
+            </AdGuest>
+          </Wrapper>
         )}
         {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@mui/material/locale';
+import { enUS, zhCN, ptBR } from '@mui/material/locale';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
@@ -18,13 +18,7 @@ import PageContext from './PageContext';
 const languageMap = {
   en: enUS,
   zh: zhCN,
-  fa: faIR,
-  ru: ruRU,
   pt: ptBR,
-  es: esES,
-  fr: frFR,
-  de: deDE,
-  ja: jaJP,
 };
 
 const themeInitialOptions = {

diff --git a/docs/src/modules/components/TopLayoutCareers.js b/docs/src/modules/components/TopLayoutCareers.js
@@ -22,7 +22,7 @@ const StyledAppContainer = styled(AppContainer)(({ theme }) => ({
   },
 }));
 
-function TopLayoutCareers(props) {
+export default function TopLayoutCareers(props) {
   const { docs } = props;
   const { description, rendered, title } = docs.en;
 
@@ -57,5 +57,3 @@ function TopLayoutCareers(props) {
 TopLayoutCareers.propTypes = {
   docs: PropTypes.object.isRequired,
 };
-
-export default TopLayoutCareers;