From 86214f2d64c156753fe4a5660e4a4363aa65bf21 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:31:18 +0900 Subject: [PATCH 1/9] opengraph fix --- app/[lang]/projects/[id]/page.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index 9d915266..429e237d 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -5,7 +5,6 @@ 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" @@ -35,9 +34,13 @@ export async function generateMetadata( (project) => String(project.id) === params.id )[0] - const imageUrl = currProject.image - ? `/project-banners/${currProject.image}` - : "/og-image.png" + const BASE_URL = + process.env.NODE_ENV === "production" ? new URL("https://pse.dev") : "." + + const imageUrl = + currProject?.image?.length > 0 + ? `${BASE_URL}/${currProject.image}` + : `${BASE_URL}/og-image.png` return { title: currProject.name, From 9c2a97359a05a19001f2914045a3e83b31ac0e3e Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:36:34 +0900 Subject: [PATCH 2/9] fix url --- app/[lang]/projects/[id]/page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index 429e237d..62b1b1d7 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -34,12 +34,13 @@ export async function generateMetadata( (project) => String(project.id) === params.id )[0] + const WEBSITE_URL = process.env.VERCEL_URL || "https://pse.dev" const BASE_URL = - process.env.NODE_ENV === "production" ? new URL("https://pse.dev") : "." + process.env.NODE_ENV === "production" ? new URL(WEBSITE_URL) : "." const imageUrl = currProject?.image?.length > 0 - ? `${BASE_URL}/${currProject.image}` + ? `${BASE_URL}${currProject.image}` : `${BASE_URL}/og-image.png` return { From 69db95d22cf2806f867f46a8f14c4e7dd1529d38 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:37:21 +0900 Subject: [PATCH 3/9] fix url --- app/[lang]/projects/[id]/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index 62b1b1d7..bdf4dc1c 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -35,8 +35,7 @@ export async function generateMetadata( )[0] const WEBSITE_URL = process.env.VERCEL_URL || "https://pse.dev" - const BASE_URL = - process.env.NODE_ENV === "production" ? new URL(WEBSITE_URL) : "." + const BASE_URL = process.env.NODE_ENV === "production" ? WEBSITE_URL : "." const imageUrl = currProject?.image?.length > 0 From 9fd59f87e55996910ff710fb615c4dbe46507027 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:44:19 +0900 Subject: [PATCH 4/9] fix url --- app/[lang]/projects/[id]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index bdf4dc1c..e02c457d 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -39,7 +39,7 @@ export async function generateMetadata( const imageUrl = currProject?.image?.length > 0 - ? `${BASE_URL}${currProject.image}` + ? `${BASE_URL}/${currProject.image}` : `${BASE_URL}/og-image.png` return { From 4d33c981390e702f587de2ee589d2c0486022c15 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:48:17 +0900 Subject: [PATCH 5/9] use pse.dev on production --- app/[lang]/projects/[id]/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index e02c457d..e05851ab 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -34,8 +34,8 @@ export async function generateMetadata( (project) => String(project.id) === params.id )[0] - const WEBSITE_URL = process.env.VERCEL_URL || "https://pse.dev" - const BASE_URL = process.env.NODE_ENV === "production" ? WEBSITE_URL : "." + const BASE_URL = + process.env.NODE_ENV === "production" ? "https://pse.dev" : "." const imageUrl = currProject?.image?.length > 0 From 14e4a1b15728dc73f45bd326d03b97b7b144fa95 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 15:51:40 +0900 Subject: [PATCH 6/9] prevent double slash on image --- app/[lang]/projects/[id]/page.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index e05851ab..aee3cbc4 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -37,10 +37,13 @@ export async function generateMetadata( const BASE_URL = process.env.NODE_ENV === "production" ? "https://pse.dev" : "." + const customImage = `${BASE_URL}/${currProject.image}`.replace( + "//pse.dev//", + "//pse.dev/" + ) // prevent double slashes + const imageUrl = - currProject?.image?.length > 0 - ? `${BASE_URL}/${currProject.image}` - : `${BASE_URL}/og-image.png` + currProject?.image?.length > 0 ? customImage : `${BASE_URL}/og-image.png` return { title: currProject.name, From 747429b9cbaa75229e782743864da29a76f6c257 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 17:43:04 +0900 Subject: [PATCH 7/9] fix base url without URL --- app/[lang]/projects/[id]/page.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index aee3cbc4..ef67aee0 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -37,10 +37,7 @@ export async function generateMetadata( const BASE_URL = process.env.NODE_ENV === "production" ? "https://pse.dev" : "." - const customImage = `${BASE_URL}/${currProject.image}`.replace( - "//pse.dev//", - "//pse.dev/" - ) // prevent double slashes + const customImage = `${BASE_URL}/${currProject.image}` const imageUrl = currProject?.image?.length > 0 ? customImage : `${BASE_URL}/og-image.png` From fe8eb2e5753a6935107ffaba1c33bfe29adf110d Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 17:46:48 +0900 Subject: [PATCH 8/9] fix path --- app/[lang]/projects/[id]/page.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index ef67aee0..69aeab28 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -34,10 +34,12 @@ export async function generateMetadata( (project) => String(project.id) === params.id )[0] + const isProduction = process.env.NODE_ENV === "production" + const BASE_URL = process.env.NODE_ENV === "production" ? "https://pse.dev" : "." - const customImage = `${BASE_URL}/${currProject.image}` + const customImage = `/${currProject.image}` const imageUrl = currProject?.image?.length > 0 ? customImage : `${BASE_URL}/og-image.png` @@ -46,6 +48,7 @@ export async function generateMetadata( title: currProject.name, description: currProject.tldr, openGraph: { + url: isProduction ? BASE_URL : undefined, images: [ { url: imageUrl, From 1dc8531feb93796fabe898af7b257a1bee59c6ee Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 7 May 2024 18:11:11 +0900 Subject: [PATCH 9/9] show correct open graph image --- app/[lang]/projects/[id]/page.tsx | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/app/[lang]/projects/[id]/page.tsx b/app/[lang]/projects/[id]/page.tsx index 69aeab28..1232f06d 100644 --- a/app/[lang]/projects/[id]/page.tsx +++ b/app/[lang]/projects/[id]/page.tsx @@ -1,4 +1,5 @@ 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" @@ -26,6 +27,7 @@ export interface ProjectProps { lang: LocaleTypes } +declare const window: any export async function generateMetadata( { params }: PageProps, parent: ResolvingMetadata @@ -37,21 +39,37 @@ export async function generateMetadata( const isProduction = process.env.NODE_ENV === "production" const BASE_URL = - process.env.NODE_ENV === "production" ? "https://pse.dev" : "." + process.env.NODE_ENV === "production" + ? "https://pse.dev" + : typeof window !== "undefined" + ? window?.location?.origin + : "" - const customImage = `/${currProject.image}` + const hasProjectImage = currProject?.image?.length > 0 - const imageUrl = - currProject?.image?.length > 0 ? customImage : `${BASE_URL}/og-image.png` + 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: isProduction ? BASE_URL : undefined, + url: BASE_URL, images: [ { - url: imageUrl, + url: isProduction ? productionImage : devImage, width: 1200, height: 630, },