modify gh actions to generate video previews for 3d visuals

.github/workflows/generate-previews.yml

@@ -0,0 +1,43 @@
+name: Generate Previews
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    # To use Remote Caching, uncomment the next lines and follow the steps below.
+    env:
+      TURBO_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      TURBO_TEAM: ${{ vars.VERCEL_TEAM }}
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8.6.6
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Generate previews
+        run: pnpm scripts:generate-previews
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: Previews
+          path: public/
+          retention-days: 30

apps/portfolio/package.json

@@ -21,16 +21,12 @@
     "@react-three/rapier-addons": "^3.0.1",
     "@vercel/analytics": "^1.0.1",
     "@vercel/edge-config": "^0.2.1",
-    "chrome-aws-lambda": "^10.1.0",
     "classnames": "^2.3.2",
     "database": "workspace:*",
     "graphql": "^16.7.1",
     "graphql-request": "^6.1.0",
     "lodash.clamp": "^4.0.3",
     "next": "^13.4.9",
-    "puppeteer": "^20.8.1",
-    "puppeteer-core": "20.8.1",
-    "puppeteer-screen-recorder": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loading-skeleton": "^3.3.1",

package.json

@@ -9,7 +9,8 @@
     "dev:essential": "pnpm dev --filter=!./packages/storybook",
     "lint": "turbo lint",
     "clean": "turbo clean",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "scripts:generate-previews": "turbo --filter=./packages/scripts scripts:generate-previews"
   },
   "devDependencies": {
     "eslint": "^7.32.0",
@@ -18,5 +19,5 @@
     "prettier-plugin-tailwindcss": "^0.1.11",
     "turbo": "latest"
   },
-  "packageManager": "pnpm@7.15.0"
+  "packageManager": "pnpm@8.6.6"
 }

packages/scripts/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "scripts",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "scripts:generate-previews": "ts-node ./src/generate-previews.ts"
+  },
+  "dependencies": {
+    "puppeteer": "^20.8.1",
+    "puppeteer-screen-recorder": "^2.1.2",
+    "ts-node": "^10.9.1"
+  },
+  "devDependencies": {
+    "eslint": "^8.44.0",
+    "eslint-config-custom": "workspace:*",
+    "tsconfig": "workspace:*",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6"
+  }
+}

apps/portfolio/src/browser-automation/generate-3d-previews.ts → packages/scripts/src/generate-previews.ts

@@ -1,30 +1,18 @@
-import chrome from "chrome-aws-lambda";
 import puppeteer from "puppeteer";
 import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
 
 // todo: add more pages
-const PAGE_NUMBERS = ["1"] as const;
+const PAGE_NUMBERS = ["3"] as const;
 
 const waitFor = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
-async function getPuppeteerOptions() {
-  // Local development
-  // return {
-  //   headless: false
-  // }
+const VIDEO_DURATION = 3000;
 
-  return {
-    args: chrome.args,
-    executablePath: await chrome.executablePath,
-    headless: chrome.headless,
-  };
-}
-
-async function generate3DPreviews() {
-  const options = await getPuppeteerOptions();
-  const browser = await puppeteer.launch(options);
+async function generatePreviews() {
+  const browser = await puppeteer.launch({ headless: false });
   const page = await browser.newPage();
+
   const recorder = new PuppeteerScreenRecorder(page, {
     followNewTab: true,
     fps: 60,
@@ -54,12 +42,15 @@ async function generate3DPreviews() {
     const path = `./public/visualizers/${pageNumber}.mp4`;
     await recorder.start(path);
 
-    await waitFor(3000);
+    await waitFor(VIDEO_DURATION);
 
     await recorder.stop();
   }
 
   await browser.close();
 }
 
-export default generate3DPreviews;
+// run logic
+(async () => {
+  await generatePreviews();
+})();