feat: add feed RSS (#913)

* feat: add feed RSS

* Optimised images with calibre/image-actions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.gitignore

@@ -27,3 +27,4 @@ dist-ssr
 public/data
 public/imgs/posts
 public/imgs/authors
+public/feed.xml

bin/prepare.ts

@@ -11,18 +11,19 @@ const copyImgs = (): void => {
   fs.cpSync(srcDir, outputDir, { recursive: true });
 };
 
-const generateData = async (): Promise<void> => {
+const generateDataAndFeeds = async (): Promise<void> => {
   const baseUrl = process.env.BASE_URL || '/';
-  const rootDir = resolve(process.cwd(), 'public', 'data');
+  const rootDir = resolve(process.cwd(), 'public');
   const vite = await createViteServer({
     server: { middlewareMode: true },
     base: baseUrl,
     appType: 'custom',
   });
 
   try {
-    const { generateDataFiles } = await vite.ssrLoadModule('/src/helpers/dataHelper.ts');
-    generateDataFiles({ rootDir });
+    const { generateDataFiles, generateFeedFile } = await vite.ssrLoadModule('/src/helpers/dataHelper.ts');
+    generateDataFiles({ rootDir: resolve(rootDir, 'data') });
+    generateFeedFile({ rootDir });
   } catch (e) {
     console.error(e);
   } finally {
@@ -32,7 +33,7 @@ const generateData = async (): Promise<void> => {
 
 const prepare = (): void => {
   copyImgs();
-  generateData();
+  generateDataAndFeeds();
 };
 
 prepare();

package.json

@@ -67,26 +67,31 @@
     "@storybook/testing-library": "^0.0.14-next.1",
     "@types/express": "^4.17.17",
     "@types/i18next": "^13.0.0",
+    "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.13.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-i18next": "^8.1.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/sanitize-html": "^2.8.1",
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "date-fns": "^2.29.1",
     "dotenv": "^16.0.3",
     "eslint": "^8.27.0",
+    "feed": "^4.2.2",
     "gray-matter": "^4.0.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
+    "markdown-it": "^13.0.1",
     "node-sass": "^8.0.0",
     "postcss": "^8.4.21",
     "postcss-normalize": "^10.0.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.7.1",
+    "sanitize-html": "^2.10.0",
     "sass": "^1.58.1",
     "storybook": "^7.0.0-beta.48",
     "stylelint": "^15.2.0",

src/config/website/common.ts

@@ -1,4 +1,5 @@
-export const websiteUrl = 'https://eleven-labs.com/';
+export const blogUrl = 'https://blog.eleven-labs.com';
+export const websiteUrl = 'https://eleven-labs.com';
 export const newsletterFormUrl = 'http://eepurl.com/cOuOIf';
 export const googleSiteVerificationKey = 'google-site-verification';
 export const googleAnalytics = {

src/config/website/socialNetworks.ts

@@ -4,10 +4,10 @@ export const socialNetworks: {
   iconName: Extract<IconNameType, 'rss' | 'facebook' | 'twitter' | 'linkedin' | 'welcometothejungle'>;
   url: string;
 }[] = [
-  /*{
+  {
     iconName: 'rss',
     url: 'https://blog.eleven-labs.com/feed.xml',
-  },*/
+  },
   {
     iconName: 'facebook',
     url: 'https://www.facebook.com/11Labs',

src/helpers/dataHelper.ts

@@ -1,8 +1,13 @@
+import { generatePath } from '@remix-run/router';
+import { Feed } from 'feed';
+import MarkdownIt from 'markdown-it';
 import { existsSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { dirname, resolve } from 'node:path';
+import sanitizeHtml from 'sanitize-html';
 
-import { AUTHORIZED_LANGUAGES, CATEGORIES } from '@/constants';
+import { blogUrl } from '@/config/website';
+import { AUTHORIZED_LANGUAGES, CATEGORIES, PATHS } from '@/constants';
 import { getPathFile } from '@/helpers/assetHelper';
 import { AuthorType, PostType } from '@/types';
 
@@ -146,3 +151,37 @@ export const generateDataFiles = (options: { rootDir: string }): void => {
     });
   }
 };
+
+export const generateFeedFile = (options: { rootDir: string }): void => {
+  const { posts } = getData();
+  const parser = new MarkdownIt();
+
+  const feed = new Feed({
+    title: 'Blog Eleven Labs',
+    description: `L'actualité tech`,
+    id: blogUrl,
+    link: blogUrl,
+    image: `${blogUrl}/imgs/logo.png`,
+    favicon: `${blogUrl}/favicon.ico`,
+    copyright: `All rights reserved ${new Date().getFullYear()}, Blog Eleven Labs`,
+    generator: 'awesome',
+    author: {
+      name: 'Eleven Labs',
+      email: 'contact@eleven-labs.com',
+    },
+  });
+
+  for (const { lang, slug, ...post } of posts.slice(0, 15)) {
+    const url = `${blogUrl}${generatePath(PATHS.POST, { lang, slug })}`;
+    feed.addItem({
+      title: post.title,
+      id: url,
+      link: url,
+      date: new Date(post.date),
+      description: post.excerpt,
+      content: sanitizeHtml(parser.render(post.content)),
+    });
+  }
+
+  writeFileSync(resolve(options.rootDir, `feed.xml`), feed.rss2());
+};