Skip to content
New issue

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

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

Already on GitHub? # to your account

fetch sponsors at build time, show ALL non-skeevy sponsors; closes #4271 #4272

Merged
merged 8 commits into from
May 22, 2020

Conversation

boneskull
Copy link
Contributor

@boneskull boneskull commented May 7, 2020

This is WIP while we sort out the data issues mentioned in #4271.

The data issues have been addressed.

It appears we want to blacklist some sites from appearing on mochajs.org, because they are skeevy. See mochajs/admin#10

This PR:

  • adds a blacklist of supporters (mochajs appears on this list, because we somehow donated to ourself) whose links & logos will not appear on our site
  • fetch supporters via OpenCollective's GraphQL API (adds needle to help with making requests, but open to other ideas)
  • reorders the sponsors (organizations) to show before the backers (individuals). generally the sponsors give us more $
  • renames the default template (default.html) to default.liquid because it's a HTML-based liquid template, which should help with syntax highlighting. does not affect build
  • shows ALL supporters otherwise, not just top n
  • links directly to provided URLs, if they exist.
  • removes the gray background from the image container (.faded-images)

@boneskull boneskull added semver-patch implementation requires increase of "patch" version number; "bug fixes" area: website involving mochajs.org, but not necessarily involving docs labels May 7, 2020
@boneskull boneskull self-assigned this May 7, 2020
@coveralls
Copy link

coveralls commented May 7, 2020

Coverage Status

Coverage remained the same at 93.435% when pulling a84ad17 on boneskull/show-all-sponsors into cb5eb8e on master.

@boneskull boneskull requested a review from Munter May 7, 2020 23:29
@boneskull boneskull force-pushed the boneskull/show-all-sponsors branch 2 times, most recently from 20e072e to cfbf2a6 Compare May 15, 2020 22:33
@boneskull boneskull force-pushed the boneskull/show-all-sponsors branch 2 times, most recently from f442fda to d7faae2 Compare May 18, 2020 18:54
@boneskull boneskull marked this pull request as ready for review May 18, 2020 18:54
@boneskull boneskull changed the title [DO NOT MERGE] fetch sponsors at build time; closes #4271 fetch sponsors at build time; closes #4271 May 18, 2020
@boneskull boneskull changed the title fetch sponsors at build time; closes #4271 fetch sponsors at build time, show ALL non-skeevy sponsors; closes #4271 May 18, 2020
@boneskull
Copy link
Contributor Author

@outsideris @craigtaub @Munter This is ready

@boneskull
Copy link
Contributor Author

(click thru to deploy preview to see the result)

@boneskull boneskull requested review from outsideris and craigtaub May 18, 2020 18:56
boneskull added 2 commits May 18, 2020 14:38
- change ordering: sponsors, then backers
- blacklist bad actors
- rename `default.html` to `default.liquid`, because it's a Liquid template.
- fiddles with the CSS a bit
- do not attempt to display a link if there is no website
@boneskull boneskull force-pushed the boneskull/show-all-sponsors branch from d7faae2 to 76f2142 Compare May 18, 2020 21:52
@Munter
Copy link
Contributor

Munter commented May 19, 2020

The experience the first time is pretty jarring. When I don't have the images in cache, opencollective is quite slow at responding, so I just get a bunch of empty white space while they are loading. I think we should create a better fallback experience where the images at least have a background color, so I can see that something is supposed to be there. The backer images are easy, because they already have hard coded dimensions of 32x32. lets just put a grey background on there. The sponsors are more difficult, since we don't have the image dimensions as far as I can tell. Can we get those from the opencollective api? I've had a hard time finding their graphql api documentation, or a playground to explore it myself

@Munter
Copy link
Contributor

Munter commented May 19, 2020

Found the graphql api (postwoman is awesome), and I can see that we won't be able to get the dimensions that way. I think we should merge the two additions I propose and then I'll see if I can do another optimization pass now that we can post-process data at build time. We could potentially load the images and read their dimensions, so the layout doesn't jump

@Munter
Copy link
Contributor

Munter commented May 19, 2020

I opened #4295 against this branch, which should contain a lot of further improvements

@boneskull boneskull force-pushed the boneskull/show-all-sponsors branch from cb74950 to 10bb5d4 Compare May 20, 2020 19:09
Copy link
Contributor

@craigtaub craigtaub left a comment

Choose a reason for hiding this comment

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

Small q. LGTM

@boneskull
Copy link
Contributor Author

@Munter are you intending to add any more to this?

@boneskull boneskull added this to the next milestone May 21, 2020
@Munter
Copy link
Contributor

Munter commented May 21, 2020

@boneskull let's get this in as-is. I have another idea I'm tinkering on to improve performance, but it shouldn't hold up this pr

@craigtaub
Copy link
Contributor

Once this is merged I will release 7.2.0.

@Munter
Copy link
Contributor

Munter commented May 22, 2020

Sounds like we're all calling go on this. I'll merge

@Munter Munter merged commit 12b130b into master May 22, 2020
@Munter Munter deleted the boneskull/show-all-sponsors branch May 22, 2020 12:27
craigtaub pushed a commit that referenced this pull request May 22, 2020
 (#4272)

* Show all sponsors on site

- change ordering: sponsors, then backers
- blacklist bad actors
- rename `default.html` to `default.liquid`, because it's a Liquid template.
- fiddles with the CSS a bit
- do not attempt to display a link if there is no website

* use smaller imgs for backers

* Fetch all open collective sponsor images to save their dimensions

* Reworked avatars. LEss reflows due to image dimensions. Smoother loading animation that doesn't wait for all images. Progressive enhanced

* Add standardised lazy loading to all images

* Set height on badges to avoid page reflows

* Add node version specification in .nvmrc to get netlify up to date

* Move avatars javascript to external file for better development experience

Co-authored-by: Peter Müller <munter@fumle.dk>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
area: website involving mochajs.org, but not necessarily involving docs semver-patch implementation requires increase of "patch" version number; "bug fixes"
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants