From 83ead86d0d30f158b326e13c00677a2f0be5c850 Mon Sep 17 00:00:00 2001 From: Adam McKerlie Date: Tue, 29 Aug 2023 16:24:39 -0400 Subject: [PATCH] [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 | 11 ++- components/social-icons/index.js | 4 + components/social-icons/link.svg | 1 + components/social-icons/stackoverflow.svg | 1 + data/authors/abhijeetprasad.md | 3 + data/authors/adammckerlie.md | 3 +- data/authors/antonovchinnikov.md | 4 +- data/authors/antonpirker.md | 7 +- data/authors/arminronacher.md | 3 +- data/authors/arpadborsos.md | 4 +- data/authors/benvinegar.md | 5 +- data/authors/brunogarcia.md | 5 +- data/authors/evanpurkhiser.md | 6 +- data/authors/filippopacifici.md | 2 - data/authors/francesconovy.md | 7 +- data/authors/indragiekarunaratne.md | 6 +- data/authors/jamescunningham.md | 2 - data/authors/janmichaelauer.md | 4 +- data/authors/kamilogorek.md | 3 +- data/authors/katiebyers.md | 8 +- data/authors/lazarnikolov.md | 4 +- data/authors/markstory.md | 6 +- data/authors/markushintersteiner.md | 3 +- data/authors/priscilaoliveira.md | 5 +- data/authors/scottcooper.md | 2 +- data/authors/simoncropp.md | 4 +- data/authors/steveneubank.md | 2 - data/authors/tedkaemming.md | 2 - layouts/AuthorLayout.js | 74 ++++++++++++++---- layouts/PostLayout.js | 17 ++-- lib/mdx.js | 55 +++++++++++++ pages/about/[slug].js | 39 +++++++++ pages/index.js | 15 +++- pages/tags.js | 46 +++++++++-- public/static/avatars/antonpirker.jpeg | Bin 0 -> 31650 bytes public/static/avatars/francesconovy.jpeg | Bin 0 -> 42965 bytes public/static/avatars/indragiekarunaratne.png | Bin 0 -> 342299 bytes public/static/avatars/katiebyers.jpeg | Bin 0 -> 72462 bytes public/static/avatars/lazarnikolov.png | Bin 0 -> 145680 bytes sentry.client.config.js | 17 ++-- sentry.edge.config.js | 3 +- sentry.server.config.js | 8 +- 42 files changed, 308 insertions(+), 83 deletions(-) create mode 100644 components/social-icons/link.svg create mode 100644 components/social-icons/stackoverflow.svg create mode 100644 pages/about/[slug].js create mode 100644 public/static/avatars/antonpirker.jpeg create mode 100644 public/static/avatars/francesconovy.jpeg create mode 100644 public/static/avatars/indragiekarunaratne.png create mode 100644 public/static/avatars/katiebyers.jpeg create mode 100644 public/static/avatars/lazarnikolov.png diff --git a/components/SEO.js b/components/SEO.js index 0d1dac0..2665091 100644 --- a/components/SEO.js +++ b/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 ( { diff --git a/components/social-icons/link.svg b/components/social-icons/link.svg new file mode 100644 index 0000000..ed0217c --- /dev/null +++ b/components/social-icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/social-icons/stackoverflow.svg b/components/social-icons/stackoverflow.svg new file mode 100644 index 0000000..ab83808 --- /dev/null +++ b/components/social-icons/stackoverflow.svg @@ -0,0 +1 @@ +Stack Overflow \ No newline at end of file diff --git a/data/authors/abhijeetprasad.md b/data/authors/abhijeetprasad.md index 75307b4..1f29962 100644 --- a/data/authors/abhijeetprasad.md +++ b/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 diff --git a/data/authors/adammckerlie.md b/data/authors/adammckerlie.md index fc6b923..cf95170 100644 --- a/data/authors/adammckerlie.md +++ b/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 \ No newline at end of file +Adam is a Director of Engineering at Sentry. He enjoys coding, eating and baking bread. diff --git a/data/authors/antonovchinnikov.md b/data/authors/antonovchinnikov.md index eb6e8df..ddaddfb 100644 --- a/data/authors/antonovchinnikov.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/antonpirker.md b/data/authors/antonpirker.md index 24ec79c..eb46d42 100644 --- a/data/authors/antonpirker.md +++ b/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 \ No newline at end of file +Anton is a software engineer from Vienna, Austria. Python makes him smile. Besides software he likes tinkering with and riding bikes. diff --git a/data/authors/arminronacher.md b/data/authors/arminronacher.md index c4e81df..8fb8302 100644 --- a/data/authors/arminronacher.md +++ b/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. diff --git a/data/authors/arpadborsos.md b/data/authors/arpadborsos.md index 6095108..6cc21cb 100644 --- a/data/authors/arpadborsos.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/benvinegar.md b/data/authors/benvinegar.md index ae6d7bd..e37f6f0 100644 --- a/data/authors/benvinegar.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/brunogarcia.md b/data/authors/brunogarcia.md index cd10b84..371df76 100644 --- a/data/authors/brunogarcia.md +++ b/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. diff --git a/data/authors/evanpurkhiser.md b/data/authors/evanpurkhiser.md index 5566683..26acc60 100644 --- a/data/authors/evanpurkhiser.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/filippopacifici.md b/data/authors/filippopacifici.md index d827e11..a6522b1 100644 --- a/data/authors/filippopacifici.md +++ b/data/authors/filippopacifici.md @@ -4,5 +4,3 @@ avatar: /static/avatars/filippopacifici.png occupation: Staff Engineer twitter: https://twitter.com/filippopacifici --- - -Some text \ No newline at end of file diff --git a/data/authors/francesconovy.md b/data/authors/francesconovy.md index 15d3e91..32bde72 100644 --- a/data/authors/francesconovy.md +++ b/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. diff --git a/data/authors/indragiekarunaratne.md b/data/authors/indragiekarunaratne.md index 9581054..f724881 100644 --- a/data/authors/indragiekarunaratne.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/jamescunningham.md b/data/authors/jamescunningham.md index 01f3998..93eff99 100644 --- a/data/authors/jamescunningham.md +++ b/data/authors/jamescunningham.md @@ -4,5 +4,3 @@ avatar: /static/avatars/james.png occupation: Engineer twitter: https://twitter.com/jtcunning --- - -Some text \ No newline at end of file diff --git a/data/authors/janmichaelauer.md b/data/authors/janmichaelauer.md index b0e5dac..c1eac23 100644 --- a/data/authors/janmichaelauer.md +++ b/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 \ No newline at end of file diff --git a/data/authors/kamilogorek.md b/data/authors/kamilogorek.md index 696db82..631eeb7 100644 --- a/data/authors/kamilogorek.md +++ b/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 \ No newline at end of file diff --git a/data/authors/katiebyers.md b/data/authors/katiebyers.md index 9940b41..c4c0059 100644 --- a/data/authors/katiebyers.md +++ b/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 \ No newline at end of file +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!). diff --git a/data/authors/lazarnikolov.md b/data/authors/lazarnikolov.md index 8a2be12..dd1ac00 100644 --- a/data/authors/lazarnikolov.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/markstory.md b/data/authors/markstory.md index 1dc3cfa..73dbe84 100644 --- a/data/authors/markstory.md +++ b/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 \ No newline at end of file +Mark is a staff-engineer at Sentry, and open source enthusiast. He's also built seven mechanical keyboards and counting! diff --git a/data/authors/markushintersteiner.md b/data/authors/markushintersteiner.md index 6b6b459..de68ebb 100644 --- a/data/authors/markushintersteiner.md +++ b/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. diff --git a/data/authors/priscilaoliveira.md b/data/authors/priscilaoliveira.md index 12b67e2..c77548d 100644 --- a/data/authors/priscilaoliveira.md +++ b/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 \ No newline at end of file +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. diff --git a/data/authors/scottcooper.md b/data/authors/scottcooper.md index 13d9864..4358496 100644 --- a/data/authors/scottcooper.md +++ b/data/authors/scottcooper.md @@ -5,4 +5,4 @@ occupation: Senior Software Engineer twitter: https://twitter.com/scttcper --- -Some text \ No newline at end of file +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. diff --git a/data/authors/simoncropp.md b/data/authors/simoncropp.md index bec71d2..4cb5987 100644 --- a/data/authors/simoncropp.md +++ b/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 \ No newline at end of file diff --git a/data/authors/steveneubank.md b/data/authors/steveneubank.md index 19a0e39..8fd9cff 100644 --- a/data/authors/steveneubank.md +++ b/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 \ No newline at end of file diff --git a/data/authors/tedkaemming.md b/data/authors/tedkaemming.md index 0857a3c..f1fe09c 100644 --- a/data/authors/tedkaemming.md +++ b/data/authors/tedkaemming.md @@ -4,5 +4,3 @@ avatar: /static/avatars/ted.png occupation: Engineer twitter: https://twitter.com/tkaemming --- - -Some text \ No newline at end of file diff --git a/layouts/AuthorLayout.js b/layouts/AuthorLayout.js index f0ea078..379e921 100644 --- a/layouts/AuthorLayout.js +++ b/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 ( <> - +
-
-

- About -

-
avatar -

{name}

+

{name}

{occupation}
-
{company}
- + +
-
{children}
+
+

About

+
{children}
+ {posts && posts.length > 0 && ( +
+

Posts

+ {posts.map((frontMatter) => { + const { slug, date, title, summary, tags } = frontMatter + return ( +
+
+
+
+
+

+ + {title} + +

+ +
+
+ {summary} +
+
+
+ + Read more → + +
+
+
+
+ ) + })} +
+ )} +
diff --git a/layouts/PostLayout.js b/layouts/PostLayout.js index efdeeb2..fb8f414 100644 --- a/layouts/PostLayout.js +++ b/layouts/PostLayout.js @@ -72,7 +72,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0" style={{ gridTemplateRows: 'auto 1fr' }} > -
+
Authors