jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support multi-author blog post

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

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

1
data/blog/introducing-tailwind-nextjs-starter-blog.mdx
View File

@ -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)

42
layouts/PostLayout.js
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>

8
pages/blog/[...slug].js
View File

@ -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 { frontMatter: authorDetails } = await getFileBySlug('authors', [postAuthor])
const authorList = post.frontMatter.authors || ['default']
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)