[Hackweek] Add Author page (#93)

Initial design and code for the authors page

* Updates PostLayout and Index page to link to author
* Adds getPostsByAuthor
* Adds author page
* Add Stackoverflow icon and links
* Use avatar as unfurl image

components/SEO.js

@@ -32,9 +32,14 @@ const CommonSEO = ({ title, description, ogType, ogImage, twImage, canonicalUrl
   )
 }
 
-export const PageSEO = ({ title, description }) => {
-  const ogImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner
-  const twImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner
+export const PageSEO = ({ title, description, ogImage }) => {
+  let ogImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner
+  let twImageUrl = siteMetadata.siteUrl + siteMetadata.socialBanner
+
+  if (ogImage !== undefined) {
+    ogImageUrl = twImageUrl = siteMetadata.siteUrl + ogImage
+  }
+
   return (
     <CommonSEO
       title={title}

components/social-icons/index.js

@@ -5,6 +5,8 @@ import Youtube from './youtube.svg'
 import Linkedin from './linkedin.svg'
 import Twitter from './twitter.svg'
 import HackerNews from './hackernews.svg'
+import Link from './link.svg'
+import Stackoverflow from './stackoverflow.svg'
 
 // Icons taken from: https://simpleicons.org/
 
@@ -16,6 +18,8 @@ const components = {
   linkedin: Linkedin,
   twitter: Twitter,
   hackernews: HackerNews,
+  link: Link,
+  stackoverflow: Stackoverflow,
 }
 
 const SocialIcon = ({ kind, href, size = 8 }) => {

data/authors/abhijeetprasad.md

@@ -3,4 +3,7 @@ name: Abhijeet Prasad
 avatar: /static/avatars/default.png
 occupation: Senior Software Engineer
 twitter: https://twitter.com/imabhiprasad
+github: https://github.com/AbhiPrasad
 ---
+
+Senior Software Engineer working on Sentry’s JavaScript SDKs

data/authors/adammckerlie.md

@@ -4,6 +4,7 @@ avatar: /static/avatars/adammckerlie.png
 occupation: Director of Engineering
 twitter: https://twitter.com/adammckerlie
 linkedin: https://www.linkedin.com/adammckerlie
+url: https://mckerlie.com
 ---
 
-Some text
+Adam is a Director of Engineering at Sentry. He enjoys coding, eating and baking bread.

data/authors/antonovchinnikov.md

@@ -2,6 +2,8 @@
 name: Anton Ovchinnikov
 avatar: /static/avatars/antonovchinnikov.png
 occupation: Senior Software Engineer
+github: https://github.com/tonyo
+url: https://tonyo.info/
 ---
 
-Some text
+Anton is a Senior Software Engineer at Sentry. During his tenure, Anton has worked on evolving and scaling the Sentry’s cloud infrastructure as an Operations Engineer, contributed to various Sentry SDKs, and led quality-related initiatives. Anton is curious about all things Cloud Native and Site Reliability, and gets excited every time he sees an alpaca.

data/authors/antonpirker.md

@@ -1,7 +1,10 @@
 ---
 name: Anton Pirker
-avatar: /static/avatars/default.png
+avatar: /static/avatars/antonpirker.jpeg
 occupation: Senior Software Engineer
+url: https://anton-pirker.at/
+github: https://github.com/antonpirker/
+linkedin: https://www.linkedin.com/in/antonpirker/
 ---
 
-Some text
+Anton is a software engineer from Vienna, Austria. Python makes him smile. Besides software he likes tinkering with and riding bikes.

data/authors/arminronacher.md

@@ -2,7 +2,8 @@
 name: Armin Ronacher
 avatar: /static/avatars/arminronacher.png
 occupation: Principal Architect
+stackoverflow: https://stackoverflow.com/users/19990/armin-ronacher
 twitter: https://twitter.com/mitsuhiko
 ---
 
-Some text
+Armin Ronacher is the Principal Architect at Sentry. He's the creator of the Flask web framework, very emotional about APIs and system architecture.

data/authors/arpadborsos.md

@@ -2,6 +2,8 @@
 name: Arpad Borsos
 avatar: /static/avatars/arpadborsos.png
 occupation: Senior Software Engineer
+url: https://swatinem.de/
+github: https://github.com/Swatinem
 ---
 
-Some text
+Arpad's interested in all things Rust. At Sentry he's responsible for the processing pipeline and Symbolicator. Outside of work, he maintains several open source projects and contributes to the Rust compiler ecosystem.

data/authors/benvinegar.md

@@ -3,6 +3,9 @@ name: Ben Vinegar
 avatar: /static/avatars/benvinegar.png
 occupation: VP of Emerging Technologies
 twitter: https://twitter.com/bentlegen
+github: https://github.com/benvinegar
+linkedin: https://www.linkedin.com/in/benvinegar/
+url: https://benv.ca/
 ---
 
-Some text
+Ben Vinegar is the VP Engineering at Sentry, an open source product that helps teams surface and fix production software issues. He's also the co-author of Third-party JavaScript, a contributor to O’Reilly’s Beautiful JavaScript, and an occasional conference speaker.

data/authors/brunogarcia.md

@@ -3,6 +3,9 @@ name: Bruno Garcia
 avatar: /static/avatars/brunogarcia.png
 occupation: Engineering Manager
 twitter: https://twitter.com/brungarc
+stackoverflow: https://stackoverflow.com/users/1977143/bruno-garcia
+github: https://github.com/bruno-garcia
+url: https://garcia.in
 ---
 
-Some text
+A Software Engineer who is very intense about SDKs, world traveller and thinks home is wherever you set your beer down.

data/authors/evanpurkhiser.md

@@ -1,7 +1,9 @@
 ---
 name: Evan Purkhiser
 avatar: /static/avatars/evanpurkhiser.png
-occupation: Senior Engineer
+occupation: Senior Software Engineer
+ur: https://evanpurkhiser.com/
+github: https://github.com/evanpurkhiser
 ---
 
-Some text
+Evan Purkhiser is a software engineer who is passionate about building high quality systems, tools, and applications. He is continually striving to build something he's proud of, something he knows he didn’t take shortcuts on, and something worth sharing. He has a deep appreciation for modern design aesthetics and robust interaction design. The melding of form and function is his holy grail.

data/authors/filippopacifici.md

@@ -4,5 +4,3 @@ avatar: /static/avatars/filippopacifici.png
 occupation: Staff Engineer
 twitter: https://twitter.com/filippopacifici
 ---
-
-Some text

data/authors/francesconovy.md

@@ -1,6 +1,9 @@
 ---
 name: Francesco Novy
-avatar: /static/avatars/default.png
+avatar: /static/avatars/francesconovy.jpeg
 occupation: Senior Software Engineer
-github: https://github.com/mydea 
+github: https://github.com/mydea
+url: https://fnovy.com/
 ---
+
+A software engineer with a passion for all things JavaScript, (board)games and travelling Europe by train.

data/authors/indragiekarunaratne.md

@@ -1,9 +1,11 @@
 ---
 name: Indragie Karunaratne
-avatar: /static/avatars/default.png
+avatar: /static/avatars/indragiekarunaratne.png
 occupation: Director of Engineering
 twitter: https://twitter.com/indragie
 linkedin: https://linkedin.com/in/indragie/
+stackoverflow: https://stackoverflow.com/users/153112/indragie
+url: https://indragie.com/
 ---
 
-Some text
+Director of Engineering at Sentry working on Profiling and Session Replay. Formerly CTO/co-founder of Specto, mobile infrastructure engineer at Meta, and independent macOS & iOS developer.

data/authors/jamescunningham.md

@@ -4,5 +4,3 @@ avatar: /static/avatars/james.png
 occupation: Engineer
 twitter: https://twitter.com/jtcunning
 ---
-
-Some text

data/authors/janmichaelauer.md

@@ -3,6 +3,6 @@ name: Jan Michael Auer
 avatar: /static/avatars/jan.png
 occupation: Staff Engineering
 twitter: https://twitter.com/jan_auer
+stackoverflow: https://stackoverflow.com/users/4228225/jan-michael-auer
+github: https://github.com/jan-auer
 ---
-
-Some text

data/authors/kamilogorek.md

@@ -3,7 +3,6 @@ name: Kamil Ogórek
 avatar: /static/avatars/kamilogorek.png
 occupation: Senior Software Engineer
 twitter: https://twitter.com/kamilogorek
+stackoverflow: https://stackoverflow.com/users/1690906/kamil-og%c3%b3rek
 linkedin: https://linkedin.com/in/kamilogorek/
 ---
-
-Some text

data/authors/katiebyers.md

@@ -1,7 +1,9 @@
 ---
 name: Katie Byers
-avatar: /static/avatars/default.png
-occupation: Senior Software Engineer
+avatar: /static/avatars/katiebyers.jpeg
+occupation: Software Engineer
+github: https://github.com/lobsterkatie
+linkedin: https://www.linkedin.com/in/byerskatie/
 ---
 
-Some text
+Katie has been at Sentry since 2018, and has worked on the SDK and Issues teams. Based in San Francisco, but still a proud member of #redsoxnation. Listens to too many podcasts. Likes all dogs (and some people, too!).

data/authors/lazarnikolov.md

@@ -1,8 +1,8 @@
 ---
 name: Lazar Nikolov
-avatar: /static/avatars/default.png
+avatar: /static/avatars/lazarnikolov.png
 occupation: Developer Advocate
 twitter: https://twitter.com/NikolovLazar
 ---
 
-Some text
+Lazar Nikolov is a developer advocate with a passion for learning and teaching. He’s got a knack for anything UI: frontend frameworks, design, CSS. He’s a professional side-project starter, and amateur side-project finisher.

data/authors/markstory.md

@@ -2,6 +2,10 @@
 name: Mark Story
 avatar: /static/avatars/markstory.png
 occupation: Staff Engineer
+stackoverflow: https://stackoverflow.com/users/186379/mark-story
+twitter: https://mastodon.social/@markstory
+github: https://github.com/markstory
+url: https://mark-story.com
 ---
 
-Some text
+Mark is a staff-engineer at Sentry, and open source enthusiast. He's also built seven mechanical keyboards and counting!

data/authors/markushintersteiner.md

@@ -3,6 +3,7 @@ name: Markus Hintersteiner
 avatar: /static/avatars/markushintersteiner.jpg
 twitter: https://twitter.com/markushi_
 github: https://github.com/markushi
+url: https://androiddev.social/@markushi
 ---
 
-Sentry
+Still can’t decide on a favourite programming language. Alpine adventurer and potato lover.

data/authors/priscilaoliveira.md

@@ -3,6 +3,9 @@ name: Priscila Oliveira
 avatar: /static/avatars/priscilaoliveira.png
 occupation: Software Engineer
 twitter: https://twitter.com/priscilawebdev
+url: https://priscilawebdev.github.io/priscilaoliveira/
+linkedin: https://www.linkedin.com/in/priscilawebdev
+github: https://github.com/priscilawebdev
 ---
 
-Some text
+Priscila Oliveira is a Software Engineer at Sentry, focused on building and improving product features that empower software development teams to do their best work, all while writing open-source code. She also contributes to the open-source library Verdaccio and helps organize technology meetups in Vienna. In her free time, Priscila enjoys traveling, watching series, and spending time with her family and pets.

data/authors/scottcooper.md

@@ -5,4 +5,4 @@ occupation: Senior Software Engineer
 twitter: https://twitter.com/scttcper
 ---
 
-Some text
+Scott Cooper is a San Francisco web developer who's all about using TypeScript to create remarkable digital experiences. Beyond coding, he indulges in tortas and relishes the Pacifica Beach Taco Bell. With an innovative spirit and a palate for flavors, Scott adds a distinctive touch of creativity to the realm of web development.

data/authors/simoncropp.md

@@ -1,6 +1,6 @@
 ---
 name: Simon Cropp
 avatar: /static/avatars/default.png
+stackoverflow: https://stackoverflow.com/users/53158/simon
+github: https://github.com/SimonCropp
 ---
-
-Some text

data/authors/steveneubank.md

@@ -5,5 +5,3 @@ occupation: Product Manager
 twitter: https://twitter.com/steven_boKnows
 linkedin: https://linkedin.com/in/https://www.linkedin.com/in/steven-eubank-72a2316b//
 ---
-
-Some text

data/authors/tedkaemming.md

@@ -4,5 +4,3 @@ avatar: /static/avatars/ted.png
 occupation: Engineer
 twitter: https://twitter.com/tkaemming
 ---
-
-Some text

layouts/AuthorLayout.js

@@ -1,39 +1,85 @@
 import SocialIcon from '@/components/social-icons'
 import Image from 'next/image'
 import { PageSEO } from '@/components/SEO'
+import formatDate from '@/lib/utils/formatDate'
+import Link from '@/components/Link'
 
-export default function AuthorLayout({ children, frontMatter }) {
-  const { name, avatar, occupation, company, email, twitter, linkedin, github } = frontMatter
+export default function AuthorLayout({ children, frontMatter, posts }) {
+  const { name, avatar, occupation, url, stackoverflow, twitter, linkedin, github } = frontMatter
 
   return (
     <>
-      <PageSEO title={`About - ${name}`} description={`About me - ${name}`} />
+      <PageSEO title={`About - ${name}`} description={`About me - ${name}`} ogImage={avatar} />
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 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">
             <Image
               src={avatar}
               alt="avatar"
-              width="192px"
-              height="192px"
+              width="192"
+              height="192"
               className="h-48 w-48 rounded-full"
             />
-            <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
+            <h1 className="pb-2 pt-4 text-4xl font-bold leading-8 tracking-tight">{name}</h1>
             <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 space-x-3 pt-6">
-              <SocialIcon kind="mail" href={`mailto:${email}`} />
               <SocialIcon kind="github" href={github} />
               <SocialIcon kind="linkedin" href={linkedin} />
               <SocialIcon kind="twitter" href={twitter} />
+              <SocialIcon kind="stackoverflow" href={stackoverflow} />
+              <SocialIcon kind="link" href={url} />
             </div>
           </div>
-          <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>
+          <div className="xl:col-span-2">
+            <h2 className="mb-2 text-4xl font-bold">About</h2>
+            <div className="prose max-w-none pb-8 text-gray-500 dark:text-gray-400">{children}</div>
+            {posts && posts.length > 0 && (
+              <div>
+                <h2 className="mb-2 text-4xl font-bold">Posts</h2>
+                {posts.map((frontMatter) => {
+                  const { slug, date, title, summary, tags } = frontMatter
+                  return (
+                    <article key={slug}>
+                      <div className="space-y-2 pb-8 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
+                        <div className="space-y-5 xl:col-span-3">
+                          <div className="space-y-6">
+                            <div>
+                              <h3 className="text-2xl font-bold leading-8 tracking-tight">
+                                <Link
+                                  href={`/blog/${slug}`}
+                                  className="text-gray-900 dark:text-gray-100"
+                                >
+                                  {title}
+                                </Link>
+                              </h3>
+                              <time
+                                className="font-xs text-gray-500 dark:text-gray-400"
+                                dateTime={date}
+                              >
+                                {formatDate(date)}
+                              </time>
+                            </div>
+                            <div className="prose max-w-none text-gray-500 dark:text-gray-400">
+                              {summary}
+                            </div>
+                          </div>
+                          <div className="text-base font-medium leading-6">
+                            <Link
+                              href={`/blog/${slug}`}
+                              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                              aria-label={`Read "${title}"`}
+                            >
+                              Read more &rarr;
+                            </Link>
+                          </div>
+                        </div>
+                      </div>
+                    </article>
+                  )
+                })}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </>