From d1b27854eac98a98a165e061e794fca30cebcdcc Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 13 Mar 2024 13:17:12 +0600
Subject: [PATCH] chore: add open graph images

---
 src/pages/[roadmapId]/index.astro             | 11 ++++++++--
 src/pages/backend/developer-skills.astro      | 21 ++++++++++++++-----
 src/pages/backend/languages.astro             | 15 +++++++++++--
 .../[bestPracticeId]/index.astro              |  9 ++++++++
 src/pages/guides/[guideId].astro              | 13 +++++++++++-
 5 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index e30851491..dd4766915 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -55,14 +55,21 @@ if (roadmapData.schema) {
 if (roadmapFAQs.length) {
   jsonLdSchema.push(generateFAQSchema(roadmapFAQs));
 }
+
+const ogImageUrl =
+  roadmapData?.seo?.ogImageUrl ||
+  `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams({
+    type: 'roadmap',
+    title: roadmapData.title,
+    description: roadmapData.description,
+  })}`;
 ---
 
 <BaseLayout
   permalink={`/${roadmapId}`}
   title={roadmapData?.seo?.title}
   briefTitle={roadmapData.briefTitle}
-  ogImageUrl={roadmapData?.seo?.ogImageUrl ||
-    'https://roadmap.sh/images/og-img.png'}
+  ogImageUrl={ogImageUrl}
   description={roadmapData.seo.description}
   keywords={roadmapData.seo.keywords}
   noIndex={roadmapData.isUpcoming}
diff --git a/src/pages/backend/developer-skills.astro b/src/pages/backend/developer-skills.astro
index 148a05762..924b5015d 100644
--- a/src/pages/backend/developer-skills.astro
+++ b/src/pages/backend/developer-skills.astro
@@ -7,14 +7,25 @@ import { getGuideById } from '../../lib/guide';
 const guideId = 'backend-developer-skills';
 const guide = await getGuideById(guideId);
 
-const { frontmatter: guideData } = guide;
+const { frontmatter: guideData, author } = guide!;
+
+const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams(
+  {
+    type: 'guide',
+    title: guideData.title,
+    description: guideData.description,
+    authorName: author.frontmatter?.name,
+    authorAvatar: author.frontmatter?.imageUrl || '',
+  },
+)}`;
 ---
 
 <BaseLayout
-title={guideData.seo.title}
-description={guideData.seo.description}
-permalink={`/backend/${guideId}`}
-canonicalUrl={guideData.canonicalUrl}
+  title={guideData.seo.title}
+  description={guideData.seo.description}
+  permalink={`/backend/${guideId}`}
+  canonicalUrl={guideData.canonicalUrl}
+  ogImageUrl={ogImageUrl}
 >
   <GuideHeader guide={guide} />
 
diff --git a/src/pages/backend/languages.astro b/src/pages/backend/languages.astro
index 95a4a5a20..fe33e326f 100644
--- a/src/pages/backend/languages.astro
+++ b/src/pages/backend/languages.astro
@@ -7,7 +7,17 @@ import { getGuideById } from '../../lib/guide';
 const guideId = 'backend-languages';
 const guide = await getGuideById('backend-languages');
 
-const { frontmatter: guideData } = guide;
+const { frontmatter: guideData, author } = guide!;
+
+const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams(
+  {
+    type: 'guide',
+    title: guideData.title,
+    description: guideData.description,
+    authorName: author.frontmatter?.name,
+    authorAvatar: author.frontmatter?.imageUrl || '',
+  },
+)}`;
 ---
 
 <BaseLayout
@@ -15,8 +25,9 @@ const { frontmatter: guideData } = guide;
   description={guideData.seo.description}
   permalink={`/backend/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
+  ogImageUrl={ogImageUrl}
 >
-  <GuideHeader guide={guide} />
+  <GuideHeader guide={guide!} />
 
   <div class='mx-auto max-w-[700px] py-5 sm:py-10'>
     <MarkdownFile>
diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro
index ede49870b..d54c9a384 100644
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@@ -52,12 +52,21 @@ if (bestPracticeData.schema) {
     }),
   );
 }
+
+const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams(
+  {
+    type: 'roadmap',
+    title: bestPracticeData.title,
+    description: bestPracticeData.description,
+  },
+)}`;
 ---
 
 <BaseLayout
   permalink={`/best-practices/${bestPracticeId}`}
   title={bestPracticeData?.seo?.title}
   briefTitle={bestPracticeData?.briefTitle}
+  ogImageUrl={ogImageUrl}
   description={bestPracticeData.seo.description}
   keywords={bestPracticeData.seo.keywords}
   noIndex={bestPracticeData.isUpcoming}
diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro
index 8962bbb97..e8b08301b 100644
--- a/src/pages/guides/[guideId].astro
+++ b/src/pages/guides/[guideId].astro
@@ -21,7 +21,17 @@ export async function getStaticPaths() {
 
 const { guideId } = Astro.params;
 const { guide } = Astro.props;
-const { frontmatter: guideData } = guide;
+const { frontmatter: guideData, author } = guide;
+
+const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams(
+  {
+    type: 'guide',
+    title: guideData.title,
+    description: guideData.description,
+    authorName: author.frontmatter?.name,
+    authorAvatar: author.frontmatter?.imageUrl || '',
+  },
+)}`;
 ---
 
 <BaseLayout
@@ -29,6 +39,7 @@ const { frontmatter: guideData } = guide;
   description={guideData.seo.description}
   permalink={`/guides/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
+  ogImageUrl={ogImageUrl}
 >
   <GuideHeader guide={guide} />