fix: open graph function

feat/open-graph
Arik Chakma 9 months ago
parent d1b27854ea
commit 4f9917bc5c
  1. 19
      src/lib/open-graph.ts
  2. 7
      src/pages/[roadmapId]/index.astro
  3. 7
      src/pages/backend/developer-skills.astro
  4. 7
      src/pages/backend/languages.astro
  5. 7
      src/pages/best-practices/[bestPracticeId]/index.astro
  6. 7
      src/pages/guides/[guideId].astro

@ -0,0 +1,19 @@
type GuideOpenGraphParams = {
type: 'guide';
authorName: string;
authorAvatar?: string;
title: string;
description: string;
};
type RoadmapOpenGraphParams = {
type: 'roadmap';
title: string;
description: string;
};
export function getOpenGraphImageUrl(
params: GuideOpenGraphParams | RoadmapOpenGraphParams,
) {
return `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams(params)}`;
}

@ -13,6 +13,7 @@ import {
generateArticleSchema, generateArticleSchema,
generateFAQSchema, generateFAQSchema,
} from '../../lib/jsonld-schema'; } from '../../lib/jsonld-schema';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap'; import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
export async function getStaticPaths() { export async function getStaticPaths() {
@ -56,13 +57,11 @@ if (roadmapFAQs.length) {
jsonLdSchema.push(generateFAQSchema(roadmapFAQs)); jsonLdSchema.push(generateFAQSchema(roadmapFAQs));
} }
const ogImageUrl = const ogImageUrl = getOpenGraphImageUrl({
roadmapData?.seo?.ogImageUrl ||
`${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams({
type: 'roadmap', type: 'roadmap',
title: roadmapData.title, title: roadmapData.title,
description: roadmapData.description, description: roadmapData.description,
})}`; });
--- ---
<BaseLayout <BaseLayout

@ -3,21 +3,20 @@ import GuideHeader from '../../components/GuideHeader.astro';
import MarkdownFile from '../../components/MarkdownFile.astro'; import MarkdownFile from '../../components/MarkdownFile.astro';
import BaseLayout from '../../layouts/BaseLayout.astro'; import BaseLayout from '../../layouts/BaseLayout.astro';
import { getGuideById } from '../../lib/guide'; import { getGuideById } from '../../lib/guide';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
const guideId = 'backend-developer-skills'; const guideId = 'backend-developer-skills';
const guide = await getGuideById(guideId); const guide = await getGuideById(guideId);
const { frontmatter: guideData, author } = guide!; const { frontmatter: guideData, author } = guide!;
const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams( const ogImageUrl = getOpenGraphImageUrl({
{
type: 'guide', type: 'guide',
title: guideData.title, title: guideData.title,
description: guideData.description, description: guideData.description,
authorName: author.frontmatter?.name, authorName: author.frontmatter?.name,
authorAvatar: author.frontmatter?.imageUrl || '', authorAvatar: author.frontmatter?.imageUrl || '',
}, });
)}`;
--- ---
<BaseLayout <BaseLayout

@ -3,21 +3,20 @@ import GuideHeader from '../../components/GuideHeader.astro';
import MarkdownFile from '../../components/MarkdownFile.astro'; import MarkdownFile from '../../components/MarkdownFile.astro';
import BaseLayout from '../../layouts/BaseLayout.astro'; import BaseLayout from '../../layouts/BaseLayout.astro';
import { getGuideById } from '../../lib/guide'; import { getGuideById } from '../../lib/guide';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
const guideId = 'backend-languages'; const guideId = 'backend-languages';
const guide = await getGuideById('backend-languages'); const guide = await getGuideById('backend-languages');
const { frontmatter: guideData, author } = guide!; const { frontmatter: guideData, author } = guide!;
const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams( const ogImageUrl = getOpenGraphImageUrl({
{
type: 'guide', type: 'guide',
title: guideData.title, title: guideData.title,
description: guideData.description, description: guideData.description,
authorName: author.frontmatter?.name, authorName: author.frontmatter?.name,
authorAvatar: author.frontmatter?.imageUrl || '', authorAvatar: author.frontmatter?.imageUrl || '',
}, });
)}`;
--- ---
<BaseLayout <BaseLayout

@ -13,6 +13,7 @@ import {
getAllBestPractices, getAllBestPractices,
} from '../../../lib/best-pratice'; } from '../../../lib/best-pratice';
import { generateArticleSchema } from '../../../lib/jsonld-schema'; import { generateArticleSchema } from '../../../lib/jsonld-schema';
import { getOpenGraphImageUrl } from '../../../lib/open-graph';
export async function getStaticPaths() { export async function getStaticPaths() {
const bestPractices = await getAllBestPractices(); const bestPractices = await getAllBestPractices();
@ -53,13 +54,11 @@ if (bestPracticeData.schema) {
); );
} }
const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams( const ogImageUrl = getOpenGraphImageUrl({
{
type: 'roadmap', type: 'roadmap',
title: bestPracticeData.title, title: bestPracticeData.title,
description: bestPracticeData.description, description: bestPracticeData.description,
}, });
)}`;
--- ---
<BaseLayout <BaseLayout

@ -3,6 +3,7 @@ import GuideHeader from '../../components/GuideHeader.astro';
import MarkdownFile from '../../components/MarkdownFile.astro'; import MarkdownFile from '../../components/MarkdownFile.astro';
import BaseLayout from '../../layouts/BaseLayout.astro'; import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllGuides, type GuideFileType } from '../../lib/guide'; import { getAllGuides, type GuideFileType } from '../../lib/guide';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
export interface Props { export interface Props {
guide: GuideFileType; guide: GuideFileType;
@ -23,15 +24,13 @@ const { guideId } = Astro.params;
const { guide } = Astro.props; const { guide } = Astro.props;
const { frontmatter: guideData, author } = guide; const { frontmatter: guideData, author } = guide;
const ogImageUrl = `${import.meta.env.PUBLIC_API_URL}/v1-open-graph?${new URLSearchParams( const ogImageUrl = getOpenGraphImageUrl({
{
type: 'guide', type: 'guide',
title: guideData.title, title: guideData.title,
description: guideData.description, description: guideData.description,
authorName: author.frontmatter?.name, authorName: author.frontmatter?.name,
authorAvatar: author.frontmatter?.imageUrl || '', authorAvatar: author.frontmatter?.imageUrl || '',
}, });
)}`;
--- ---
<BaseLayout <BaseLayout

Loading…
Cancel
Save