Multiple authors on a single post gatsbyjs.org/blog #3199
Comments
|
mocked up horizontal and vertical versions cc @shannonbux (used Sketch, went very well!)
|
|
Hi @rdela! 👋 About to 💤, but real quick: I had thought of sth like the (inspiring ;-)) Segment Blog does:
|
|
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). |
|
Excellent ideas, thanks all. Will PR an first draft implementation along with new post using it soon. |
|
Hello Gatsby hive mind 🐝🧠 paging @calcsam @fk @KyleAMathews |
|
Gonna go with comma separated |
|
Comma separated will break the graphql queries. Should switch to array. |
|
So we should pass like… or do not need to worry about whitespace and can do… Is this even what you meant? |
|
Like how reactjs.org does it e.g. https://github.com/reactjs/reactjs.org/blob/master/content/blog/2013-06-05-why-react.md |
|
oh good that is much better |
|
Hello 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 |
|
@KyleAMathews should I just cook up something to replicate with lodash |
|
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? |
|
Thanks, direction about structure is super helpful. Have to have working code to post screenshots. So far most of my changes are in
Will check length of the author array and hand off to the new components from |
|
Good point :-) Just have two components — one for posts with one author and another for posts with multiple authors. Check the length of the |
@calcsam I've been wondering what we would shrink that info down to:
Another thing to decide on for multiple author posts is where we move the date (and reading time).
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). |
|
Thanks Kyle! that is slightly different from what I was about to do and seems easier 😎 Same for 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:
…a la excellent Segment example from @fk screenshot above and reactjs.org blog. Probably ditch bios as well ( 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 |
|
Also worth looking at other well designed blogs e.g. Ghost & Medium — how they handle single vs multi-author posts. |
|
Good call will do a quick survey before I do anything new |
|
Survey results: Think I like Airbnb Design approach best. Example: 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 Avatars grouped left and list of authors before post. Facebook Engineering Blog Avatar and author name as individual So remaining questions, supposing eveyone agrees with me are:
|
|
@KyleAMathews You cool with me implementing Airbnb Design approach for review? |
|
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/) |
|
Had my 5 cents sitting around in a tab for a while but didn't manage to post – sorry 🙄:
+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.
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! 🙏 |
|
Wait, um, what is a contributor page? Is this an [example?](
https://www.gatsbyjs.org/contributors/josh-weaver/)
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 ***@***.***> 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
<#3199 (comment)>
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
<#3199 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/Ae9o2tJi1_JKv1iYnl2Qr7S2cCksYMHWks5tHC1fgaJpZM4RA5_g>
.
|
|
(Still catching up apparently :-/) … @rdela You got a PR going for this already? |
|
@fk I have a local branch with the multi-author post added, let me catch up to |
|
@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. |
|
@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 |
|
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 ***@***.***> 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
<#3199 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/Ae9o2rUUi8sYgxZErZKrjNBINRaOgq-aks5tP1bbgaJpZM4RA5_g>
.
|
|
@shannonbux I will try to save you the scroll-back!
Kyle:
…assuming same approach for blog index / blog-post-preview-item.js We would add: Kyle:
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. |
|
@rdela Thank you for the mockups! 🤗 My initial reaction was 👍 to #2 from #3199 (comment). Gave it 5 minutes to simmer and it holds up. |
|
That sounds great. Love it.
…On Tue, Jan 30, 2018 at 11:21 AM, Ricky de Laveaga ***@***.*** > wrote:
@shannonbux <https://github.com/shannonbux> I will try to save you the
scroll-back!
as far as the multi-author view
Kyle
<#3199 (comment)>:
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
<#3199 (comment)>:
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
<#3199 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/Ae9o2nn8NLgTGLLltehQ7E3RbGZKbCA4ks5tP2vSgaJpZM4RA5_g>
.
|
…ws (#5813) * Increase author link visibility and link avatars in blog posts + previews Increase author link visibility and link avatar - `www/src/components/blog-post-preview-item.js` - `www/src/templates/template-blog-post.js` Ref #3199 #4354 #5396 Confirmed addition of `transform: translateZ(0)` in blog-post-preview-item.js prevents image twitch in Chrome when hovering the card, way to go @fk * lose font-size increase and bold * lose font-size increase and bold for post too * move keys that require !important to the && selector ...which glamor offers to increase specifity (ref. https://github.com/threepointone/glamor/blob/master/docs/selectors.md) via @fk review `src/components/blog-post-preview-item.js` * remove !important from blog preview and post layout
|
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! |
@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?
The text was updated successfully, but these errors were encountered: