opengraph fix

app/[lang]/projects/[id]/page.tsx

@@ -1,11 +1,11 @@
 import { Metadata, ResolvingMetadata } from "next"
+import { headers } from "next/headers"
 import Image from "next/image"
 import Link from "next/link"
 import { projects } from "@/data/projects"
 import GithubVector from "@/public/social-medias/github-fill.svg"
 import GlobalVector from "@/public/social-medias/global-line.svg"
 import TwitterVector from "@/public/social-medias/twitter-fill.svg"
-import { Divide } from "lucide-react"
 
 import { ProjectInterface } from "@/lib/types"
 import { Markdown } from "@/components/ui/markdown"
@@ -27,6 +27,7 @@ export interface ProjectProps {
   lang: LocaleTypes
 }
 
+declare const window: any
 export async function generateMetadata(
   { params }: PageProps,
   parent: ResolvingMetadata
@@ -35,17 +36,40 @@ export async function generateMetadata(
     (project) => String(project.id) === params.id
   )[0]
 
-  const imageUrl = currProject.image
-    ? `/project-banners/${currProject.image}`
-    : "/og-image.png"
+  const isProduction = process.env.NODE_ENV === "production"
+
+  const BASE_URL =
+    process.env.NODE_ENV === "production"
+      ? "https://pse.dev"
+      : typeof window !== "undefined"
+      ? window?.location?.origin
+      : ""
+
+  const hasProjectImage = currProject?.image?.length > 0
+
+  const productionImage: string = isProduction
+    ? new URL(
+        hasProjectImage
+          ? `/project-banners/${currProject.image}`
+          : `/og-image.png`,
+        BASE_URL
+      ).toString()
+    : ""
+
+  const devImage: string = !isProduction
+    ? hasProjectImage
+      ? `/project-banners/${currProject.image}`
+      : "./og-image.png"
+    : "./og-image.png"
 
   return {
     title: currProject.name,
     description: currProject.tldr,
     openGraph: {
+      url: BASE_URL,
       images: [
         {
-          url: imageUrl,
+          url: isProduction ? productionImage : devImage,
           width: 1200,
           height: 630,
         },