feat: improvement of the web perf

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,34 @@
+name: Build and Deploy Storybook
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-and-deploy-storybook:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install modules
+        run: yarn install --frozen-lockfile
+      - name: Build Storybook
+        run: yarn build:storybook
+      - name: Deploy Storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.gitignore

@@ -24,7 +24,8 @@ dist-ssr
 *.sw?
 
 # Custom
-public/data
+reports/*
+storybook-static
 public/imgs/posts
 public/imgs/authors
 public/feed.xml

bin/build.ts

@@ -1,30 +1,70 @@
+import { cpSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { build as buildVite } from 'vite';
+import { createServer as createViteServer } from 'vite';
+
+const rootDir = process.cwd();
+const outDir = resolve(rootDir, 'dist');
+const outPublicDir = resolve(rootDir, 'dist/public');
+const args = process.argv.slice(2).reduce<Record<string, string | number | boolean>>((currentArgs, currentArg) => {
+  const [key, value] = currentArg.replace('--', '').split('=');
+  currentArgs[key] = value;
+  return currentArgs;
+}, {});
+
+const copyImgs = (): void => {
+  const srcDir = resolve(rootDir, '_assets');
+  const outputDir = resolve(rootDir, 'public/imgs');
+  cpSync(srcDir, outputDir, { recursive: true });
+};
+
+const generateFeeds = async (): Promise<void> => {
+  const baseUrl = process.env.BASE_URL || '/';
+
+  const vite = await createViteServer({
+    server: { middlewareMode: true },
+    base: baseUrl,
+    appType: 'custom',
+  });
+
+  try {
+    const { generateFeedFile } = await vite.ssrLoadModule('/src/helpers/feedHelper.ts');
+    generateFeedFile({ rootDir: outPublicDir });
+  } catch (e) {
+    console.error(e);
+  } finally {
+    vite.close();
+  }
+};
 
 const build = async (): Promise<void> => {
-  // 1. Build Server
-  buildVite({
-    base: process.env.BASE_URL || '/',
-    build: {
-      emptyOutDir: false,
-      ssr: true,
-      outDir: 'dist',
-      rollupOptions: {
-        input: 'src/server.ts',
+  copyImgs();
+  if (args.ssr) {
+    await buildVite({
+      base: process.env.BASE_URL || '/',
+      build: {
+        emptyOutDir: false,
+        ssr: true,
+        outDir: outDir,
+        rollupOptions: {
+          input: 'src/server.ts',
+        },
       },
-    },
-    mode: process.env.NODE_ENV || 'production',
-  });
+      mode: process.env.NODE_ENV || 'production',
+    });
+  }
 
-  // 2. Build Client
-  buildVite({
+  await buildVite({
     base: process.env.BASE_URL || '/',
     build: {
       emptyOutDir: false,
       manifest: true,
-      outDir: 'dist/public',
+      outDir: outPublicDir,
     },
     mode: process.env.NODE_ENV || 'production',
   });
+
+  generateFeeds();
 };
 
 build();

bin/dev.ts

@@ -1,5 +1,10 @@
+import chokidar from 'chokidar';
+import { cpSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { createServer as createViteServer } from 'vite';
 
+const rootDir = process.cwd();
+
 const dev = async (): Promise<void> => {
   const vite = await createViteServer({
     base: process.env.BASE_URL || '/',
@@ -8,6 +13,14 @@ const dev = async (): Promise<void> => {
       host: '0.0.0.0',
     },
   });
+
+  const assetsDir = resolve(rootDir, '_assets');
+  const watcher = chokidar.watch(assetsDir, { cwd: assetsDir });
+
+  watcher.on('all', (event, filePath) => {
+    cpSync(resolve(assetsDir, filePath), resolve(rootDir, 'public/imgs', filePath), { recursive: true });
+  });
+
   await vite.ssrLoadModule('/src/server.ts');
 };
 

bin/prerender.ts

@@ -1,11 +1,6 @@
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
+import { resolve } from 'node:path';
 import { createServer as createViteServer } from 'vite';
 
-import { createRequestByUrl } from '../src/helpers/requestHelper';
-
-const rootDir = process.cwd();
-
 const prerender = async (): Promise<void> => {
   const baseUrl = process.env.BASE_URL || '/';
   const vite = await createViteServer({
@@ -16,40 +11,11 @@ const prerender = async (): Promise<void> => {
   });
 
   try {
-    const { render } = await vite.ssrLoadModule('/src/entry-server.tsx');
-    const { getLinksAndScripts } = await vite.ssrLoadModule('/src/helpers/ssrHelper.ts');
-
-    const { getI18nInstanceByLang, getUrlsByLang } = await vite.ssrLoadModule('/src/helpers/prerenderHelper.ts');
-    const urlsByLang = getUrlsByLang({ baseUrl });
-    const { links, scripts } = getLinksAndScripts({
-      dirname: resolve(rootDir, 'dist'),
-      baseUrl: process.env.BASE_URL,
+    const { generateHtmlFiles } = await vite.ssrLoadModule('/src/helpers/prerenderHelper.ts');
+    generateHtmlFiles({
+      rootDir: resolve(process.cwd(), 'dist'),
+      baseUrl,
     });
-
-    for (const { lang, url } of urlsByLang) {
-      const i18n = getI18nInstanceByLang(lang);
-      const html = await render({
-        request: createRequestByUrl({ url }),
-        i18n,
-        links,
-        scripts,
-      });
-
-      const is404 = /\/404/.test(url);
-      const filePath = resolve(
-        rootDir,
-        'dist/public',
-        is404 ? '404.html' : `${url.length > 1 ? `${url.substring(1)}/` : ''}index.html`
-      ).replace(baseUrl, '/');
-
-      const dirPath = dirname(filePath);
-      if (!existsSync(dirPath)) {
-        mkdirSync(dirPath, { recursive: true });
-      }
-      writeFileSync(filePath, html, 'utf8');
-    }
-
-    console.log('🦖🖨 Your static site is ready to deploy from dist');
   } catch (e) {
     console.error(e);
   } finally {

package.json

@@ -4,12 +4,11 @@
   "type": "module",
   "scripts": {
     "postinstall": "husky install",
-    "prepare": "yarn ts-node bin/prepare",
     "ts-node": "ts-node -r dotenv/config",
     "validate-and-format-markdown": "yarn ts-node bin/validateAndFormatMarkdown",
     "indexation:algolia": "yarn ts-node bin/indexationAlgolia",
     "build": "yarn ts-node bin/build",
-    "prerender": "yarn prepare && yarn build && yarn ts-node bin/prerender",
+    "prerender": "yarn build && yarn ts-node bin/prerender",
     "start:dev": "yarn ts-node bin/dev",
     "start:prod": "NODE_ENV=production node dist/server",
     "start:static": "npx serv --path dist/public",
@@ -32,8 +31,8 @@
     "node": ">= 16.0"
   },
   "dependencies": {
-    "@eleven-labs/design-system": "^0.5.4",
-    "@remix-run/router": "^1.3.2",
+    "@eleven-labs/design-system": "^0.6.0",
+    "@remix-run/router": "^1.5.0",
     "algoliasearch": "^4.14.3",
     "classnames": "^2.3.2",
     "cross-fetch": "^3.1.5",
@@ -48,32 +47,26 @@
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-i18next": "^12.1.5",
-    "react-markdown": "^8.0.5",
-    "react-router-dom": "^6.8.1",
-    "react-syntax-highlighter": "^15.5.0",
-    "rehype-raw": "^6.1.1",
-    "rehype-rewrite": "^3.0.6",
+    "react-router-dom": "^6.10.0",
     "serve-static": "^1.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@elevenlabs/eslint-config": "^0.0.1",
-    "@storybook/addon-actions": "^7.0.0-beta.48",
-    "@storybook/addon-essentials": "^7.0.0-beta.48",
-    "@storybook/addon-interactions": "^7.0.0-beta.48",
-    "@storybook/addon-links": "^7.0.0-beta.48",
-    "@storybook/react": "^7.0.0-beta.48",
-    "@storybook/react-vite": "^7.0.0-beta.48",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-vite": "^7.0.2",
+    "@storybook/testing-library": "^0.1.0",
     "@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",
@@ -82,22 +75,29 @@
     "dotenv": "^16.0.3",
     "eslint": "^8.27.0",
     "feed": "^4.2.2",
+    "glob": "^9.3.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",
+    "rehype-raw": "^6.1.1",
+    "rehype-react": "^7.1.2",
+    "rehype-rewrite": "^3.0.6",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
+    "rollup-plugin-visualizer": "^5.9.0",
     "sanitize-html": "^2.10.0",
     "sass": "^1.58.1",
-    "storybook": "^7.0.0-beta.48",
+    "storybook": "^7.0.2",
     "stylelint": "^15.2.0",
     "stylelint-config-standard-scss": "^7.0.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
+    "unified": "^10.1.2",
     "vite": "^4.1.1",
     "vite-tsconfig-paths": "^4.0.5",
     "yup": "^0.32.11"