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

feat: add AuthorLayout template

Browse Source
This commit is contained in:
Timothy Lin 2021-05-16 15:36:01 +08:00
parent f3e83619cc
commit 84f00d6fc6
3 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
data/authors/default.md
View File

@ -1,6 +1,8 @@
---
name: Ursula K. Le Guin
name: Tails Azimuth
avatar: /static/images/avatar.png
occupation: Professor of Atmospheric Science
company: Stanford University
email: address@yoursite.com
twitter: https://twitter.com/Twitter
linkedin: https://www.linkedin.com

39
layouts/AuthorLayout.js Normal file
View File

@ -0,0 +1,39 @@
import siteMetadata from '@/data/siteMetadata'
import SocialIcon from '@/components/social-icons'
import { PageSeo } from '@/components/SEO'
export default function AuthorLayout({ children, frontMatter }) {
const { name, avatar, occupation, company, email, twitter, linkedin, github } = frontMatter
return (
<>
<PageSeo
title={`About - ${name}`}
description={`About me - ${name}`}
url={`${siteMetadata.siteUrl}/about`}
/>
<div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
About
</h1>
</div>
<div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
<div className="flex flex-col items-center pt-8 space-x-2">
<img src={avatar} alt="avatar" className="w-48 h-48 rounded-full" />
<h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
<div className="text-gray-500 dark:text-gray-400">{occupation}</div>
<div className="text-gray-500 dark:text-gray-400">{company}</div>
<div className="flex pt-6 space-x-3">
<SocialIcon kind="mail" href={`mailto:${email}`} />
<SocialIcon kind="github" href={github} />
<SocialIcon kind="linkedin" href={linkedin} />
<SocialIcon kind="twitter" href={twitter} />
</div>
</div>
<div className="pt-8 pb-8 prose dark:prose-dark max-w-none xl:col-span-2">{children}</div>
</div>
</div>
</>
)
}

39
pages/about.js
View File

@ -1,8 +1,6 @@
import { MDXRemote } from 'next-mdx-remote'
import MDXComponents from '@/components/MDXComponents'
import siteMetadata from '@/data/siteMetadata'
import SocialIcon from '@/components/social-icons'
import { PageSeo } from '@/components/SEO'
import AuthorLayout from '@/layouts/AuthorLayout'
import { getFileBySlug } from '@/lib/mdx'
export async function getStaticProps() {
@ -12,39 +10,10 @@ export async function getStaticProps() {
export default function About({ authorDetails }) {
const { mdxSource, frontMatter } = authorDetails
const { name, avatar, email, twitter, linkedin, github } = frontMatter
return (
<>
<PageSeo
title={`About - ${name}`}
description={`About me - ${name}`}
url={`${siteMetadata.siteUrl}/about`}
/>
<div className="divide-y">
<div className="pt-6 pb-8 space-y-2 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
About
</h1>
</div>
<div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
<div className="flex flex-col items-center pt-8 space-x-2">
<img src={avatar} alt="avatar" className="w-48 h-48 rounded-full" />
<h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
<div className="text-gray-500 dark:text-gray-400">Professor of Atmospheric Science</div>
<div className="text-gray-500 dark:text-gray-400">Stanford University</div>
<div className="flex pt-6 space-x-3">
<SocialIcon kind="mail" href={`mailto:${email}`} />
<SocialIcon kind="github" href={github} />
<SocialIcon kind="linkedin" href={linkedin} />
<SocialIcon kind="twitter" href={twitter} />
</div>
</div>
<div className="pt-8 pb-8 prose dark:prose-dark max-w-none xl:col-span-2">
<MDXRemote {...mdxSource} components={MDXComponents} />
</div>
</div>
</div>
</>
<AuthorLayout frontMatter={frontMatter}>
<MDXRemote {...mdxSource} components={MDXComponents} />
</AuthorLayout>
)
}