Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 16:51:38 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-09-05 11:37:21 +00:00
committed by Mythie
parent 57ff77b920
commit 794e575ae9
4 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web/src/pages/api/share-og/index.tsx → apps/web/src/app/(share)/share/[shareId]/opengraph-image.tsx
View File

@ -1,30 +1,38 @@
import { ImageResponse, NextRequest } from 'next/server';
import { ImageResponse } from 'next/server';
export const config = {
runtime: 'edge',
};
export const 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 size = {
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,
height: 630,
...size,
fonts: [
{
name: 'Caveat',

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

@ -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>
);
}