├── .astro
    └── types.d.ts
├── .gitignore
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
    ├── favicon.svg
    └── fonts
    │   └── Optimistic_Display_Bold.ttf
├── src
    ├── content
    │   ├── config.ts
    │   └── post
    │   │   └── hello.md
    ├── env.d.ts
    ├── layouts
    │   └── BlogLayout.astro
    └── pages
    │   ├── blog
    │       ├── [slug].og.ts
    │       ├── post1.md
    │       └── post2.md
    │   ├── index.astro
    │   ├── index.og.ts
    │   └── post
    │       ├── [slug].astro
    │       └── [slug].og.ts
└── tsconfig.json


/.astro/types.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'astro:content' {
 2 | 	export { z } from 'astro/zod';
 3 | 	export type CollectionEntry<C extends keyof typeof entryMap> =
 4 | 		(typeof entryMap)[C][keyof (typeof entryMap)[C]] & Render;
 5 | 
 6 | 	type BaseSchemaWithoutEffects =
 7 | 		| import('astro/zod').AnyZodObject
 8 | 		| import('astro/zod').ZodUnion<import('astro/zod').AnyZodObject[]>
 9 | 		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
10 | 		| import('astro/zod').ZodIntersection<
11 | 				import('astro/zod').AnyZodObject,
12 | 				import('astro/zod').AnyZodObject
13 | 		  >;
14 | 
15 | 	type BaseSchema =
16 | 		| BaseSchemaWithoutEffects
17 | 		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
18 | 
19 | 	type BaseCollectionConfig<S extends BaseSchema> = {
20 | 		schema?: S;
21 | 		slug?: (entry: {
22 | 			id: CollectionEntry<keyof typeof entryMap>['id'];
23 | 			defaultSlug: string;
24 | 			collection: string;
25 | 			body: string;
26 | 			data: import('astro/zod').infer<S>;
27 | 		}) => string | Promise<string>;
28 | 	};
29 | 	export function defineCollection<S extends BaseSchema>(
30 | 		input: BaseCollectionConfig<S>
31 | 	): BaseCollectionConfig<S>;
32 | 
33 | 	type EntryMapKeys = keyof typeof entryMap;
34 | 	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
35 | 	type ValidEntrySlug<C extends EntryMapKeys> = AllValuesOf<(typeof entryMap)[C]>['slug'];
36 | 
37 | 	export function getEntryBySlug<
38 | 		C extends keyof typeof entryMap,
39 | 		E extends ValidEntrySlug<C> | (string & {})
40 | 	>(
41 | 		collection: C,
42 | 		// Note that this has to accept a regular string too, for SSR
43 | 		entrySlug: E
44 | 	): E extends ValidEntrySlug<C>
45 | 		? Promise<CollectionEntry<C>>
46 | 		: Promise<CollectionEntry<C> | undefined>;
47 | 	export function getCollection<C extends keyof typeof entryMap, E extends CollectionEntry<C>>(
48 | 		collection: C,
49 | 		filter?: (entry: CollectionEntry<C>) => entry is E
50 | 	): Promise<E[]>;
51 | 	export function getCollection<C extends keyof typeof entryMap>(
52 | 		collection: C,
53 | 		filter?: (entry: CollectionEntry<C>) => unknown
54 | 	): Promise<CollectionEntry<C>[]>;
55 | 
56 | 	type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
57 | 		Required<ContentConfig['collections'][C]>['schema']
58 | 	>;
59 | 
60 | 	type Render = {
61 | 		render(): Promise<{
62 | 			Content: import('astro').MarkdownInstance<{}>['Content'];
63 | 			headings: import('astro').MarkdownHeading[];
64 | 			remarkPluginFrontmatter: Record<string, any>;
65 | 		}>;
66 | 	};
67 | 
68 | 	const entryMap: {
69 | 		"post": {
70 | "hello.md": {
71 |   id: "hello.md",
72 |   slug: "hello",
73 |   body: string,
74 |   collection: "post",
75 |   data: InferEntrySchema<"post">
76 | },
77 | },
78 | 
79 | 	};
80 | 
81 | 	type ContentConfig = typeof import("../src/content/config");
82 | }
83 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | .output/
 4 | 
 5 | # dependencies
 6 | node_modules/
 7 | 
 8 | # logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | 
15 | # environment variables
16 | .env
17 | .env.production
18 | 
19 | # macOS-specific files
20 | .DS_Store
21 | .vercel
22 | .astro


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vercel OG Image in Astro
 2 | Generates OG Image using [satori](https://github.com/vercel/satori) served from [Astro Server Endpoints](https://docs.astro.build/en/core-concepts/endpoints/#server-endpoints-api-routes). 
 3 | Requires SSR Mode, See `output: 'server'` in `astro.config.mjs`. Deployed using [Vercel adapter for Astro](https://docs.astro.build/en/guides/integrations-guide/vercel/).
 4 | 
 5 | Blog post: https://rumaan.dev/blog/open-graph-images-using-satori
 6 | 
 7 | Deployed URL: https://astro-vercel-og.vercel.app/
 8 | 
 9 | More info: [Vercel OG Image Generation](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
10 | 
11 | ![OG Image Generated from Vercel OG](https://astro-vercel-og.vercel.app/index.og)
12 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | 
 3 | // https://astro.build/config
 4 | import vercel from "@astrojs/vercel/serverless";
 5 | 
 6 | // https://astro.build/config
 7 | export default defineConfig({
 8 |   output: "server",
 9 |   adapter: vercel({
10 |     includeFiles: ["./public/fonts/Optimistic_Display_Bold.ttf"]
11 |   })
12 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-vercel-og",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "astro dev",
 8 |     "start": "astro dev",
 9 |     "build": "astro build",
10 |     "preview": "astro preview",
11 |     "astro": "astro"
12 |   },
13 |   "dependencies": {
14 |     "@astrojs/vercel": "~3.0.1",
15 |     "astro": "~2.0.0",
16 |     "satori": "^0.4.2",
17 |     "satori-html": "^0.3.2",
18 |     "sharp": "^0.31.3"
19 |   },
20 |   "devDependencies": {
21 |     "@types/node": "^18.15.0",
22 |     "@types/sharp": "^0.31.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
 2 |   <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
 3 |   <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
 4 |   <defs>
 5 |     <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
 6 |       <stop stop-color="#000"/>
 7 |       <stop offset="1" stop-color="#000" stop-opacity="0"/>
 8 |     </linearGradient>
 9 |   </defs>
10 | 	<style>
11 |     @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
12 |   </style>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/public/fonts/Optimistic_Display_Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rumaan/astro-vercel-og/0355a837c847d47c4f2c49eaee7c48246bb0ec49/public/fonts/Optimistic_Display_Bold.ttf


--------------------------------------------------------------------------------
/src/content/config.ts:
--------------------------------------------------------------------------------
 1 | import { defineCollection, z } from "astro:content";
 2 | 
 3 | const postsCollection = defineCollection({
 4 |   schema: z.object({
 5 |     title: z.string(),
 6 |     description: z.string()
 7 |     // ...
 8 |   }),
 9 | });
10 | 
11 | export const collections = {
12 |   'post': postsCollection
13 | }
14 | 


--------------------------------------------------------------------------------
/src/content/post/hello.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hello
3 | description: Hello Description Here
4 | ---
5 | 
6 | # Howdy from Astro Collections!!


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/src/layouts/BlogLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const { frontmatter, url } = Astro.props;
 3 | 
 4 | const ogUrl = `https://astro-vercel-og.vercel.app/${url}.og`;
 5 | ---
 6 | 
 7 | <head>
 8 |   <title>{frontmatter.title}</title>
 9 |   <meta charset="UTF-8" />
10 |   <meta name="generator" content={Astro.generator} />
11 |   <meta http-equiv="x-ua-compatible" content="ie=edge" />
12 |   <meta
13 |     name="viewport"
14 |     content="width=device-width, initial-scale=1, shrink-to-fit=no"
15 |   />
16 |   <meta name="theme-color" content="#171C1A" />
17 |   <meta name="color-scheme" content="dark" />
18 |   <meta property="og:image" content={ogUrl} />
19 |   <meta property="og:image:width" content="1200" />
20 |   <meta property="og:image:height" content="630" />
21 | </head>
22 | <main>
23 |   <h1>{frontmatter.title}</h1>
24 |   <a href={ogUrl} target="_blank">OG Url of this page</a>
25 |   <slot />
26 | </main>
27 | 


--------------------------------------------------------------------------------
/src/pages/blog/[slug].og.ts:
--------------------------------------------------------------------------------
 1 | import satori from "satori";
 2 | import { html } from "satori-html";
 3 | import { readFileSync } from "fs";
 4 | import type { APIRoute, MarkdownInstance } from "astro";
 5 | import sharp from "sharp";
 6 | import { basename } from "path";
 7 | 
 8 | export const get: APIRoute = async ({ params }) => {
 9 |   const { slug } = params;
10 |   // Find the slug in content dir
11 |   const posts: Record<string, () => Promise<any>> = import.meta.glob(
12 |     `./**/*.md`
13 |   );
14 | 
15 |   const postPaths = Object.entries(posts).map(([path, promise]) => ({
16 |     slug: basename(path).replace(".md", ""),
17 |     loadPost: promise,
18 |   }));
19 | 
20 |   const post = postPaths.find((p) => p.slug === String(slug));
21 |   let postTitle = `My Blog`; // Default title if post not found
22 |   if (post) {
23 |     const postData = (await post.loadPost()) as MarkdownInstance<
24 |       Record<string, any>
25 |     >;
26 |     postTitle = postData.frontmatter.title;
27 |   }
28 | 
29 |   const fontFilePath = `${process.cwd()}/public/fonts/Optimistic_Display_Bold.ttf`;
30 |   const fontFile = readFileSync(fontFilePath);
31 |   const markup = html(`<div
32 |     style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(45,26,84); font-size: 32px; font-weight: 600;"
33 |   >
34 |     <div
35 |       style="font-size: 70px; margin-top: 38px; display: flex; flex-direction: column; color: white;"
36 |     >
37 |       ${postTitle}
38 |     </div>
39 |   </div>`);
40 |   const svg = await satori(markup, {
41 |     width: 1200,
42 |     height: 630,
43 |     fonts: [
44 |       {
45 |         name: "Optimistic Display",
46 |         data: fontFile,
47 |         style: "normal",
48 |       },
49 |     ],
50 |   });
51 | 
52 |   const png = sharp(Buffer.from(svg)).png();
53 |   const response = await png.toBuffer();
54 | 
55 |   return new Response(response, {
56 |     status: 200,
57 |     headers: {
58 |       "Content-Type": "image/png",
59 |       "Cache-Control": "s-maxage=1, stale-while-revalidate=59",
60 |     },
61 |   });
62 | };
63 | 


--------------------------------------------------------------------------------
/src/pages/blog/post1.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Hello World"
3 | layout: "../../layouts/BlogLayout.astro"
4 | ---
5 | 
6 | Hello World content


--------------------------------------------------------------------------------
/src/pages/blog/post2.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Post 2
3 | layout: "../../layouts/BlogLayout.astro"
4 | ---
5 | 
6 | Hello from Post 2


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <title>Vercel Astro</title>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="generator" content={Astro.generator} />
 6 |     <meta http-equiv="x-ua-compatible" content="ie=edge" />
 7 |     <meta
 8 |       name="viewport"
 9 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
10 |     />
11 |     <meta name="theme-color" content="#171C1A" />
12 |     <meta name="color-scheme" content="dark" />
13 |     <meta
14 |       property="og:image"
15 |       content="https://astro-vercel-og.vercel.app/index.og"
16 |     />
17 |     <meta property="og:image:width" content="1200" />
18 |     <meta property="og:image:height" content="630" />
19 |   </head>
20 |   <body>
21 |     <h1>
22 |       Vercel Astro OG: <a href="/index.og">Check here</a>
23 |     </h1>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/pages/index.og.ts:
--------------------------------------------------------------------------------
 1 | import satori from "satori";
 2 | import { html } from "satori-html";
 3 | import { readFileSync } from "fs";
 4 | import type { APIRoute } from "astro";
 5 | import sharp from "sharp";
 6 | 
 7 | export const get: APIRoute = async () => {
 8 |   const fontFilePath = `${process.cwd()}/public/fonts/Optimistic_Display_Bold.ttf`;
 9 |   const fontFile = readFileSync(fontFilePath);
10 |   const markup = html(`<div
11 |     style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(45,26,84); font-size: 32px; font-weight: 600;"
12 |   >
13 |     <div
14 |       style="font-size: 70px; margin-top: 38px; display: flex; flex-direction: column; color: white;"
15 |     >
16 |       <span
17 |         >Hello from
18 |         <span style="margin-left:15ch;color: rgb(255,93,1);"
19 |           >Astro</span
20 |         ></span
21 |       >
22 |     </div>
23 |   </div>`);
24 |   const svg = await satori(markup, {
25 |     width: 1200,
26 |     height: 630,
27 |     fonts: [
28 |       {
29 |         name: "Optimistic Display",
30 |         data: fontFile,
31 |         style: "normal",
32 |       },
33 |     ],
34 |   });
35 | 
36 |   const png = sharp(Buffer.from(svg)).png();
37 |   const response = await png.toBuffer();
38 | 
39 |   return new Response(response, {
40 |     status: 200,
41 |     headers: {
42 |       "Content-Type": "image/png",
43 |       "Cache-Control": "s-maxage=1, stale-while-revalidate=59",
44 |     },
45 |   });
46 | };
47 | 


--------------------------------------------------------------------------------
/src/pages/post/[slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { getEntryBySlug } from "astro:content";
 3 | import BlogLayout from "../../layouts/BlogLayout.astro";
 4 | 
 5 | const { slug } = Astro.params;
 6 | 
 7 | const entry = await getEntryBySlug("post", slug!!);
 8 | if (!entry) {
 9 |   return Astro.redirect("/404");
10 | }
11 | 
12 | const { Content } = await entry.render();
13 | ---
14 | 
15 | <BlogLayout frontmatter={{ title: entry.data.title}} url={`post/${slug}`} >
16 |   <Content />
17 | </BlogLayout>
18 | 


--------------------------------------------------------------------------------
/src/pages/post/[slug].og.ts:
--------------------------------------------------------------------------------
 1 | import type { APIRoute } from "astro";
 2 | import { getEntryBySlug } from "astro:content";
 3 | import { readFileSync } from "node:fs";
 4 | import { html } from "satori-html";
 5 | import satori from "satori";
 6 | import sharp from "sharp";
 7 | 
 8 | export const get: APIRoute = async ({ params }) => {
 9 |   const { slug } = params;
10 | 
11 |   const post = await getEntryBySlug("post", slug!!);
12 |   const title = post?.data.title ?? "My Post";
13 | 
14 |   const fontFilePath = `${process.cwd()}/public/fonts/Optimistic_Display_Bold.ttf`;
15 |   const fontFile = readFileSync(fontFilePath);
16 | 
17 |   const markup = html(`<div
18 |     style="height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(45,26,84); font-size: 32px; font-weight: 600;"
19 |   >
20 |     <div
21 |       style="font-size: 70px; margin-top: 38px; display: flex; flex-direction: column; color: white;"
22 |     >
23 |       ${title}
24 |     </div>
25 |   </div>`);
26 |   const svg = await satori(markup, {
27 |     width: 1200,
28 |     height: 630,
29 |     fonts: [
30 |       {
31 |         name: "Optimistic Display",
32 |         data: fontFile,
33 |         style: "normal",
34 |       },
35 |     ],
36 |   });
37 |   const png = sharp(Buffer.from(svg)).png();
38 |   const response = await png.toBuffer();
39 | 
40 |   return new Response(response, {
41 |     status: 200,
42 |     headers: {
43 |       "Content-Type": "image/png",
44 |       "Cache-Control": "s-maxage=1, stale-while-revalidate=59",
45 |     },
46 |   });
47 | };
48 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict",
3 |   "compilerOptions": {
4 |     "strictNullChecks": true,
5 |     "allowJs": true
6 |   }
7 | }


--------------------------------------------------------------------------------