@ -20,6 +20,8 @@ export async function getStaticPaths() {
const { authorId } = Astro.params;
const author = await getAuthorById(authorId);
const authorFrontmatter = author.frontmatter;
const guides = await getGuidesByAuthor(authorId);
const videos = await getVideosByAuthor(authorId);
---
@ -28,16 +30,37 @@ const videos = await getVideosByAuthor(authorId);
permalink={`/author/${author.id}`}
title={`${author.frontmatter.name} - Author at roadmap.sh`}
briefTitle={author.frontmatter.name}
ogImageUrl={`https://roadmap.sh/${author.f rontmatter.imageUrl}`}
ogImageUrl={`https://roadmap.sh/${authorF rontmatter.imageUrl}`}
description={`${author.frontmatter.name} has written ${guides.length} articles on roadmap.sh on a variety of topics.`}
noIndex={false}
jsonLd={[
{
'@context': 'https://schema.org/',
'@type': 'Person',
name: authorFrontmatter.name,
url: `https://roadmap.sh/authors/${authorId}`,
image: authorFrontmatter.imageUrl.startsWith('http')
? authorFrontmatter.imageUrl
: `https://roadmap.sh${authorFrontmatter.imageUrl}`,
sameAs: authorFrontmatter.social
? Object.values(authorFrontmatter.social)
: [],
...(authorFrontmatter.employment && {
jobTitle: authorFrontmatter.employment?.title,
worksFor: {
'@type': 'Organization',
name: authorFrontmatter.employment.company,
},
}),
},
]}
>
<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'>
<h1 class='text-2xl font-bold md:text-3xl'>
{author.frontmatter.name}
{authorF rontmatter.name}
</h1>
<div
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'
@ -48,9 +71,9 @@ const videos = await getVideosByAuthor(authorId);
<div class='flex items-center justify-between'>
<div class='flex items-center gap-1.5'>
{
author.f rontmatter.social?.github && (
authorF rontmatter.social?.github && (
<a
href={author.f rontmatter.social.github}
href={authorF rontmatter.social.github}
target='_blank'
class='text-gray-500 transition-colors hover:text-gray-800'
>
@ -59,9 +82,9 @@ const videos = await getVideosByAuthor(authorId);
)
}
{
author.f rontmatter.social.twitter && (
authorF rontmatter.social.twitter && (
<a
href={author.f rontmatter.social.twitter}
href={authorF rontmatter.social.twitter}
target='_blank'
class='text-gray-500 transition-colors hover:text-gray-800'
>
@ -70,9 +93,9 @@ const videos = await getVideosByAuthor(authorId);
)
}
{
author.f rontmatter.social.linkedin && (
authorF rontmatter.social.linkedin && (
<a
href={author.f rontmatter.social.linkedin}
href={authorF rontmatter.social.linkedin}
target='_blank'
class='text-gray-500 transition-colors hover:text-gray-800'
>
@ -81,9 +104,9 @@ const videos = await getVideosByAuthor(authorId);
)
}
{
author.f rontmatter.social.website && (
authorF rontmatter.social.website && (
<a
href={author.f rontmatter.social.website}
href={authorF rontmatter.social.website}
target='_blank'
class='text-gray-500 transition-colors hover:text-gray-800'
>
@ -98,7 +121,7 @@ const videos = await getVideosByAuthor(authorId);
<img
alt="Kamran Ahmed's profile picture"
class='block h-[175px] w-[175px] rounded-full bg-gray-100'
src={author.f rontmatter.imageUrl}
src={authorF rontmatter.imageUrl}
/>
</div>
</div>