Updated Vercel OG to latest + added fallback img (#8057)

* Updated Vercel OG to latest so we can add a fallback image — and added this fallback image to the screenshot og image. * Updated vercel/og in web package as well. * Updated yarn.lock with auth dependencies * Upgraded next to latest to fix next image throwing weird bad response errors. * Revert "Upgraded next to latest to fix next image throwing weird bad response errors." This reverts commit 4e9d97dbe5ebe682b905ce41f88197915e19647d. * Added content type headers to og image api response. --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
2023-04-03 16:06:02 +02:00
parent db4449d849
commit 99dba73d0b
4 changed files with 103 additions and 15 deletions
@@ -65,7 +65,7 @@
    "@types/turndown": "^5.0.1",
    "@vercel/edge-config": "^0.1.1",
    "@vercel/edge-functions-ui": "^0.2.1",
-    "@vercel/og": "^0.0.21",
+    "@vercel/og": "^0.5.0",
    "accept-language-parser": "^1.5.0",
    "async": "^3.2.4",
    "bcryptjs": "^2.4.3",
@@ -88,7 +88,7 @@ export default async function handler(req: NextApiRequest) {
        ogConfig
      ) as { body: Buffer };

-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
    }
    case "app": {
      const { name, description, slug } = appSchema.parse({
@@ -101,7 +101,7 @@ export default async function handler(req: NextApiRequest) {
        body: Buffer;
      };

-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
    }

    case "generic": {
@@ -115,7 +115,7 @@ export default async function handler(req: NextApiRequest) {
        body: Buffer;
      };

-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
    }

    default:
@@ -28,6 +28,10 @@ export interface GenericImageProps {

 export interface ScreenshotImageProps {
  image: string;
+  /**
+   * Fallback image to use if the image prop fails to load.
+   */
+  fallbackImage: string;
 }

 interface WrapperProps {
@@ -242,17 +246,19 @@ export const Generic = ({ title, description }: GenericImageProps) => (
  </Wrapper>
 );

-export const ScreenShot = ({ image }: ScreenshotImageProps) => (
+export const ScreenShot = ({ image, fallbackImage }: ScreenshotImageProps) => (
  <Wrapper rotateBackground>
-    <div tw="h-full w-full flex flex-col justify-center items-center">
-      <img
-        src={image}
-        width="1024"
-        height="576"
-        alt="screenshot"
-        tw="rounded-2xl mt-[140px] object-cover"
-        style={{ boxShadow: "0 0 45px -3px rgba(0,0,0,.3)" }}
-      />
+    <div tw="relative h-full w-full flex flex-col justify-center items-center">
+      <div tw="relative mt-[140px] flex rounded-2xl" style={{ boxShadow: "0 0 45px -3px rgba(0,0,0,.3)" }}>
+        <img
+          src={fallbackImage}
+          tw="absolute inset-0 rounded-2xl"
+          width="1024"
+          height="576"
+          alt="screenshot"
+        />
+        <img src={image} width="1024" height="576" tw="rounded-2xl" alt="screenshot" />
+      </div>
    </div>
  </Wrapper>
 );
@@ -4888,7 +4888,7 @@ __metadata:
    "@types/uuid": 8.3.1
    "@vercel/edge-config": ^0.1.1
    "@vercel/edge-functions-ui": ^0.2.1
-    "@vercel/og": ^0.0.21
+    "@vercel/og": ^0.5.0
    accept-language-parser: ^1.5.0
    async: ^3.2.4
    autoprefixer: ^10.4.12
@@ -9747,6 +9747,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@resvg/resvg-wasm@npm:2.4.1":
+  version: 2.4.1
+  resolution: "@resvg/resvg-wasm@npm:2.4.1"
+  checksum: 855aa1e5f1b228b9d2fe87e5d12b628c64b43a513fb67cd78b2eb447684d6b0861543a77ff8b878b21bf89b048ffeff73267685967d9f20cb8ef2c350dac5c81
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-inject@npm:^4.0.0":
  version: 4.0.4
  resolution: "@rollup/plugin-inject@npm:4.0.4"
@@ -13535,6 +13542,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@vercel/og@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "@vercel/og@npm:0.5.0"
+  dependencies:
+    "@resvg/resvg-wasm": 2.4.1
+    satori: 0.4.4
+    yoga-wasm-web: 0.3.3
+  checksum: bf6a361ad7f29fc32c04692fd19162f7b6c1dea9fa0f30bd601d810c853997c27f95e8e4e376dbf217bcf510e67e9f745db945426404e58f1806ae776604431d
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:1.3.2":
  version: 1.3.2
  resolution: "@vitejs/plugin-react@npm:1.3.2"
@@ -15699,6 +15717,13 @@ __metadata:
  languageName: node
  linkType: hard

+"base64-js@npm:0.0.8":
+  version: 0.0.8
+  resolution: "base64-js@npm:0.0.8"
+  checksum: e95d2fa4b9000789fedd1e1ebac7830a70f5b1c06c72b2cf7862a48335af5d42229c0deda5085b2c8e403e479b612a55cd682bd4438838980d07cfc21c91e750
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.0.2, base64-js@npm:^1.1.2, base64-js@npm:^1.3.0, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
  version: 1.5.1
  resolution: "base64-js@npm:1.5.1"
@@ -26739,6 +26764,16 @@ __metadata:
  languageName: node
  linkType: hard

+"linebreak@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "linebreak@npm:1.1.0"
+  dependencies:
+    base64-js: 0.0.8
+    unicode-trie: ^2.0.0
+  checksum: 65cb66900b4b60d99bb761fb4143d8673ad5dd57dd850fcd921fe425a5a8e3c4416ebee76a68058a90d88b5033a50b210f522558a7e0c7d95ca907b5a2b52520
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
  version: 1.2.4
  resolution: "lines-and-columns@npm:1.2.4"
@@ -30618,6 +30653,13 @@ __metadata:
  languageName: node
  linkType: hard

+"pako@npm:^0.2.5":
+  version: 0.2.9
+  resolution: "pako@npm:0.2.9"
+  checksum: 055f9487cd57fbb78df84315873bbdd089ba286f3499daed47d2effdc6253e981f5db6898c23486de76d4a781559f890d643bd3a49f70f1b4a18019c98aa5125
+  languageName: node
+  linkType: hard
+
 "pako@npm:^1.0.5, pako@npm:~1.0.5":
  version: 1.0.11
  resolution: "pako@npm:1.0.11"
@@ -34581,6 +34623,22 @@ __metadata:
  languageName: node
  linkType: hard

+"satori@npm:0.4.4":
+  version: 0.4.4
+  resolution: "satori@npm:0.4.4"
+  dependencies:
+    "@shuding/opentype.js": 1.4.0-beta.0
+    css-background-parser: ^0.1.0
+    css-box-shadow: 1.0.0-3
+    css-to-react-native: ^3.0.0
+    emoji-regex: ^10.2.1
+    linebreak: ^1.1.0
+    postcss-value-parser: ^4.2.0
+    yoga-wasm-web: ^0.3.3
+  checksum: 749f3afd10e21d40a720d24186042f741072e8f7ed567541672da35302eac63f31e53da4f7d6db7da87e82dbb79146ac03fc9d29b5fd1ec7b199bd5d4701cb57
+  languageName: node
+  linkType: hard
+
 "sax@npm:>=0.6.0, sax@npm:^1.2.4":
  version: 1.2.4
  resolution: "sax@npm:1.2.4"
@@ -36990,6 +37048,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tiny-inflate@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "tiny-inflate@npm:1.0.3"
+  checksum: 4086a1f8938dafa4a20c63b099aeb47bf8fef5aca991bf4ea4b35dd2684fa52363b2c19b3e76660311e7613cb7c4f063bc48751b9bdf9555e498d997c30bc2d6
+  languageName: node
+  linkType: hard
+
 "tiny-invariant@npm:^1.2.0":
  version: 1.2.0
  resolution: "tiny-invariant@npm:1.2.0"
@@ -38030,6 +38095,16 @@ __metadata:
  languageName: node
  linkType: hard

+"unicode-trie@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "unicode-trie@npm:2.0.0"
+  dependencies:
+    pako: ^0.2.5
+    tiny-inflate: ^1.0.0
+  checksum: 19e637ce20953ec1fbfa9087abef4746a50352679b833be27924e4ba7ad753cc4073b74263747ccfccb5e38b30b17468cbb96f361eb49903ff8602396280b5a4
+  languageName: node
+  linkType: hard
+
 "unified@npm:9.2.0":
  version: 9.2.0
  resolution: "unified@npm:9.2.0"
@@ -40414,6 +40489,13 @@ __metadata:
  languageName: node
  linkType: hard

+"yoga-wasm-web@npm:0.3.3, yoga-wasm-web@npm:^0.3.3":
+  version: 0.3.3
+  resolution: "yoga-wasm-web@npm:0.3.3"
+  checksum: ff65192a832975ff531a1b6eae160c2da859c250feaa58b6389b684f9b48f53fda849a7ea49d12d241198309e671e6bd230a44e7155af9573d7843ac48831c98
+  languageName: node
+  linkType: hard
+
 "yup@npm:^0.32.9":
  version: 0.32.11
  resolution: "yup@npm:0.32.11"