setup og generation

contentlayer.config.ts

@@ -13,29 +13,13 @@ import remarkGfm from "remark-gfm";
 // import remarkCustomHeaderId from 'remark-custom-header-id';
 import type { ShikiTransformer } from "shiki";
 
-const CoverProperties = defineNestedType(() => ({
-	name: "CoverProperties",
-	fields: {
-		image: { type: "image", required: true },
-		alt: { type: "string", required: false },
-		size: { type: "enum", options: ["small", "large"], required: true },
-	},
-}));
-
 const TocProperties = defineNestedType(() => ({
 	name: "TocProperties",
 	fields: {
 		order: { type: "number", required: true },
 	},
 }));
 
-const OGPProperties = defineNestedType(() => ({
-	name: "OGPProperties",
-	fields: {
-		image: { type: "image", required: true },
-	},
-}));
-
 const postSlug = (path: string) => {
 	const withoutPrefix = path.split("posts/").splice(-1)[0];
 	return withoutPrefix.split("blog/").splice(-1)[0];
@@ -57,8 +41,6 @@ export const Post = defineDocumentType(() => ({
 		datePublished: { type: "date", required: true },
 		description: { type: "string", required: true },
 		tags: { type: "list", of: { type: "string" }, required: false },
-		cover: { type: "nested", of: CoverProperties, required: true },
-		og: { type: "nested", of: OGPProperties, required: false },
 		toc: { type: "nested", of: TocProperties, required: false },
 	},
 	computedFields: {
@@ -77,13 +59,6 @@ export const Post = defineDocumentType(() => ({
 				return `https://github.com/vahor/vahor.fr/edit/main/src/content/${filePath}`;
 			},
 		},
-		coverUrl: {
-			type: "string",
-			resolve: (post) => {
-				const relativeFilePath = post.cover.image.relativeFilePath;
-				return relativeFilePath.replace(/^.*public\//, "/");
-			},
-		},
 		fullTags: {
 			type: "list",
 			of: { type: "string" },
@@ -95,14 +70,6 @@ export const Post = defineDocumentType(() => ({
 				return [type, ...tags, year.toString()];
 			},
 		},
-		ogImageUrl: {
-			type: "string",
-			resolve: (post) => {
-				if (!post.og?.image) return "";
-				const relativeFilePath = post.og.image.relativeFilePath;
-				return relativeFilePath.replace(/^.*public\//, "/");
-			},
-		},
 		pageType: {
 			type: "string",
 			resolve: (post) => {

src/app/blog/[[...slug]]/page.tsx → src/app/blog/[...slug]/page.tsx

@@ -1,5 +1,6 @@
 import Hr from "@/components/Hr";
 import { JsonLd } from "@/components/jsonld/profile-page";
+import { BASE_URL } from "@/lib/constants";
 import { articlePage } from "@/lib/jsonld";
 import { Mdx } from "@/lib/mdx";
 import { absolutePath } from "@/lib/utils";
@@ -35,22 +36,31 @@ export const generateMetadata = async (
 	if (!post) notFound();
 
 	const parentMetadata = await parent;
+
+	const ogImages = [
+		{
+			alt: post.title,
+			type: "image/png",
+			width: 1200,
+			height: 630,
+			url: `${BASE_URL}/og/${post.slug}`,
+		},
+	];
+
 	return {
 		title: post.title,
 		description: post.description,
 		openGraph: {
 			...parentMetadata.openGraph,
 			type: "article",
 			url: absolutePath(post.url),
-			images: post.ogImageUrl || parentMetadata.openGraph?.images,
+			images: ogImages,
 		},
 		twitter: {
 			...parentMetadata.twitter,
-			// @ts-expect-error weird typing
-			card: post.ogImageUrl
-				? "summary_large_image"
-				: parentMetadata.twitter?.card,
-			images: post.ogImageUrl || parentMetadata.twitter?.images,
+			// @ts-expect-error wrong type
+			card: "summary_large_image",
+			images: ogImages,
 		},
 	};
 };
@@ -75,7 +85,7 @@ export default async function PostPage(props: PageProps) {
 					headline: post.title,
 					datePublished: post.datePublished,
 					dateModified: post.dateModified,
-					image: post.ogImageUrl,
+					image: `${BASE_URL}/og/${post.slug}`,
 					description: post.description,
 				})}
 			/>

src/app/og/[...slug]/route.tsx

@@ -0,0 +1,50 @@
+import { BASE_URL } from "@/lib/constants";
+import { type BlogPageProps, getPost } from "@/lib/posts";
+import { ImageResponse } from "next/og";
+import type { NextRequest } from "next/server";
+
+export const size = {
+	width: 1200,
+	height: 630,
+};
+export const contentType = "image/png";
+export const dynamic = "force-static";
+
+export async function GET(_: NextRequest, params: BlogPageProps) {
+	const post = getPost(params);
+	if (!post) {
+		return new Response("Not found", { status: 404 });
+	}
+
+	// Font
+	const interSemiBold = fetch(
+		`${BASE_URL}/fonts/Inter-SemiBold.ttf`,
+	).then((res) => res.arrayBuffer())
+
+	return new ImageResponse(
+		<div
+			style={{
+				fontSize: 48,
+				background: "white",
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+			}}
+		>
+			{post.title}
+		</div>,
+		{
+			...size,
+			fonts: [
+				{
+					name: 'Inter',
+					data: await interSemiBold,
+					style: 'normal',
+					weight: 400,
+				},
+			]
+		},
+	);
+}

src/app/page.tsx

@@ -1,9 +1,12 @@
+import { JsonLd } from "@/components/jsonld/profile-page";
+import { author } from "@/lib/jsonld";
 import { allPosts } from "contentlayer/generated";
 import Link from "next/link";
 
 export default function Home() {
 	return (
 		<div>
+			<JsonLd jsonLd={author} />
 			<ul>
 				{allPosts.map((post) => (
 					<li key={post._raw.flattenedPath}>

src/content/posts/blog/automated-deployment-using-webhooks.mdx

@@ -2,11 +2,6 @@
 title: Deploiement automatique à l'aide de webhooks 
 description: Première version d'un déploiment automatique. 
 datePublished: 2022-05-13
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
-og: 
-  image: ../../../../public/tmp.jpg
 ---
 
 # Installation

src/content/posts/blog/keyboard.mdx

@@ -2,9 +2,6 @@
 title: Keyboard Layout
 description: Plugin minecraft pour simplifier la gestion des schématics 
 datePublished: 2022-07-19
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
 ---
 
 <UrlPreview url="https://configure.zsa.io/moonlander/layouts/55xWn/latest/0"/>

src/content/posts/project/game-of-life.mdx

@@ -2,9 +2,6 @@
 title: Game of Life 
 description: Plugin minecraft pour simplifier la gestion des schématics 
 datePublished: 2022-07-23
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
 ---
 
 <UrlPreview url="https://github.com/Vahor/game-of-life"/>

src/content/posts/project/mazercraft.mdx

@@ -2,9 +2,6 @@
 title: Mazercraft 
 description: Serveur mini-jeu Minecraft ayant pour but d'accueillir un grand nombre de joueurs sur des jeux inédits.
 datePublished: 2021-09-18
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
 ---
 
 # Mazercraft

src/content/posts/project/pedaki/index.mdx

@@ -2,9 +2,6 @@
 title: Pedaki Index
 description: pedaki
 datePublished: 2024-04-21
-cover: 
-    image: ../../../../../public/tmp.jpg
-    size: large
 ---
 
 <Toc prefix="posts/project/pedaki"/>

src/content/posts/project/pedaki/pedaki.mdx

@@ -2,9 +2,6 @@
 title: Pedaki
 description: pedaki
 datePublished: 2024-04-21
-cover: 
-    image: ../../../../../public/tmp.jpg
-    size: large
 ---
 
 <Toc prefix="posts/project/pedaki"/>

src/content/posts/project/simple-schematics.mdx

@@ -2,9 +2,6 @@
 title: Simple Schematics
 description: Plugin minecraft pour simplifier la gestion des schématics 
 datePublished: 2022-02-26
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
 tags:
  - minecraft
 ---

src/content/posts/project/sudoku.mdx

@@ -2,9 +2,6 @@
 title: Sudoku 
 description: Plugin minecraft pour simplifier la gestion des schématics 
 datePublished: 2022-07-16
-cover: 
-    image: ../../../../public/tmp.jpg
-    size: large
 ---
 
 <UrlPreview url="https://sudoku.vahor.fr/"/>

src/lib/posts.ts

@@ -0,0 +1,11 @@
+import { allPosts } from "contentlayer/generated";
+
+export interface BlogPageProps {
+	params: { slug: string[] };
+}
+
+export const getPost = ({ params }: BlogPageProps) => {
+	if (!params.slug) return null;
+	const slug = params.slug.join("/");
+	return allPosts.find((post) => post.slug === slug);
+};