fix: open graph query params

src/lib/author.ts

@@ -34,7 +34,6 @@ export async function getAuthorIds() {
     },
   );
 
-  console.log(Object.keys(authorFiles));
   return Object.keys(authorFiles).map(authorPathToId);
 }
 

src/lib/open-graph.ts

@@ -1,19 +1,10 @@
-type GuideOpenGraphParams = {
+type RoadmapOpenGraphQuery = {
-  type: 'guide';
+  type: 'roadmaps' | 'guides' | 'best-practices';
-  authorName: string;
+  variant?: 'default' | 'image';
-  authorAvatar?: string;
+  resourceId?: string;
-  title: string;
+  guideId?: string;
-  description: string;
 };
 
-type RoadmapOpenGraphParams = {
+export function getOpenGraphImageUrl(params: RoadmapOpenGraphQuery) {
-  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)}`;
 }

src/pages/[roadmapId]/index.astro

@@ -58,9 +58,9 @@ if (roadmapFAQs.length) {
 }
 
 const ogImageUrl = getOpenGraphImageUrl({
-  type: 'roadmap',
+  type: 'roadmaps',
-  title: roadmapData.title,
+  resourceId: roadmapId,
-  description: roadmapData.description,
+  variant: 'image',
 });
 ---
 

src/pages/authors/[authorId].astro

@@ -2,10 +2,10 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AstroIcon from '../../components/AstroIcon.astro';
 import { getGuidesByAuthor } from '../../lib/guide';
-import {getAllVideos, getVideosByAuthor} from '../../lib/video';
+import { getAllVideos, getVideosByAuthor } from '../../lib/video';
 import GuideListItem from '../../components/GuideListItem.astro';
 import { getAuthorById, getAuthorIds } from '../../lib/author';
-import VideoListItem from "../../components/VideoListItem.astro";
+import VideoListItem from '../../components/VideoListItem.astro';
 
 interface Params extends Record<string, string | undefined> {}
 
@@ -19,11 +19,7 @@ export async function getStaticPaths() {
 
 const { authorId } = Astro.params;
 
-console.log(authorId);
-
 const author = await getAuthorById(authorId);
-
-console.log(author);
 const guides = await getGuidesByAuthor(authorId);
 const videos = await getVideosByAuthor(authorId);
 ---
@@ -36,13 +32,15 @@ const videos = await getVideosByAuthor(authorId);
   description={`${author.frontmatter.name} has written ${guides.length} articles on roadmap.sh on a variety of topics.`}
   noIndex={false}
 >
-  <div class='container pt-4 pb-0 md:pb-16 md:pt-8'>
+  <div class='container pb-0 pt-4 md:pb-16 md:pt-8'>
     <div class=''>
       <div class='mb-5 flex items-center gap-8 rounded-3xl py-0 md:py-8'>
-        <div class="flex-grow">
+        <div class='flex-grow'>
-          <h1 class='text-2xl md:text-3xl font-bold'>{author.frontmatter.name}</h1>
+          <h1 class='text-2xl font-bold md:text-3xl'>
+            {author.frontmatter.name}
+          </h1>
           <div
-            class='mt-1 mb-4 md:mt-4 md:mb-6 flex flex-col gap-3 text-gray-800 [&>p>a]:font-semibold [&>p>a]:underline leading-normal'
+            class='mb-4 mt-1 flex flex-col gap-3 leading-normal text-gray-800 md:mb-6 md:mt-4 [&>p>a]:font-semibold [&>p>a]:underline'
           >
             <author.Content />
           </div>

src/pages/authors/[authorId].json.ts

@@ -0,0 +1,28 @@
+import type { APIRoute } from 'astro';
+import { getAuthorById, getAuthorIds } from '../../lib/author';
+
+export async function getStaticPaths() {
+  const authorIds = await getAuthorIds();
+
+  return await Promise.all(
+    authorIds.map(async (authorId) => {
+      const authorDetails = await getAuthorById(authorId);
+
+      return {
+        params: { authorId },
+        props: {
+          authorDetails: authorDetails?.frontmatter || {},
+        },
+      };
+    }),
+  );
+}
+
+export const GET: APIRoute = async function ({ params, request, props }) {
+  return new Response(JSON.stringify(props.authorDetails), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

src/pages/backend/developer-skills.astro

@@ -8,14 +8,11 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph';
 const guideId = 'backend-developer-skills';
 const guide = await getGuideById(guideId);
 
-const { frontmatter: guideData, author } = guide!;
+const { frontmatter: guideData } = guide!;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  type: 'guide',
+  type: 'guides',
-  title: guideData.title,
+  guideId,
-  description: guideData.description,
-  authorName: author.frontmatter?.name,
-  authorAvatar: author.frontmatter?.imageUrl || '',
 });
 ---
 

src/pages/backend/languages.astro

@@ -8,14 +8,11 @@ import { getOpenGraphImageUrl } from '../../lib/open-graph';
 const guideId = 'backend-languages';
 const guide = await getGuideById('backend-languages');
 
-const { frontmatter: guideData, author } = guide!;
+const { frontmatter: guideData } = guide!;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  type: 'guide',
+  type: 'guides',
-  title: guideData.title,
+  guideId,
-  description: guideData.description,
-  authorName: author.frontmatter?.name,
-  authorAvatar: author.frontmatter?.imageUrl || '',
 });
 ---
 

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -55,9 +55,9 @@ if (bestPracticeData.schema) {
 }
 
 const ogImageUrl = getOpenGraphImageUrl({
-  type: 'roadmap',
+  type: 'best-practices',
-  title: bestPracticeData.title,
+  resourceId: bestPracticeId,
-  description: bestPracticeData.description,
+  variant: 'image',
 });
 ---
 

src/pages/guides/[guideId].astro

@@ -25,11 +25,8 @@ const { guide } = Astro.props;
 const { frontmatter: guideData, author } = guide;
 
 const ogImageUrl = getOpenGraphImageUrl({
-  type: 'guide',
+  type: 'guides',
-  title: guideData.title,
+  guideId,
-  description: guideData.description,
-  authorName: author.frontmatter?.name,
-  authorAvatar: author.frontmatter?.imageUrl || '',
 });
 ---
 

src/pages/pages.json.ts

@@ -17,6 +17,7 @@ export async function GET() {
         id: roadmap.id,
         url: `/${roadmap.id}`,
         title: roadmap.frontmatter.briefTitle,
+        description: roadmap.frontmatter.briefDescription,
         group: 'Roadmaps',
         metadata: {
           tags: roadmap.frontmatter.tags,
@@ -26,6 +27,7 @@ export async function GET() {
         id: bestPractice.id,
         url: `/best-practices/${bestPractice.id}`,
         title: bestPractice.frontmatter.briefTitle,
+        description: bestPractice.frontmatter.briefDescription,
         group: 'Best Practices',
       })),
       ...questionGroups.map((questionGroup) => ({
@@ -40,12 +42,14 @@ export async function GET() {
           ? guide.frontmatter.excludedBySlug
           : `/guides/${guide.id}`,
         title: guide.frontmatter.title,
+        description: guide.frontmatter.description,
+        authorId: guide.frontmatter.authorId,
         group: 'Guides',
       })),
-      ...videos.map((guide) => ({
+      ...videos.map((video) => ({
-        id: guide.id,
+        id: video.id,
-        url: `/videos/${guide.id}`,
+        url: `/videos/${video.id}`,
-        title: guide.frontmatter.title,
+        title: video.frontmatter.title,
         group: 'Videos',
       })),
     ]),