From 56a97b1ae518d18a085dcdd347047ee92c041462 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sat, 19 Oct 2024 15:19:20 +0330
Subject: [PATCH] openGraph image creator added

---
 src/app/(routes)/(website)/layout.tsx         |  3 +-
 src/app/(routes)/(website)/page.tsx           |  4 +--
 src/app/(routes)/blog/categories/page.tsx     |  6 ++++
 .../blog/filtered-posts/[filter]/page.tsx     |  9 +++++
 src/app/(routes)/blog/layout.tsx              |  2 +-
 src/app/(routes)/og-image/route.tsx           | 33 +++++++++++++++++++
 6 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(routes)/og-image/route.tsx

diff --git a/src/app/(routes)/(website)/layout.tsx b/src/app/(routes)/(website)/layout.tsx
index a400698..71ab4b2 100644
--- a/src/app/(routes)/(website)/layout.tsx
+++ b/src/app/(routes)/(website)/layout.tsx
@@ -13,7 +13,8 @@ export const metadata: Metadata = {
       template: "%s | parsa aghayi",
       default: "parsa aghayi",
     },
-    description: "parsa aghayi personal website",
+    description: "parsa aghayi's personal website",
+    images: ["/og-image?text=parsa aghayi's personal website"],
   },
 };
 
diff --git a/src/app/(routes)/(website)/page.tsx b/src/app/(routes)/(website)/page.tsx
index 965ab35..ecfc9f8 100644
--- a/src/app/(routes)/(website)/page.tsx
+++ b/src/app/(routes)/(website)/page.tsx
@@ -13,9 +13,9 @@ export const metadata: Metadata = {
   description:
     "Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;)",
   openGraph: {
-    title: "parsa aghayi's personal website openGraph title",
+    title: "parsa aghayi's personal website",
     description:
-      "Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;) openGraph description",
+      "Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;)",
     images: ["/images/profile.png"],
   },
 };
diff --git a/src/app/(routes)/blog/categories/page.tsx b/src/app/(routes)/blog/categories/page.tsx
index 4faff67..6aa550f 100644
--- a/src/app/(routes)/blog/categories/page.tsx
+++ b/src/app/(routes)/blog/categories/page.tsx
@@ -13,6 +13,12 @@ export const metadata: Metadata = {
   title: "All Categories List",
   description:
     "Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.",
+  openGraph: {
+    title: "All Categories List",
+    description:
+      "Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.",
+    images: ["/og-image?text=All Categories List"],
+  },
 };
 
 export default async function Categories({ searchParams }: categoryPropsType) {
diff --git a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
index 184096a..a1e2f76 100644
--- a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
+++ b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
@@ -15,6 +15,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: "",
     description: "",
+    images: ["/og-image?text=filtered posts"],
   },
 };
 
@@ -37,6 +38,9 @@ export default async function FilteredPosts({
         ? (metadata.openGraph.description =
             "New Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.")
         : "";
+      metadata.openGraph
+        ? (metadata.openGraph.images = ["/og-image?text=All New Posts List"])
+        : [];
       break;
     case "popular":
       filteredPostApiUrl = "/posts?sort_field=views&sort_direction=desc";
@@ -50,6 +54,11 @@ export default async function FilteredPosts({
         ? (metadata.openGraph.description =
             "Popular Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.")
         : "";
+      metadata.openGraph
+        ? (metadata.openGraph.images = [
+            "/og-image?text=All Popular Posts List",
+          ])
+        : [];
       break;
     default:
       // code block
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index bf1221f..84c2b8d 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
       default: "parsa aghayi's blog",
     },
     description: "parsa aghayi personal blog",
-    images: ["/images/favicons/blog-icon.png"],
+    images: ["/og-image?text=parsa aghayi's personal blog"],
   },
 };
 
diff --git a/src/app/(routes)/og-image/route.tsx b/src/app/(routes)/og-image/route.tsx
new file mode 100644
index 0000000..9d28433
--- /dev/null
+++ b/src/app/(routes)/og-image/route.tsx
@@ -0,0 +1,33 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const text = searchParams.get("text") || "Hello world!";
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 128,
+          background: "rgb(110 100 260)",
+          color: "white",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          textAlign: "center",
+          alignItems: "center",
+          justifyContent: "center",
+          textTransform: "capitalize",
+        }}
+      >
+        {text}
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 1200,
+    },
+  );
+}