fix: update og card

apps/web/src/app/(share)/share/[shareId]/redirect.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import React from 'react';
+import { useEffect } from 'react';
 
 export default function Redirect() {
-  React.useEffect(() => {
+  useEffect(() => {
     const timer = setTimeout(() => {
       window.location.href = 'https://www.documenso.com';
     }, 3000);
+
     return () => clearTimeout(timer);
   }, []);
 

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -38,10 +38,10 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }),
+    viewedDocument({ token }).catch(() => null),
   ]);
 
-  if (!document || !document.documentData || !recipient) {
+  if (!document || !recipient) {
     return notFound();
   }
 

apps/web/src/pages/api/share-og/index.tsx

@@ -1,47 +1,71 @@
 import { ImageResponse, NextRequest } from 'next/server';
 
+import { cn } from '@documenso/ui/lib/utils';
+
 export const config = {
   runtime: 'edge',
 };
 
+const CARD_OFFSET_TOP = 152;
+const CARD_OFFSET_LEFT = 350;
+const CARD_WIDTH = 500;
+const CARD_HEIGHT = 250;
+
 export default async function handler(req: NextRequest) {
   const { searchParams } = new URL(req.url);
+
   const signature = searchParams.get('signature') || 'Timur';
 
-  const [imageData, CaveatFontData, InterFontData] = await Promise.all([
-    fetch(new URL('../../../assets/background-pattern-og.png', import.meta.url)).then((res) =>
+  const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
+    fetch(new URL('./../../../assets/inter-semibold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('../../../assets/Caveat-Regular.ttf', import.meta.url)).then((res) =>
+    fetch(new URL('./../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('../../../assets/Inter-Regular.ttf', import.meta.url)).then((res) =>
+    fetch(new URL('./../../../assets/caveat-regular.ttf', import.meta.url)).then(async (res) =>
+      res.arrayBuffer(),
+    ),
+    fetch(new URL('./../../../assets/og-share-frame.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
 
   return new ImageResponse(
     (
-      <div
+      <div tw="relative flex h-full w-full">
+        {/* @ts-expect-error Lack of typing from ImageResponse */}
+        <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
+
+        <p
+          tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
           style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: `url('data:image/png;base64,${Buffer.from(
-            imageData as unknown as string,
-          ).toString('base64')}')`,
-          backgroundSize: '1200px 630px',
-          backgroundPositionY: '0%',
+            fontFamily: 'Caveat',
+            fontSize: `${Math.max(Math.min((CARD_WIDTH * 1.5) / signature.length, 80), 36)}px`,
+            top: `${CARD_OFFSET_TOP}px`,
+            left: `${CARD_OFFSET_LEFT}px`,
+            width: `${CARD_WIDTH}px`,
+            height: `${CARD_HEIGHT}px`,
           }}
         >
-        <div tw="flex px-20 py-12 bg-gray-100 rounded-md border-solid border-4 border-zinc-200 shadow-md">
-          <div tw="text-[#64748B99] text-7xl">{signature}</div>
-        </div>
-        <div tw="text-black text-3xl my-8 text-gray-600" style={{ fontFamily: 'Inter' }}>
-          You signed with Documenso
+          {signature}
+        </p>
+
+        <div
+          tw="absolute absolute flex flex-col items-center justify-center pt-2.5 w-full"
+          style={{
+            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+          }}
+        >
+          <h2
+            tw="text-2xl text-slate-900/60"
+            style={{
+              fontFamily: 'Inter',
+              fontWeight: 600,
+            }}
+          >
+            I just signed with Documenso
+          </h2>
         </div>
       </div>
     ),
@@ -51,13 +75,20 @@ export default async function handler(req: NextRequest) {
       fonts: [
         {
           name: 'Caveat',
-          data: CaveatFontData,
+          data: caveatRegular,
           style: 'italic',
         },
         {
           name: 'Inter',
-          data: InterFontData,
+          data: interRegular,
           style: 'normal',
+          weight: 400,
+        },
+        {
+          name: 'Inter',
+          data: interSemiBold,
+          style: 'normal',
+          weight: 600,
         },
       ],
     },