From 96ea2d7a5f9ae61bb08e3cf746fc8d8fd5e400d3 Mon Sep 17 00:00:00 2001 From: Aman Kumar Bairagi <118182376+amanbairagi30@users.noreply.github.com> Date: Mon, 2 Dec 2024 21:16:42 +0530 Subject: [PATCH] feat: adds dynamic OG image (#1605) --- src/app/api/og/home/route.tsx | 141 ++++++++++++++++++++++++++++++++++ src/config/site-config.ts | 2 +- 2 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 src/app/api/og/home/route.tsx diff --git a/src/app/api/og/home/route.tsx b/src/app/api/og/home/route.tsx new file mode 100644 index 000000000..9f09e4ec3 --- /dev/null +++ b/src/app/api/og/home/route.tsx @@ -0,0 +1,141 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export async function GET() { + async function loadGoogleFont(font: string) { + const url = `https://fonts.googleapis.com/css2?family=${font}:wght@600&display=swap`; + const css = await (await fetch(url)).text(); + const resource = css.match( + /src: url\((.+)\) format\('(opentype|truetype)'\)/, + ); + + if (resource) { + const response = await fetch(resource[1]); + if (response.status == 200) { + return await response.arrayBuffer(); + } + } + + throw new Error('failed to load font data'); + } + + const fontData = await loadGoogleFont('Gabarito'); + + return new ImageResponse( + ( +
+
+ + + + +
+
+
+ +

100xDevs

+
+
+
+ + 100xDevs,{' '} + + because +
+ 10x ain't enough! +
+ +
+ Take your development skills from 0 to 100 and join the 100xdevs + community +
+
+ Enroll Now + + + + +
+
+ +
+
+
+ ), + { + width: 1200, + height: 630, + fonts: [ + { + name: 'main', + data: fontData, + style: 'normal', + weight: 400, + }, + ], + }, + ); +} diff --git a/src/config/site-config.ts b/src/config/site-config.ts index d2f7e8f86..41626b35d 100644 --- a/src/config/site-config.ts +++ b/src/config/site-config.ts @@ -5,7 +5,7 @@ const TITLE = const DESCRIPTION = 'This is an initiative by Harkirat Singh to personally mentor folks in the field of Programming. Join him in his first course on Full Stack development with a heavy focus on Open source projects to learn programming practically.'; -const PREVIEW_IMAGE_URL = 'https://app.100xdevs/banner-img.jpeg'; +const PREVIEW_IMAGE_URL = 'https://app.100xdevs.com/api/og/home'; const ALT_TITLE = '100xdevs - Take your programming skills from 0 to 100 with Harkirat Singh'; const BASE_URL = 'https://app.100xdevs.com';