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

[WIP][docs] Move blog to app #35060

Closed
wants to merge 13 commits into from
Prev Previous commit
Next Next commit
more updates - fixed emotion context error
  • Loading branch information
mnajdova committed Nov 24, 2022
commit d2f062d9defc9fd240becac2b269905f971b5fc2
8 changes: 8 additions & 0 deletions docs/app/Box.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use client';

import * as React from 'react';
import MuiBox from '@mui/material/Box';

export default function Box(props) {
return <MuiBox {...props} />;
}
File renamed without changes.
8 changes: 8 additions & 0 deletions docs/app/Divider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use client';

import * as React from 'react';
import MuiDivider from '@mui/material/Divider';

export default function Divider(props) {
return <MuiDivider {...props} />;
}
61 changes: 61 additions & 0 deletions docs/app/EmotionRootStyleRegistry.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
'use client';
import * as React from 'react';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { useServerInsertedHTML } from 'next/navigation';
import { useState } from 'react';
import BrandingProvider from './BrandingProvider';
// import { ThemeProvider, createTheme } from '@mui/material/styles';
// import { green, deepPurple } from '@mui/material/colors';

// const theme = createTheme({
// palette: {
// primary: green,
// secondary: deepPurple
// }
// });

export default function RootStyleRegistry({ children }: { children: JSX.Element }) {
const [{ cache, flush }] = useState(() => {
const cache = createCache({ key: 'my' });
cache.compat = true;
const prevInsert = cache.insert;
let inserted: string[] = [];
cache.insert = (...args) => {
const serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push(serialized.name);
}
return prevInsert(...args);
};
const flush = () => {
const prevInserted = inserted;
inserted = [];
return prevInserted;
};
return { cache, flush };
});

useServerInsertedHTML(() => {
const names = flush();
if (names.length === 0) return null;
let styles = '';
for (const name of names) {
styles += cache.inserted[name];
}
return (
<style
data-emotion={`${cache.key} ${names.join(' ')}`}
dangerouslySetInnerHTML={{
__html: styles,
}}
/>
);
});

return (
<CacheProvider value={cache}>
<BrandingProvider>{children}</BrandingProvider>
</CacheProvider>
);
}
8 changes: 8 additions & 0 deletions docs/app/GradientText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use client';

import * as React from 'react';
import DocsGradientText from 'docs/src/components/typography/GradientText';

export default function GradientText(props) {
return <DocsGradientText {...props} />;
}
8 changes: 8 additions & 0 deletions docs/app/Paper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use client';

import * as React from 'react';
import MuiPaper from '@mui/material/Paper';

export default function Paper(props) {
return <MuiPaper {...props} />;
}
8 changes: 8 additions & 0 deletions docs/app/Section.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use client';

import * as React from 'react';
import DocsSection from 'docs/src/layouts/Section';

export default function Section(props) {
return <DocsSection {...props} />;
}
12 changes: 12 additions & 0 deletions docs/app/blog/ClientComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
'use client';
import * as React from 'react';
import Button, { ButtonProps } from '@mui/material/Button';

export default function ClientComponent() {
const [color, setColor] = React.useState<ButtonProps['color']>('primary');
return (
<Button color={color} onClick={() => setColor(color === 'primary' ? 'secondary' : 'primary')}>
ClientComponent
</Button>
);
}
4 changes: 4 additions & 0 deletions docs/app/blog/PostPreview.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
'use client';

// Ideally this would have been server component
// But most of the MUI component need to be client components
import * as React from 'react';
import { BlogPost } from 'docs/lib/sourcing';
import { alpha } from '@mui/material/styles';
Expand Down
6 changes: 6 additions & 0 deletions docs/app/blog/ServerComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function ServerComponent() {
return <Typography>Server component</Typography>;
}
5 changes: 2 additions & 3 deletions docs/app/blog/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import * as React from 'react';
import BrandingProvider from './BrandingProvider';
import Head from './Head';

