diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts new file mode 100644 index 00000000000000..958d06f211d7d0 --- /dev/null +++ b/docs/lib/sourcing.ts @@ -0,0 +1,60 @@ +import fs from 'fs'; +import path from 'path'; +import { getHeaders } from '@mui/markdown'; + +const blogDir = path.join(process.cwd(), 'pages/blog'); + +export const getBlogFilePaths = (ext = '.md') => { + return fs.readdirSync(blogDir).filter((file) => file.endsWith(ext)); +}; + +export interface BlogPost { + slug: string; + title: string; + description: string; + image?: string; + tags?: Array; + authors?: Array; + date?: string; +} + +export const getBlogPost = (filePath: string): BlogPost => { + const slug = filePath.replace(/\.md$/, ''); + const content = fs.readFileSync(path.join(blogDir, filePath), 'utf-8'); + + const headers = getHeaders(content) as unknown as BlogPost; + + return { + ...headers, + slug, + }; +}; + +export const getAllBlogPosts = () => { + const filePaths = getBlogFilePaths(); + const rawBlogPosts = filePaths + .map((name) => getBlogPost(name)) + // sort allBlogPosts by date in descending order + .sort((post1, post2) => { + if (post1.date && post2.date) { + return new Date(post1.date) > new Date(post2.date) ? -1 : 1; + } + if (post1.date && !post2.date) { + return 1; + } + return -1; + }); + const allBlogPosts = rawBlogPosts.filter((post) => !!post.title); + const tagInfo: Record = {}; + allBlogPosts.forEach((post) => { + (post.tags || []).forEach((tag) => { + tagInfo[tag] = (tagInfo[tag] || 0) + 1; + }); + }); + return { + rawBlogPosts, // all posts from the directory + allBlogPosts, // posts with at least a title + allTags: Object.keys(tagInfo), + tagInfo, + }; +}; diff --git a/docs/next.config.js b/docs/next.config.js index c4f544a0f87d73..94fea66a642dbc 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -185,6 +185,9 @@ module.exports = { if (process.env.PULL_REQUEST !== 'true' && page.pathname.startsWith('/experiments')) { return; } + if (!FEATURE_TOGGLE.enable_blog_index && page.pathname === '/blog') { + return; + } if (!page.children) { // map api-docs to api // i: /api-docs/* > /api/* (old structure) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx new file mode 100644 index 00000000000000..76aeec74151234 --- /dev/null +++ b/docs/pages/blog.tsx @@ -0,0 +1,434 @@ +import * as React from 'react'; +import { InferGetStaticPropsType } from 'next'; +import { useRouter } from 'next/router'; +import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing'; +import { alpha } from '@mui/material/styles'; +import Avatar from '@mui/material/Avatar'; +import AvatarGroup from '@mui/material/AvatarGroup'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import Section from 'docs/src/layouts/Section'; +import Divider from '@mui/material/Divider'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import Pagination from '@mui/material/Pagination'; +import Button from '@mui/material/Button'; +import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'; +import Chip from '@mui/material/Chip'; +import Head from 'docs/src/modules/components/Head'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import GradientText from 'docs/src/components/typography/GradientText'; +import BrandingProvider from 'docs/src/BrandingProvider'; +import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import Link from 'docs/src/modules/components/Link'; + +export const getStaticProps = async () => { + const data = getAllBlogPosts(); + return { + props: data, + }; +}; + +const PostPreview = (props: BlogPost) => { + return ( + + {props.tags && ( + + {props.tags.map((tag) => ( + + theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[700], + background: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], + '&:hover': { + background: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], + }, + }} + /> + ))} + + )} + + + {props.title} + + + + {props.description} + + {props.authors && ( + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[800] + : theme.palette.grey[100], + backgroundColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[100], + color: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[100] + : theme.palette.grey[800], + fontSize: (theme) => theme.typography.pxToRem(13), + fontWeight: 500, + }, + }} + > + {(props.authors as Array).map((author) => ( + + ))} + + )} + + + {props.authors && ( + + {props.authors + .slice(0, 3) + .map((userId) => { + const name = AUTHORS[userId as keyof typeof AUTHORS]?.name; + if (name) { + if (props.authors && props.authors.length > 1) { + // display only firstName + return name.split(' ')[0]; + } + return name; + } + return userId; + }) + .join(', ')} + {props.authors.length > 2 && ', and more.'} + + )} + {props.date && ( + + {new Date(props.date).toDateString()} + + )} + + + + + ); +}; + +export default function Blog(props: InferGetStaticPropsType) { + const PAGE_SIZE = 5; + const router = useRouter(); + const postListRef = React.useRef(null); + const [page, setPage] = React.useState(0); + const [selectedTags, setSelectedTags] = React.useState>({}); + const { allBlogPosts, allTags, tagInfo: rawTagInfo } = props; + const [firstPost, secondPost, ...otherPosts] = allBlogPosts; + const tagInfo = { ...rawTagInfo }; + [firstPost, secondPost].forEach((post) => { + if (post.tags) { + post.tags.forEach((tag) => { + if (tagInfo[tag]) { + tagInfo[tag]! -= 1; + } + }); + } + }); + const filteredPosts = otherPosts.filter( + (post) => + !Object.keys(selectedTags).length || + (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)), + ); + const pageStart = page * PAGE_SIZE; + const totalPage = Math.ceil(filteredPosts.length / PAGE_SIZE); + const displayedPosts = filteredPosts.slice(pageStart, pageStart + PAGE_SIZE); + const getTags = React.useCallback(() => { + const { tags = '' } = router.query; + return (typeof tags === 'string' ? tags.split(',') : tags || []) + .map((str) => str.trim()) + .filter((tag) => !!tag); + }, [router.query]); + + React.useEffect(() => { + const arrayTags = getTags(); + const finalTags: Record = {}; + arrayTags.forEach((tag) => { + finalTags[tag] = true; + }); + setSelectedTags(finalTags); + setPage(0); + }, [getTags]); + + const removeTag = (tag: string) => { + router.push( + { + query: { + ...router.query, + tags: getTags().filter((value) => value !== tag), + }, + }, + undefined, + { shallow: true }, + ); + }; + return ( + + + +
+
+ + Blog + + + The latest about MUI + + + {[firstPost, secondPost].map((post) => ( + ({ + 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)' + }`, + }, + '&:focus-within': { + '& a': { + outline: 'none', + }, + }, + })} + > + {post.image && ( + + )} + + + ))} + +
+ + + Posts{' '} + {Object.keys(selectedTags).length ? ( + + tagged as{' '} + + "{Object.keys(selectedTags)[0]}" + + + ) : ( + '' + )} + + + + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.2) + : 'rgba(255, 255, 255, 0.2)', + borderColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + }} + > + + Filter by tag + + + {allTags.map((tag) => { + const selected = !!selectedTags[tag]; + return ( + { + postListRef.current?.scrollIntoView(); + removeTag(tag); + }, + } + : { + label: tag, + onClick: () => { + postListRef.current?.scrollIntoView(); + router.push( + { + query: { + ...router.query, + tags: tag, + }, + }, + undefined, + { shallow: true }, + ); + }, + })} + size="small" + sx={{ + py: 1.2, + }} + /> + ); + })} + + + + + + {displayedPosts.map((post) => ( + ({ + py: 2, + display: 'flex', + flexDirection: 'column', + position: 'relative', + '&:not(:last-of-type)': { + borderBottom: '1px solid', + borderColor: 'divider', + }, + })} + > + + + ))} + + { + setPage(value - 1); + postListRef.current?.scrollIntoView(); + }} + sx={{ mt: 1, mb: 8 }} + /> + + +
+ + + + + ); +} diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index d9ce0b3007c742..bc12dac0b7c9aa 100644 --- a/docs/pages/blog/2019-developer-survey-results.md +++ b/docs/pages/blog/2019-developer-survey-results.md @@ -1,5 +1,10 @@ --- -description: 2019 MUI Developer Survey results +title: 2019 MUI Developer Survey results +description: Results for the first yearly developer survey, 2019 edition. +date: 2019-03-16T00:00:00.000Z +authors: ['oliviertassinari', 'mbrookes'] +card: false +tags: ['Developer survey'] --- # 2019 MUI Developer Survey results diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index d29c9e552d296d..d8ad51beee73a6 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -1,5 +1,6 @@ --- description: 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years! +tags: ['Company update'] --- # 2019 in review and beyond diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index 729ae20bdbee3f..9ec4f1819a022f 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -1,5 +1,10 @@ --- -description: 2020 MUI Developer Survey results +title: 2020 MUI Developer Survey results +description: Results for our yearly developer survey, 2020 edition. +date: 2020-07-27T00:00:00.000Z +authors: ['mnajdova', 'oliviertassinari', 'mbrookes'] +card: false +tags: ['Developer survey'] --- # 2020 MUI Developer Survey results diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md index e7d538743a8e0d..1ffb34c12f29a0 100644 --- a/docs/pages/blog/2020-introducing-sketch.md +++ b/docs/pages/blog/2020-introducing-sketch.md @@ -1,5 +1,6 @@ --- description: Today, we're excited to announce the introduction of official Sketch symbols for MUI. +tags: ['News'] --- # Introducing MUI for Sketch diff --git a/docs/pages/blog/2020-q1-update.md b/docs/pages/blog/2020-q1-update.md index b4ec1d67e0515c..b68501fa85b83b 100644 --- a/docs/pages/blog/2020-q1-update.md +++ b/docs/pages/blog/2020-q1-update.md @@ -1,5 +1,6 @@ --- description: An update on our mission for Q1 2020. +tags: ['Company update'] --- # Q1 2020 Update diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 85d92c0239b835..9291c89c4ecbc7 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -1,5 +1,6 @@ --- description: An update on our mission for Q2 2020. +tags: ['Company update'] --- # Q2 2020 Update diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md index c7b19137a7bdc3..42d70d0107e25f 100644 --- a/docs/pages/blog/2020-q3-update.md +++ b/docs/pages/blog/2020-q3-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q3 2020. date: 2020-10-14T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months, and what we aim to achieve in the coming months. diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index 1ac27e36cf2c8c..30a4b482d74e27 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -4,6 +4,7 @@ description: 2020 has been another great year, not only for MUI, but also for th date: 2020-12-31T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] card: true +tags: ['Company update'] --- 2020 has been another great year, not only for MUI, but also for the ecosystem. diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 574b8b57ab8c7f..70c0f0cd56f9ec 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q1 2021. date: 2021-04-12T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months, and what we aim to achieve in the months ahead. diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md index 5ae987500d4b40..f0b9335777dbe9 100644 --- a/docs/pages/blog/2021-q2-update.md +++ b/docs/pages/blog/2021-q2-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q2 2021. date: 2021-07-12T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months. diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md index cff0b9e3f230ef..b355cbba1a4ac4 100644 --- a/docs/pages/blog/2021-q3-update.md +++ b/docs/pages/blog/2021-q3-update.md @@ -4,6 +4,7 @@ description: An update on our mission for Q3 2021. date: 2021-10-26T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- This update covers our progress over the last three months. diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index 85524e124df628..28303de45bb7a1 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -4,6 +4,7 @@ description: 2021 has been another great year, not only for MUI but also for the date: 2021-12-31T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Company update'] --- diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md index 397888d70bd86a..5fef0fc9826e6c 100644 --- a/docs/pages/blog/april-2019-update.md +++ b/docs/pages/blog/april-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in April. +tags: ['Company update'] --- # April 2019 Update diff --git a/docs/pages/blog/august-2019-update.md b/docs/pages/blog/august-2019-update.md index 54648dbda2bd7d..6dfe9949e3bb2f 100644 --- a/docs/pages/blog/august-2019-update.md +++ b/docs/pages/blog/august-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in August. +tags: ['Company update'] --- # August 2019 Update diff --git a/docs/pages/blog/benny-joo-joining.md b/docs/pages/blog/benny-joo-joining.md index 76cec2d73ea733..d6f4507d178d31 100644 --- a/docs/pages/blog/benny-joo-joining.md +++ b/docs/pages/blog/benny-joo-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Benny Joo has joined MUI. He has start date: 2021-11-16T00:00:00.000Z authors: ['mnajdova'] card: false +tags: ['Team'] --- We are excited to share that [Benny Joo](https://github.com/hbjORbj) has joined MUI. diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.md b/docs/pages/blog/danail-hadjiatanasov-joining.md index 3cf6dbc427bcde..db42370f195d47 100644 --- a/docs/pages/blog/danail-hadjiatanasov-joining.md +++ b/docs/pages/blog/danail-hadjiatanasov-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Danail Hadjiatanasov has joined MUI as date: 2020-10-23T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined MUI as part of the enterprise team. This was his first full-time week. diff --git a/docs/pages/blog/danilo-leal-joining.md b/docs/pages/blog/danilo-leal-joining.md index b5e04b0f943259..238c9d2ba99f39 100644 --- a/docs/pages/blog/danilo-leal-joining.md +++ b/docs/pages/blog/danilo-leal-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Danilo Leal has joined MUI. date: 2021-07-15T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI! diff --git a/docs/pages/blog/december-2019-update.md b/docs/pages/blog/december-2019-update.md index 2b0efde8a49221..5062fdbfa4fe69 100644 --- a/docs/pages/blog/december-2019-update.md +++ b/docs/pages/blog/december-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in December. +tags: ['Company update'] --- # December 2019 Update diff --git a/docs/pages/blog/july-2019-update.md b/docs/pages/blog/july-2019-update.md index 235c11caa1083d..b840784cbc95ca 100644 --- a/docs/pages/blog/july-2019-update.md +++ b/docs/pages/blog/july-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in July. +tags: ['Company update'] --- # July 2019 Update diff --git a/docs/pages/blog/june-2019-update.md b/docs/pages/blog/june-2019-update.md index 6fb8b3817c3a42..40544a5432e49f 100644 --- a/docs/pages/blog/june-2019-update.md +++ b/docs/pages/blog/june-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in June. +tags: ['Company update'] --- # June 2019 Update diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md index b9ae1b43a89d3b..574389d78ecccb 100644 --- a/docs/pages/blog/march-2019-update.md +++ b/docs/pages/blog/march-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in March. +tags: ['Company update'] --- # March 2019 Update diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md index b3e245b65713db..6c7b345ed20ec1 100644 --- a/docs/pages/blog/marija-najdova-joining.md +++ b/docs/pages/blog/marija-najdova-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Marija Najdova has joined MUI. She has date: 2020-09-15T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined MUI. She has started this week full-time, and is now part of the community team. diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md index 986226fcb773cc..1fc42e3aeb56d8 100644 --- a/docs/pages/blog/material-ui-is-now-mui.md +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -3,6 +3,7 @@ title: Material-UI is now MUI! description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. date: 2021-09-16T00:00:00.000Z authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] +tags: ['News'] card: true --- diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md index 86b4440f0da748..f9ab1644616cea 100644 --- a/docs/pages/blog/material-ui-v1-is-out.md +++ b/docs/pages/blog/material-ui-v1-is-out.md @@ -1,5 +1,6 @@ --- -description: MUI v1 is out 🎉 +description: MUI v1 is out 🎉 +tags: ['Company update'] --- # MUI v1 is out 🎉 diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index e52d95e2f633e2..619e0c3f5e4dcd 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -1,5 +1,6 @@ --- -description: MUI v4 is out 🎉 +description: MUI v4 is out 🎉 +tags: ['Company update'] --- # MUI v4 is out 🎉 diff --git a/docs/pages/blog/matheus-wichman-joining.md b/docs/pages/blog/matheus-wichman-joining.md index fcf2863fa4169c..5597ff8b866f23 100644 --- a/docs/pages/blog/matheus-wichman-joining.md +++ b/docs/pages/blog/matheus-wichman-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Matheus Wichman has joined MUI. date: 2021-04-05T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined MUI. diff --git a/docs/pages/blog/may-2019-update.md b/docs/pages/blog/may-2019-update.md index c5b40607fb68f0..160abfe0569f57 100644 --- a/docs/pages/blog/may-2019-update.md +++ b/docs/pages/blog/may-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in May. +tags: ['Company update'] --- # May 2019 Update diff --git a/docs/pages/blog/michal-dudak-joining.md b/docs/pages/blog/michal-dudak-joining.md index 34b23418ad60bf..3f98dc5b3eb6f8 100644 --- a/docs/pages/blog/michal-dudak-joining.md +++ b/docs/pages/blog/michal-dudak-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Michał Dudak has joined MUI. date: 2021-06-14T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Michał Dudak](https://twitter.com/michaldudak) has joined MUI! diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 92979bbc59b401..3471e5543f8277 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -13,6 +13,7 @@ authors: 'mbrookes', ] card: true +tags: ['News'] --- After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://github.com/mui-org/material-ui/releases/tag/v5.0.0)! diff --git a/docs/pages/blog/mui-x-v5.md b/docs/pages/blog/mui-x-v5.md index 8cd03c6f372d60..69b3b18b8861df 100644 --- a/docs/pages/blog/mui-x-v5.md +++ b/docs/pages/blog/mui-x-v5.md @@ -5,6 +5,7 @@ date: 2021-11-22T00:00:00.000Z authors: ['oliviertassinari', 'm4theushw', 'flaviendelangle', 'DanailH', 'alexfauquette'] card: true +tags: ['News'] --- We are excited to introduce [MUI X v5.0.0](https://github.com/mui-org/material-ui-x/releases/tag/v5.0.0)! diff --git a/docs/pages/blog/november-2019-update.md b/docs/pages/blog/november-2019-update.md index a828aca3f71a5c..b551faef89c0e4 100644 --- a/docs/pages/blog/november-2019-update.md +++ b/docs/pages/blog/november-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in November. +tags: ['Company update'] --- # November 2019 Update diff --git a/docs/pages/blog/october-2019-update.md b/docs/pages/blog/october-2019-update.md index 2fa15024cdd7f9..530fd33d47b638 100644 --- a/docs/pages/blog/october-2019-update.md +++ b/docs/pages/blog/october-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in October. +tags: ['Company update'] --- # October 2019 Update diff --git a/docs/pages/blog/september-2019-update.md b/docs/pages/blog/september-2019-update.md index 9e7f1f96251356..8d1bf26ca8d355 100644 --- a/docs/pages/blog/september-2019-update.md +++ b/docs/pages/blog/september-2019-update.md @@ -1,5 +1,6 @@ --- description: Here are the most significant improvements in September. +tags: ['Company update'] --- # September 2019 Update diff --git a/docs/pages/blog/siriwat-kunaporn-joining.md b/docs/pages/blog/siriwat-kunaporn-joining.md index 821277c081437e..5576db7863e85c 100644 --- a/docs/pages/blog/siriwat-kunaporn-joining.md +++ b/docs/pages/blog/siriwat-kunaporn-joining.md @@ -4,6 +4,7 @@ description: We are excited to share that Siriwat Kunaporn has joined MUI. date: 2021-05-17T00:00:00.000Z authors: ['oliviertassinari'] card: true +tags: ['Team'] --- We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined MUI. diff --git a/docs/pages/blog/spotlight-damien-tassone.md b/docs/pages/blog/spotlight-damien-tassone.md index fe1424c1b54a2e..e7a01a28b86fa4 100644 --- a/docs/pages/blog/spotlight-damien-tassone.md +++ b/docs/pages/blog/spotlight-damien-tassone.md @@ -2,8 +2,9 @@ title: A spotlight on Damien Tassone joining the team description: Damien Tassone has joined MUI. He's the first full-time member to focus on enterprise components. date: 2020-09-15T00:00:00.000Z -authors: ['oliviertassinari"] +authors: ['oliviertassinari'] card: true +tags: ['Team'] --- A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined MUI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly. diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index f07167593adabe..42d8a7ddadf75b 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -319,6 +319,13 @@ export default function HeaderNavBar() { About us + {FEATURE_TOGGLE.enable_blog_index && ( +
  • + + Blog + +
    • + )} ); diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 6bbbfb58ff85a8..6e3e916f081176 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -187,6 +187,13 @@ export default function HeaderNavDropdown() { About us + {FEATURE_TOGGLE.enable_blog_index && ( +
  • + + Blog + +
    • + )} diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js index 912786fe46b1e8..10f89f89f60c70 100644 --- a/docs/src/featureToggle.js +++ b/docs/src/featureToggle.js @@ -2,6 +2,7 @@ module.exports = { nav_products: true, enable_website_banner: false, + enable_blog_index: process.env.NODE_ENV !== 'production' || process.env.PULL_REQUEST, // TODO: cleanup once migration is done enable_product_scope: false, // related to new structure change enable_redirects: false, // related to new structure change diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index a60e3d95b220a3..fe0c75ee839fc3 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -20,7 +20,8 @@ export default function AppFooter() { } sx={{ + ml: -1, + mb: 1, fontSize: theme.typography.pxToRem(12.5), fontWeight: 500, color: theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[600], - mb: 0.5, '& svg': { width: 14, height: 14, diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index ce391d2861607c..a41455cf9b03ca 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -3,84 +3,102 @@ import PropTypes from 'prop-types'; import { styled, createTheme } from '@mui/material/styles'; import { withStyles } from '@mui/styles'; import Head from 'docs/src/modules/components/Head'; -import AppFrame from 'docs/src/modules/components/AppFrame'; +import BrandingProvider from 'docs/src/BrandingProvider'; +import AppHeader from 'docs/src/layouts/AppHeader'; import AppContainer from 'docs/src/modules/components/AppContainer'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; import { useRouter } from 'next/router'; +import { exactProp } from '@mui/utils'; import Divider from '@mui/material/Divider'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import Avatar from '@mui/material/Avatar'; -import AppFooter from 'docs/src/layouts/AppFooter'; -import { exactProp } from '@mui/utils'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; +import ROUTES from 'docs/src/route'; +import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; -const authors = { +export const authors = { oliviertassinari: { name: 'Olivier Tassinari', avatar: 'https://avatars.githubusercontent.com/u/3165635', + github: 'oliviertassinari', }, mbrookes: { name: 'Matt Brookes', avatar: 'https://avatars.githubusercontent.com/u/357702', + github: 'mbrookes', }, eps1lon: { name: 'Sebastian Silbermann', avatar: 'https://avatars.githubusercontent.com/u/12292047', + github: 'eps1lon', }, mnajdova: { name: 'Marija Najdova', avatar: 'https://avatars.githubusercontent.com/u/4512430', + github: 'mnajdova', }, michaldudak: { name: 'Michał Dudak', avatar: 'https://avatars.githubusercontent.com/u/4696105', + github: 'michaldudak', }, siriwatknp: { name: 'Siriwat Kunaporn', avatar: 'https://avatars.githubusercontent.com/u/18292247', + github: 'siriwatknp', }, 'danilo-leal': { name: 'Danilo Leal', avatar: 'https://avatars.githubusercontent.com/u/67129314', + github: 'danilo-leal', }, m4theushw: { name: 'Matheus Wichman', avatar: 'https://avatars.githubusercontent.com/u/42154031', + github: 'm4theushw', }, flaviendelangle: { name: 'Flavien Delangle', avatar: 'https://avatars.githubusercontent.com/u/3309670', + github: 'flaviendelangle', }, DanailH: { name: 'Danail Hadjiatanasov', avatar: 'https://avatars.githubusercontent.com/u/5858539', + github: 'DanailH', }, alexfauquette: { name: 'Alexandre Fauquette', avatar: 'https://avatars.githubusercontent.com/u/45398769', + github: 'alexfauquette', }, }; const styles = (theme) => ({ root: { flexGrow: 1, + background: + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`, }, back: { - display: 'block', + display: 'flex', + alignItems: 'center', marginBottom: theme.spacing(4), }, container: { - marginBottom: theme.spacing(20), - maxWidth: `calc(680px + ${theme.spacing(12)})`, + paddingTop: 60 + 20, + marginBottom: theme.spacing(8), + maxWidth: `calc(740px + ${theme.spacing(12)})`, '& h1': { - marginBottom: theme.spacing(4), + marginBottom: theme.spacing(3), }, '& .markdown-body': { fontSize: theme.typography.pxToRem(17), lineHeight: 1.7, - [theme.breakpoints.up('md')]: { - paddingRight: theme.spacing(4), - }, }, '& img, & video': { display: 'block', @@ -101,20 +119,20 @@ const styles = (theme) => ({ }, time: { color: theme.palette.text.secondary, - ...theme.typography.body2, + ...theme.typography.caption, + fontWeight: 500, }, }); const AuthorsContainer = styled('div')(({ theme }) => ({ display: 'flex', flexWrap: 'wrap', - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(2), '& .author': { display: 'flex', alignItems: 'center', - paddingBottom: theme.spacing(3), - paddingRight: theme.spacing(2), - fontWeight: theme.typography.fontWeightMedium, + paddingBottom: theme.spacing(2), + paddingRight: theme.spacing(3), '& .MuiAvatar-root': { marginRight: theme.spacing(1), }, @@ -128,7 +146,8 @@ function TopLayoutBlog(props) { const router = useRouter(); return ( - + + + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} - {'< Back to blog'} + {'Back to blog'} {headers.title ? ( @@ -166,25 +188,39 @@ function TopLayoutBlog(props) { {headers.authors.map((author) => (
    - {authors[author].name} +
    + + {authors[author].name} + + + @{authors[author].github} + +
    ))} + theme.spacing(6) }} />     ) : null} {rendered.map((chunk, index) => { return ; })}     + -     + ); } diff --git a/docs/src/route.ts b/docs/src/route.ts index acf329dbe421f9..0a13d7b1336934 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -1,3 +1,5 @@ +import FEATURE_TOGGLE from './featureToggle'; + const ROUTES = { home: '/', productCore: '/core/', @@ -19,7 +21,7 @@ const ROUTES = { theming: '/customization/theming/', documentation: '/getting-started/usage/', communityHelp: '/getting-started/support/#community-help-free', - blog: 'https://medium.com/material-ui', + blog: FEATURE_TOGGLE.enable_blog_index ? '/blog/' : 'https://medium.com/material-ui', showcase: '/discover-more/showcase', roadmap: 'https://github.com/mui-org/material-ui-x/projects/1', languages: '/discover-more/languages',