[blog] Add RSS feed (mui#35777)

.gitignore

@@ -15,6 +15,7 @@
 /docs/.env.local
 /docs/export
 /docs/pages/playground/
+/docs/public/feed/
 /examples/**/.cache
 /packages/mui-codemod/lib
 /packages/mui-envinfo/*.tgz
@@ -32,3 +33,4 @@ build
 node_modules
 package-lock.json
 size-snapshot.json
+docs/public/static/blog/feed/*

docs/package.json

@@ -76,6 +76,7 @@
     "date-fns-jalali": "^2.21.3-1",
     "exceljs": "^4.3.0",
     "express": "^4.18.2",
+    "feed": "^4.2.2",
     "fg-loadcss": "^3.1.0",
     "final-form": "^4.20.7",
     "flexsearch": "^0.7.31",

docs/pages/blog.tsx

@@ -23,9 +23,11 @@ import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 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';
+import generateRssFeed from 'docs/scripts/generateRSSFeed';
 
 export const getStaticProps = () => {
   const data = getAllBlogPosts();
+  generateRssFeed(data.allBlogPosts);
   return {
     props: data,
   };

docs/scripts/generateRSSFeed.ts

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import { Feed } from 'feed';
+import { BlogPost } from 'docs/lib/sourcing';
+import ROUTES from 'docs/src/route';
+
+export default function generateRssFeed(allBlogPosts: Array<BlogPost>) {
+  if (process.env.NODE_ENV !== 'production') {
+    return;
+  }
+  const siteUrl = 'https://mui.com';
+
+  const feed = new Feed({
+    title: 'MUI - Blog',
+    description:
+      'Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives.',
+    id: `${siteUrl}/blog`,
+    link: `${siteUrl}/blog`,
+    language: 'en',
+    image: `${siteUrl}/static/logo.svg`,
+    favicon: `${siteUrl}/favicon.ico`,
+    copyright: `Copyright © ${new Date().getFullYear()} Material UI SAS.`,
+    feedLinks: {
+      rss2: `${siteUrl}/public${ROUTES.rssFeed}`,
+    },
+  });
+
+  allBlogPosts.forEach((post) => {
+    const postAuthors = post.authors && post.authors.map((author) => ({ name: author }));
+    const postDate = post.date ? new Date(post.date) : new Date();
+    const postCategory = post.tags.map((tag) => ({ name: tag }));
+    const postLink = `${siteUrl}/blog/${post.slug}`;
+
+    feed.addItem({
+      title: post.title,
+      image: post.image,
+      id: postLink,
+      link: postLink,
+      description: post.description,
+      category: postCategory,
+      date: postDate,
+      author: postAuthors,
+    });
+  });
+
+  fs.mkdirSync(`public${ROUTES.rssFeed.replace('rss.xml', '')}`, { recursive: true });
+  fs.writeFileSync(`public${ROUTES.rssFeed}`, feed.rss2());
+}

docs/src/layouts/AppFooter.tsx

@@ -9,6 +9,7 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import RssFeedIcon from '@mui/icons-material/RssFeed';
 import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
 import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
 import ROUTES from 'docs/src/route';
@@ -150,6 +151,16 @@ export default function AppFooter() {
             >
               <GitHubIcon fontSize="small" />
             </IconButton>
+            <IconButton
+              target="_blank"
+              rel="noopener noreferrer"
+              href={ROUTES.rssFeed}
+              aria-label="RSS Feed"
+              title="RSS Feed"
+              size="small"
+            >
+              <RssFeedIcon fontSize="small" />
+            </IconButton>
             <IconButton
               target="_blank"
               rel="noopener noreferrer"

docs/src/route.ts

@@ -8,6 +8,7 @@ const ROUTES = {
   careers: '/careers/',
   pricing: '/pricing/',
   about: '/about/',
+  rssFeed: '/feed/blog/rss.xml',
   handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b',
   baseDocs: '/base/getting-started/overview/',
   materialDocs: '/material-ui/getting-started/overview/',

yarn.lock

@@ -8048,6 +8048,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+feed@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/feed/-/feed-4.2.2.tgz#865783ef6ed12579e2c44bbef3c9113bc4956a7e"
+  integrity sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==
+  dependencies:
+    xml-js "^1.6.11"
+
 fg-loadcss@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/fg-loadcss/-/fg-loadcss-3.1.0.tgz#f7f148dccf8a6899f846a974ed50539880158acb"
@@ -14147,7 +14154,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
   integrity sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==
 
-sax@>=0.6.0:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -16368,6 +16375,13 @@ xcase@^2.0.1:
   resolved "https://registry.yarnpkg.com/xcase/-/xcase-2.0.1.tgz#c7fa72caa0f440db78fd5673432038ac984450b9"
   integrity sha512-UmFXIPU+9Eg3E9m/728Bii0lAIuoc+6nbrNUKaRPJOFp91ih44qqGlWtxMB6kXFrRD6po+86ksHM5XHCfk6iPw==
 
+xml-js@^1.6.11:
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
+  integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
+  dependencies:
+    sax "^1.2.4"
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"