Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render sponsors from Open Collective REST API #3972

Merged
merged 2 commits into from
Aug 24, 2021
Merged

Conversation

rossabaker
Copy link
Member

Makes sponsors appear automatically on the site, at the expense of appearing in the README.

  1. Call the Open Collective REST API to retrieve all the active sponsors
  2. Merge with sponsors who donated through other means
  3. Remove obsolete language about previous sponsorship levels

Issues:

  • This makes the README a bit unsightly. Help wanted.
  • I don't think it will render in local jekyll without doing unspeakable things to disable CORS.
  • I didn't implement pagination, if we get more sponsors. Help wanted.
  • This is more JavaScript than I've written in at least a decade.

Local rendering below:

Screen Shot 2021-08-24 at 3 00 09 PM

README.md Outdated Show resolved Hide resolved
Comment on lines +25 to +55
var sponsors = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://opencollective.com/typelevel/members/all.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
for(i = 0; i < xhr.response.length; i++) {
var member = xhr.response[i];
if (member.isActive) {
switch (member.tier) {
case 'Platinum Sponsor':
addSponsor('platinum-sponsors', member, PlatinumSize);
case 'Gold Sponsor':
addSponsor('gold-sponsors', member, GoldSize);
case 'Silver Sponsor':
addSponsor('silver-sponsors', member, SilverSize);
case 'backer':
addSponsor('backers', member, BackerSize);
break;
default:
if (member.totalAmountDonated > 0) {
addSponsor('other-contributors', member, ContributorSize);
}
}
};
}
}
};
xhr.send();
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NBD, but fetch is the modern way. Something like this I think:

Suggested change
var sponsors = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://opencollective.com/typelevel/members/all.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
for(i = 0; i < xhr.response.length; i++) {
var member = xhr.response[i];
if (member.isActive) {
switch (member.tier) {
case 'Platinum Sponsor':
addSponsor('platinum-sponsors', member, PlatinumSize);
case 'Gold Sponsor':
addSponsor('gold-sponsors', member, GoldSize);
case 'Silver Sponsor':
addSponsor('silver-sponsors', member, SilverSize);
case 'backer':
addSponsor('backers', member, BackerSize);
break;
default:
if (member.totalAmountDonated > 0) {
addSponsor('other-contributors', member, ContributorSize);
}
}
};
}
}
};
xhr.send();
};
var sponsors = async function() {
var response = await fetch('https://opencollective.com/typelevel/members/all.json');
if (response.ok) {
var members = await response.json();
for(i = 0; i < members.length; i++) {
var member = members[i];
if (member.isActive) {
switch (member.tier) {
case 'Platinum Sponsor':
addSponsor('platinum-sponsors', member, PlatinumSize);
case 'Gold Sponsor':
addSponsor('gold-sponsors', member, GoldSize);
case 'Silver Sponsor':
addSponsor('silver-sponsors', member, SilverSize);
case 'backer':
addSponsor('backers', member, BackerSize);
break;
default:
if (member.totalAmountDonated > 0) {
addSponsor('other-contributors', member, ContributorSize);
}
}
}
}
}
};

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I don't know and I don't have time to retest it, but if a knowledgeable reviewer agrees, please feel free to commit it!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it ain't broke don't fix it! 😆

Copy link
Member

@ChristopherDavenport ChristopherDavenport Aug 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets move forward with this, and then we can PR this. We want to fix whats here most importantly.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 My CSS is dated and my JS was never competent, and would be delighted to see either improved once the fire is out.

Co-authored-by: Arman Bilge <armanbilge@gmail.com>
@rossabaker
Copy link
Member Author

I worry the missing avatar SVG isn't very gender neutral. Or also that it represents companies. It's what I found on Wikimedia. Better ideas welcome there too, if people make a second pass.

@rossabaker rossabaker merged commit b3f95b2 into main Aug 24, 2021
@rossabaker rossabaker deleted the open-collective branch August 24, 2021 20:49
@rossabaker
Copy link
Member Author

This didn't work and in fact made things worse because that endpoint doesn't add CORS headers. Only the static ones rendered. 😡

@rossabaker
Copy link
Member Author

Apparently it needs to be converted to GraphQL, which I haven't the slightest idea how to do.

@armanbilge
Copy link
Member

I'll give this a try!

@rossabaker
Copy link
Member Author

https://rest.opencollective.com/v2/typelevel/orders/incoming gets close, without mucking around with any GraphQL libraries.

This reveals three statuses: ACTIVE, CANCELLED, and PAID. I'd keep the active ones in the tiers, but include them all in the "other contributors", as some of those were very generous one-time contributions, and they're all appreciated.

This one doesn't seem to sort by amount like the old endpoint did. That was nice, but not critical.

@armanbilge
Copy link
Member

@armanbilge
Copy link
Member

Ok, but that one I posted is missing cors :(

@armanbilge
Copy link
Member

armanbilge commented Aug 24, 2021

https://rest.opencollective.com/v2/typelevel/orders/incoming gets close

I think this is the only way to go. Using the GraphQL API would require an API key which is not worth the trouble. I'll take your suggestions and PR.

@armanbilge
Copy link
Member

Instead I created a PR at opencollective to add cors to the endpoint. They seem active on that repo and responsive on slack, so if you're willing to wait a day and see how this plays out? Otherwise we'll fallback to exactly what @rossabaker proposed in his comment above.

@rossabaker
Copy link
Member Author

The one I posted has CORS, but has the more complex GraphQL response, which I think is still not too hard to traverse as pure JSON.

@rossabaker
Copy link
Member Author

Sorry, when I responded, it hadn't shown the most recent comments. I saw on another issue that the /v1 is no longer maintained, so I think we're going to need to go ahead with the /v2.

@armanbilge
Copy link
Member

The code for rest.opencollective.com/v{1,2} is in the same repo (mixed in the same files) and just forwards to the new GraphQL API. There is active development there as of 12 hours ago. If you're willing to wait overnight (they are European time zone), let's just see what they say. orders/incoming as you propose is okay but sub-optimal since it's not really a member list, but more a list of transactions IIUC. As you say we can make it work though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants