feat: Introducing avatar tooltip

[canerakdas]

Description

I saw it in Slack (OpenJS Foundation) threads and thought it was a good way to support contributors

With this PR, the Tooltip component was created and minor refactors were made to Avatar and AvatarGroup components. In addition, the WithAvatarGroup component was created to make avatars easier to manage to simplify the process

I took care to use the elements/components in the existing design system as a design, I was inspired by (Search typing) in the Figma for the Tooltip component;

https://www.figma.com/design/pu1vZPqNIM7BePd6W8APA5/Node.js?node-id=464-6397&node-type=frame&t=dj6OGYBZLLo5cp4z-0

Validation

• Avatars should continue to work as it is.
• A tooltip should appear for users in authors.json whose website field is exist

Example screenshot;

Related Issues

Related to #7141

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Nov 18, 2024 3:04pm

[mcollina]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

[AugustinMauroy]

After some test on desktop few point:

• For the learn section, all the authors have a GitHub username, so there's no need to go into the authors.json file.
• For the blog section, we'd have to try and standardise the data so that eventually it's just GitHub usernames. To reduce the complexity of things
• Like Matteo said need to found something for mobile

[canerakdas]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

This is the design choice of the radix tooltip component I use, and IMO it is the right choice (https://github.com/radix-ui/primitives/issues/955#issuecomment-960610209)

Here, as an alternative, it may be better to redirect directly when a profile image is clicked on mobile (like GitHub), but the current profile images are too small for mobile resolution, I will check the accessibility and try to implement a better solution👍

[github-actions[bot]]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 95	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[AugustinMauroy]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

This is the design choice of the radix tooltip component I use, and IMO it is the right choice (radix-ui/primitives#955 (comment))

Here, as an alternative, it may be better to redirect directly when a profile image is clicked on mobile (like GitHub), but the current profile images are too small for mobile resolution, I will check the accessibility and try to implement a better solution👍

IMO, double can do the job and increase little bit the size of the avatar for mobile

[ovflowd]

@canerakdas can you resolve the conflicts? 👀

[ovflowd]

FYI I think we should ditch the authors.json and use the GitHub user API to retrieve their profiles from username.

Then we just cache on the server side the resolution of the profile metadata :)

That can be within a follow-up PR btw, but would love that!

[AugustinMauroy]

FYI I think we should ditch the authors.json and use the GitHub user API to retrieve their profiles from username.

Then we just cache on the server side the resolution of the profile metadata :)

That can be within a follow-up PR btw, but would love that!

noted that there are authors who are not GitHub users ‘nodejs project ...’ those can remain in a constant

[ovflowd]

FYI I think we should ditch the authors.json and use the GitHub user API to retrieve their profiles from username.

Then we just cache on the server side the resolution of the profile metadata :)

That can be within a follow-up PR btw, but would love that!

noted that there are authors who are not GitHub users ‘nodejs project ...’ those can remain in a constant

True, authors.json can be a fallback file 🤷

[canerakdas]

FYI I think we should ditch the authors.json and use the GitHub user API to retrieve their profiles from username.

Then we just cache on the server side the resolution of the profile metadata :)

That can be within a follow-up PR btw, but would love that!

noted that there are authors who are not GitHub users ‘nodejs project ...’ those can remain in a constant

True, authors.json can be a fallback file 🤷

Sounds great! I'd love to add it, but I think this PR has already affected a lot of places. I'm in favor of creating a follow-up PR to this PR and working on it 🙇

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.66% (631/696)	72.58% (188/259)	94.48% (120/127)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
137	0 :zzz:	0 :x:	0 :fire:	5.335s :stopwatch:

[bmuenzenmeyer]

Sounds great! I'd love to add it, but I think this PR has already affected a lot of places. I'm in favor of creating a follow-up PR to this PR and working on it 🙇

considering the complexity of this, should we consider this approach vs #7142 ??

[ovflowd]

A bit broken in some scenarios. (https://nodejs-org-git-fork-canerakdas-feat-avatar-tooltip-openjs.vercel.app/en/blog/all/page/120)

[ovflowd]

Also wondering if we can extract the usernames?

[ovflowd]

@canerakdas on mobile clicking on the picture opens the profile, I think with the thumbnails clicking should not open the profile directly anymore, IMO.

[canerakdas]

A bit broken in some scenarios. (https://nodejs-org-git-fork-canerakdas-feat-avatar-tooltip-openjs.vercel.app/en/blog/all/page/120)

I didn't see that, thanks!

Also wondering if we can extract the usernames?

Extracted the usernames here

@canerakdas on mobile clicking on the picture opens the profile, I think with the thumbnails clicking should not open the profile directly anymore, IMO.

I removed the redirect/tooltip here, it makes more sense to have it on the detail pages 🙇

---

Also, the tooltip is visible in the changelog modal, but it's not clickable, I am working on the fixing this issue 🤔

[canerakdas]

Sounds great! I'd love to add it, but I think this PR has already affected a lot of places. I'm in favor of creating a follow-up PR to this PR and working on it 🙇

considering the complexity of this, should we consider this approach vs #7142 ??

I think it's more like approaches that are a continuation of each other rather than approaches that are against each other 🤔

[mcollina]

I think we can show the full list of contributors instead only the first few:

Also, it would be better to display all of them immediately instead of limiting to the first few. There is space, at least in the desktop variant.

[ovflowd]

I think we can show the full list of contributors instead only the first few:

Also, it would be better to display all of them immediately instead of limiting to the first few. There is space, at least in the desktop variant.

Maybe show full list if you click the +13?

[canerakdas]

I agree with @mcollina that it would be better to show all contributors/authors, but it is not possible with the current design since we are listing them in a single line 🙇

I tried to show the maximum avatar we can display for desktop and mobile resolutions. Sample screenshots are as follows;

Desktop

Small Desktop / Tablet

Mobile

[ovflowd]

Hey @canerakdas can we hold this PR until I get the Next.js 15 PR done? 🙏 -- I also still want to provide code review here 🫡

[avivkeller]

FYI Next.js v15 has landed, so feel free to continue development on this.

[ovflowd]

Awesome work here, @canerakdas, thank you so much!! <3 <3

[AugustinMauroy]

Awesome work here, @canerakdas, thank you so much!! <3 <3

yeah it's super cool !

thanks @canerakdas !