chore: replace the og function with vercel/og package (#3660)

* chore: replace the og function with vercel/og pacakge

* chore: allow lodash in function

* chore: add some debugging information

* chore: test if it is data?

* chore: is it these urls

* chore: put it all back

* chore: deleting the old open graph stuff

* chore: generate website data files for linting

* chore: not needed

* chore: missing env variable

* chore: missing baseid

.github/workflows/on_deployment_status_cypress.yml

@@ -45,10 +45,13 @@ jobs:
       - name: Percy Batch ID
         run: echo "${{ needs.percy-batch-id.outputs.result }}"
 
+      - name: Print ref
+        run: echo "${{ github.ref }}"
+
       # Run cypress on merge to main aong with VRT to create our new baelines
       - name: Cypress run with site VRT on main
         uses: cypress-io/github-action@v4
-        if: github.ref == 'refs/heads/main'
+        if: contains(github.ref, 'main')
         with:
           record: true
           parallel: true

.github/workflows/on_pull_request.yml

@@ -62,6 +62,8 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+      AIRTABLE_APIKEY: ${{ secrets.AIRTABLE_APIKEY }}
+      AIRTABLE_BASEID: ${{ secrets.AIRTABLE_BASEID }}
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4
@@ -104,6 +106,9 @@ jobs:
       - name: Build packages
         run: yarn build
 
+      - name: Generate website data files
+        run: yarn workspace @twilio-paste/website fetch:data
+
       - name: Run eslint
         run: yarn lint
 

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports.biome": true
+    "source.organizeImports.biome": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {

internal-docs/engineering/doc-site/open-graph-image-preview-function.md

@@ -8,65 +8,21 @@ When sharing a link to a component page on the internet, we supply a dynamically
 
 ## The way it works
 
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant S as Slack
-    participant W as Website
-    participant N as Netlify Function
-    U->>S: I would like to share this URL
-    note right of U: https://paste.twilio.design/components/button
-    S->>W: Do you have any open graph tags?
-    note right of S: https://paste.twilio.design/components/button
-    W-->>S: og:image url
-    note right of S: <meta property="og:image" content={openGraphServiceUrl} />
-    S->>N: Can I have the image pls?
-    note right of S: http://paste.twilio.design/.netlify/functions/opengraph/components/button
-    loop
-        N->>N: Figure out which component and build request params for opengraph page
-    end
-    note right of N: components/button
-    N->>W: Can I have this page pls?
-    note right of W: https://paste.twilio.design/opengraph/?path=components/button
-    W-->>N: Here you go
-    loop Screenshot
-        N->>N: Screenshot the page
-    end
-    N-->>S: The image you requested
-    S-->>U: Lovely preview of URL you shared
-```
+We use [`@vercel/og`](https://vercel.com/docs/functions/edge-functions/og-image-generation) to generate the image via an edge function, `/api/og-image`.
 
 ## Local development
 
-We use [Netlify CLI](https://docs.netlify.com/cli/get-started/) to run our websites locally. This allows us to run the website and [Netlify functions](https://docs.netlify.com/functions/overview/) in parallel, and Netlify CLI proxy's both to a single port. This makes it feel like to two things are running on the same domain.
-
 To start, run:
 
 ```
 yarn start:website
 ```
 
-Once both the website and netlify functions have started running, both will be available on `localhost:8888`.
-
-Once running, the function can be reached at `localhost:8888/.netlify/functions/opengraph/` for testing.
-
-Whilst running, changes to the function code will restart the function with the new code changes applied. (Hot reloading for Node, using Nodemon) This is all handled for us using the Netlify CLI.
-
-The code that generates the opengraph preview page lives in:
-
-- packages/paste-website/functions/opengraph.ts (the function code)
-- packages/paste-website/src/pages/opengraph/index.tsx (the code for the UI that is screenshotted)
-- packages/paste-website/stories/Opengraph.stories.tsx (a story to aid in local development for the UI)
+Once the website have started running, you can hit the function at `/api/og-image`.
 
 ## Technology / Stack
 
-Netlify Functions are just AWS Lambdas in disguise. They take an incoming request and you can return a response.
-
-Inside our function we use `@sparticuz/chromium` for grabbing the Chrome Browser binary for AWS Lambdas, and puppeteer to run and control the browser.
-
-Using Puppeteer, we instruct Chrome to visit a url on the website, which renders a dynamic page based on the parameters we give it. We then tell puppeteer to use Chrome to take a screenshot of the page, and that image is then returned as the response of the function.
-
-The page on the website renders a box 800px x 420px. The information is display for the component being requested comes from Airtable, via the JS client.
+The images rendered is 800px x 420px. The information is display for the component being requested comes from Airtable, via the JS client.
 
 [Winston](https://github.com/winstonjs/winston) does our logging, so we can observe the function running in real time in the Netlify UI.
 

packages/paste-website/package.json

@@ -15,6 +15,7 @@
     "tsc:watch": "yarn tsc --watch",
     "lint": "NEXT_TELEMETRY_DISABLED=1 next lint",
     "analyze": "ANALYZE=true yarn build",
+    "fetch:data": "node -r dotenv/config scripts/fetch-data.mjs",
     "generate:embeddings": "tsx -r dotenv/config ./scripts/search/generate-embeddings",
     "generate:embeddings:refresh": "tsx -r dotenv/config ./scripts/search/generate-embeddings --refresh"
   },
@@ -136,6 +137,7 @@
     "@types/gtag.js": "^0.0.12",
     "@types/lodash": "^4.14.182",
     "@types/mdx-js__react": "^1.5.5",
+    "@vercel/og": "^0.5.20",
     "ai": "^2.2.13",
     "airtable": "^0.11.6",
     "color": "^3.1.2",