ghuser-io/ghuser.io

:octocat: Better GitHub profiles

Better GitHub profiles

WARNING: This project isn't actively maintained anymore.

Table of Contents

• What we are building
• Contributing
  • To the web app's implementation
  • To the documentation
  • Contributors
• FAQ
  • Is my profile static or dynamic?
  • Some of my repos are not showing up on my profile, why?
  • Does ghuser.io intend to compete with the default GitHub profiles?
  • How are the organizations sorted in the Contributed to section?

What we are building

Example: https://ghuser.io/AurelienLourot

We love the default GitHub profiles and we want to enhance them:

• The GitHub profiles aren't clearly showing all the repos you have contributed to since you joined GitHub. We are showing them all, even those you don't own and those owned by organizations you're not in.¹
• The GitHub profiles are listing all the repos you own but they sort them only by age of the latest commit. We prefer to sort repos by a combination of how much you have contributed to them, their size, how popular they are, etc. For each user we want to see first the latest greatest repos they have most contributed to.
• On GitHub only repos earn stars. We push it one step further by having users earn stars: You earn stars when you contribute to a repo. We add all these earned stars and show how many you've earned in total.
• The GitHub profiles don't clearly show how big your contribution to a repo was, when you don't own it. Maybe you wrote 5%. Maybe 90%. We make it clear.
• GitHub detects programming languages. We also want to know about technologies/frameworks, e.g. "react", "docker", etc.
• The GitHub profiles allow filtering your repos by programming language. We will allow filtering by technologies/frameworks as well.
• The GitHub profiles can be tweaked by clicking around. We allow them to be tweaked programmatically.
• On GitHub only users and organizations have avatars. We bring avatars to repos.

Our enhanced profiles are accessible at https://ghuser.io/<github-username>, e.g. ghuser.io/AurelienLourot.

¹ We achieve this by using github-contribs.

Contributing

To the web app's implementation

• Fork this project.
• Make some changes to the web app.
• Validate your changes by running the app locally.
• Create a pull request :)

To the documentation

• Fork this project.
• Make some changes to the markdown files.
• Validate your changes by running ./build.sh.
• Create a pull request :)

Contributors

Thanks goes to these wonderful people (emoji key):

Aurelien Lourot 💬 🐛 💻 📖 🤔 👀	Romuald Brillout 🐛 💻 🤔 🚇 👀 💬	Charles 💻 🤔	Tim Lange 💬 💻	Sharon Lin 💻	James George 🐛 💻	Steven 🤔 💻
Terrell Russell 💻	K Yasaswi Sri Chandra Gandhi 💻	Reece Dunham 💻	John Vandenberg 🐛 🤔	Naveen Naidu 🐛	Shubham Rath 🐛	Aditya Agarwal 📝
Rupesh Krishna Jha 🐛	CrazyMax 🐛	Michal Weizman 🐛 🤔	Wei WANG 🚇	Brandon Rhodes 🚇	Richard Littauer 🤔	Jordan Sissel 🚇
JPBotelho 🤔	George Xie 🤔	Anish Karandikar 🤔	Palash Nigam 📝	Andrew Bredow 🤔	Shadab Zafar 🤔	Phil de Joux 🤔
Sam Johnson 🤔	Arseniy Klempner 🤔	Daniel Ruf 🤔	Joe Cohen 🤔	Jacob Weisz 🤔 🐛	Mehtab Zafar 🤔	Neal McBurnett 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

NOTE: if you should be on the list of contributors but we forgot you, don't be shy and let us know!

FAQ

Is my profile static or dynamic?

For now it's static and the data² is refreshed at least once per day. If you scroll down to the bottom of your profile you can see how old the data is:

² All the data about you and your contributions.

Some of my repos are not showing up on my profile, why?

Did you give them a star? We don't display repos with no stars at all. We think that if even you haven't given them a star, then you probably aren't proud of them (yet).

Does ghuser.io intend to compete with the default GitHub profiles?

No, in fact we'd love GitHub to copy ghuser.io or to even do better, so that this project can die.

How are the organizations sorted in the Contributed to section?

For now it's kind of random. See #142 for more details.

ghuser.io's Issues

Improve landing page

For now, show information for the early users to want to try out our first prototype.

Also it might be better to change the punching line from "Better GitHub profiles" to "Full/Complete GitHub profiles" or so.

Note: not necessarily for now but on the long term, a landing page that looks like the github landing page when not logged in (try in incognito/private mode) would be cool.

GitHub star button

The frontend navbar should have a GitHub star button (on the top right?)

Doesn't work in Firefox

See #42 (comment)

Embedded version

Personally I'd rather embed ghuser to my homepage rather than having ghuser be my homepage.

(Glazed over the list of issues and I believe this isn't a duplicate.)

User personal settings file

NOTE: This is a per-user file, not per-project, do not mix up with #3

Each user should be able to create https://github.com/user/ghuser.io.settings/ghuser.io.json and define:

• links to other profiles (e.g. stackoverflow, twitter, linkedin, ...)
• e-mail address
• other stuff?

Show repo languages

For each repos we should see the languages. Right now our DB contains only the main language but I believe it is possible to get all languages from the GitHub API. If not, I remember these projects caught my eyes:

• https://www.wappalyzer.com/
• https://github.com/github/linguist
• https://github.com/src-d/enry

Also it should be possible for a project to define additional technologies in its .ghuser.io.json (described in #3) like "react", "docker". So next to the languages/techs there should be a [+] button leading you to the documentation on how to add technologies to your project.

fetch.js should be resumable

Creating a new profile takes several hours and if the connection breaks in the middle, it has to be done all over again, which is quite painful.

Can I have a profile plz

Settings file in each project for defining a logo

At the moment in the profiles, only repos in an org have a logo.

For each repo without a logo, we want to see a [+] icon being a link to a document explaining that:

you can define a logo for brillout/awesome-redux by committing .ghuser.io.json into brillout/awesome-redux :

{
  "_comment": "Settings for ghuser.io. See <link to example/doc>",
  "avatar_url": "https://..."
}

NOTE: This is a per-project file, not per-user, do not mix up with #12

---

db/fetch.js should fetch these settings and add them to db/db.json so that the frontend can make use of them.

Keep the app warm

We're hosting on AWS Lambda via Up, and often the app gets cold and the next visitor has to wait several seconds to get the page.

We could pay Up to keep it warm: https://up.docs.apex.sh/#configuration.lambda_settings.active_warming

Or we could implement a cheap tool that periodically makes an HTTP GET and runs on our laptops for the prototyping phase.

Open Graph metadata

See http://ogp.me/

At least og:image and og:description

Can I get a profile?

By the way, when are you planning on auto generating profiles?

pushState-navigation

See https://github.com/reframejs/reframe/blob/master/docs/usage-manual.md#pushstate-navigation

Different sizes for org avatars

For example @brillout would like to have his reframe org avatar in the left panel larger.

Repo badges and sorting hint

Right now on the profiles there is some debugging text about popularity, maturity, activity, percentage and sorting score.

It should be replaced by badges:

• percentage should become either an [owner] badge (if user owns or if percentage > 90%) or a [maintainer] badge (if percentage > 10%) or no badge. Tooltip on that badge should show the percentage
• [collaborative] badge if more than one dev, with tooltip showing the number of devs
• [mature] badge if score above 2.5, with tooltip/popover
• [active] badge if score above 2.5, with tooltip/popover
• [popular] badge if score above 2.5, with tooltip/popover (showing the amount of stars?)

For the sorting, there should be a way (tooltip? help button?) for the user to understand how the sorting score of each repo was calculated, to get insights into the sorting

for the badges I was thinking about:

• bootstrap labels
• https://rozaxe.github.io/factory/

Blog links broken when not preceded by http(s)://

@hakabuk for example has set hakabuk.com as blog URL. Unfortunately ghuser interprets this as a relative link, thus creating a link to https://ghuser.io/hakabuk.com, see https://ghuser.io/hakabuk

Remove human interaction from profile creation

This will be a long road until new users can see their profiles without doing anything but a somewhat easier improvement would be to allow them to create a profile without having to create an issue and interact with a human (me!).

Only having to click a button for example would be much better already.

FAQ

1. explain why it's necessary for now to create an issue to get a profile. See https://www.reddit.com/r/coolgithubprojects/comments/8xgebl/ghuserio_better_github_profiles/e23xpm2/

Support for BitBucket and GitLab

It would be nice to have BitBucket and GitLab projects showing up as well?

Interested to check this out

Profile please?

Show "last update"

Since we are refreshing profiles once-per-day-ish (in the prototyping phase), it would be useful to show on each profile when it was updated for the last time.

Display earned stars

The total amount of stars earned by the user should be visible. See README.md for how this should be calculated.

EDIT not needed anymore: The tab "Earned stars" on the frontend should show details.

Add emojis to badges

E.g. add a crown when owner

Could you add mine?

Can you add my profile ?
Curious to see the result, thx :)

Contribution percentage is too hidden

Follow-up on #20. For now there are several ways of seeing the contribution percentage:

• at the first glance the [owner] badge tells you the dev made more than 85% of the commits, the [maintainer] badge tells you they made more than 15%, and no badge tells you they made less.
• if you hover the badge you see the percentage
• if you open the details of a contribution you see the percentage.

@brillout thinks the number should already be visible at the first glance.

Can I also have a profile?

Rethink earned stars calculation

After #4 we might want to rethink how many stars a user gets for each of their contributions. It should be something like

earned stars = share * func(total repo stars)

• share is what portion (0-100%) of the project you have built, or what portion of the total effort has been done by you (more about this below).
• func() can be:
  • id(): the idea here is that stars are github's currency and if a project has earned 1000 stars and you've made 20% of the effort, you should get 20% of that money, i.e. 200 stars. @AurelienLourot has a strong preference for this.
  • logish(): a function that behaves like log() in a sense that the higher the input the more difficult it is to increase the output. But it can still be very different from log(). @brillout has a slight preference for this.

The difficulty lies in determining share and can be done as:

• percentage of total commits, or percentage of total bytes, etc. @AurelienLourot has a slight preference for this
• depending on your contributor level: @brillout has a strong preference for this
  • occasional contributor: share could be about 1%
  • collaborator: share could be about 20%
  • co-maintainer: share would be 100%

The contributor level could be determined by a combination of 2 techniques:

• heuristics based on commits (size and amount) and code (and other?)
• declared in the repo-settings

Note that with the contributor level system, all shares can add up to more than 100%.

Ability to make some contribs stand out

In the user-settings file (see #12) it would be nice to be able to list some contribs that should be displayed bigger and at the top of your profile. A bit like pinning repos in the standard github profiles.

EDIT: maybe some settings even for hiding contribs that are too unsignificant

GitHub emojis aren't rendered

See on https://ghuser.io/AurelienLourot, strings like :octocat: or :mag: aren't replaced by the corresponding github emoji.

Let's see my visualization

Interesting UI design

Internal server error

Make it clearer what is big project VS small project VS small contrib

I contribute almost every day to the Reframe repo since several months. It should automatically strongly stick out in comparison to all other entries of my ghuser list.

In general it would be cool if when I go to a profile I can quickly see what is

• a big project the user is working on since several months/years with several commits a day
• a small library that the user works on occasionally
• a project he contributes to on regular basis
• a project he contributed to only 1 time / couple of times
• etc.

Additional badges

If my project is on an app store, it would be nice to have additional badges for bragging about my amount of users or my review-score on that store.

Suggestions for edits to README

While reading the README I had some questions:

• Having a general link in the first bullet point was a bit disappointing. I was curious to see the profile! At the least we want to add a real link to a profile next to the general 404 link, so the user can really see a profile example.
• Should be UI/layout as close as possible *to* the official profiles.
• Regardless of the typo in the previous bullet point, this should be either edited or removed. If it's so similar to github's profiles - why should I want it? :) It can be also just lowered down the list, IMO.
• I feel bullet points 7,8,9 (start counting from 1) should be higher in the list. I might be wrong, but don't these offer something github doesn't offer? If I'm assuming wrong - ignore this one :)

In conclusion, my feeling is this repo aims to give me something Github can't, so rather than point out how similar it is to Github - maybe first point out and show where it stands out? Please correct me if my assumptions are wrong.

I hope these help/ make sense (p.s, I love the minimalist design and the overall look and UI of the profiles!).

Time range for contributions

For each contribution (i.e. pair user+repo) I want to see when that user was involved in that project. Something like "2015-2017".

Markdown spell checker

Set up a spell checker like here:

• https://github.com/AurelienLourot/reframe-on-up/blob/master/package.json
• https://github.com/AurelienLourot/reframe-on-up/blob/master/.travis.yml

Write down more about the vision/goals

Bits of chats I had with @brillout :

---

pronounce rouseur
https://zenorocha.github.io/voice-elements/

---

for the crawling, as it takes a long time and the rate limit is very drastic, I need several machines (different IPs) crawling for all users, and so in the DB I need to store the progress
for each user
so I would crawl for each user today, yesterday, etc until the day he joined github

---

what I want is any person can at anytime go to ghuser.io/ and immediately see something even if it's the first time. It doesn't have to be complete but the crawling starts in the background.

---

link at the bottom "did we miss some repos?" and that leads to the action he can take to help (i.e. creating a settings file mentioning some contribs that we have missed) - EDIT: covered by #22

Very long repo descriptions aren't rendered well

Search for clean-sentence on this profile

TypeError: db.users[userId].contribs.organizations is not iterable

When creating a new profile:

✔ Fetched first day at GitHub: 2013-02-22.
⚠ Be patient. The whole process might take up to 2 hours...
✔ Fetched all commits and PRs.
✔ Fetched manugarri's popular forks
Promise {
  <rejected> TypeError: db.users[userId].contribs.organizations is not iterable
    at stripUnreferencedOrgs (/media/sdcard/Documents/git/ghuser.io/db/fetch.js:199:55)
    at fetchUsers (/media/sdcard/Documents/git/ghuser.io/db/fetch.js:63:5)
    at process._tickCallback (internal/process/next_tick.js:68:7) }
/media/sdcard/Documents/git/ghuser.io/db/fetch.js:18
    throw e;
    ^

TypeError: db.users[userId].contribs.organizations is not iterable
    at stripUnreferencedOrgs (/media/sdcard/Documents/git/ghuser.io/db/fetch.js:199:55)
    at fetchUsers (/media/sdcard/Documents/git/ghuser.io/db/fetch.js:63:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Explain how to add a missing repo

If the user feels like a repo is missing, they need to know what to do:

• maybe the repo has no star at all (we skip these repos), so they need to just give it a star.
• maybe we failed at discovering it, so we should implement a way for the user to add that repo to their user-settings (see #12)

This documentation could be accessed with a small link "Is there a missing repo?" at the bottom of each profile.

Responsive UI

See https://www.reddit.com/r/coolgithubprojects/comments/8xgebl/ghuserio_better_github_profiles/e23hrgq/

Wrong stats for repos with more than 100 contributors

On this profile the contribution to facebook/react contains 3 mistakes:

1. It says 100 contributors instead of 400+. I suspect we fetch only the first page of contributors from the API.
2. It says that the user has made 0% of the project. This is because he's not part of these 100 contributors in the stats that we fetch.
3. It says that the total number of commits is 6k instead of 10k.

EDIT: 2 and 3 aren't that far from the truth in fact:

$ git clone https://github.com/facebook/react.git
$ git log --all | grep -i brillout -a3
    fix typo 'miss-configured' to 'misconfigured' (#8412)

commit 51833bec140525263af0180b86052b6227506d18
Author: brillout <[email protected]>
Date:   Thu Nov 24 15:35:48 2016 +0100

    remove dead link (#8411)
--
    fix typo 'miss-configured' to 'misconfigured' (#8412)

commit 8d291e91e68ce942ed4a2232cc81405b8b432b08
Author: brillout <[email protected]>
Date:   Thu Nov 24 15:35:48 2016 +0100

    remove dead link (#8411)
$ git rev-list --no-merges --count master
7579

Can I get a profile?

"Member of" section even if the user isn't in any organization

@hakabuk for example isn't part of any github organization yet. However her profile shows an empty Member of section.

Her profile shouldn't have this section at all.

repo-settings in user-settings

It might happen that a repo owner refuses the repo-settings, like in dnschneid/crouton#3816.

In that case it should be possible for the user to commit this metadata in their own user-settings (see #12).

HTML title and favicon

Improve readme

e.g.

• https://github.com/RichardLitt/standard-readme
• https://github.com/mntnr/name-your-contributors

Powered by Reframe

We want to show a small badge advertising for Reframe because it's cool and more people should know about it.

Programming languages in the left panel

On a profile, I want to see in the left panel (above the orgs?) all programming languages of that dev.

Improve 404 page

When going to https://ghuser.io/someuser, we show a 404 because we haven't created a profile for that user yet. Instead we should show a message saying that "go create an issue and we'll create your profile right away".