.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     browser: true,
     amd: true,
     node: true,
+    es6: true,
   },
   extends: [
     'eslint:recommended',

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -6,6 +6,7 @@ tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
 images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
+authors: ['default', 'sparrowhawk']
 ---
 
 ![tailwind-nextjs-banner](/static/images/twitter-card.png)

layouts/PostLayout.js

@@ -46,26 +46,28 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
               <dt className="sr-only">Authors</dt>
               <dd>
                 <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
-                  <li className="flex items-center space-x-2">
+                  {authorDetails.map((author) => (
-                    <img
+                    <li className="flex items-center space-x-2" key={author.name}>
-                      src={authorDetails.avatar}
+                      {author.avatar && (
-                      alt="avatar"
+                        <img src={author.avatar} alt="avatar" className="w-10 h-10 rounded-full" />
-                      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">{authorDetails.name}</dd>
+                        <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
                         <dt className="sr-only">Twitter</dt>
                         <dd>
+                          {author.twitter && (
                             <Link
-                          href={authorDetails.twitter}
+                              href={author.twitter}
                               className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
                             >
-                          {authorDetails.twitter.replace('https://twitter.com/', '@')}
+                              {author.twitter.replace('https://twitter.com/', '@')}
                             </Link>
+                          )}
                         </dd>
                       </dl>
                     </li>
+                  ))}
                 </ul>
               </dd>
             </dl>

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

@@ -24,8 +24,12 @@ 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 authorList = post.frontMatter.authors || ['default']
-  const { frontMatter: authorDetails } = await getFileBySlug('authors', [postAuthor])
+  const authorPromise = authorList.map(async (author) => {
+    const authorResults = await getFileBySlug('authors', [author])
+    return authorResults.frontMatter
+  })
+  const authorDetails = await Promise.all(authorPromise)
 
   // rss
   const rss = generateRss(allPosts)