From 4fde3fc9064217513a4a5677f12aed9c49039b8f Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Sun, 28 Apr 2024 21:02:08 +0600 Subject: [PATCH] chore: replace with og endpoint --- src/lib/open-graph.ts | 4 +- src/pages/[roadmapId]/index.astro | 2 +- src/pages/backend/developer-skills.astro | 2 +- src/pages/backend/developer-tools.astro | 2 +- src/pages/backend/languages.astro | 2 +- .../[bestPracticeId]/index.astro | 6 +- src/pages/guides/[guideId].astro | 2 +- src/pages/og/[slug].ts | 74 ++++++++++++++----- 8 files changed, 67 insertions(+), 27 deletions(-) diff --git a/src/lib/open-graph.ts b/src/lib/open-graph.ts index 5bc95e173..a41007488 100644 --- a/src/lib/open-graph.ts +++ b/src/lib/open-graph.ts @@ -1,10 +1,10 @@ type RoadmapOpenGraphQuery = { - group: 'roadmaps' | 'guides' | 'best-practices'; + group: 'roadmap' | 'guide' | 'best-practice'; resourceId: string; }; export function getOpenGraphImageUrl(params: RoadmapOpenGraphQuery) { - return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og-images/${params.group}/${params.resourceId}.png`; + return `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/og/${params.group}-${params.resourceId}`; } export async function getDefaultOpenGraphImageBuffer() { diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro index 8353af669..994df6793 100644 --- a/src/pages/[roadmapId]/index.astro +++ b/src/pages/[roadmapId]/index.astro @@ -59,7 +59,7 @@ if (roadmapFAQs.length) { const ogImageUrl = roadmapData?.seo?.ogImageUrl || getOpenGraphImageUrl({ - group: 'roadmaps', + group: 'roadmap', resourceId: roadmapId, }); --- diff --git a/src/pages/backend/developer-skills.astro b/src/pages/backend/developer-skills.astro index 85325741b..8b91923a9 100644 --- a/src/pages/backend/developer-skills.astro +++ b/src/pages/backend/developer-skills.astro @@ -11,7 +11,7 @@ const guide = await getGuideById(guideId); const { frontmatter: guideData } = guide!; const ogImageUrl = getOpenGraphImageUrl({ - group: 'guides', + group: 'guide', resourceId: guideId, }); --- diff --git a/src/pages/backend/developer-tools.astro b/src/pages/backend/developer-tools.astro index 0b71d6bfb..db270cd9d 100644 --- a/src/pages/backend/developer-tools.astro +++ b/src/pages/backend/developer-tools.astro @@ -11,7 +11,7 @@ const guide = await getGuideById(guideId); const { frontmatter: guideData } = guide!; const ogImageUrl = getOpenGraphImageUrl({ - group: 'guides', + group: 'guide', resourceId: guideId, }); --- diff --git a/src/pages/backend/languages.astro b/src/pages/backend/languages.astro index f5fd09337..ca1670014 100644 --- a/src/pages/backend/languages.astro +++ b/src/pages/backend/languages.astro @@ -14,7 +14,7 @@ if (!guide) { const { frontmatter: guideData } = guide!; const ogImageUrl = getOpenGraphImageUrl({ - group: 'guides', + group: 'guide', resourceId: guideId, }); --- diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro index 2dcb197ac..ff3f07fe1 100644 --- a/src/pages/best-practices/[bestPracticeId]/index.astro +++ b/src/pages/best-practices/[bestPracticeId]/index.astro @@ -10,8 +10,8 @@ import { UserProgressModal } from '../../../components/UserProgress/UserProgress import { generateArticleSchema } from '../../../lib/jsonld-schema'; import { getOpenGraphImageUrl } from '../../../lib/open-graph'; import { - BestPracticeFileType, - BestPracticeFrontmatter, + type BestPracticeFileType, + type BestPracticeFrontmatter, getAllBestPractices, } from '../../../lib/best-practice'; @@ -55,7 +55,7 @@ if (bestPracticeData.schema) { } const ogImageUrl = getOpenGraphImageUrl({ - group: 'best-practices', + group: 'best-practice', resourceId: bestPracticeId, }); --- diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro index aed67d8b1..fafb3b9a1 100644 --- a/src/pages/guides/[guideId].astro +++ b/src/pages/guides/[guideId].astro @@ -27,7 +27,7 @@ const { frontmatter: guideData, author } = guide; const ogImageUrl = guideData.ogImageUrl || getOpenGraphImageUrl({ - group: 'guides', + group: 'guide', resourceId: guideId, }); --- diff --git a/src/pages/og/[slug].ts b/src/pages/og/[slug].ts index 128ec3256..47a059b7b 100644 --- a/src/pages/og/[slug].ts +++ b/src/pages/og/[slug].ts @@ -4,13 +4,22 @@ import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph'; export const prerender = false; type Params = { - slug: string; + slug: + | `user-${string}` + | `roadmap-${string}` + | `best-practice-${string}` + | `guide-${string}`; }; export const GET: APIRoute = async (context) => { const { slug } = context.params; - if (!slug.startsWith('user-')) { + if ( + !slug.startsWith('user-') && + !slug.startsWith('roadmap-') && + !slug.startsWith('best-practice') && + !slug.startsWith('guide-') + ) { const buffer = await getDefaultOpenGraphImageBuffer(); return new Response(buffer, { headers: { @@ -19,24 +28,55 @@ export const GET: APIRoute = async (context) => { }); } - const username = slug.replace('user-', ''); - if (!username) { - const buffer = await getDefaultOpenGraphImageBuffer(); - return new Response(buffer, { + if (slug.startsWith('user-')) { + const username = slug.replace('user-', ''); + if (!username) { + const buffer = await getDefaultOpenGraphImageBuffer(); + return new Response(buffer, { + headers: { + 'Content-Type': 'image/png', + }, + }); + } + + const response = await fetch( + `${import.meta.env.PUBLIC_API_URL}/v1-profile-open-graph/${username}`, + ); + + const svg = await response.text(); + return new Response(svg, { headers: { - 'Content-Type': 'image/png', + 'Content-Type': 'image/svg+xml', }, }); - } + } else { + const type = slug.startsWith('roadmap-') + ? 'roadmap' + : slug.startsWith('best-practice-') + ? 'best-practice' + : 'guide'; + const resourceId = slug.replace(`${type}-`, ''); - const response = await fetch( - `${import.meta.env.PUBLIC_API_URL}/v1-profile-open-graph/${username}`, - ); + if (!resourceId) { + const buffer = await getDefaultOpenGraphImageBuffer(); + return new Response(buffer, { + headers: { + 'Content-Type': 'image/png', + }, + }); + } - const svg = await response.text(); - return new Response(svg, { - headers: { - 'Content-Type': 'image/svg+xml', - }, - }); + const url = new URL(`${import.meta.env.PUBLIC_API_URL}/v1-open-graph`); + url.searchParams.set('type', type); + url.searchParams.set('resourceId', resourceId); + url.searchParams.set('variant', 'image'); + const response = await fetch(url.toString()); + + const svg = await response.text(); + return new Response(svg, { + headers: { + 'Content-Type': 'image/svg+xml', + }, + }); + } };