chore: add open graph images

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 ||
+  ogImageUrl={ogImageUrl}
-    'https://roadmap.sh/images/og-img.png'}
   description={roadmapData.seo.description}
   keywords={roadmapData.seo.keywords}
   noIndex={roadmapData.isUpcoming}

src/pages/backend/developer-skills.astro

@@ -7,7 +7,17 @@ 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
@@ -15,6 +25,7 @@ title={guideData.seo.title}
   description={guideData.seo.description}
   permalink={`/backend/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
+  ogImageUrl={ogImageUrl}
 >
   <GuideHeader guide={guide} />
 

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>

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}

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} />