Highlight project maintainers on team page

[shilman]

Lets's highlight sub-area maintainers on the Community page.

Proposal

In https://github.com/storybooks/storybook/pull/6509 I added a config file automention.yml that maps github labels to maintainers who are willing to review PRs and provide user support around specific project areas, ranging from view layers such as react/vue/angular to addons like knobs/storysource to features like typescript/theming.

Proposal:

• Select a subset of these areas to highlight
• Read latest automention.yml
• Display avatars/profile links for the maintainers in each area

NOTE: needs design @domyen

[domyen]

@shilman how about we update the team page to something like this. ✅ Highlights maintainers who have gone above and beyond to become domain experts ✅ Shows more amazing contributors to give a better sense of how large the community actually is

[divyanshu-rawat]

Hello @shilman , @domyen Hope you guys are doing well, I am planning to contribute to some open source projects so if possible could you guys please let me know if this issue is still open, and if yes can I work on it?

[divyanshu-rawat]

@shilman any update on the above issue?

[domyen]

@divyanshu-rawat Would love some help implementing this.

[divyanshu-rawat]

@domyen , As far as I can see, I have attached the current implementation, so my Question is what is the goal of this issue? is it about re-designing the existing design to the one that you have added above.

[domyen]

Yea that's correct (but not with my face repeated everywhere 😅). For GitHub contributors you can likely reuse some of the work @kylesuss did for LearnStorybook.com (scroll down to the bottom).

Will leave the maintainers section to be curated by @shilman.

[divyanshu-rawat]

@domyen Cool, will start working on this issue, and ping you if I struck. 👍

[kylesuss]

Hey @divyanshu-rawat , here is a link to the component that fetches GitHub contributors on learnstorybook.com for your ref:

https://github.com/chromaui/learnstorybook.com/blob/master/src/components/screens/IndexScreen/Community.js

[divyanshu-rawat]

Thanks @kylesuss , As far as I can see in the team screen, contributors are hardcoded instead of fetching them from GitHub.

const contributors = [
  {
    name: 'Daniel Duan',
    avatarUrl: 'https://avatars1.githubusercontent.com/u/1474548',
  },
  {
    name: 'Kai Röder',
    avatarUrl: 'https://pbs.twimg.com/profile_images/1167896480373362689/CRgdWRVh.jpg',
  },
 ......
];

I am planning to start with some UI improvement stuff, then will be writing a call to github api, to fetch the list of contributors of the project till then I will be creating a draft PR, once I am done with everything I will change the status to ready to review. 🚀

[kylesuss]

@divyanshu-rawat yes the contributors are hard coded on the contributors screen, but the homepage has a dynamic section which fetches them from GitHub. That is what I linked you to.

[divyanshu-rawat]

@kylesuss so in summery you mean, I just have to map the fetched contributors from homepage to contributors screen?.

[kylesuss]

@divyanshu-rawat I would summarize as:

You can use this exact component from the learnstorybook.com repo (copy & paste it into this repo & rename as appropriate): https://github.com/chromaui/learnstorybook.com/blob/42931804d166edb991ce2327896087cf4a6562db/src/components/screens/IndexScreen/Community.js#L128-L154

In doing so, you will be able to build the contributors section in this repo:

You'll have to add styling and such, but the logic for fetching the contributors & saving them in sessionStorage should be exactly what you need.

Does that help?

[divyanshu-rawat]

@kylesuss Cool, that what I meant thanks :)

[divyanshu-rawat]

@kylesuss hey 👋 , Here is the first iteration of PR #78 , feel free to review and share your feedback 👍 , @domyen feel free to review the design as well https://deploy-preview-78--storybook-frontpage.netlify.com/