[website] Add a Blog index page

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<string, number | undefined> = {};
+  allBlogPosts.forEach((post) => {
+    (post.tags || []).forEach((tag) => {
+      tagInfo[tag] = (tagInfo[tag] || 0) + 1;
+    });
+  });
+  return { allBlogPosts, allTags: Object.keys(tagInfo), tagInfo };
 };

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,19 +24,17 @@ 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,
   };
 };
 
 const PostPreview = (props: BlogPost) => {
   return (
     <React.Fragment>
       {props.tags && (
-        <Box sx={{ display: 'flex', gap: 1, mb: 4 }}>
+        <Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
           {props.tags.map((tag) => (
             <Chip
               key={tag}
@@ -122,8 +120,6 @@ const PostPreview = (props: BlogPost) => {
         <Button
           component="a"
           href={`/blog/${props.slug}`}
-          target="_blank"
-          rel="noopener nofollow"
           endIcon={<KeyboardArrowRightRounded fontSize="small" />}
           sx={{
             p: { xs: 0, sm: 0.5 },
@@ -144,41 +140,53 @@ const PostPreview = (props: BlogPost) => {
   );
 };
 
-const TAGS = [
-  'News',
-  'Material Design',
-  'Components',
-  'Accessibility',
-  'How to guides',
-  'System',
-  'New Joiners',
-  'Developer survey',
-];
-
 export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
+  const PAGE_SIZE = 5;
   const router = useRouter();
+  const [page, setPage] = React.useState(0);
   const [selectedTags, setSelectedTags] = React.useState<Record<string, boolean>>({});
-  const { allBlogPosts } = props;
+  const { allBlogPosts, allTags, tagInfo } = props;
   const [firstPost, secondPost, ...otherPosts] = allBlogPosts.filter((post) => !!post.title);
+  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 postList = document.getElementById('post-list');
+    if (postList) {
+      postList.scrollIntoView();
+    }
+  }, [router.query, page]);
   React.useEffect(() => {
     const arrayTags = getTags();
     const finalTags: Record<string, boolean> = {};
     arrayTags.forEach((tag) => {
       finalTags[tag] = true;
     });
     setSelectedTags(finalTags);
+    setPage(0);
   }, [getTags]);
-  const appendTag = (tag: string) => {
-    return [...getTags(), tag];
-  };
   const removeTag = (tag: string) => {
-    return getTags().filter((value) => value !== tag);
+    router.push(
+      {
+        query: {
+          ...router.query,
+          tags: getTags().filter((value) => value !== tag),
+        },
+      },
+      undefined,
+      { shallow: true },
+    );
   };
   return (
     <BrandingProvider>
@@ -210,12 +218,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
           >
             {[firstPost, secondPost].map((post) => (
               <Paper
-                component={Link}
                 key={post.slug}
-                href="/blog/"
-                target="_blank"
-                rel="noreferrer noopener"
-                noLinkStyle
                 variant="outlined"
                 sx={{ p: 2, display: 'flex', flexDirection: 'column', alignItems: 'initial' }}
               >
@@ -238,6 +241,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
           </Box>
         </Section>
         <Container
+          id="post-list"
           sx={{
             mt: 2,
             display: 'grid',
@@ -269,48 +273,91 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
               }}
             >
               <Typography color="text.primary" fontWeight="500" sx={{ mb: 2 }}>
-                Filter by tags
+                Filter by tag
               </Typography>
               <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-                {TAGS.map((tag) => (
-                  <Chip
-                    key={tag}
-                    variant={selectedTags[tag] ? 'filled' : 'outlined'}
-                    label={tag}
-                    size="small"
-                    sx={{ py: 1.2 }}
-                    onClick={() =>
-                      router.push(
-                        {
-                          query: {
-                            ...router.query,
-                            tags: (selectedTags[tag] ? removeTag(tag) : appendTag(tag)).join(','),
-                          },
+                {allTags.map((tag) => {
+                  const selected = !!selectedTags[tag];
+                  return (
+                    <Chip
+                      key={tag}
+                      variant={selected ? 'filled' : 'outlined'}
+                      {...(selected
+                        ? {
+                            label: tag,
+                            onDelete: () => removeTag(tag),
+                          }
+                        : {
+                            label: (
+                              <React.Fragment>
+                                {tag}{' '}
+                                <Typography
+                                  component="span"
+                                  sx={(theme) => ({
+                                    borderRadius: 1,
+                                    bgcolor: selected ? 'primary.50' : 'grey.300',
+                                    px: 0.5,
+                                    mr: -0.25,
+                                    fontSize: '0.75rem',
+                                    fontWeight: 500,
+                                    ...(theme.palette.mode === 'dark' && {
+                                      bgcolor: 'primaryDark.600',
+                                    }),
+                                  })}
+                                >
+                                  {tagInfo[tag]}
+                                </Typography>
+                              </React.Fragment>
+                            ),
+                            onClick: () => {
+                              router.push(
+                                {
+                                  query: {
+                                    ...router.query,
+                                    tags: tag,
+                                  },
+                                },
+                                undefined,
+                                { shallow: true },
+                              );
+                            },
+                          })}
+                      size="small"
+                      sx={{
+                        py: 1.2,
+                        '&:hover': {
+                          bgcolor: 'primary.100',
                         },
-                        undefined,
-                        { shallow: true },
-                      )
-                    }
-                  />
-                ))}
+                        '& .MuiChip-deleteIcon': {
+                          color: 'primary.700',
+                          '&:hover': { color: 'primary.700' },
+                        },
+                      }}
+                    />
+                  );
+                })}
               </Box>
             </Box>
           </Box>
           <Box>
-            {otherPosts
-              .filter(
-                (post) =>
-                  !Object.keys(selectedTags).length ||
-                  (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)),
-              )
-              .map((post, index) => (
-                <React.Fragment key={post.slug}>
-                  <Box sx={{ py: 3, display: 'flex', flexDirection: 'column' }}>
-                    <PostPreview {...post} />
-                  </Box>
-                  {index !== otherPosts.length - 1 && <Divider />}
-                </React.Fragment>
-              ))}
+            {displayedPosts.map((post, index) => (
+              <React.Fragment key={post.slug}>
+                <Box sx={{ py: 3, display: 'flex', flexDirection: 'column' }}>
+                  <PostPreview {...post} />
+                </Box>
+                {index !== displayedPosts.length - 1 && <Divider />}
+              </React.Fragment>
+            ))}
+            <Pagination
+              page={page + 1}
+              count={totalPage}
+              variant="outlined"
+              shape="rounded"
+              onChange={(_, value) => {
+                setPage(value - 1);
+              }}
+              sx={{ mt: 2, mb: 10 }}
+            />
           </Box>
         </Container>
       </main>

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: ['News']
 ---
 
 This update covers our progress over the last three months, and what we aim to achieve in the coming months.

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: ['News']
 ---
 
 2020 has been another great year, not only for MUI, but also for the ecosystem.

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: ['News']
 ---
 
 This update covers our progress over the last three months, and what we aim to achieve in the months ahead.

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: ['News']
 ---
 
 This update covers our progress over the last three months.

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: ['News']
 ---
 
 This update covers our progress over the last three months.

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: ['Company']
 ---
 
 We are excited to share that [Benny Joo](https://github.com/hbjORbj) has joined MUI.

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: ['Company']
 ---
 
 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.

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: ['Company']
 ---
 
 We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI!

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: ['Company']
 ---
 
 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.

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
 ---
 

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: ['Company']
 ---
 
 We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined MUI.