Contribute section needs a way to show off our Sponsors/Backers

[phated]

We really want a way to show off Sponsors and Backers on the website. This needs to be designed and developed (mockups first, etc).

We've been asked by multiple Sponsors to have their logo on our website (but it wouldn't have worked in the old design). With the redesign, there's plenty of room to fit logos somewhere near the contribute section.

We also want to show off a subset of the Backers to encourage people to increase donation amounts/durations and to keep the website from getting cluttered.

[yocontra]

@phated Is there an easy way for us to get a list of the logos from opencollective? I can do this pretty easily if so.

[phated]

They have routes that can provide HTML or a JS library that can inject the backers but it doesn't look good and I think we'd want to integrate it nicely into the page. Hoping to get a mockup before we implement.

[yocontra]

@phated Already implemented this during the redesign but removed it because I didn't have any logos.

It looks like this:

The CSS is already in the page. Just a matter or getting the logos and rendering them into the section. Want to keep the monochrome look for simplicity.

[yocontra]

Alt option is this (replace quote w/ contribute call to action button)

[phated]

I like that second option. We currently don't have any sponsors, so we don't have any logos yet :frowning_face:

How should we fit Backers (individuals contributing money)?

[yocontra]

@phated Can always do something like

// get everyone who gave us money, sort by amount, slice 10
const getImages = () => {
  const donors = []
  if (sponsors) donors.push(...sponsors)
  if (backers) donors.push(...backers)
  return sort(donors, 'contributed').slice(0, 10)
}

[phated]

@contra here's the links to the JSON routes: https://opencollective.com/gulpjs/sponsor.json https://opencollective.com/gulpjs/backer.json

I'm not sure if they have CORS enabled but we could always use JSONP if they don't. They might be willing to add CORS if we request it, too.

[yocontra]

@phated Nice, exactly what I needed. Will work on something when I have some spare time.

[Saturate]

I just took a quick look at this, they do not support CORS or JSONP - so getting the data is a bit hard.

I created a issue here: https://github.com/OpenCollective/OpenCollective/issues/342

Feel free to chime in!

[phated]

@Saturate every JSON url supports JSONP because it evaluates the string on your domain. However, it would be ideal if they enabled CORS on the endpoints.

[Saturate]

Hey @phated I'm pretty sure that it's not the case, for JSONP to work the server must return the "padding" specified in the ?callback= parameter, or atleast have a predefined padding..

It's also stated here https://en.wikipedia.org/wiki/JSONP

Note that for JSONP to work, a server must reply with a response that includes the JSONP function. JSONP does not work with JSON-formatted results. The JSONP function invocation that gets sent back, and the payload that the function receives, must be agreed-upon by the client and server.

Or maybe it's me that's missing something entirely?

[phated]

@Saturate oh crud! I totally forgot about that (it's been so long since I used it!), good catch.

[Saturate]

@phated that happens sometimes, but sadly that also means that we have to wait for https://github.com/OpenCollective/OpenCollective/issues/342 to be resolved, before we can get more progress on this issue.

[phated]

We could use a proxy service that exposes it as CORS. I wonder if there is a trustworthy one around.

[Saturate]

Could be a solution. However I guess we will have a hard time finding such service, as it in it self is a bit shady to circumvent default CORS settings.

But we could work on this and implement it in a branch for when/if OpenCollective adds this feature. It's easy to circumvent on your local development machine.

[phated]

@Saturate sounds good. I can circumvent github issue tracker if you have a PR for us and they still haven't fixed it.

[Saturate]

OpenCollective added support for CORS, and while it's not live yet - it's awesome, and made write some code.

I started work on this branch: https://github.com/Saturate/gulpjs.github.io/tree/feat/supporter-list

It's all looking good, but there are some things to consider.

• My code is written in ES2015 so it's not likely that it will work in old browsers.
• The code can be prettified and optimized a bit, take it as a PoC.
• Avatars provided by the JSON endpoints have no size limit, some of the images are adobe 1000x1000 pixels, making them quite heavy.
• The layout is not final, I see the suggestion in https://github.com/gulpjs/gulpjs.github.io/issues/51#issuecomment-273300495 might be the one that we want.

The code could be rewritten into something horrible, but this is not the correct way to go.

I'm thinking, why was the build steps for this repo removed? It would be farily simple to make a gulp script that transpiles ES2015 and SCSS/LESS among with other optimizations, and then make Travis-CI build to a gh-pages branch each time there's a new commit/merge to master. It would solve the first issue with JavaScript compatibility, and make it easier to maintain LESS/SCSS... but I guess there a reason for this?

Anyways feel free to look at the branch, and maybe someone knows how to defeat the avatar issue.

[phated]

@Saturate nice! I'll probably just do a manual rewrite with ES5 once you send a PR. We can use rawgit or https://unpkg.com to include a promise library.

Do you think we should open an issue for open collective to serve smaller images? I think they have some sort of image processing in their APIs.

[Saturate]

@phated I can rewrite to ES5 as well :-) I guess promises is the thing that I least want to miss and including a pollyfill/library seems like a good solution, then it's only fetch that needs to be rewritten, and some minor things with const / let.

I found the https://opencollective.com/proxy/images/?src={{IMAGE}} service on their website, it takes any image and returns it (seems like a risk on their side).

We can't control the image size it converts a 800x800 image to 320x320. So we don't really have any control, but it's far better than before. The max dimension is always 320px... I could use this for now, but it seems a little abusive.

I guess it would be nice if they added something that we are supposed to use for this kind of task. So opening an issue would be great.

[phated]

Fetch can be replaced with a similar, ES5-compat library (like https://www.npmjs.com/package/rest or something) and included from one of the CDNs.

[Saturate]

I have no idea why I did not consider this. I'll implement this and make a PR :-)

[phated]

Awesome, thanks!