export default function BlogLayout({ children }: { children: React.ReactNode }) {
return (
<BrandingProvider>
<React.Fragment>
<Head
title="Blog - MUI"
description="Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives."
disableAlternateLocale
/>
<body>{children}</body>
</BrandingProvider>
</React.Fragment>
);
}
34 changes: 17 additions & 17 deletions docs/app/blog/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { getAllBlogPosts } from 'docs/lib/sourcing';
import Box from '@mui/material/Box';
import Section from 'docs/src/layouts/Section';
import Divider from '@mui/material/Divider';
import Box from '../Box';
import Section from '../Section';
import Divider from '../Divider';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import GradientText from 'docs/src/components/typography/GradientText';
import HeroEnd from 'docs/src/components/home/HeroEnd';
import Paper from '../Paper';
import GradientText from '../GradientText';
import HeroEnd from './HeroEnd';
import AppFooter from './AppFooter';
import AppHeader from './AppHeader';
import PostPreview from './PostPreview';
Expand Down Expand Up @@ -34,7 +34,7 @@ export default function Blog() {

return (
<React.Fragment>
{/* <AppHeader /> */}
<AppHeader />
<main id="main-content">
<Section bg="gradient" sx={{ backgroundSize: '100% 300px', backgroundRepeat: 'no-repeat' }}>
<Typography variant="body2" color="primary.600" fontWeight="bold" textAlign="center">
Expand All @@ -58,26 +58,26 @@ export default function Blog() {
key={post.slug}
component="li"
variant="outlined"
sx={(theme) => ({
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
position: 'relative',
transition: 'all ease 120ms',
'&:hover, &:focus-within': {
borderColor: theme.palette.mode === 'dark' ? 'primary.600' : 'grey.300',
boxShadow: `0px 4px 20px ${
theme.palette.mode === 'dark'
? 'rgba(0, 0, 0, 0.5)'
: 'rgba(170, 180, 190, 0.3)'
}`,
borderColor: 'grey.300',
boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
':where([data-mui-color-scheme="dark"])': {
borderColor: 'primary.600',
boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`,
},
},
'&:focus-within': {
'& a': {
outline: 'none',
},
},
})}
}}
>
{post.image && (
<Box
Expand All @@ -98,9 +98,9 @@ export default function Blog() {
</Box>
</Section>
</main>
{/* <HeroEnd />
<HeroEnd />
<Divider />
<AppFooter /> */}
<AppFooter />
</React.Fragment>
);
}
9 changes: 7 additions & 2 deletions docs/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
export default function RootLayout({ children }: { children: React.ReactNode }) {
import * as React from 'react';
import EmotionRootStyleRegistry from './EmotionRootStyleRegistry';

export default function RootLayout({ children }: { children: JSX.Element }) {
return (
<html>
<head></head>
<body>{children}</body>
<body>
<EmotionRootStyleRegistry>{children}</EmotionRootStyleRegistry>
</body>
</html>
);
}
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
"lz-string": "^1.4.4",
"markdown-to-jsx": "^7.1.7",
"material-ui-popup-state": "^2.0.1",
"next": "13.0.2",
"next": "13.0.2-canary.2",
"notistack": "2.0.8",
"nprogress": "^0.2.0",
"postcss": "^8.4.18",
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppFrame.js
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default function AppFrame(props) {
>
<SvgHamburgerMenu />
</NavIconButton>
<NextLink href="/" passHref /* onClick={onClose} */>
<NextLink href="/" passHref /* onClick={onClose} */ legacyBehavior>
<Box
component="a"
aria-label={t('goToHome')}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppNavDrawer.js
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ export default function AppNavDrawer(props) {
return (
<React.Fragment>
<ToolbarDiv>
<NextLink href="/" passHref>
<NextLink href="/" passHref legacyBehavior>
<Box
component="a"
onClick={onClose}
Expand Down
8 changes: 5 additions & 3 deletions docs/src/modules/components/AppSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import { usePathname } from 'next/navigation';
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
import Chip from '@mui/material/Chip';
import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
Expand Down Expand Up @@ -142,7 +143,7 @@ function NewStartScreen() {
{category.name}
</div>
{items.map(({ name, href }) => (
<NextLink key={name} href={href}>
<NextLink key={name} href={href} legacyBehavior>
<a href={href} className="DocSearch-NewStartScreenItem">
{name}
<KeyboardArrowRightRounded className="DocSearch-NewStartScreenItemIcon" />
Expand Down Expand Up @@ -217,13 +218,14 @@ export default function AppSearch() {
const onOpen = React.useCallback(() => {
setIsOpen(true);
}, [setIsOpen]);
const pathname = usePathname();
const router = useRouter();
const productSpace = getUrlProduct(router.asPath);
const productSpace = getUrlProduct(router?.asPath || pathname);

const keyboardNavigator = {
navigate({ item }) {
const as = item.userLanguage !== 'en' ? `/${item.userLanguage}${item.as}` : item.as;
router.push(item.pathname, as);
router?.push(item.pathname, as);
},
};

Expand Down
Loading