Gatsby: Multiple authors on a single post gatsbyjs.org/blog

[rdela]

@fk @KyleAMathews said maybe you had considered how to approach multiple authors in a single post for the blog? Looks like we would need to update /blog and single post layouts? Any ideas code or visual before I take a crack?

[rdela]

mocked up horizontal and vertical versions cc @shannonbux (used Sketch, went very well!)

[fk]

Hi @rdela! 👋 About to 💤, but real quick: I had thought of sth like the (inspiring ;-)) Segment Blog does:

[KyleAMathews]

Was just chatting with @calcsam about this and he suggested that for multi-author posts we shrink what we're showing and then on hover show the full bio (while still letting people click through of course).

[rdela]

Excellent ideas, thanks all. Will PR an first draft implementation along with new post using it soon.

[rdela]

Hello Gatsby hive mind 🐝🧠 paging @calcsam @fk @KyleAMathews
So implementation wise, we want a comma separated list of authors in same author field or md style list like tags in https://github.com/Vagr9K/gatsby-material-starter/blob/master/gatsby-node.js#L111 / https://raw.githubusercontent.com/Vagr9K/gatsby-material-starter/master/content/sample-posts/Introducing-Gatsby-Material-Starter/index.md

[rdela]

Gonna go with comma separated author: "Author One, Author Two" for backwards compatibility with existing posts unless someone else interjects very soon

[KyleAMathews]

Comma separated will break the graphql queries. Should switch to array.

[rdela]

So we should pass like…

authors: 
    - "Author One"
    - "Author Two"

or do not need to worry about whitespace and can do…

authors: 
    - Author One
    - Author Two

Is this even what you meant?

[KyleAMathews]

Like how reactjs.org does it e.g. https://github.com/reactjs/reactjs.org/blob/master/content/blog/2013-06-05-why-react.md

[rdela]

oh good that is much better

[rdela]

Hello toCommaSeparatedList

https://github.com/reactjs/reactjs.org/blob/master/src/utils/toCommaSeparatedList.js

We do not have anything equivalent in the repo already do we?

Usage on reactjs.org
https://github.com/reactjs/reactjs.org/blob/master/src/pages/blog/all.html.js#L84
https://github.com/reactjs/reactjs.org/blob/master/src/components/MarkdownPage/MarkdownPage.js#L77

[rdela]

@KyleAMathews should I just cook up something to replicate with lodash join and last (for length 2 and 2+ post author arrays), or should we bring in utils/toCommaSeparatedList.js from reactjs.org? Other than this question I have POC working on my local branch and I am ready to commit that then add UI ideas from @fk @calcsam for discussion and review

[rdela]

https://lodash.com/docs#join / https://lodash.com/docs#last

[KyleAMathews]

The algorithm should be pretty simple — just have two components, one for a single author and the other for a multi-author post. Then check the length of the author array and pass the author array to one or the other component.

Let's focus on the design first though — the code won't be a problem. How about you post your screenshots for review?

[rdela]

Thanks, direction about structure is super helpful. Have to have working code to post screenshots.

So far most of my changes are in

• www/src/components/blog-post-preview-item.js
• www/src/templates/template-blog-post.js

Will check length of the author array and hand off to the new components from template-blog-post.js then work on new designs

[KyleAMathews]

Good point :-)

Just have two components — one for posts with one author and another for posts with multiple authors. Check the length of the authors array and pass it to one or the other.

[fk]

Was just chatting with @calcsam about this and he suggested that for multi-author posts we shrink what we're showing and then on hover show the full bio (while still letting people click through of course).

@calcsam I've been wondering what we would shrink that info down to:

• Truncating the bio via CSS is the easiest, but also could cause some unfortunate results.
• We could also add a "title" field to our YAML data and use that for posts with multiple authors.

Another thing to decide on for multiple author posts is where we move the date (and reading time).
I mocked up s/th real quick that incorporates the title field, slightly reduces author avatar image size and just moves the date next to the article title:

