[blog] Simplify the labels

docs/lib/sourcing.ts

@@ -13,7 +13,7 @@ export interface BlogPost {
   title: string;
   description: string;
   image?: string;
-  tags?: Array<string>;
+  tags: Array<string>;
   authors?: Array<string>;
   date?: string;
 }
@@ -30,6 +30,10 @@ export const getBlogPost = (filePath: string): BlogPost => {
   };
 };
 
+// Avoid typos in the blog markdown pages.
+// https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917
+const ALLOWED_TAGS = ['MUI Core', 'News', 'MUI X', 'Company', 'All products'];
+
 export const getAllBlogPosts = () => {
   const filePaths = getBlogFilePaths();
   const rawBlogPosts = filePaths
@@ -47,14 +51,19 @@ export const getAllBlogPosts = () => {
   const allBlogPosts = rawBlogPosts.filter((post) => !!post.title);
   const tagInfo: Record<string, number | undefined> = {};
   allBlogPosts.forEach((post) => {
-    (post.tags || []).forEach((tag) => {
+    post.tags.forEach((tag) => {
+      if (!ALLOWED_TAGS.includes(tag)) {
+        throw new Error(
+          `The tag "${tag}" in "${post.title}" was not whitelisted. Are you sure it's not a typo?`,
+        );
+      }
+
       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,
   };
 };

docs/packages/markdown/parseMarkdown.js

@@ -34,35 +34,39 @@ function getHeaders(markdown) {
 
   header = header[1];
 
-  let regexMatches;
-  const headers = {};
-
-  // eslint-disable-next-line no-cond-assign
-  while ((regexMatches = headerKeyValueRegExp.exec(header)) !== null) {
-    const key = regexMatches[1];
-    let value = regexMatches[2].replace(/(.*)/, '$1');
-    if (value[0] === '[') {
-      // Need double quotes to JSON parse.
-      value = value.replace(/'/g, '"');
-      // Remove the comma after the last value e.g. ["foo", "bar",] -> ["foo", "bar"].
-      value = value.replace(/,\s+\]$/g, ']');
-      headers[key] = JSON.parse(value);
+  try {
+    let regexMatches;
+    const headers = {};
+
+    // eslint-disable-next-line no-cond-assign
+    while ((regexMatches = headerKeyValueRegExp.exec(header)) !== null) {
+      const key = regexMatches[1];
+      let value = regexMatches[2].replace(/(.*)/, '$1');
+      if (value[0] === '[') {
+        // Need double quotes to JSON parse.
+        value = value.replace(/'/g, '"');
+        // Remove the comma after the last value e.g. ["foo", "bar",] -> ["foo", "bar"].
+        value = value.replace(/,\s+\]$/g, ']');
+        headers[key] = JSON.parse(value);
+      } else {
+        // Remove trailing single quote yml escaping.
+        headers[key] = value.replace(/^'|'$/g, '');
+      }
+    }
+
+    if (headers.components) {
+      headers.components = headers.components
+        .split(',')
+        .map((x) => x.trim())
+        .sort();
     } else {
-      // Remove trailing single quote yml escaping.
-      headers[key] = value.replace(/^'|'$/g, '');
+      headers.components = [];
     }
-  }
 
-  if (headers.components) {
-    headers.components = headers.components
-      .split(',')
-      .map((x) => x.trim())
-      .sort();
-  } else {
-    headers.components = [];
+    return headers;
+  } catch (err) {
+    throw new Error(`${err.message} in getHeader(markdown) with markdown: \n\n${header}`);
   }
-
-  return headers;
 }
 
 function getContents(markdown) {

docs/pages/blog.tsx

@@ -24,7 +24,7 @@ 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 () => {
+export const getStaticProps = () => {
   const data = getAllBlogPosts();
   return {
     props: data,
@@ -34,32 +34,30 @@ export const getStaticProps = async () => {
 const PostPreview = (props: BlogPost) => {
   return (
     <React.Fragment>
-      {props.tags && (
-        <Box sx={{ display: 'flex', gap: 1, mb: 1.5 }}>
-          {props.tags.map((tag) => (
-            <Chip
-              key={tag}
-              label={tag}
-              size="small"
-              sx={{
-                fontWeight: 500,
-                color: (theme) =>
-                  theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[700],
+      <Box sx={{ display: 'flex', gap: 1, mb: 1.5 }}>
+        {props.tags.map((tag) => (
+          <Chip
+            key={tag}
+            label={tag}
+            size="small"
+            sx={{
+              fontWeight: 500,
+              color: (theme) =>
+                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],
-                '&:hover': {
-                  background: (theme) =>
-                    theme.palette.mode === 'dark'
-                      ? alpha(theme.palette.grey[700], 0.5)
-                      : theme.palette.grey[100],
-                },
-              }}
-            />
-          ))}
-        </Box>
-      )}
+              },
+            }}
+          />
+        ))}
+      </Box>
       <Typography
         component="h2"
         fontWeight="bold"
@@ -175,8 +173,14 @@ const PostPreview = (props: BlogPost) => {
   );
 };
 
+const PAGE_SIZE = 5;
+
+const PARENT_TAG = {
+  'MUI X': 'All products',
+  'MUI Core': 'All products',
+} as Record<string, string>;
+
 export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
-  const PAGE_SIZE = 5;
   const router = useRouter();
   const postListRef = React.useRef<HTMLDivElement | null>(null);
   const [page, setPage] = React.useState(0);
@@ -185,24 +189,32 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
   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;
-        }
-      });
-    }
+    post.tags.forEach((tag) => {
+      if (tagInfo[tag]) {
+        tagInfo[tag]! -= 1;
+      }
+    });
   });
   Object.entries(tagInfo).forEach(([tagName, tagCount]) => {
-    if (!tagCount) {
+    if (tagCount === 0) {
       delete tagInfo[tagName];
     }
   });
-  const filteredPosts = otherPosts.filter(
-    (post) =>
-      !Object.keys(selectedTags).length ||
-      (post.tags || []).some((tag) => Object.keys(selectedTags).includes(tag)),
-  );
+  const filteredPosts = otherPosts.filter((post) => {
+    if (Object.keys(selectedTags).length === 0) {
+      return true;
+    }
+
+    return post.tags.some((tag) => {
+      return (
+        Object.keys(selectedTags).includes(tag) ||
+        Object.keys(selectedTags)
+          .map((selectedTag) => PARENT_TAG[selectedTag])
+          .includes(tag) ||
+        Object.keys(selectedTags).includes(PARENT_TAG[tag])
+      );
+    });
+  });
   const pageStart = page * PAGE_SIZE;
   const totalPage = Math.ceil(filteredPosts.length / PAGE_SIZE);
   const displayedPosts = filteredPosts.slice(pageStart, pageStart + PAGE_SIZE);

docs/pages/blog/2019-developer-survey-results.md

@@ -3,7 +3,7 @@ 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']
-tags: ['Developer survey']
+tags: ['MUI Core']
 ---
 
 While we are currently working on the upcoming release of MUI v4, we need to prioritize our

docs/pages/blog/2019.md

@@ -3,7 +3,7 @@ title: 2019 in review and beyond
 date: 2020-01-25T00:00:00.000Z
 description: 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years!
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['Company', 'MUI Core']
 ---
 
 2019 was a great year for MUI.

docs/pages/blog/2020-developer-survey-results.md

@@ -3,7 +3,7 @@ title: 2020 MUI Developer Survey results
 description: Results for our yearly developer survey, 2020 edition.
 date: 2020-06-27T00:00:00.000Z
 authors: ['mnajdova', 'oliviertassinari', 'mbrookes']
-tags: ['Developer survey']
+tags: ['All products']
 ---
 
 Continuing the tradition from last year, we launched a developer survey a few months ago, to which we received 1488 responses. This is twice as many as last year (734), so we thank you all for the participation!

docs/pages/blog/2020-introducing-sketch.md

@@ -3,7 +3,7 @@ title: Introducing MUI for Sketch
 description: Today, we're excited to announce the introduction of official Sketch symbols for MUI.
 date: 2020-03-30T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['News']
+tags: ['All products', 'News']
 ---
 
 Today, we're excited to introduce the Sketch symbols 💎 for MUI.

docs/pages/blog/2020-q1-update.md

@@ -3,7 +3,7 @@ title: Q1 2020 Update
 description: An update on our mission for Q1 2020.
 date: 2020-04-14T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['All products', 'Company', 'News']
 ---
 
 Welcome to the new format of our mission update. We are moving from monthly to quarterly updates.

docs/pages/blog/2020-q2-update.md

@@ -3,7 +3,7 @@ title: Q2 2020 Update
 description: An update on our mission for Q2 2020.
 date: 2020-07-17T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['All products', 'Company', '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-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: ['Company update']
+tags: ['All products', 'Company', '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,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: ['Company update']
+tags: ['Company', 'All products']
 ---
 
 2020 has been another great year, not only for MUI, but also for the ecosystem.

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

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

docs/pages/blog/2021.md

@@ -4,7 +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']
+tags: ['Company', 'All products']
 ---
 
 <img src="/static/blog/2021/card.png" alt="" style="width: 100%; margin-bottom: 16px;" />

docs/pages/blog/april-2019-update.md

@@ -3,7 +3,7 @@ title: April 2019 Update
 description: Here are the most significant improvements in April.
 date: 2019-05-07T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['MUI Core', 'News']
 ---
 
 Here are the most significant improvements in April:

docs/pages/blog/august-2019-update.md

@@ -3,7 +3,7 @@ title: August 2019 Update
 description: Here are the most significant improvements in August.
 date: 2019-09-07T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['MUI Core', 'News']
 ---
 
 Here are the most significant improvements in August:

docs/pages/blog/benny-joo-joining.md

@@ -3,7 +3,7 @@ title: Benny Joo joins MUI
 description: We are excited to share that Benny Joo has joined MUI. He has started last month full-time and is now a Junior Software Engineer in the Core team.
 date: 2021-11-16T00:00:00.000Z
 authors: ['mnajdova']
-tags: ['Team']
+tags: ['Company', 'MUI Core', 'News']
 ---
 
 We are excited to share that [Benny Joo](https://github.com/hbjORbj) has joined MUI.

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

docs/pages/blog/december-2019-update.md

@@ -3,7 +3,7 @@ title: December 2019 Update
 description: Here are the most significant improvements in December.
 date: 2020-01-07T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['Company update']
+tags: ['MUI Core', 'News']
 ---
 
 Here are the most significant improvements in December: