Web: redesign embeddable widget for github reops

[owocki]

https://gitcoin.co/funding/embed?repo=https://github.com/gitcoinco&v=2

i coded this up hackily a few months ago. its intent was to represent the available open issues on a github repo.

id like a redesigned embeddable image that looks good on github repos and is on brand.

[gitcoinbot]

__This issue now has a funding of 0.1 ETH (69.79 USD @ $697.88/ETH) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $3643.26 more Funded OSS Work Available at: https://gitcoin.co/explorer

[nitinrgupta]

@owocki - Are we showing all the funded issues for that repo or top 4/6 issues in the embeddable image?

[owocki]

Are we showing all the funded issues for that repo or top 4/6 issues in the embeddable image?

currently the top 4/6 but i leave it to the discretion of the designer to decide how many we should support in this new revision

[vs77bb]

@owocki +1 on this as an idea... This is a great growth strategy as we bring more repo's online and a good way for them to gauge their community contributions

[vikaskyadav]

@owocki . Could you send the link to the code whatever you did? I can work on extending it to make it look better.

[owocki]

@vikaskyadav https://github.com/gitcoinco/web/blob/master/app/dashboard/embed.py#L78 is it

[michelgotta]

@owocki To clarify this topic: "Design only" or code/implementation, too?

[owocki]

just design

although if you submit a version that's coded too i'm happy to tip for that, since it would remove the need for a follow up bounty on the coded design

[michelgotta]

@owocki I'll give it a shot, design first and then I have to check if my python skills if I am able to code this. My first ideas:

• width of the image should be 888px (web), or even smaller for use outside of Github README.md's or on mobile
• there should be a way to have a better font rendering
• clear separate information areas: Gitcoin branding (Header, Powered by, Push open source forward), repo infos (Avatar, Repo name), Funded issues
• the 4 recent issues should be enough information for a banner
• IMO the "double avatar style" is obstructive, the main repo avatar is more important, but the gitcoin logo and CI should be clearly visible and adapt the style of the new issue explorer
  

[gitcoinbot]

__Work has been started on the 0.1 ETH (59.94 USD @ $599.39/ETH) funding by__:

1. @michelgotta

__Please work together__ and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $3296.94 more Funded OSS Work Available at: https://gitcoin.co/explorer

[vikaskyadav]

@owocki @michelgotta I am not a python guy. But if you feel like any collaboration from my side, let me know. I will try to use my JS skills.

[michelgotta]

@owocki I added my first redesign iteration to README.md on a branch on my git repo to get a feeling how it will look inside the web context. What do you think:
Check: https://github.com/michelgotta/web/blob/michelgotta/embed-widget-redesign/README.md

I will try to implement it in python. I think it's not that complex and I can reuse / refactor the existing code.

[nitinrgupta]

I feel embeddable widgets would be much better than an image.

[michelgotta]

@nitinrgupta I think generated images are a very bulletproof and common way to implement these widgets – but I think we're open for any idea to make this widget better. What are you're ideas on this topic?

[gitcoinbot]

__Work has been started on the 0.1 ETH (42.23 USD @ $422.33/ETH) funding by__:

1. @michelgotta

__Please work together__ and coordinate delivery of the issue scope. Gitcoin doesn't know enough about everyones skillsets / free time to say who should work on what, but we trust that the community is smart and well-intentioned enough to work together. As a general rule; if you start work first, youll be at the top of the above list ^^, and should have 'dibs' as long as you follow through.

On the above list? Please leave a comment to let the funder (@owocki) and the other parties involved what you're working, with respect to this issue and your plans to resolve it. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $4264.88 more Funded OSS Work Available at: https://gitcoin.co/explorer

[gitcoinbot]

__Work for 0.1 ETH (55.19 USD @ $551.91/ETH) has been submitted by__:

1. @michelgotta
2. @michelgotta

Submitters, please leave a comment to let the funder (@owocki) (and the other parties involved) that you've submitted you work. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $4125.86 more Funded OSS Work Available at: https://gitcoin.co/explorer

[michelgotta]

PR redesign and implementation: https://github.com/gitcoinco/web/pull/644

[owocki]

I feel embeddable widgets would be much better than an image.

AFAIK you cannot do javascript widgets on github readmes

@owocki I added my first redesign iteration to README.md on a branch on my git repo to get a feeling how it will look inside the web context. What do you think:
Check: https://github.com/michelgotta/web/blob/michelgotta/embed-widget-redesign/README.md

OMG I 😍 😍 😍 this :

I think it provides a lot of great information! I wonder if it blends into the readme style well enough though?

cc @PixelantDesign for her comments and @coderberry too since he's done some neat work in embeddable images on readme's

[michelgotta]

@owocki Here are some examples of the code generated "widgets/images", https://github.com/gitcoinco/web/pull/644. The font rendering from PIL is not the best, but I tried to get the best out of it with some tricks.

@PixelantDesign @coderberry This is like the first iteration of a new embed-widget design. I tried to adapt the style of the facelifted issue explorer. I'm open for any feedback and improvements on style, displayed informations etc.

[owocki]

this looks 💯 times better than the current widget!

[michelgotta]

@owocki Thanks!

[michelgotta]

@PixelantDesign I just have seen that Muli is the new CI font, is that correct?. I'll provide an update for this widget with the new font.

[michelgotta]

@owocki @mbeacom I think https://github.com/gitcoinco/web/issues/354 would be a great follow up for me. I think this issue could be closed for now. Will provide another minor update on this widget in a few days. (BTW: This is one fun project!)

[mbeacom]

@michelgotta Can you submit work for this bounty at: https://gitcoin.co/issue/gitcoinco/web/594

[michelgotta]

I have done this before and did it again: https://github.com/gitcoinco/web/issues/594#issuecomment-374070277

[mbeacom]

@michelgotta Whoops! My mistake. Thanks!

[michelgotta]

No problem! 😸

[owocki]

paying out now

[gitcoinbot]

__The funding of 0.1 ETH (55.19 USD @ $551.91/ETH) attached to this issue has been approved & issued to @michelgotta.__

• Learn more at on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $4070.67 more Funded OSS Work Available at: https://gitcoin.co/explorer