feat: add experimental og-image generation

Author: TheComputerM

bun.lockb

@@ -17,6 +17,7 @@
     "@astrojs/solid-js": "^5.0.4",
     "@fontsource-variable/jetbrains-mono": "^5.1.2",
     "astro": "^5.1.8",
+    "astro-og-canvas": "^0.5.6",
     "graphql-request": "^7.1.2",
     "solid-js": "^1.9.4"
   },

package.json

@@ -4,7 +4,7 @@ title: TheComputerM
 
 ## Hey there
 
-I am Mudit Somani aka TheComputerM. I'm currently a student at [BITS Pilani](https://www.bits-pilani.ac.in/hyderabad/) studying computer science. I love to code and learn how various technologies function. I occasionally blog about things which I find interesting and/or helpful. I read books and play badminton in my spare time.
+I am Mudit Somani aka TheComputerM. I'm currently a student at [BITS Pilani](https://www.bits-pilani.ac.in/hyderabad/) studying computer science. I love to code and learn how various technologies function. I occasionally [blog](/blog) about things which I find interesting and/or helpful. I read books and play badminton in my spare time.
 
 ## About Me
 

src/content/pages/index.md

@@ -0,0 +1,27 @@
+import { OGImageRoute } from "astro-og-canvas";
+
+const pages = {
+	blog: {
+		title: "Blog",
+		description: "The latest blog posts from Astro",
+	},
+};
+
+
+export const { getStaticPaths, GET } = OGImageRoute({
+	param: "route",
+	pages: pages,
+	getImageOptions(path, page) {
+		console.log(path);
+		return {
+			title: page.title,
+			description: page.description,
+      fonts: ["https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/latin-500-normal.ttf"],
+      font: {
+        title: {
+          families: ["IBM Plex Mono"],
+        }
+      }
+		};
+	},
+});