feat: move opengraph-image to next.js 13 implementation

apps/web/src/app/(share)/share/[shareId]/opengraph-image.tsx

@@ -1,30 +1,38 @@
-import { ImageResponse, NextRequest } from 'next/server';
+import { ImageResponse } from 'next/server';
 
-export const config = {
+export const runtime = 'edge';
-  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 size = {
-  const { searchParams } = new URL(req.url);
+  width: 1200,
+  height: 630,
+};
 
-  const signature = searchParams.get('signature') || 'Timur';
+type SharePageOpenGraphImageProps = {
+  params: { shareId: string };
+};
+
+export default async function Image({ params: { shareId } }: SharePageOpenGraphImageProps) {
+  // Cannot use trpc here and prisma does not work in the browser so I cannot fetch the client
+  // const { data } = trpc.share.get.useQuery({ shareId });
+
+  const signature = shareId;
 
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
-    fetch(new URL('./../../../assets/inter-semibold.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('./../../../../assets/inter-semibold.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
+    fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
-    fetch(new URL('./../../../assets/caveat-regular.ttf', import.meta.url)).then(async (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) =>
+    fetch(new URL('./../../../../assets/og-share-frame.png', import.meta.url)).then(async (res) =>
       res.arrayBuffer(),
     ),
   ]);
@@ -68,8 +76,7 @@ export default async function handler(req: NextRequest) {
       </div>
     ),
     {
-      width: 1200,
+      ...size,
-      height: 630,
       fonts: [
         {
           name: 'Caveat',

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

@@ -5,7 +5,7 @@ import { notFound } from 'next/navigation';
 
 import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
 
-import Redirect from './redirect';
+// import Redirect from './redirect';
 
 type MetadataProps = {
   params: { shareId: string };
@@ -18,9 +18,6 @@ export async function generateMetadata({ params }: MetadataProps): Promise<Metad
 
   return {
     title: 'Documenso - Share',
-    openGraph: {
-      images: [`/api/share-og?signature=${signature}`],
-    },
   };
 }
 
@@ -45,7 +42,7 @@ export default async function SharePage({ params: { shareId } }: SharePageProps)
     <div className="flex h-screen flex-col items-center justify-center">
       <h1 className="my-2 text-4xl font-semibold">Share Page</h1>
       <p className="my-2 text-xl">Redirecting...</p>
-      <Redirect />
+      {/* <Redirect /> */}
     </div>
   );
 }

packages/trpc/server/share-router/router.ts

@@ -1,12 +1,13 @@
 import { TRPCError } from '@trpc/server';
 
 import { createSharingId } from '@documenso/lib/server-only/share/create-share-id';
+import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
 
 import { procedure, router } from '../trpc';
-import { ZShareLinkSchema } from './schema';
+import { ZShareLinkCreateSchema, ZShareLinkGetSchema } from './schema';
 
 export const shareRouter = router({
-  create: procedure.input(ZShareLinkSchema).mutation(async ({ input }) => {
+  create: procedure.input(ZShareLinkCreateSchema).mutation(async ({ input }) => {
     try {
       const { documentId, recipientId } = input;
 
@@ -14,6 +15,20 @@ export const shareRouter = router({
     } catch (err) {
       console.error(err);
 
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to create a sharing link.',
+      });
+    }
+  }),
+  get: procedure.input(ZShareLinkGetSchema).query(async ({ input }) => {
+    try {
+      const { shareId } = input;
+
+      return await getSharingId({ shareId });
+    } catch (err) {
+      console.error(err);
+
       throw new TRPCError({
         code: 'BAD_REQUEST',
         message: 'We were unable to create a sharing link.',

packages/trpc/server/share-router/schema.ts

@@ -1,8 +1,13 @@
 import { z } from 'zod';
 
-export const ZShareLinkSchema = z.object({
+export const ZShareLinkCreateSchema = z.object({
   documentId: z.number(),
   recipientId: z.number(),
 });
 
-export type ZShareLinkSchema = z.infer<typeof ZShareLinkSchema>;
+export const ZShareLinkGetSchema = z.object({
+  shareId: z.string(),
+});
+
+export type ZShareLinkCreateSchema = z.infer<typeof ZShareLinkCreateSchema>;
+export type ZShareLinkGetSchema = z.infer<typeof ZShareLinkGetSchema>;