upstream #1
| @@ -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
									
								
							
							
						
						
									
										39
									
								
								layouts/AuthorLayout.js
									
									
									
									
									
										Normal 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> | ||||
|     </> | ||||
|   ) | ||||
| } | ||||
| @@ -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> | ||||
|   ) | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user