feat: support multi-author blog post

This commit is contained in:
Timothy Lin
2021-05-18 23:46:30 +08:00
parent 41850ef6f0
commit ed290bfcdd
4 changed files with 30 additions and 22 deletions

View File

@ -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">
<img
src={authorDetails.avatar}
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">{authorDetails.name}</dd>
<dt className="sr-only">Twitter</dt>
<dd>
<Link
href={authorDetails.twitter}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
>
{authorDetails.twitter.replace('https://twitter.com/', '@')}
</Link>
</dd>
</dl>
</li>
{authorDetails.map((author) => (
<li className="flex items-center space-x-2" key={author.name}>
{author.avatar && (
<img src={author.avatar} 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">{author.name}</dd>
<dt className="sr-only">Twitter</dt>
<dd>
{author.twitter && (
<Link
href={author.twitter}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
>
{author.twitter.replace('https://twitter.com/', '@')}
</Link>
)}
</dd>
</dl>
</li>
))}
</ul>
</dd>
</dl>