diff --git a/apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx b/apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx new file mode 100644 index 000000000..5e0e88a28 --- /dev/null +++ b/apps/marketing/src/app/(marketing)/blog/[post]/opengraph-image.tsx @@ -0,0 +1,75 @@ +import { ImageResponse } from 'next/server'; + +import { allBlogPosts } from 'contentlayer/generated'; + +export const runtime = 'edge'; + +export const size = { + width: 1200, + height: 630, +}; + +export const contentType = 'image/png'; + +type BlogPostOpenGraphImageProps = { + params: { post: string }; +}; + +export default async function BlogPostOpenGraphImage({ params }: BlogPostOpenGraphImageProps) { + const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`); + + if (!blogPost) { + return null; + } + + const [interBold, interRegular, backgroundImage, logoImage] = await Promise.all([ + fetch(new URL('./../../../../assets/inter-bold.ttf', import.meta.url)).then(async (res) => + res.arrayBuffer(), + ), + fetch(new URL('./../../../../assets/inter-regular.ttf', import.meta.url)).then(async (res) => + res.arrayBuffer(), + ), + fetch(new URL('./../../../../assets/background-blog-og.png', import.meta.url)).then( + async (res) => res.arrayBuffer(), + ), + fetch(new URL('./../../../../../public/logo.png', import.meta.url)).then(async (res) => + res.arrayBuffer(), + ), + ]); + + return new ImageResponse( + ( +
+ og-background + + logo + +

+ {blogPost.title} +

+ +

Written by {blogPost.authorName}

+
+ ), + { + ...size, + fonts: [ + { + name: 'Inter', + data: interRegular, + style: 'normal', + weight: 400, + }, + { + name: 'Inter', + data: interBold, + style: 'normal', + weight: 700, + }, + ], + }, + ); +} diff --git a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx index 7cfe0b61a..7edf29ec2 100644 --- a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx +++ b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx @@ -19,9 +19,6 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => { return { title: `Documenso - ${blogPost.title}`, - openGraph: { - images: [`/api/blog-og?title=${blogPost.title}`], - }, }; }; diff --git a/apps/marketing/src/assets/Inter-Bold.ttf b/apps/marketing/src/assets/inter-bold.ttf similarity index 100% rename from apps/marketing/src/assets/Inter-Bold.ttf rename to apps/marketing/src/assets/inter-bold.ttf diff --git a/apps/marketing/src/assets/inter-regular.ttf b/apps/marketing/src/assets/inter-regular.ttf new file mode 100644 index 000000000..8d4eebf20 Binary files /dev/null and b/apps/marketing/src/assets/inter-regular.ttf differ diff --git a/apps/marketing/src/pages/api/blog-og/index.tsx b/apps/marketing/src/pages/api/blog-og/index.tsx deleted file mode 100644 index d9fc573ae..000000000 --- a/apps/marketing/src/pages/api/blog-og/index.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { ImageResponse, NextRequest } from 'next/server'; - -export const config = { - runtime: 'edge', -}; - -export default async function handler(req: NextRequest) { - const { searchParams } = new URL(req.url); - const title = searchParams.get('title') || 'Document signing, finally open source.'; - - const [imageData, InterFontData] = await Promise.all([ - fetch(new URL('../../../assets/background-blog-og.png', import.meta.url)).then(async (res) => - res.arrayBuffer(), - ), - fetch(new URL('../../../assets/Inter-Bold.ttf', import.meta.url)).then(async (res) => - res.arrayBuffer(), - ), - ]); - - return new ImageResponse( - ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- {title} -

-
- ), - { - width: 1200, - height: 630, - fonts: [ - { - name: 'Inter', - data: InterFontData, - style: 'normal', - weight: 700, - }, - ], - }, - ); -}