One more thing that'd be cool to take a look at @rdela is making the link to the author's contributor page (e.g. https://www.gatsbyjs.org/contributors/josh-weaver/) a bit more obvious, but without getting to "loud".

For the index page I'd suggest sticking to something close to the segment.com layout as it's a solution that holds up for more than two authors without cluttering/defragmenting the layout too much (the latter being an issue eventually on individual post pages to IMO, too).

[rdela]

Thanks Kyle! that is slightly different from what I was about to do and seems easier 😎

Same for blog-post-preview-item.js for blog index I suppose, check array length then hand off to two more new components to do full expanded (current) single-author preview or multi-author compressed version?

What I have now is not compressed for multi-author single posts, and as Sam and Florian predicted 4 authors takes up tons of space. And would no matter how we arrange with flexbox, just like it did in my sketch mockups. Makes tons of sense to separate GraphQL queries using separate post components as Kyle suggests, as beyond smaller avatar sizes for multi-author I think we may want to reorder things in both post index and single post view as Florian suggests:

as it's a solution that holds up for more than two authors without cluttering/defragmenting the layout too much (the latter being an issue eventually on individual post pages to IMO, too).

…a la excellent Segment example from @fk screenshot above and reactjs.org blog. Probably ditch bios as well (text-overflow: ellipsis is fun but agree with Florian about edge cases) and just focus on making the contributor links more obvious in all cases once we get multi-author posts and post index looking reasonable.

Attempt to draw more attention to the fact the names are links to contributor pages, single author version.

Florian since you took the time to mock it up (thanks!) here is what simple refactor to split date/reading time out with zero design TLC looks like. Repeat, this is not final and does not want design notes Your version with date/reading time closer to title already looks better I think.

Single and multi-author logic all in template-blog-post.js (splitting this out now to do new compressed design version, will post screenshot here as soon as I am satisfied with it).

[KyleAMathews]

Also worth looking at other well designed blogs e.g. Ghost & Medium — how they handle single vs multi-author posts.

[rdela]

Good call will do a quick survey before I do anything new

[rdela]

Survey results:

Think I like Airbnb Design approach best.

Example:
Designing for Access – Creating new features for guests with disabilities.
https://airbnb.design/designing-for-access/

Comma-separated length-conscious list of authors at the top of the post, avatars and bios below the post. Even more reason for separate single/multi-author post components, good call @KyleAMathews

Other examples:

Segment Blog
Allocation Efficiency in High-Performance Go Services
https://segment.com/blog/allocation-efficiency-in-high-performance-go-services/

Avatars grouped left and list of authors before post.

Facebook Engineering Blog
ONNX V1 released
https://code.facebook.com/posts/172769176791141/onnx-v1-released/

Avatar and author name as individual inline-table cells grouped left.

So remaining questions, supposing eveyone agrees with me are:

• Do we include avatar and bio beneath post on multi-author post or leave that for contributor pages?
• Do we alter current single author template at all? If we are trying to make author links more visible, do we like the bolder/more-heavyweight purple Futura treatment previewed in the screenshot above? Do anyone have other ideas to draw attention to these links? @fk

[rdela]

@KyleAMathews You cool with me implementing Airbnb Design approach for review?

[KyleAMathews]

Yeah, let's try Airbnb's design but with the avatars still like Segment (and like our blog post preview component https://www.gatsbyjs.org/blog/)

[fk]

Had my 5 cents sitting around in a tab for a while but didn't manage to post – sorry 🙄:

Airbnb Design approach […] avatars and bios below the post

+1 for bio below the post for multiple authors. I remember chatting about this with @KyleAMathews a while ago and as I remember he disliked moving that information down so far; however I think this is a good solution for multiple authors as it saves us a few UI headaches and adding another field to the author meta to work around potential truncation issues.

Do anyone have other ideas to draw attention to these links?

Yeah those are a bit tricky. Not sure if we maybe should try underlines? Those would help on the index page, too; but I think for a first shot just adding color/matching the index page is 👍:

Paging @shannonbux – did you get any feedback regarding contributor pages being hard to find yet? :-D

Another thing: I forgot linking the author avatar pics. Would be cool @rdela if you could get that in along this, too! 🙏

[shannonbux]

Wait, um, what is a contributor page? Is this an example?

If so, I definitely did not know contributor pages existed until you
mentioned it and I tried to find it just now. On a blog post, the author
name doesn't look "clickable" to me. We could verify this by asking several
people to do these tasks. Watching them do it live is best, but even via
email is fine:

1. Go to a Gatsby blog article.
2. Find the page about the author(s).

Then ask them how long this took them and how many clicks it took...

On Wed, Jan 3, 2018 at 6:46 PM, Florian Kissling [e-mail]
wrote:

Had my 5 cents sitting around in a tab for a while but didn't manage to
post – sorry 🙄:

Airbnb Design approach […] avatars and bios below the post

+1 for bio below the post for multiple authors. I remember chatting about
this with @KyleAMathews https://github.com/kyleamathews a while ago and
as I remember he disliked moving that information down so far; however I
think this is a good solution for multiple authors as it saves us a few UI
headaches and adding another field
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-352932543
to the author meta to work around potential truncation issues.

Do anyone have other ideas to draw attention to these links?

Yeah those are a bit tricky. Not sure if we maybe should try underlines?
Those would help on the index page, too; but I think for a first shot just
adding color/matching the index page is 👍:

[image: image]
https://user-images.githubusercontent.com/21834/34366161-5ad4cd78-ea98-11e7-8313-bfb6cd614f44.png

Paging @shannonbux https://github.com/shannonbux – did you get any
feedback regarding contributor pages being hard to find yet? :-D

Another thing: I forgot linking the author avatar pics. Would be cool
@rdela https://github.com/rdela if you could get that in along this,
too! 🙏

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-355177724,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2tJi1_JKv1iYnl2Qr7S2cCksYMHWks5tHC1fgaJpZM4RA5_g
.

[fk]

(Still catching up apparently :-/) …
@shannonbux Yes, that's a contributor page … and your answer is 💯 worst case scenario.
Let's fix this!

@rdela You got a PR going for this already?

[rdela]

@fk I have a local branch with the multi-author post added, let me catch up to master and I will open the PR. Beyond linking avatar pics the idea is to add color to contributor page links, but not increase font-weight, in both the post and index views?
Maybe the underline or background-color appears on hover?

[fk]

@rdela 👍 🙏

As for the links: I'm personally leaning towards always showing the underline at the moment, that should be as clear as it can get – IMO – but I probably should not have the final word on this. 😉

I also thought about adding some kind of icon, but I think an avatar icon + an arrow pointing up-right might be mistaken as a link to the author's website (external). Another thing would be to add some more copy – "Contributor page", "All articles", "Info", "More Info" … meh. Maybe adding that info below the article is another thing to think about.

_Then again_, looking at a random article on medium.com … we might overthink this … but I guess on Medium the audience's expectations are a little different.

[rdela]

@fk I have avatars all linking to contrib. pages. Glad you linked to Medium, I was wondering where the Author above title style came from. This is the only example of this I can find, our other inspirations: Airbnb, Segment, and Facebook Engineering all go with the more expected and obvious (IMHO) title up top. Matches blog post preview component as well. In this mock with a couple options I have swapped them.

Happy to revert if people are attached to avatar up top post design.

Also may make sense to break PR into 2 phases? Style updates in first one then multi-author in second? Cc @KyleAMathews

[shannonbux]

Last night I had a dream that this project was finished, lol! So funny.

It seems to me that as long as the name changes (either to an obviously
different color or underlined) when you hover over it, that could be
enough. Underlined all the time or a permanently different color would be
even more obvious. I can't remember where this conversation has landed as
far as the multi-author view. I'll scroll back when I have more time for
that!

On Tue, Jan 30, 2018 at 9:52 AM, Ricky de Laveaga [e-mail]
wrote:

@fk https://github.com/fk I have avatars all linking to contrib. pages.
Glad you linked to Medium, I was wondering where the Author above title
https://medium.com/personal-growth/make-life-easier-on-yourself-by-accepting-good-enough-accept-the-lack-of-perfect-5bac47c98ec8
style came from. This is the only example of this I can find, our other
inspirations: Airbnb https://airbnb.design/designing-for-access/,
Segment
https://segment.com/blog/allocation-efficiency-in-high-performance-go-services/,
and Facebook Engineering
https://code.facebook.com/posts/172769176791141/onnx-v1-released/ all
go with the more expected and obvious (IMHO) title up top. Matches blog
post preview component as well. In this mock with a couple options I have
swapped them.

[image: blog-post-links]
https://user-images.githubusercontent.com/74381/35582033-683b80fe-05a2-11e8-9652-fceee317f87b.jpg

Happy to revert if people are attached to avatar up top post design.

Also may make sense to break PR into 2 phases? Style updates in first one
then multi-author in second? Cc @KyleAMathews
https://github.com/kyleamathews

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-361677102,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2rUUi8sYgxZErZKrjNBINRaOgq-aks5tP1bbgaJpZM4RA5_g
.

[rdela]

@shannonbux I will try to save you the scroll-back!

as far as the multi-author view

Kyle:

have two components, one for a single author and the other for a multi-author post. Then check the length of the author array and pass the author array to one or the other component.

…assuming same approach for blog index / blog-post-preview-item.js

We would add:
www/src/components/blog-post-preview-item-multi.js
and
/www/src/templates/template-blog-post-multi.js

Kyle:

try Airbnb's design but with the avatars still like Segment (and like our blog post preview component https://www.gatsbyjs.org/blog/)

Segment example

Whether or not we decide to lift the title above author avatar/bio/timeToRead/date in post view or not, idea for new multi-author post template and index preview multi-author component is to group avatars to the left and then list authors to the right of avatars. Then, at bottom of multi-author post have avatars again with name + bio a la Airbnb Design example.

[fk]

@rdela Thank you for the mockups! 🤗

My initial reaction was 👍 to #2 from https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-361677102. Gave it 5 minutes to simmer and it holds up.

[shannonbux]

That sounds great. Love it.

On Tue, Jan 30, 2018 at 11:21 AM, Ricky de Laveaga <[email protected]

wrote:

@shannonbux https://github.com/shannonbux I will try to save you the
scroll-back!

as far as the multi-author view

Kyle
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-352924645:

have two components, one for a single author and the other for a
multi-author post. Then check the length of the author array and pass the
author array to one or the other component.

…assuming same approach for blog index / blog-post-preview-item.js

We would add:
www/src/components/blog-post-preview-item-multi.js
and
/www/src/templates/template-blog-post-multi.js

Kyle
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-354980663:

try Airbnb's design but with the avatars still like Segment (and like our
blog post preview component https://www.gatsbyjs.org/blog/)

Segment example
https://segment.com/blog/allocation-efficiency-in-high-performance-go-services/

Whether or not we decide to lift the title above author
avatar/bio/timeToRead/date in post view or not, idea for new multi-author
post template and index preview multi-author component is to group avatars
to the left and then list authors to the right of avatars. Then, at bottom
of multi-author post have avatars again with name + bio a la Airbnb
Design example https://airbnb.design/designing-for-access/#share-post.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/3199#issuecomment-361704567,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2nn8NLgTGLLltehQ7E3RbGZKbCA4ks5tP2vSgaJpZM4RA5_g
.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!