nodejs
feat(metabar): Add avatarGroup on learn section
Description
Adding the Avatargroup component to the MetaBar in the learn section is a way of thanking contributors. The implementation work was not very complicated because the learn section had already received the authors with their GitHub pseudonyms.
The change only applies to the Learn section and not to the other sections of the site.
Validation
- Learn section should have same design but with avatar.
- All metabar should have correct rendering
Related Issues
No related Issues.
Check List
- [X] I have read the Contributing Guidelines and made commit messages that follow the guideline.
- [X] I have run
npx turbo formatto ensure the code follows the style guide. - [X] I have run
npx turbo testto check if all tests are passing. - [X] I have run
npx turbo buildto check if the website builds without errors. - NA I've covered new added functionality with unit tests if necessary.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated (UTC) |
|---|---|---|---|
| nodejs-org | ✅ Ready (Inspect) | Visit Preview | May 11, 2024 7:53pm |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
Im not sure Im in favour of this change.
I'm sorry, Claudio, but could you give us some arguments? Because as a person I find it hard to see what's wrong with this addition.
Im not sure Im in favour of this change.
I'm sorry, Claudio, but could you give us some arguments? Because as a person I find it hard to see what's wrong with this addition.
I'm kinda fine eitherways, just ensure to fix the CSS issues from this PR, there is some odd scrollbar on the avatars stuff.
Lighthouse Results
| URL | Performance | Accessibility | Best Practices | SEO | Report |
|---|---|---|---|---|---|
| /en | 🟢 98 | 🟢 100 | 🟢 96 | 🟢 91 | 🔗 |
| /en/about | 🟢 100 | 🟢 100 | 🟢 100 | 🟢 91 | 🔗 |
| /en/about/previous-releases | 🟢 98 | 🟢 100 | 🟢 100 | 🟢 92 | 🔗 |
| /en/download | 🟢 100 | 🟢 100 | 🟢 100 | 🟢 91 | 🔗 |
| /en/blog | 🟢 99 | 🟢 100 | 🟢 96 | 🟢 92 | 🔗 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Unit Test Coverage Report
| Lines | Statements | Branches | Functions |
|---|---|---|---|
 |
90.04% (588/653) | 76.08% (175/230) | 92.18% (118/128) |
Unit Test Report
| Tests | Skipped | Failures | Errors | Time |
|---|---|---|---|---|
| 128 | 0 :zzz: | 0 :x: | 0 :fire: | 5.893s :stopwatch: |
cc @AugustinMauroy a gentle poke on you to see if you still want to get this merged? There are some visual issues as pointed by @mikeesto
@ovflowd I need to rebase my branch. but style issue as been fix you can take a look in preview.
Still having the issue, I'm not sure if you figured out, but the issue is the style on AvatarGroup wrapper, it has overflow-x: scroll it should be overflow-x: auto
Also, IMO we should change the amount of avatars we render based on the viewport (small, medium, large) you can use the MediaQuery Hook we have to change that!
Also, IMO we should change the amount of avatars we render based on the viewport (small, medium, large) you can use the MediaQuery Hook we have to change that!
I love this idea
yup I had break point for small screen but not mobile because on mobile avatar group is on bottom of page. Also I had tested scroll on Safari and Chrome I din't see any strange things I hope it's will be same on our 😂
