Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs-infra] Sync _app file with monorepo #13582

Merged
merged 1 commit into from
Jun 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 28 additions & 22 deletions docs/pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@ import { loadCSS } from 'fg-loadcss/src/loadCSS';
import NextHead from 'next/head';
import PropTypes from 'prop-types';
import { useRouter } from 'next/router';
import { LicenseInfo } from '@mui/x-license';
import { ponyfillGlobal } from '@mui/utils';
import PageContext from 'docs/src/modules/components/PageContext';
import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
import { CodeCopyProvider } from '@mui/docs/CodeCopy';
import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
import { CodeStylingProvider } from 'docs/src/modules/utils/codeStylingSolution';
import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import createEmotionCache from 'docs/src/createEmotionCache';
import findActivePage from 'docs/src/modules/utils/findActivePage';
import { LicenseInfo } from '@mui/x-license';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
import { DocsProvider } from '@mui/docs/DocsProvider';
import { mapTranslations } from '@mui/docs/i18n';
Expand Down Expand Up @@ -173,7 +174,6 @@ Tip: you can access the documentation \`theme\` object directly in the console.
'font-family:monospace;color:#1976d2;font-size:12px;',
);
}

function AppWrapper(props) {
const { children, emotionCache, pageProps } = props;

Expand Down Expand Up @@ -202,13 +202,6 @@ function AppWrapper(props) {
}
}, []);

let fonts = [];
if (pathnameToLanguage(router.asPath).canonicalAs.match(/onepirate/)) {
fonts = [
'https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Work+Sans:300,400&display=swap',
];
}

const pageContextValue = React.useMemo(() => {
const { activePage, activePageParents } = findActivePage(pages, router.pathname);
const languagePrefix = pageProps.userLanguage === 'en' ? '' : `/${pageProps.userLanguage}`;
Expand Down Expand Up @@ -299,13 +292,21 @@ function AppWrapper(props) {
};
}, [productId, productCategoryId, pageProps.userLanguage, router.pathname]);

let fonts = [];
if (pathnameToLanguage(router.asPath).canonicalAs.match(/onepirate/)) {
fonts = [
'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Work+Sans:wght@300;400&display=swap',
];
}

// Replicate change reverted in https://github.com/mui/material-ui/pull/35969/files#r1089572951
// Fixes playground styles in dark mode.
const ThemeWrapper = router.pathname.startsWith('/playground') ? React.Fragment : ThemeProvider;

return (
<React.Fragment>
<NextHead>
<meta name="viewport" content="initial-scale=1, width=device-width" />
{fonts.map((font) => (
<link rel="stylesheet" href={font} key={font} />
))}
Expand All @@ -318,16 +319,18 @@ function AppWrapper(props) {
translations={pageProps.translations}
>
<CodeCopyProvider>
<CodeVariantProvider>
<PageContext.Provider value={pageContextValue}>
<ThemeWrapper>
<DocsStyledEngineProvider cacheLtr={emotionCache}>
{children}
<GoogleAnalytics />
</DocsStyledEngineProvider>
</ThemeWrapper>
</PageContext.Provider>
</CodeVariantProvider>
<CodeStylingProvider>
<CodeVariantProvider>
<PageContext.Provider value={pageContextValue}>
<ThemeWrapper>
<DocsStyledEngineProvider cacheLtr={emotionCache}>
{children}
<GoogleAnalytics />
</DocsStyledEngineProvider>
</ThemeWrapper>
</PageContext.Provider>
</CodeVariantProvider>
</CodeStylingProvider>
</CodeCopyProvider>
</DocsProvider>
</React.Fragment>
Expand All @@ -343,9 +346,11 @@ AppWrapper.propTypes = {
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

const getLayout = Component.getLayout ?? ((page) => page);

return (
<AppWrapper emotionCache={emotionCache} pageProps={pageProps}>
<Component {...pageProps} />
{getLayout(<Component {...pageProps} />)}
</AppWrapper>
);
}
Expand Down Expand Up @@ -377,6 +382,7 @@ MyApp.getInitialProps = async ({ ctx, Component }) => {

// Track fraction of actual events to prevent exceeding event quota.
// Filter sessions instead of individual events so that we can track multiple metrics per device.
// See https://github.com/GoogleChromeLabs/web-vitals-report to use this data
const disableWebVitalsReporting = Math.random() > 0.0001;
export function reportWebVitals({ id, name, label, delta, value }) {
if (disableWebVitalsReporting) {
Expand Down
Loading