Blog authors page bugs for authors with 0 posts

[slorber]

Description

This page doesn't look good: https://docusaurus.io/tests/blog/authors

There's a "0" being appended to the author's name when they haven't written anything yet. This has been noticed while upgrading the React Native website:

---

Also, we should probably keep alignment for authors with/without images otherwise it looks messy.

What about generating empty grey placeholders for authors that have no image?

I think we could use the initials + a randomly-generated gradient.

I'd like to avoid relying on an external service, but we can take inspiration from https://github.com/vercel/avatar to build a CSS-only solution? (see https://github.com/vercel/avatar/blob/master/utils/gradient.ts)

---

The author page in this case should also display something more meaningful than this, probably a message telling us the author has not written anything yet, without separator?

[slorber]

@Josh-Cena what do you think about always having an avatar for all blog authors that do not have one? (not just in the blog authors pages but also regular blog posts too?).

I'm thinking that we want to avoid weird alignment. We can still allow blogs with only an author name and no avatar. But as soon as a blog post has an author with avatars, we probably want to add a generated avatar to all authors that do not have one to keep their name aligned?

[Josh-Cena]

I think this is less of a problem with the blog post pages (we never got anyone complaining about it), and only for the author pages. I like the idea of a default avatar for the author pages, but I wonder if we can just have a blank placeholder to occupy the space instead of actually having an image at all?

[slorber]

@Josh-Cena the proposed solution uses CSS gradients, not really an image.

What do you mean by blank placeholder, something like this? @Simek from the RN website has implemented it with swizzle, it may look better than gradients.

(here it's to improve the display when avatars are still loading, but we could use similar placeholders for authors that do not have an avatar, for consistency)

[Josh-Cena]

The blank one looks like it's loading. I was thinking about:

But the solution using generated SVGs and the name initials is also cool. Just need it to be slightly simpler for the default look.