layouts/PostLayout.js

@@ -13,7 +13,7 @@ const discussUrl = (slug) =>
 
 const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 
-export default function PostLayout({ children, frontMatter, next, prev }) {
+export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
   const { slug, fileName, date, title, tags } = frontMatter
 
   return (
@@ -50,14 +50,14 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                     <img src={siteMetadata.image} alt="avatar" className="w-10 h-10 rounded-full" />
                     <dl className="text-sm font-medium leading-5 whitespace-nowrap">
                       <dt className="sr-only">Name</dt>
-                      <dd className="text-gray-900 dark:text-gray-100">{siteMetadata.author}</dd>
+                      <dd className="text-gray-900 dark:text-gray-100">{authorDetails.name}</dd>
                       <dt className="sr-only">Twitter</dt>
                       <dd>
                         <Link
-                          href={siteMetadata.twitter}
+                          href={authorDetails.twitter}
                           className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
                         >
-                          {siteMetadata.twitter.replace('https://twitter.com/', '@')}
+                          {authorDetails.twitter.replace('https://twitter.com/', '@')}
                         </Link>
                       </dd>
                     </dl>

pages/blog/[...slug].js

@@ -24,21 +24,23 @@ export async function getStaticProps({ params }) {
   const prev = allPosts[postIndex + 1] || null
   const next = allPosts[postIndex - 1] || null
   const post = await getFileBySlug('blog', params.slug)
+  const postAuthor = post.frontMatter.author || 'default'
+  const { frontMatter: authorDetails } = await getFileBySlug('authors', [postAuthor])
 
   // rss
   const rss = generateRss(allPosts)
   fs.writeFileSync('./public/index.xml', rss)
 
-  return { props: { post, prev, next } }
+  return { props: { post, authorDetails, prev, next } }
 }
 
-export default function Blog({ post, prev, next }) {
+export default function Blog({ post, authorDetails, prev, next }) {
   const { mdxSource, frontMatter } = post
 
   return (
     <>
       {frontMatter.draft !== true ? (
-        <PostLayout frontMatter={frontMatter} prev={prev} next={next}>
+        <PostLayout frontMatter={frontMatter} authorDetails={authorDetails} prev={prev} next={next}>
           <MDXRemote {...mdxSource} components={MDXComponents} />
         </PostLayout>
       ) : (