add visual regression testing with Lost Pixel

.github/workflows/vrt.yml

@@ -0,0 +1,32 @@
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Lost Pixel
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build docs
+        run: npm run clean & npm run build
+
+      - name: Start docs
+        run: npm run serve &
+
+      - name: Generate Sitemap
+        run: npx lost-pixel page-sitemap-gen http://172.17.0.1:3000/sitemap.xml "./lost-pixel-pages.json"
+
+      - name: Lost Pixel
+        uses: lost-pixel/[email protected]
+        env:
+          LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}

lostpixel.config.ts

@@ -0,0 +1,43 @@
+import { CustomProjectConfig } from 'lost-pixel';
+
+export const config: CustomProjectConfig = {
+  pageShots: {
+    pages: [],
+    pagesJsonUrl: './lost-pixel-pages.json',
+    baseUrl: 'http://172.17.0.1:3000',
+    breakpoints: [640, 1024],
+  },
+  lostPixelProjectId: 'clb5ek3mm1772001qqg7yban38',
+  apiKey: process.env.LOST_PIXEL_API_KEY,
+  compareConcurrency: 10,
+  shotConcurrency: 10,
+  threshold: 10,
+  beforeScreenshot: async (page) => {
+    await page.addStyleTag({
+      content: `iframe {
+          visibility: hidden;
+        }
+
+        /* do not show underline animation */
+        #toc-holder  a {
+          background-size: 0 !important;
+          background-image: none !important;
+        }
+        /* skip image display within section */
+        section img {
+          visibility: hidden;
+        }
+
+        /* hide cookie banner */
+        #onetrust-consent-sdk {
+          display: none;
+        }
+
+        /* reset menu item alignment */
+        #sidebar-holder li a {
+          vertical-align: baseline;
+        }
+        `,
+    })
+  }
+};