Community cards implementation.

[Mayaleeeee]

I'm interested in contributing to the community cards implementation. More of this can be found #903

1. I feel that in order to make the cards more accessible and easier for users to understand what each card means without looking at the names, we should incorporate an illustration or picture that describes the cards.
2. For the community cards, what does it entail?? How does it work?

@AceTheCreator @mcturco @derberg

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[mcturco]

I feel that in order to make the cards more accessible and easier for users to understand what each card means without looking at the names, we should incorporate an illustration or picture that describes the cards.

Great idea, @Mayaleeeee! Go go go 🚀

For the community cards, what does it entail?? How does it work?

@AceTheCreator You may want to give some direction on the intent of these cards from a UX standpoint. Why did we add them? What purpose are they serving? How will they help visitors get more information about the community?

[Mayaleeeee]

Thanks @mcturco

[AceTheCreator]

@AceTheCreator You may want to give some direction on the intent of these cards from a UX standpoint. Why did we add them? What purpose are they serving? How will they help visitors get more information about the community?

Thanks, @mcturco @Mayaleeeee I'm really glad you're interested in implementing this.

Firstly, If I get you correctly @Mayaleeeee the first bullet point you indicated is about enhancing the existing cards we have on the community landing page that links to other pages.

Secondly, the goal of the community card is to make all contributors visible. A case study is this... We are going to have a page /community/contributors where all the lists of contributors will be displayed, for each contributor card, it'll include the name of the contributor, projects contributed to, contributors' handles, and pictures and contribution metrics

[Mayaleeeee]

That's nice. Thanks @AceTheCreator

[Mayaleeeee]

Here is an update on the contributions' page I'm working on, folks. Please let me know your thoughts. @mcturco @derberg @AceTheCreator

[mcturco]

@Mayaleeeee This is looking great so far! I think the second option works better, but I am wondering if we really need the colored dots and if we can take down the intensity of the drop shadows. We should also add a light grey border and rounded corners to match other UI elements on the website.

I would also use the secondary/500 as an accent color, as this is what I have been doing on the rest of the website. The purple color is to be used sparingly so we do not overdo it.

Maybe you can also start exploring what this would look like on mobile devices?

Great work so far! 🎉

[Mayaleeeee]

Alrighty @mcturco , thanks for the feedbacks.

I'll will definitely work on it and get back soon🥰🥰.

[derberg]

I ❤️ desing

I'm more concerned how we can make it work from data point of view. It will be super difficult to classify contributors by "Developers", "Designers", "Technical Writers" other than manual 🤔

Other data, like contributions, issues, forks -> is possible, as this data is easy to access from API and archives.

Regarding social media -> GitHub do not enable users to specify their LinkedIn profile explicitly, so we will have to remove this from design, and replace with icon that can represent "user website link". I mean, this things we will have to take from somewhere in automated way, "somewhere" is GitHub API. And 👇🏼 is the only you can get

[Mayaleeeee]

Okay @derberg Are you suggesting that we do away with the categories and simply put all images of each contributor?

And regarding the social media, we just need to delete the linkedln icon right?

[derberg]

Are you suggesting that we do away with the categories and simply put all images of each contributor?

yes, at least for the first iteration. It is because I personally do not see how technically we could get these categories working. I mean where would we take it from 🤔

I know that we have PR titles with docs: for example, but it doesn't mean contributor is a tech writer.

Although I love the idea of highlighting to the community that contributors are not only developers, but just do not see how we can get there 😞

Thoughts @akshatnema @AceTheCreator ?

And regarding the social media, we just need to delete the linkedln icon right?

yup, but not delete, maybe replace with some icon that we can use for info that GitHub users put under URL field in their settings, which usually is their blogs/profile websites

[Mayaleeeee]

Hey Folks

I'll be updating this file very soon. @mcturco @derberg @AceTheCreator

[AceTheCreator]

@Mayaleeeee I noticed I missed this Issue...

I started working on the contributor's page with no idea you have an implementation for a community card in progress. What's the status of your progress?

You can also check out the PR for the contributor's page here #1122

[Mayaleeeee]

Hey @AceTheCreator, I'm so sorry for the late response.

It's OK, I was supposed to update the file this week and make corrections based on what @derberg and @mcturco suggested, but I can't find the Figma file on my board.

[AceTheCreator]

Hey @AceTheCreator, I'm so sorry for the late response.

It's OK, I was supposed to update the file this week and make corrections based on what @derberg and @mcturco suggested, but I can't find the Figma file on my board.

So sorry to hear that Maya... I hope you resolve it

[Mayaleeeee]

Yeah yeah @AceTheCreator I'm working on a new one atm

[Mayaleeeee]

Hey @derberg @AceTheCreator @mcturco I've updated the community members' page, but I could not find an appropriate icon to replace LinkedIn @derberg. I'm open to suggestions, though.

Please check I out.

[derberg]

LGTM

I'm only missing:

• under main header with page name, we should have a note that the list is sorted alphabetically, like in https://www.asyncapi.com/community/tsc
• next to github and twitter icons we should have kinda globe (I think it is standard) that will represent link to user website

other than that, it is perfect.

[Mayaleeeee]

Thanks @derberg I'll work on it tonight and update it here.

[reachaadrika]

Hey @derberg , If @Mayaleeeee is not working on this , can I take this up ?

[Mayaleeeee]

Hi @reachaadrika nice to meet you.

I'm done with my internship, so I will resume my work in the community on Monday.

Thank you 🤗🤗

[reachaadrika]

Sure @Mayaleeeee !

[Mayaleeeee]

Hey @derberg @AceTheCreator @mcturco @All I've updated the community members' page based on @derberg feedback; please check it out. Thanks.

[derberg]

I think it looks good, nice job!

now we need to figure out how to power it with data 😄

[Mayaleeeee]

Thank you

[derberg]

@allcontributors please add @Mayaleeeee for design

[allcontributors[bot]]

@derberg

I've put up a pull request to add @Mayaleeeee! :tada:

[AnishKacham]

Hii. Absolutely love this Idea ❤️ So I found two endpoints of the github api. endpoint to list org's repositories endpoint to fetch a repo's contributors

So it is possible to show cards for each and every contributor who has committed to any of the org's repositories. Is this what we will be displaying? @derberg

[AnishKacham]

@akshatnema @Mayaleeeee @derberg Have any ideas in mind for this?

[ankur0904]

I think it looks good, nice job!

now we need to figure out how to power it with data 😄

@Mayaleeeee @AceTheCreator @derberg Can I work on this issue?