Compare commits

..

7 Commits

Author SHA1 Message Date
Mythie
7722e63e1b fix: tidying broke generation 2023-08-31 12:08:53 +10:00
Mythie
14fd0eb906 fix: tidy code and expect jsx errors 2023-08-30 18:41:37 +10:00
Lucas Smith
af6c62d0bf Merge branch 'feat/refresh' into feat/blog-og-image 2023-08-30 18:28:21 +10:00
Mythie
5d4a07bcc5 fix: center align heading 2023-08-30 15:41:29 +10:00
Mythie
d28bb5de99 fix: use nextjs opengraph-image component 2023-08-30 15:32:44 +10:00
Ephraim Atta-Duncan
1edfe9548d feat: add og image to blog posts 2023-08-30 02:50:02 +00:00
Ephraim Atta-Duncan
2f78922421 feat: add blog og image 2023-08-30 02:33:22 +00:00
7 changed files with 82 additions and 9 deletions

View File

@@ -0,0 +1,76 @@
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;
}
// The long urls are needed for a compiler optimisation on the Next.js side, lifting this up
// to a constant will break og image generation.
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(
(
<div tw="relative h-full w-full flex flex-col items-center justify-center text-center">
{/* @ts-expect-error Lack of typing from ImageResponse */}
<img src={backgroundImage} alt="og-background" tw="absolute inset-0 w-full h-full" />
{/* @ts-expect-error Lack of typing from ImageResponse */}
<img src={logoImage} alt="logo" tw="h-8" />
<h1 tw="mt-8 text-6xl text-center flex items-center justify-center w-full max-w-[800px] font-bold text-center mx-auto">
{blogPost.title}
</h1>
<p tw="font-normal">Written by {blogPost.authorName}</p>
</div>
),
{
...size,
fonts: [
{
name: 'Inter',
data: interRegular,
style: 'normal',
weight: 400,
},
{
name: 'Inter',
data: interBold,
style: 'normal',
weight: 700,
},
],
},
);
}

View File

@@ -17,7 +17,9 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
notFound();
}
return { title: `Documenso - ${blogPost.title}` };
return {
title: `Documenso - ${blogPost.title}`,
};
};
const mdxComponents: MDXComponents = {

Binary file not shown.

After

Width:  |  Height:  |  Size: 896 KiB

Binary file not shown.

Binary file not shown.

View File

@@ -130,13 +130,7 @@ export const EditDocumentForm = ({
},
});
toast({
title: 'Document sent',
description: 'Your document has been sent successfully.',
duration: 5000,
});
router.push('/dashboard');
router.refresh();
} catch (err) {
console.error(err);

3
package-lock.json generated
View File

@@ -16319,6 +16319,7 @@
}
},
"packages/ee": {
"name": "@documenso/ee",
"version": "1.0.0",
"license": "COMMERCIAL",
"dependencies": {
@@ -16362,7 +16363,7 @@
"packages/lib": {
"name": "@documenso/lib",
"version": "1.0.0",
"license": "SEE LICENSE IN LICENSE",
"license": "MIT",
"dependencies": {
"@documenso/email": "*",
"@documenso/prisma": "*",