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

feat: create author data template

Browse Source
This commit is contained in:
Timothy Lin 2021-05-16 15:22:04 +08:00
parent 8037abd52a
commit f3e83619cc
2 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
data/authors/default.md Normal file
View File

@ -0,0 +1,14 @@
---
name: Ursula K. Le Guin
avatar: /static/images/avatar.png
email: address@yoursite.com
twitter: https://twitter.com/Twitter
linkedin: https://www.linkedin.com
github: https://github.com
---
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.
He leads the clean energy group which develops 3D air pollution-climate models, writes differential equation solvers, and manufactures titanium plated air ballons. In his free time he bakes raspberry pi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

49
pages/about.js
View File

@ -1,13 +1,24 @@
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 { getFileBySlug } from '@/lib/mdx'
export async function getStaticProps() {
const authorDetails = await getFileBySlug('authors', ['default'])
return { props: { authorDetails } }
}
export default function About({ authorDetails }) {
const { mdxSource, frontMatter } = authorDetails
const { name, avatar, email, twitter, linkedin, github } = frontMatter
export default function About() {
return (
<>
<PageSeo
title={`About - ${siteMetadata.author}`}
description={`About me - ${siteMetadata.author}`}
title={`About - ${name}`}
description={`About me - ${name}`}
url={`${siteMetadata.siteUrl}/about`}
/>
<div className="divide-y">
@ -18,37 +29,19 @@ export default function About() {
</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={siteMetadata.image} alt="avatar" className="w-48 h-48 rounded-full" />
<h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">
{siteMetadata.author}
</h3>
<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:${siteMetadata.email}`} />
<SocialIcon kind="github" href={siteMetadata.github} />
<SocialIcon kind="facebook" href={siteMetadata.facebook} />
<SocialIcon kind="youtube" href={siteMetadata.youtube} />
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} />
<SocialIcon kind="twitter" href={siteMetadata.twitter} />
<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">
<p>
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His
research interests includes complexity modelling of tailwinds, headwinds and
crosswinds.
</p>
<p>
He leads the clean energy group which develops 3D air pollution-climate models, writes
differential equation solvers, and manufactures titanium plated air ballons. In his
free time he bakes raspberry pi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique
placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem
nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
</p>
<MDXRemote {...mdxSource} components={MDXComponents} />
</div>
</div>
</div>