From b7a858823c12cc6886b64efb74e7867e37f803de Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Wed, 1 May 2024 16:59:23 +0600 Subject: [PATCH] chore: replace with og endpoint (#5571) * chore: replace with og endpoint * fix: update og routes --- src/lib/open-graph.ts | 17 ++++++++-- 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/best-practice/[slug].ts | 31 +++++++++++++++++++ src/pages/og/guide/[slug].ts | 31 +++++++++++++++++++ src/pages/og/roadmap/[slug].ts | 31 +++++++++++++++++++ .../og/{[slug].ts => user/[username].ts} | 18 +++-------- src/pages/u/[username].astro | 2 +- 12 files changed, 121 insertions(+), 25 deletions(-) create mode 100644 src/pages/og/best-practice/[slug].ts create mode 100644 src/pages/og/guide/[slug].ts create mode 100644 src/pages/og/roadmap/[slug].ts rename src/pages/og/{[slug].ts => user/[username].ts} (59%) diff --git a/src/lib/open-graph.ts b/src/lib/open-graph.ts index 5bc95e173..8008cb10b 100644 --- a/src/lib/open-graph.ts +++ b/src/lib/open-graph.ts @@ -1,13 +1,26 @@ 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() { const defaultImageUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/images/og-img.png`; return fetch(defaultImageUrl).then((response) => response.arrayBuffer()); } + +export async function getResourceOpenGraph( + type: 'roadmap' | 'guide' | 'best-practice', + resourceId: string, +) { + 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()); + + return response.text(); +} 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 4d1fff5c1..9057c9c29 100644 --- a/src/pages/backend/developer-skills.astro +++ b/src/pages/backend/developer-skills.astro @@ -12,7 +12,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 67c4ca2d9..296e91cb0 100644 --- a/src/pages/backend/developer-tools.astro +++ b/src/pages/backend/developer-tools.astro @@ -12,7 +12,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 c584a97b2..31635f945 100644 --- a/src/pages/backend/languages.astro +++ b/src/pages/backend/languages.astro @@ -15,7 +15,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 191a5029f..17301c9f7 100644 --- a/src/pages/guides/[guideId].astro +++ b/src/pages/guides/[guideId].astro @@ -28,7 +28,7 @@ const { frontmatter: guideData, author } = guide; const ogImageUrl = guideData.ogImageUrl || getOpenGraphImageUrl({ - group: 'guides', + group: 'guide', resourceId: guideId, }); --- diff --git a/src/pages/og/best-practice/[slug].ts b/src/pages/og/best-practice/[slug].ts new file mode 100644 index 000000000..794f96d40 --- /dev/null +++ b/src/pages/og/best-practice/[slug].ts @@ -0,0 +1,31 @@ +import type { APIRoute } from 'astro'; +import { + getDefaultOpenGraphImageBuffer, + getResourceOpenGraph, +} from '../../../lib/open-graph'; + +export const prerender = false; + +type Params = { + slug: string; +}; + +export const GET: APIRoute = async (context) => { + const { slug } = context.params; + + if (!slug) { + const buffer = await getDefaultOpenGraphImageBuffer(); + return new Response(buffer, { + headers: { + 'Content-Type': 'image/png', + }, + }); + } + + const svg = await getResourceOpenGraph('best-practice', slug); + return new Response(svg, { + headers: { + 'Content-Type': 'image/svg+xml', + }, + }); +}; diff --git a/src/pages/og/guide/[slug].ts b/src/pages/og/guide/[slug].ts new file mode 100644 index 000000000..0b3737340 --- /dev/null +++ b/src/pages/og/guide/[slug].ts @@ -0,0 +1,31 @@ +import type { APIRoute } from 'astro'; +import { + getDefaultOpenGraphImageBuffer, + getResourceOpenGraph, +} from '../../../lib/open-graph'; + +export const prerender = false; + +type Params = { + slug: string; +}; + +export const GET: APIRoute = async (context) => { + const { slug } = context.params; + + if (!slug) { + const buffer = await getDefaultOpenGraphImageBuffer(); + return new Response(buffer, { + headers: { + 'Content-Type': 'image/png', + }, + }); + } + + const svg = await getResourceOpenGraph('guide', slug); + return new Response(svg, { + headers: { + 'Content-Type': 'image/svg+xml', + }, + }); +}; diff --git a/src/pages/og/roadmap/[slug].ts b/src/pages/og/roadmap/[slug].ts new file mode 100644 index 000000000..1bf9afc45 --- /dev/null +++ b/src/pages/og/roadmap/[slug].ts @@ -0,0 +1,31 @@ +import type { APIRoute } from 'astro'; +import { + getDefaultOpenGraphImageBuffer, + getResourceOpenGraph, +} from '../../../lib/open-graph'; + +export const prerender = false; + +type Params = { + slug: string; +}; + +export const GET: APIRoute = async (context) => { + const { slug } = context.params; + + if (!slug) { + const buffer = await getDefaultOpenGraphImageBuffer(); + return new Response(buffer, { + headers: { + 'Content-Type': 'image/png', + }, + }); + } + + const svg = await getResourceOpenGraph('roadmap', slug); + return new Response(svg, { + headers: { + 'Content-Type': 'image/svg+xml', + }, + }); +}; diff --git a/src/pages/og/[slug].ts b/src/pages/og/user/[username].ts similarity index 59% rename from src/pages/og/[slug].ts rename to src/pages/og/user/[username].ts index 128ec3256..67f52472e 100644 --- a/src/pages/og/[slug].ts +++ b/src/pages/og/user/[username].ts @@ -1,26 +1,16 @@ import type { APIRoute } from 'astro'; -import { getDefaultOpenGraphImageBuffer } from '../../lib/open-graph'; +import { getDefaultOpenGraphImageBuffer } from '../../../lib/open-graph'; export const prerender = false; type Params = { - slug: string; + username: string; }; export const GET: APIRoute = async (context) => { - const { slug } = context.params; + const { username } = context.params; - if (!slug.startsWith('user-')) { - const buffer = await getDefaultOpenGraphImageBuffer(); - return new Response(buffer, { - headers: { - 'Content-Type': 'image/png', - }, - }); - } - - const username = slug.replace('user-', ''); - if (!username) { + if (!username || !/^[a-zA-Z0-9]*?[a-zA-Z]+?[a-zA-Z0-9]*?$/.test(username)) { const buffer = await getDefaultOpenGraphImageBuffer(); return new Response(buffer, { headers: { diff --git a/src/pages/u/[username].astro b/src/pages/u/[username].astro index 1b414b715..2b8e0dbb1 100644 --- a/src/pages/u/[username].astro +++ b/src/pages/u/[username].astro @@ -24,7 +24,7 @@ if (error || !userDetails) { } const origin = Astro.url.origin; -const ogImage = `${origin}/og/user-${username}`; +const ogImage = `${origin}/og/user/${username}`; ---