[docs-infra] Fix layout shift ad

oliviertassinari · Jun 24, 2023 · 5095d5d · 5095d5d
1 parent 35d8bd6
commit 5095d5d
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 210 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -111,7 +111,7 @@ class AdErrorBoundary extends React.Component {
   }
 }
 
-function Ad() {
+export default function Ad() {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
 
@@ -218,7 +218,8 @@ function Ad() {
       sx={{
         position: 'relative',
         display: 'block',
-        m: (theme) => theme.spacing(4, 0, 3),
+        mt: 4,
+        mb: 3,
         ...(adShape === 'image' && {
           minHeight: 126,
         }),
@@ -241,5 +242,3 @@ function Ad() {
     </Box>
   );
 }
-
-export default Ad;
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
@@ -47,7 +47,7 @@ const StyledAppContainer = styled(AppContainer, {
     ...(!disableAd && {
       ...(!hasTabs && {
         '&& .description': {
-          marginBottom: 198,
+          marginBottom: 4 * 10 + 3 * 10 + 126,
         },
         '&& .description.ad': {
           marginBottom: 0,
@@ -78,13 +78,16 @@ const ActionsDiv = styled('div')(({ theme }) => ({
   },
 }));
 
-function AppLayoutDocs(props) {
+export default function AppLayoutDocs(props) {
   const router = useRouter();
   const {
     BannerComponent,
     children,
     description,
     disableAd = false,
+    // TODO, remove this prop, the layout should be retained as much as possible
+    // between pages, to improve performance, and retain UI states, e.g. scroll
+    disableLayout = false,
     disableToc = false,
     hasTabs = false,
     location,
@@ -112,8 +115,11 @@ function AppLayoutDocs(props) {
     productName = 'Joy UI';
   }
 
+  const Layout = disableLayout ? React.Fragment : AppFrame;
+  const layoutProps = disableLayout ? {} : { BannerComponent };
+
   return (
-    <AppFrame BannerComponent={BannerComponent}>
+    <Layout {...layoutProps}>
       <GlobalStyles
         styles={{
           ':root': {
@@ -146,7 +152,7 @@ function AppLayoutDocs(props) {
         </Main>
       </AdManager>
       <BackToTop />
-    </AppFrame>
+    </Layout>
   );
 }
 
@@ -155,6 +161,7 @@ AppLayoutDocs.propTypes = {
   children: PropTypes.node.isRequired,
   description: PropTypes.string.isRequired,
   disableAd: PropTypes.bool.isRequired,
+  disableLayout: PropTypes.bool,
   disableToc: PropTypes.bool.isRequired,
   hasTabs: PropTypes.bool,
   location: PropTypes.string.isRequired,
@@ -165,5 +172,3 @@ AppLayoutDocs.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   AppLayoutDocs.propTypes = exactProp(AppLayoutDocs.propTypes);
 }
-
-export default AppLayoutDocs;
diff --git a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -4,7 +4,7 @@ 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 { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Demo from 'docs/src/modules/components/Demo';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -40,7 +40,7 @@ export default function MarkdownDocs(props) {
     disableAd = false,
     disableToc = false,
     /**
-     * Some Joy pages, e.g. Joy theme builder, should not be a nested CssVarsProvider to control its own state.
+     * Some pages, e.g. Joy theme builder, should not be a nested CssVarsProvider to control its own state.
      * This config will skip the CssVarsProvider at the root of the page.
      */
     disableCssVarsProvider = false,
@@ -57,7 +57,7 @@ export default function MarkdownDocs(props) {
   const { description, location, rendered, title, toc } = localizedDoc;
 
   const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider;
-  const Provider = isJoy ? CssVarsProvider : React.Fragment;
+  const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
   const Wrapper = isJoy ? BrandingProvider : React.Fragment;
 
   return (
@@ -69,14 +69,14 @@ export default function MarkdownDocs(props) {
       title={title}
       toc={toc}
     >
-      <Provider>
-        {disableAd ? null : (
-          <Wrapper>
-            <AdGuest>
-              <Ad />
-            </AdGuest>
-          </Wrapper>
-        )}
+      {disableAd ? null : (
+        <BrandingProvider>
+          <AdGuest>
+            <Ad />
+          </AdGuest>
+        </BrandingProvider>
+      )}
+      <CssVarsProvider>
         {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {
           if (typeof renderedMarkdownOrDemo === 'string') {
@@ -154,7 +154,7 @@ export default function MarkdownDocs(props) {
             />
           );
         })}
-      </Provider>
+      </CssVarsProvider>
     </AppLayoutDocs>
   );
 }

diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
@@ -4,13 +4,13 @@ import { useRouter } from 'next/router';
 import kebabCase from 'lodash/kebabCase';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
-import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent';
 import HooksApiContent from 'docs/src/modules/components/HooksApiContent';
 import { getTranslatedHeader as getComponentTranslatedHeader } from 'docs/src/modules/components/ApiPage';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElementV2';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
-import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocsWithoutAppFrame';
+import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
@@ -163,8 +163,7 @@ export default function MarkdownDocsV2(props) {
   });
 
   const isJoy = canonicalAs.startsWith('/joy-ui/');
-  const Provider = isJoy ? CssVarsProvider : React.Fragment;
-
+  const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
   const Wrapper = isJoy ? BrandingProvider : React.Fragment;
   const wrapperProps = {
     ...(isJoy && { mode: theme.palette.mode }),
@@ -217,6 +216,7 @@ export default function MarkdownDocsV2(props) {
       disableToc={disableToc}
       location={location}
       title={title}
+      disableLayout
       toc={activeToc}
       hasTabs
     >
@@ -225,15 +225,15 @@ export default function MarkdownDocsV2(props) {
           '--MuiDocs-header-height': `${AppFrameHeight + TabsHeight}px`,
         }}
       >
-        <Provider>
-          {isJoy && <JoyModeObserver key="joy-provider" mode={theme.palette.mode} />}
-          {disableAd ? null : (
-            <Wrapper key="add">
-              <AdGuest classSelector=".component-tabs">
-                <Ad />
-              </AdGuest>
-            </Wrapper>
-          )}
+        {disableAd ? null : (
+          <BrandingProvider>
+            <AdGuest classSelector=".component-tabs">
+              <Ad />
+            </AdGuest>
+          </BrandingProvider>
+        )}
+        <CssVarsProvider>
+          {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
           {commonElements}
           {activeTab === '' &&
             rendered
@@ -268,7 +268,7 @@ export default function MarkdownDocsV2(props) {
               pagesContents={hooksApiPageContents}
             />
           )}
-        </Provider>
+        </CssVarsProvider>
       </div>
     </AppLayoutDocs>
   );