From c8acd4078502e62a9fc6ecf3986cbf3e3e720d17 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 8 Dec 2021 18:40:35 -0300 Subject: [PATCH 01/29] initial prototype commit --- docs/pages/experiments/blog.tsx | 315 ++++++++++++++++++++++++++++++++ 1 file changed, 315 insertions(+) create mode 100644 docs/pages/experiments/blog.tsx diff --git a/docs/pages/experiments/blog.tsx b/docs/pages/experiments/blog.tsx new file mode 100644 index 00000000000000..d2a185a28d7abc --- /dev/null +++ b/docs/pages/experiments/blog.tsx @@ -0,0 +1,315 @@ +import * as React from 'react'; +import Head from 'docs/src/modules/components/Head'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import AvatarGroup from '@mui/material/AvatarGroup'; +import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; +import Chip from '@mui/material/Chip'; +import MuiLink from '@mui/material/Link'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import GradientText from 'docs/src/components/typography/GradientText'; +import BrandingProvider from 'docs/src/BrandingProvider'; + +export default function Careers() { + return ( + + + +
+ + theme.palette.mode === 'dark' + ? `linear-gradient(90deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : `linear-gradient(90deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`, + }} + > + + + Blog + + + The latest about MUI + + + + + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + background: (theme) => + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : '#fff', + textAlign: 'left', + maxWidth: 'sm', + }} + > + + + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : theme.palette.grey[200], + overflow: 'auto', + }} + > + + + + theme.palette.mode === 'dark' + ? theme.palette.success[100] + : theme.palette.success[900], + background: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.success[900] + : theme.palette.success[100], + }} + /> + + + Introducing MUI Core v5.0 + + + After over 400 days of development and over 40 canary releases, we are excited + to introduce MUI Core v5.0.0! + + + + + + + + + + + + + Olivier Tassinari, Marija Najdova, and more. + + + + Thursday, Sep 15, 2021 + + + + Read more + + + + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + background: (theme) => + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : '#fff', + textAlign: 'left', + maxWidth: 'sm', + }} + > + + + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : theme.palette.grey[200], + overflow: 'auto', + }} + > + + + + theme.palette.mode === 'dark' + ? theme.palette.success[100] + : theme.palette.success[900], + background: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.success[900] + : theme.palette.success[100], + }} + /> + + + Introducing MUI Core v5.0 + + + After over 400 days of development and over 40 canary releases, we are excited + to introduce MUI Core v5.0.0! + + + + + + + + + + + + + Olivier Tassinari, Marija Najdova, and more. + + + + Thursday, Sep 15, 2021 + + + + Read more + + + + + +
+ {/* + */} + + ); +} From b4685c4e4f13bcb6300fed3550ee8cb3263c234a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Dec 2021 19:10:06 +0700 Subject: [PATCH 02/29] add blog link to header --- docs/src/components/header/HeaderNavBar.tsx | 5 +++++ docs/src/components/header/HeaderNavDropdown.tsx | 5 +++++ docs/src/route.ts | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index d161c66453d985..c935d04057ad71 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -312,6 +312,11 @@ export default function HeaderNavBar() { Pricing +
  • + + Blog + +
  • About us diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 5e53e511e6ed1d..c4a8621edae4a5 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -192,6 +192,11 @@ export default function HeaderNavDropdown() { Pricing
    • +
  • + + Blog + +
  • About us diff --git a/docs/src/route.ts b/docs/src/route.ts index 96243ddd73bb86..137da7560541c2 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -15,7 +15,7 @@ const ROUTES = { theming: '/customization/theming/', documentation: '/getting-started/usage/', communityHelp: '/getting-started/support/#community-help-free', - blog: 'https://medium.com/material-ui', + blog: '/blog/', showcase: '/discover-more/showcase', roadmap: 'https://github.com/mui-org/material-ui-x/projects/1', languages: '/discover-more/languages', From acbb270b9831fc308dc372275b5eb71448be971e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Dec 2021 21:40:28 +0700 Subject: [PATCH 03/29] add first iteration of blog index --- docs/lib/sourcing.ts | 48 ++++ docs/pages/blog.tsx | 274 +++++++++++++++++++ docs/src/modules/components/TopLayoutBlog.js | 5 +- 3 files changed, 325 insertions(+), 2 deletions(-) create mode 100644 docs/lib/sourcing.ts create mode 100644 docs/pages/blog.tsx diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts new file mode 100644 index 00000000000000..6d2ba7fa25d875 --- /dev/null +++ b/docs/lib/sourcing.ts @@ -0,0 +1,48 @@ +import fs from 'fs'; +import path from 'path'; +import { getHeaders } from '@mui/markdown'; + +const blogDir = path.join(process.cwd(), 'pages/blog'); + +export const getBlogFilenames = (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 = (filename: string): BlogPost => { + const slug = filename.replace(/\.md$/, ''); + const content = fs.readFileSync(path.join(blogDir, filename), 'utf-8'); + + const headers = getHeaders(content) as unknown as BlogPost; + + return { + ...headers, + slug, + }; +}; + +export const getAllBlogPosts = () => { + const filenames = getBlogFilenames(); + const posts = filenames + .map((name) => getBlogPost(name)) + // sort posts 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; + }); + return posts; +}; diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx new file mode 100644 index 00000000000000..1f18a358cff773 --- /dev/null +++ b/docs/pages/blog.tsx @@ -0,0 +1,274 @@ +import * as React from 'react'; +import { InferGetStaticPropsType } from 'next'; +import { useRouter } from 'next/router'; +import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing'; +import Avatar from '@mui/material/Avatar'; +import AvatarGroup from '@mui/material/AvatarGroup'; +import Box from '@mui/material/Box'; +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 KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; +import Chip from '@mui/material/Chip'; +import Link from 'docs/src/modules/components/Link'; +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 } from 'docs/src/modules/components/TopLayoutBlog'; + +export const getStaticProps = async () => { + const allBlogPosts = getAllBlogPosts(); + return { + props: { + allBlogPosts, + }, + }; +}; + +const PostPreview = (props: BlogPost) => { + return ( + + {props.tags && ( + + {props.tags.map((tag) => ( + + theme.palette.mode === 'dark' + ? theme.palette.success[100] + : theme.palette.success[900], + background: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.success[900] + : theme.palette.success[100], + }} + /> + ))} + + )} + + {props.title} + + + {props.description} + + {props.authors && ( + div': { width: '28px', height: '28px', border: 2, borderColor: '#fff' }, + }} + > + {props.authors.map((author) => ( + + ))} + + )} + + + {props.authors && ( + + {props.authors.slice(0, 2).join(', ')} + {props.authors.length > 2 && ', and more.'} + + )} + {props.date && ( + + {new Date(props.date).toDateString()} + + )} + + + Read more + + + + + ); +}; + +const TAGS = [ + 'News', + 'Material Design', + 'Components', + 'Accessibility', + 'How to guides', + 'System', + 'New Joiners', + 'Developer survey', +]; + +export default function Blog(props: InferGetStaticPropsType) { + const router = useRouter(); + const [selectedTags, setSelectedTags] = React.useState>({}); + const { allBlogPosts } = props; + const [firstPost, secondPost, ...otherPosts] = allBlogPosts.filter((post) => !!post.title); + 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); + }, [getTags]); + const appendTag = (tag: string) => { + return [...getTags(), tag]; + }; + const removeTag = (tag: string) => { + return getTags().filter((value) => value !== tag); + }; + return ( + + + +
    +
    + + Blog + + + The latest about MUI + + + {[firstPost, secondPost].map((post) => ( + + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + background: (theme) => + theme.palette.mode === 'dark' + ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` + : '#fff', + }} + > + {post.image && ( + + )} + + + ))} + + + + All posts + + + + + Filter by tags + + + {TAGS.map((tag) => ( + + router.push( + { + query: { + ...router.query, + tags: (selectedTags[tag] ? removeTag(tag) : appendTag(tag)).join(','), + }, + }, + undefined, + { shallow: true }, + ) + } + /> + ))} + + + + + {otherPosts + .filter( + (post) => + !Object.keys(selectedTags).length || + (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)), + ) + .map((post, index) => ( + + + + + {index !== otherPosts.length - 1 && } + + ))} + + +
    +
    + + +     + ); +} diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 947690ce28b766..ddd67872a753a8 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -13,8 +13,9 @@ 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'; -const authors = { +export const authors = { oliviertassinari: { name: 'Olivier Tassinari', github: 'oliviertassinari', @@ -140,7 +141,7 @@ function TopLayoutBlog(props) {
    Date: Wed, 15 Dec 2021 21:41:18 +0700 Subject: [PATCH 04/29] remove experiment --- docs/pages/experiments/blog.tsx | 315 -------------------------------- 1 file changed, 315 deletions(-) delete mode 100644 docs/pages/experiments/blog.tsx diff --git a/docs/pages/experiments/blog.tsx b/docs/pages/experiments/blog.tsx deleted file mode 100644 index d2a185a28d7abc..00000000000000 --- a/docs/pages/experiments/blog.tsx +++ /dev/null @@ -1,315 +0,0 @@ -import * as React from 'react'; -import Head from 'docs/src/modules/components/Head'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Avatar from '@mui/material/Avatar'; -import AvatarGroup from '@mui/material/AvatarGroup'; -import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; -import Chip from '@mui/material/Chip'; -import MuiLink from '@mui/material/Link'; -import AppHeader from 'docs/src/layouts/AppHeader'; -import GradientText from 'docs/src/components/typography/GradientText'; -import BrandingProvider from 'docs/src/BrandingProvider'; - -export default function Careers() { - return ( - - - -
    - - theme.palette.mode === 'dark' - ? `linear-gradient(90deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : `linear-gradient(90deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`, - }} - > - - - Blog - - - The latest about MUI - - - - - - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200], - background: (theme) => - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : '#fff', - textAlign: 'left', - maxWidth: 'sm', - }} - > - - - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : theme.palette.grey[200], - overflow: 'auto', - }} - > - - - - theme.palette.mode === 'dark' - ? theme.palette.success[100] - : theme.palette.success[900], - background: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.success[900] - : theme.palette.success[100], - }} - /> - - - Introducing MUI Core v5.0 - - - After over 400 days of development and over 40 canary releases, we are excited - to introduce MUI Core v5.0.0! - - - - - - - - - - - - - Olivier Tassinari, Marija Najdova, and more. - - - - Thursday, Sep 15, 2021 - - - - Read more - - - - - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200], - background: (theme) => - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : '#fff', - textAlign: 'left', - maxWidth: 'sm', - }} - > - - - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : theme.palette.grey[200], - overflow: 'auto', - }} - > - - - - theme.palette.mode === 'dark' - ? theme.palette.success[100] - : theme.palette.success[900], - background: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.success[900] - : theme.palette.success[100], - }} - /> - - - Introducing MUI Core v5.0 - - - After over 400 days of development and over 40 canary releases, we are excited - to introduce MUI Core v5.0.0! - - - - - - - - - - - - - Olivier Tassinari, Marija Najdova, and more. - - - - Thursday, Sep 15, 2021 - - - - Read more - - - - - -
    - {/* - */} -     - ); -} From 7c6f9307b4c330fb449e4854f5ac64fa5b229208 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Dec 2021 21:53:35 +0700 Subject: [PATCH 05/29] fix types --- docs/pages/blog.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 1f18a358cff773..818fe7b6d7e765 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -69,7 +69,11 @@ const PostPreview = (props: BlogPost) => { }} > {props.authors.map((author) => ( - + ))} )} From 7fbdc050d6e49a37baf18727fb94c7e5c8ba564c Mon Sep 17 00:00:00 2001 From: danilo leal Date: Fri, 17 Dec 2021 14:49:09 -0300 Subject: [PATCH 06/29] design adjustments --- docs/pages/blog.tsx | 220 +++++++++++------- docs/src/components/header/HeaderNavBar.tsx | 8 +- .../components/header/HeaderNavDropdown.tsx | 8 +- docs/src/modules/brandingTheme.ts | 27 +++ 4 files changed, 167 insertions(+), 96 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 818fe7b6d7e765..ce47b8435f4ad7 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -2,9 +2,12 @@ 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 Button from '@mui/material/Button'; +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'; @@ -18,6 +21,7 @@ import AppFooter from 'docs/src/layouts/AppFooter'; import GradientText from 'docs/src/components/typography/GradientText'; import BrandingProvider from 'docs/src/BrandingProvider'; import { authors } from 'docs/src/modules/components/TopLayoutBlog'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; export const getStaticProps = async () => { const allBlogPosts = getAllBlogPosts(); @@ -32,7 +36,7 @@ const PostPreview = (props: BlogPost) => { return ( {props.tags && ( - + {props.tags.map((tag) => ( { ))} )} - + {props.title} @@ -62,10 +66,28 @@ const PostPreview = (props: BlogPost) => { {props.authors && ( div': { width: '28px', height: '28px', border: 2, borderColor: '#fff' }, + '& .MuiAvatar-circular': { + width: '28px', + height: '28px', + border: 3, + borderColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[800] + : theme.palette.grey[200], + backgroundColor: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[300], + color: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[100] + : theme.palette.grey[800], + fontSize: (theme) => theme.typography.pxToRem(13), + fontWeight: 500, + }, }} > {props.authors.map((author) => ( @@ -79,10 +101,9 @@ const PostPreview = (props: BlogPost) => { )} @@ -93,20 +114,31 @@ const PostPreview = (props: BlogPost) => { )} {props.date && ( - + {new Date(props.date).toDateString()} )} - } + sx={{ + p: { xs: 0, sm: 0.5 }, + mt: { xs: 1, sm: 0 }, + fontWeight: 700, + fontSize: (theme) => theme.typography.pxToRem(14), + color: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + '& svg': { ml: -0.5, mt: 0.1 }, + }} > Read more - - + ); @@ -162,11 +194,11 @@ export default function Blog(props: InferGetStaticPropsType Blog - + The latest about MUI {[firstPost, secondPost].map((post) => ( - - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200], - background: (theme) => - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : '#fff', - }} + href="/blog/" + target="_blank" + rel="noreferrer noopener" + noLinkStyle + variant="outlined" + sx={{ p: 2, display: 'flex', flexDirection: 'column', alignItems: 'initial' }} > {post.image && ( )} - + ))} - - - All posts - - - - - Filter by tags - - - {TAGS.map((tag) => ( - - router.push( - { - query: { - ...router.query, - tags: (selectedTags[tag] ? removeTag(tag) : appendTag(tag)).join(','), - }, + + + + All posts + + + + 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 tags + + + {TAGS.map((tag) => ( + + router.push( + { + query: { + ...router.query, + tags: (selectedTags[tag] ? removeTag(tag) : appendTag(tag)).join(','), }, - undefined, - { shallow: true }, - ) - } - /> - ))} - - - - - {otherPosts - .filter( - (post) => - !Object.keys(selectedTags).length || - (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)), - ) - .map((post, index) => ( - - - - - {index !== otherPosts.length - 1 && } - + }, + undefined, + { shallow: true }, + ) + } + /> ))} + - + + {otherPosts + .filter( + (post) => + !Object.keys(selectedTags).length || + (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)), + ) + .map((post, index) => ( + + + + + {index !== otherPosts.length - 1 && } + + ))} + + + diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index c935d04057ad71..98d1e0f36da0b8 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -313,13 +313,13 @@ export default function HeaderNavBar() {
  • - - Blog + + About us
  • - - About us + + Blog
    • diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index c4a8621edae4a5..50ed40accfa43f 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -193,13 +193,13 @@ export default function HeaderNavDropdown() {
  • - - Blog + + About us
  • - - About us + + Blog
    • diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index ba020eae1ee950..60622621ca8cb4 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -376,6 +376,33 @@ export function getThemedComponents(theme: Theme) { }, }, }, + MuiChip: { + styleOverrides: { + outlined: { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.grey[900], + backgroundColor: 'transparent', + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[300], + }, + filled: { + fontWeight: 500, + border: '1px solid transparent', + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.primary[100], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[200], + }, + }, + }, + }, MuiListItemButton: { styleOverrides: { root: { From 0675a906b3c7ff6812059aac99d4fe4918808edc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 18 Dec 2021 12:40:57 +0700 Subject: [PATCH 07/29] sourcing tags and add pagination --- docs/lib/sourcing.ts | 22 ++-- docs/pages/blog.tsx | 143 +++++++++++++--------- docs/pages/blog/material-ui-is-now-mui.md | 1 + 3 files changed, 99 insertions(+), 67 deletions(-) diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 6d2ba7fa25d875..71764e54e23ca2 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -4,7 +4,7 @@ import { getHeaders } from '@mui/markdown'; const blogDir = path.join(process.cwd(), 'pages/blog'); -export const getBlogFilenames = (ext = '.md') => { +export const getBlogFilePaths = (ext = '.md') => { return fs.readdirSync(blogDir).filter((file) => file.endsWith(ext)); }; @@ -18,9 +18,9 @@ export interface BlogPost { date?: string; } -export const getBlogPost = (filename: string): BlogPost => { - const slug = filename.replace(/\.md$/, ''); - const content = fs.readFileSync(path.join(blogDir, filename), 'utf-8'); +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; @@ -31,10 +31,10 @@ export const getBlogPost = (filename: string): BlogPost => { }; export const getAllBlogPosts = () => { - const filenames = getBlogFilenames(); - const posts = filenames + const filePaths = getBlogFilePaths(); + const allBlogPosts = filePaths .map((name) => getBlogPost(name)) - // sort posts by date in descending order + // 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; @@ -44,5 +44,11 @@ export const getAllBlogPosts = () => { } return -1; }); - return posts; + const tagInfo: Record = {}; + allBlogPosts.forEach((post) => { + (post.tags || []).forEach((tag) => { + tagInfo[tag] = (tagInfo[tag] || 0) + 1; + }); + }); + return { allBlogPosts, allTags: Object.keys(tagInfo), tagInfo }; }; diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index ce47b8435f4ad7..06ec5b0c841297 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -12,9 +12,9 @@ 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 KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Chip from '@mui/material/Chip'; -import Link from 'docs/src/modules/components/Link'; import Head from 'docs/src/modules/components/Head'; import AppHeader from 'docs/src/layouts/AppHeader'; import AppFooter from 'docs/src/layouts/AppFooter'; @@ -24,11 +24,9 @@ import { authors } from 'docs/src/modules/components/TopLayoutBlog'; import HeroEnd from 'docs/src/components/home/HeroEnd'; export const getStaticProps = async () => { - const allBlogPosts = getAllBlogPosts(); + const data = getAllBlogPosts(); return { - props: { - allBlogPosts, - }, + props: data, }; }; @@ -36,7 +34,7 @@ const PostPreview = (props: BlogPost) => { return ( {props.tags && ( - + {props.tags.map((tag) => ( { + Read more + ); @@ -161,12 +172,7 @@ export default function Blog(props: InferGetStaticPropsType str.trim()) .filter((tag) => !!tag); }, [router.query]); - React.useEffect(() => { - const postList = document.getElementById('post-list'); - if (postList) { - postList.scrollIntoView(); - } - }, [router.query, page]); + React.useEffect(() => { const arrayTags = getTags(); const finalTags: Record = {}; @@ -176,6 +182,7 @@ export default function Blog(props: InferGetStaticPropsType { router.push( { @@ -210,6 +217,7 @@ export default function Blog(props: InferGetStaticPropsTypelatest about MUI ( ({ + p: 2, + display: 'flex', + flexDirection: 'column', + position: 'relative', + '&:hover, &:focus-within': { + bgcolor: theme.palette.mode === 'dark' ? 'primaryDark.600' : 'primary.50', + borderColor: 'primary.300', + }, + '&:focus-within': { + '& a': { + outline: 'none', + }, + }, + })} > {post.image && ( - + All posts @@ -285,7 +308,13 @@ export default function Blog(props: InferGetStaticPropsType removeTag(tag), + onDelete: () => { + const postList = document.getElementById('post-list'); + if (postList) { + postList.scrollIntoView(); + } + removeTag(tag); + }, } : { label: ( @@ -310,6 +339,10 @@ export default function Blog(props: InferGetStaticPropsType ), onClick: () => { + const postList = document.getElementById('post-list'); + if (postList) { + postList.scrollIntoView(); + } router.push( { query: { @@ -340,14 +373,31 @@ export default function Blog(props: InferGetStaticPropsType - {displayedPosts.map((post, index) => ( - - + + {displayedPosts.map((post) => ( + ({ + py: 3, + display: 'flex', + flexDirection: 'column', + position: 'relative', + '&:not(:last-of-type)': { + borderBottom: '1px solid', + borderColor: 'divider', + }, + '&:hover, &:focus-within': { + '& a': { + textDecoration: 'underline', + }, + }, + })} + > - {index !== displayedPosts.length - 1 && } - - ))} + ))} + { setPage(value - 1); + const postList = document.getElementById('post-list'); + if (postList) { + postList.scrollIntoView(); + } }} sx={{ mt: 2, mb: 10 }} /> From e4aa2a4629fe9535a1cd75f21dd58e8f540d5997 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 21 Dec 2021 20:05:27 +0700 Subject: [PATCH 11/29] fix semantic --- docs/pages/blog.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index f58fcdf2af0908..4173ffaab4d2a9 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -56,18 +56,23 @@ const PostPreview = (props: BlogPost) => { )} - {props.title} + + {props.title} + {props.description} From bae05774c07ddaddd691f63a6c0812f5a6054f1a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 21 Dec 2021 23:53:09 +0700 Subject: [PATCH 12/29] add feature toggle and fix broken avatar --- docs/next.config.js | 4 ++++ docs/pages/blog.tsx | 10 +++------- docs/src/components/header/HeaderNavBar.tsx | 12 +++++++----- docs/src/components/header/HeaderNavDropdown.tsx | 12 +++++++----- docs/src/featureToggle.ts | 1 + docs/src/modules/brandingTheme.ts | 12 +++++++----- docs/src/modules/components/TopLayoutBlog.js | 4 +++- docs/src/route.ts | 4 +++- 8 files changed, 35 insertions(+), 24 deletions(-) diff --git a/docs/next.config.js b/docs/next.config.js index c0fbed64b1336b..bee0fd61f399ce 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -3,6 +3,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const pkg = require('../package.json'); const { findPages } = require('./src/modules/utils/find'); const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants'); +const FEATURE_TOGGLE = require('./src/featureToggle'); const workspaceRoot = path.join(__dirname, '../'); @@ -184,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 index 4173ffaab4d2a9..29a17fc1a286be 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -19,7 +19,7 @@ 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 } from 'docs/src/modules/components/TopLayoutBlog'; +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'; @@ -104,12 +104,8 @@ const PostPreview = (props: BlogPost) => { }, }} > - {props.authors.map((author) => ( - + {(props.authors as Array).map((author) => ( + ))} )} diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 98d1e0f36da0b8..2b45f6e475b886 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -317,11 +317,13 @@ export default function HeaderNavBar() { About us -
  • - - Blog - -
    • + {FEATURE_TOGGLE.enable_blog_index && ( +
  • + + Blog + +
    • + )} ); diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 9ce00d7834f3ec..68920ac64d2f4d 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -197,11 +197,13 @@ export default function HeaderNavDropdown() { About us -
  • - - Blog - -
    • + {FEATURE_TOGGLE.enable_blog_index && ( +
  • + + Blog + +
    • + )}     diff --git a/docs/src/featureToggle.ts b/docs/src/featureToggle.ts index 1d4e86ecfc3cac..afaa91e08ec172 100644 --- a/docs/src/featureToggle.ts +++ b/docs/src/featureToggle.ts @@ -2,6 +2,7 @@ const FEATURE_TOGGLE = { nav_products: true, enable_product_scope: false, enable_website_banner: false, + enable_blog_index: process.env.NODE_ENV !== 'production' || process.env.PULL_REQUEST === 'true', }; export default FEATURE_TOGGLE; diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 07625e2d30e953..c2231312cd5492 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -398,11 +398,13 @@ export function getThemedComponents(theme: Theme) { theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] : theme.palette.primary[100], - '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[200], + '&.MuiChip-clickable': { + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[200], + }, }, }, }, diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index b477665ea0c017..f2794f0480a62f 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -142,7 +142,9 @@ function TopLayoutBlog(props) { Date: Sat, 25 Dec 2021 17:19:51 +0700 Subject: [PATCH 13/29] update feature toggle to commonjs --- docs/src/{featureToggle.ts => featureToggle.js} | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) rename docs/src/{featureToggle.ts => featureToggle.js} (76%) diff --git a/docs/src/featureToggle.ts b/docs/src/featureToggle.js similarity index 76% rename from docs/src/featureToggle.ts rename to docs/src/featureToggle.js index afaa91e08ec172..999e719641e1f3 100644 --- a/docs/src/featureToggle.ts +++ b/docs/src/featureToggle.js @@ -1,8 +1,6 @@ -const FEATURE_TOGGLE = { +module.exports = { nav_products: true, enable_product_scope: false, enable_website_banner: false, enable_blog_index: process.env.NODE_ENV !== 'production' || process.env.PULL_REQUEST === 'true', }; - -export default FEATURE_TOGGLE; From e866e06c2459ca9aee9cd1648d91b250bd4188e0 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Mon, 3 Jan 2022 17:32:42 -0300 Subject: [PATCH 14/29] a few design tweaks, pagination theming and post preview clickable area --- docs/pages/blog.tsx | 80 +++++++++++++++---------------- docs/src/modules/brandingTheme.ts | 48 +++++++++++++++---- 2 files changed, 80 insertions(+), 48 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 29a17fc1a286be..eee20ed47d67ae 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -12,7 +12,8 @@ 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 KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; +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'; @@ -34,7 +35,7 @@ const PostPreview = (props: BlogPost) => { return ( {props.tags && ( - + {props.tags.map((tag) => ( { fontWeight: 500, color: (theme) => theme.palette.mode === 'dark' - ? theme.palette.success[100] - : theme.palette.success[900], + ? theme.palette.primary[50] + : theme.palette.primary[700], background: (theme) => theme.palette.mode === 'dark' - ? theme.palette.success[900] - : theme.palette.success[100], + ? theme.palette.primary[900] + : theme.palette.primary[50], }} /> ))} @@ -68,7 +69,9 @@ const PostPreview = (props: BlogPost) => { href={`/blog/${props.slug}`} sx={{ color: 'text.primary', - '&:before': { content: '""', display: 'block', position: 'absolute', inset: 0 }, + '&:hover': { + textDecoration: 'underline', + }, }} > {props.title} @@ -90,7 +93,7 @@ const PostPreview = (props: BlogPost) => { borderColor: (theme) => theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] - : theme.palette.grey[200], + : theme.palette.grey[100], backgroundColor: (theme) => theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] @@ -129,24 +132,25 @@ const PostPreview = (props: BlogPost) => { )} - + Read more + ); @@ -205,22 +209,18 @@ export default function Blog(props: InferGetStaticPropsType
    - + Blog - + The latest about MUI - + All posts @@ -297,7 +302,7 @@ export default function Blog(props: InferGetStaticPropsType - Filter by tag + Filter by subject {allTags.map((tag) => { @@ -380,7 +385,7 @@ export default function Blog(props: InferGetStaticPropsType ({ - py: 3, + py: 2, display: 'flex', flexDirection: 'column', position: 'relative', @@ -388,11 +393,6 @@ export default function Blog(props: InferGetStaticPropsType @@ -411,7 +411,7 @@ export default function Blog(props: InferGetStaticPropsType diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index c2231312cd5492..4233ead607b4d8 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -391,22 +391,23 @@ export function getThemedComponents(theme: Theme) { : theme.palette.grey[300], }, filled: { - fontWeight: 500, + fontWeight: 400, border: '1px solid transparent', color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] : theme.palette.primary[100], - '&.MuiChip-clickable': { - '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[200], - }, + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[200], }, }, + deleteIcon: { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + }, }, }, MuiListItemButton: { @@ -557,6 +558,37 @@ export function getThemedComponents(theme: Theme) { }, }, }, + MuiPaginationItem: { + styleOverrides: { + root: { + textTransform: 'none', + fontWeight: 700, + color: + theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.grey[200], + '&.Mui-selected': { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], + borderColor: + theme.palette.mode === 'dark' + ? `${theme.palette.primary[700]} !important` + : `${theme.palette.primary[500]} !important`, + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.primary[50], + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + }, + }, + }, + }, + }, MuiCssBaseline: { defaultProps: { enableColorScheme: true, From b4b2d6bc7e1f550cfd57d08e6ac92ce45670ec8c Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 6 Jan 2022 12:59:41 -0300 Subject: [PATCH 15/29] remove hover from chip in post preview --- docs/pages/blog.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index eee20ed47d67ae..15937b2bc0e584 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -51,6 +51,12 @@ const PostPreview = (props: BlogPost) => { theme.palette.mode === 'dark' ? theme.palette.primary[900] : theme.palette.primary[50], + '&:hover': { + background: (theme) => + theme.palette.mode === 'dark' + ? theme.palette.primary[900] + : theme.palette.primary[50], + }, }} /> ))} From 0f090ad80caafc1987e98ebe4932cc49288b82da Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 6 Jan 2022 13:53:24 -0300 Subject: [PATCH 16/29] update posts tags --- docs/pages/blog/2019-developer-survey-results.md | 7 ++++++- docs/pages/blog/2019.md | 1 + docs/pages/blog/2020-developer-survey-results.md | 7 ++++++- docs/pages/blog/2020-introducing-sketch.md | 1 + docs/pages/blog/2020-q1-update.md | 1 + docs/pages/blog/2020-q2-update.md | 1 + docs/pages/blog/2020-q3-update.md | 2 +- docs/pages/blog/2020.md | 2 +- docs/pages/blog/2021-q1-update.md | 2 +- docs/pages/blog/2021-q2-update.md | 2 +- docs/pages/blog/2021-q3-update.md | 2 +- docs/pages/blog/2021.md | 1 + docs/pages/blog/april-2019-update.md | 1 + docs/pages/blog/august-2019-update.md | 1 + docs/pages/blog/benny-joo-joining.md | 2 +- docs/pages/blog/danail-hadjiatanasov-joining.md | 2 +- docs/pages/blog/danilo-leal-joining.md | 2 +- docs/pages/blog/december-2019-update.md | 1 + docs/pages/blog/july-2019-update.md | 1 + docs/pages/blog/june-2019-update.md | 1 + docs/pages/blog/march-2019-update.md | 1 + docs/pages/blog/marija-najdova-joining.md | 2 +- docs/pages/blog/material-ui-v1-is-out.md | 1 + docs/pages/blog/material-ui-v4-is-out.md | 1 + docs/pages/blog/matheus-wichman-joining.md | 2 +- docs/pages/blog/may-2019-update.md | 1 + docs/pages/blog/michal-dudak-joining.md | 2 +- docs/pages/blog/november-2019-update.md | 1 + docs/pages/blog/october-2019-update.md | 1 + docs/pages/blog/september-2019-update.md | 1 + docs/pages/blog/siriwat-kunaporn-joining.md | 2 +- docs/pages/blog/spotlight-damien-tassone.md | 2 +- 32 files changed, 42 insertions(+), 15 deletions(-) diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index 0c7d4e00bbe699..d24adb4a3575c5 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 aaa5d68324693d..930dee15e0284f 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 ec108f169e0c0c..42d70d0107e25f 100644 --- a/docs/pages/blog/2020-q3-update.md +++ b/docs/pages/blog/2020-q3-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q3 2020. date: 2020-10-14T00:00:00.000Z authors: ['oliviertassinari'] card: true -tags: ['News'] +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 3f70f9b5ae82e6..30a4b482d74e27 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -4,7 +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: ['News'] +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 61c8c947e99425..70c0f0cd56f9ec 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q1 2021. date: 2021-04-12T00:00:00.000Z authors: ['oliviertassinari'] card: true -tags: ['News'] +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 19b1a6724fdc3d..f0b9335777dbe9 100644 --- a/docs/pages/blog/2021-q2-update.md +++ b/docs/pages/blog/2021-q2-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q2 2021. date: 2021-07-12T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] card: true -tags: ['News'] +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 3b53f84a04ec35..b355cbba1a4ac4 100644 --- a/docs/pages/blog/2021-q3-update.md +++ b/docs/pages/blog/2021-q3-update.md @@ -4,7 +4,7 @@ description: An update on our mission for Q3 2021. date: 2021-10-26T00:00:00.000Z authors: ['oliviertassinari'] card: true -tags: ['News'] +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 f16f759220fd95..d6f4507d178d31 100644 --- a/docs/pages/blog/benny-joo-joining.md +++ b/docs/pages/blog/benny-joo-joining.md @@ -4,7 +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: ['Company'] +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 e8a49921e8eb44..db42370f195d47 100644 --- a/docs/pages/blog/danail-hadjiatanasov-joining.md +++ b/docs/pages/blog/danail-hadjiatanasov-joining.md @@ -4,7 +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: ['Company'] +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 b1e2555c3f0c9d..238c9d2ba99f39 100644 --- a/docs/pages/blog/danilo-leal-joining.md +++ b/docs/pages/blog/danilo-leal-joining.md @@ -4,7 +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: ['Company'] +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 4ea60690aeaa88..a650edef50f78f 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 fb2066e444a431..6c7b345ed20ec1 100644 --- a/docs/pages/blog/marija-najdova-joining.md +++ b/docs/pages/blog/marija-najdova-joining.md @@ -4,7 +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: ['Company'] +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-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md index d8ee84b709ab64..1cf051b7ddeef0 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 🎉 +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 01fd2c3c8100fc..87c7cae9759afb 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 🎉 +tags: ['News'] --- # MUI v4 is out 🎉 diff --git a/docs/pages/blog/matheus-wichman-joining.md b/docs/pages/blog/matheus-wichman-joining.md index 7f309c745c0dc1..5597ff8b866f23 100644 --- a/docs/pages/blog/matheus-wichman-joining.md +++ b/docs/pages/blog/matheus-wichman-joining.md @@ -4,7 +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: ['Company'] +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 1878a3fdf59810..3f98dc5b3eb6f8 100644 --- a/docs/pages/blog/michal-dudak-joining.md +++ b/docs/pages/blog/michal-dudak-joining.md @@ -4,7 +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: ['Company'] +tags: ['Team'] --- We are excited to share that [Michał Dudak](https://twitter.com/michaldudak) has joined MUI! 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 a615dd53b14ac5..5576db7863e85c 100644 --- a/docs/pages/blog/siriwat-kunaporn-joining.md +++ b/docs/pages/blog/siriwat-kunaporn-joining.md @@ -4,7 +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: ['Company'] +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 3ef6028d31e7c7..e7a01a28b86fa4 100644 --- a/docs/pages/blog/spotlight-damien-tassone.md +++ b/docs/pages/blog/spotlight-damien-tassone.md @@ -4,7 +4,7 @@ description: Damien Tassone has joined MUI. He's the first full-time member to f date: 2020-09-15T00:00:00.000Z authors: ['oliviertassinari'] card: true -tags: ['Company'] +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. From f42cdd0a1ed118c50ec4bcb1f29b70bd8048fd0f Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 6 Jan 2022 16:01:12 -0300 Subject: [PATCH 17/29] top layout blog update and tweaks to the index page --- docs/pages/blog.tsx | 23 ++----- docs/src/modules/brandingTheme.ts | 4 +- docs/src/modules/components/TopLayoutBlog.js | 70 +++++++++++++++----- 3 files changed, 63 insertions(+), 34 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 15937b2bc0e584..13fa8ccc4ec458 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -44,18 +44,16 @@ const PostPreview = (props: BlogPost) => { sx={{ fontWeight: 500, color: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primary[50] - : theme.palette.primary[700], + theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[700], background: (theme) => theme.palette.mode === 'dark' - ? theme.palette.primary[900] - : theme.palette.primary[50], + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], '&:hover': { background: (theme) => theme.palette.mode === 'dark' - ? theme.palette.primary[900] - : theme.palette.primary[50], + ? alpha(theme.palette.grey[700], 0.5) + : theme.palette.grey[100], }, }} /> @@ -103,7 +101,7 @@ const PostPreview = (props: BlogPost) => { backgroundColor: (theme) => theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] - : theme.palette.grey[300], + : theme.palette.grey[100], color: (theme) => theme.palette.mode === 'dark' ? theme.palette.primaryDark[100] @@ -336,7 +334,7 @@ export default function Blog(props: InferGetStaticPropsType ({ borderRadius: 1, - bgcolor: selected ? 'primary.50' : 'grey.300', + bgcolor: selected ? 'primary.50' : 'grey.200', px: 0.5, mr: -0.25, fontSize: '0.75rem', @@ -370,13 +368,6 @@ export default function Blog(props: InferGetStaticPropsType ); diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 2e9d4659195374..5ef47defcbc028 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -495,6 +495,9 @@ export function getThemedComponents(theme: Theme) { }, MuiChip: { styleOverrides: { + root: { + fontWeight: 500, + }, outlined: { color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.grey[900], backgroundColor: 'transparent', @@ -504,7 +507,6 @@ export function getThemedComponents(theme: Theme) { : theme.palette.grey[300], }, filled: { - fontWeight: 400, border: '1px solid transparent', color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], backgroundColor: diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index fb6c817a5c34b7..e48641780e3d6c 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -3,78 +3,98 @@ 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'; 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(16), + maxWidth: `calc(740px + ${theme.spacing(12)})`, '& h1': { - marginBottom: theme.spacing(4), + marginBottom: theme.spacing(3), }, '& .markdown-body': { fontSize: theme.typography.pxToRem(17), @@ -102,20 +122,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), }, @@ -129,7 +149,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 ? ( @@ -169,25 +191,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 ; })} + -     + ); } From 0c78961652e9e2df11d94c65933d795d55b4e3b7 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Thu, 6 Jan 2022 16:10:19 -0300 Subject: [PATCH 18/29] small fine tunings --- docs/pages/blog.tsx | 4 ++-- docs/src/layouts/AppFooter.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 13fa8ccc4ec458..238b2067d28d89 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -276,7 +276,7 @@ export default function Blog(props: InferGetStaticPropsType Date: Fri, 7 Jan 2022 15:26:48 +0700 Subject: [PATCH 19/29] fix author names --- docs/pages/blog.tsx | 15 ++++++++++++++- docs/src/modules/components/TopLayoutBlog.js | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 238b2067d28d89..19f54d5501cdc5 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -126,7 +126,20 @@ const PostPreview = (props: BlogPost) => { {props.authors && ( - {props.authors.slice(0, 2).join(', ')} + {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.'} )} diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index e48641780e3d6c..22ea5ff7c6965d 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -170,8 +170,8 @@ function TopLayoutBlog(props) { variant="body2" className={classes.back} > - {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} + {/* eslint-disable-next-line material-ui/no-hardcoded-labels */} {'Back to blog'} {headers.title ? ( From 068585d31975765fd3b557bbaff8502c8976e180 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Jan 2022 15:52:45 +0700 Subject: [PATCH 20/29] fix tag count --- docs/lib/sourcing.ts | 10 ++++++++-- docs/pages/blog.tsx | 36 +++++++++++++++++++++++++++++++----- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 71764e54e23ca2..958d06f211d7d0 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -32,7 +32,7 @@ export const getBlogPost = (filePath: string): BlogPost => { export const getAllBlogPosts = () => { const filePaths = getBlogFilePaths(); - const allBlogPosts = filePaths + const rawBlogPosts = filePaths .map((name) => getBlogPost(name)) // sort allBlogPosts by date in descending order .sort((post1, post2) => { @@ -44,11 +44,17 @@ export const getAllBlogPosts = () => { } 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 { allBlogPosts, allTags: Object.keys(tagInfo), tagInfo }; + return { + rawBlogPosts, // all posts from the directory + allBlogPosts, // posts with at least a title + allTags: Object.keys(tagInfo), + tagInfo, + }; }; diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 19f54d5501cdc5..544a4833307a69 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -178,8 +178,18 @@ export default function Blog(props: InferGetStaticPropsType>({}); - const { allBlogPosts, allTags, tagInfo } = props; - const [firstPost, secondPost, ...otherPosts] = allBlogPosts.filter((post) => !!post.title); + 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 || @@ -289,14 +299,29 @@ export default function Blog(props: InferGetStaticPropsType - - All posts + + All posts{' '} + {Object.keys(selectedTags).length ? ( + + about{' '} + + "{Object.keys(selectedTags)[0]}" + + + ) : ( + '' + )} Date: Fri, 7 Jan 2022 18:40:13 -0300 Subject: [PATCH 21/29] few tweaks --- docs/pages/blog.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 544a4833307a69..184a99f51155fe 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -307,7 +307,8 @@ export default function Blog(props: InferGetStaticPropsType @@ -315,7 +316,7 @@ export default function Blog(props: InferGetStaticPropsType about{' '} - + "{Object.keys(selectedTags)[0]}" @@ -329,8 +330,8 @@ export default function Blog(props: InferGetStaticPropsType Date: Tue, 11 Jan 2022 17:33:37 +0700 Subject: [PATCH 22/29] remove tag count --- docs/pages/blog.tsx | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 544a4833307a69..0937794e1f1133 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -311,7 +311,7 @@ export default function Blog(props: InferGetStaticPropsType - All posts{' '} + Posts{' '} {Object.keys(selectedTags).length ? ( about{' '} @@ -366,27 +366,7 @@ export default function Blog(props: InferGetStaticPropsType - {tag}{' '} - ({ - borderRadius: 1, - bgcolor: selected ? 'primary.50' : 'grey.200', - px: 0.5, - mr: -0.25, - fontSize: '0.75rem', - fontWeight: 500, - ...(theme.palette.mode === 'dark' && { - bgcolor: 'primaryDark.600', - }), - })} - > - {tagInfo[tag]} - - - ), + label: tag, onClick: () => { const postList = document.getElementById('post-list'); if (postList) { From d200ceda619e900cb4c75c2a37662f02d68296a0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 Jan 2022 20:14:18 +0700 Subject: [PATCH 23/29] fix feature toggle --- docs/src/featureToggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js index 4bb5e340aa14bb..10f89f89f60c70 100644 --- a/docs/src/featureToggle.js +++ b/docs/src/featureToggle.js @@ -2,7 +2,7 @@ module.exports = { nav_products: true, enable_website_banner: false, - enable_blog_index: process.env.NODE_ENV !== 'production' || process.env.PULL_REQUEST === 'true', + 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 From 69b56a96848304b64186e8f94343ff0121b64f91 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Tue, 11 Jan 2022 12:05:54 -0300 Subject: [PATCH 24/29] small tweak to the chip color --- docs/src/modules/brandingTheme.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 40ff6db818f449..d4596e71d7deab 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -508,7 +508,7 @@ export function getThemedComponents(theme: Theme) { }, filled: { border: '1px solid transparent', - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[800], backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] @@ -522,6 +522,12 @@ export function getThemedComponents(theme: Theme) { }, deleteIcon: { color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[100] + : theme.palette.primary[900], + }, }, }, }, From a442ea41df1e11a4020c3a751beda18b63cc8d68 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Tue, 11 Jan 2022 12:13:09 -0300 Subject: [PATCH 25/29] small tweak to the blog post design --- docs/src/modules/components/TopLayoutBlog.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 22ea5ff7c6965d..a41455cf9b03ca 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -91,7 +91,7 @@ const styles = (theme) => ({ }, container: { paddingTop: 60 + 20, - marginBottom: theme.spacing(16), + marginBottom: theme.spacing(8), maxWidth: `calc(740px + ${theme.spacing(12)})`, '& h1': { marginBottom: theme.spacing(3), @@ -99,9 +99,6 @@ const styles = (theme) => ({ '& .markdown-body': { fontSize: theme.typography.pxToRem(17), lineHeight: 1.7, - [theme.breakpoints.up('md')]: { - paddingRight: theme.spacing(4), - }, }, '& img, & video': { display: 'block', From 578d5eae2e6ecc92981bd49c6895e4704c0b9472 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 12 Jan 2022 14:57:03 +0700 Subject: [PATCH 26/29] change to ref --- docs/pages/blog.tsx | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index a1754dd7464732..13af0407d3146d 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -176,6 +176,7 @@ const PostPreview = (props: BlogPost) => { 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; @@ -297,7 +298,7 @@ export default function Blog(props: InferGetStaticPropsType
    { - const postList = document.getElementById('post-list'); - if (postList) { - postList.scrollIntoView(); - } + postListRef.current?.scrollIntoView(); removeTag(tag); }, } : { label: tag, onClick: () => { - const postList = document.getElementById('post-list'); - if (postList) { - postList.scrollIntoView(); - } + postListRef.current?.scrollIntoView(); router.push( { query: { @@ -423,10 +418,7 @@ export default function Blog(props: InferGetStaticPropsType { setPage(value - 1); - const postList = document.getElementById('post-list'); - if (postList) { - postList.scrollIntoView(); - } + postListRef.current?.scrollIntoView(); }} sx={{ mt: 1, mb: 8 }} /> From f10ec637edb5dbfcc328cce22637e7e33788cfbe Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 12 Jan 2022 19:34:35 -0300 Subject: [PATCH 27/29] fix on button's padding --- docs/pages/blog.tsx | 1 + docs/src/modules/brandingTheme.ts | 5 ++++- docs/src/modules/components/DiamondSponsors.js | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 13af0407d3146d..4a8d07ee882b1a 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -157,6 +157,7 @@ const PostPreview = (props: BlogPost) => { size="small" endIcon={} sx={(theme) => ({ + mt: { xs: 0.5, sm: 0 }, color: theme.palette.mode === 'dark' ? theme.palette.primary[300] diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index d4596e71d7deab..e4334545907ace 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -291,7 +291,10 @@ export function getThemedComponents(theme: Theme) { fontWeight: 700, }, sizeSmall: { - padding: '0.375rem 0rem', + padding: theme.spacing(0.5, 0), + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0.5, 1), + }, }, containedPrimary: { backgroundColor: theme.palette.primary[500], diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 62b23d5d3cecff..1d340b8a421d98 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -28,11 +28,12 @@ export default function DiamondSponsors(props) { size="small" endIcon={} 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, From 38dd3f015b333c9fbc07528db7410bc3cb66d410 Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 12 Jan 2022 19:39:00 -0300 Subject: [PATCH 28/29] copy update --- docs/pages/blog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 4a8d07ee882b1a..c2cab9dcbad181 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -317,7 +317,7 @@ export default function Blog(props: InferGetStaticPropsType - about{' '} + tagged as{' '} "{Object.keys(selectedTags)[0]}" @@ -348,7 +348,7 @@ export default function Blog(props: InferGetStaticPropsType - Filter by subject + Filter by tag {allTags.map((tag) => { From 481fe14bdf4a6499e78136c50fcc0bc68823ae8c Mon Sep 17 00:00:00 2001 From: danilo leal Date: Wed, 12 Jan 2022 19:46:22 -0300 Subject: [PATCH 29/29] use author name as alt text for avatar picture --- docs/pages/blog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index c2cab9dcbad181..76aeec74151234 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -112,7 +112,7 @@ const PostPreview = (props: BlogPost) => { }} > {(props.authors as Array).map((author) => ( - + ))} )}