Highlighting Node.js supporters on nodejs.org

[mhdawson]

The Node.js project has recently enabled github sponsors and opencollective.

We'd like to recongnize/show significant supporters on the Nodejs.org website both for those that make monitary donations through github sponsors and Open Collective as well as those who commit their people to doing work in the project.

What I think is important is that there is a quantifiable "commitment" which is above a certain bar. For example an employer who has committed that their employee will do at least 3 releases, an org who has donated X$ equivalent in infrastucture resources, an individual or org who has committed at least y$, etc.

This page shows my very very rough mock up of what the supporters page might look like.

https://github.com/mhdawson/scratch/blob/main/Website.md

Organizations would have to "opt-in" and give persmission for the use of their logos and we would need some sort of process to ensure that there is agreement. Since the foundation already includes logos for some companies we should see if they can help the project with that.

The mock up is also not necessarily accurate in terms of the logos/orgs to be included, I just hacked something together so that we would have something concrete to discuss in terms an approach and to see if the project is comfortable with doing something like this.

Numbers like $500 for the general supporters were just picked out of a hat, so we should discuss/agree on what numbers make sense.

[AugustinMauroy]

I'll take a look to what we can do.

thing ton see

• How to maintain this page
• which kind of design we can do (eg: https://openjsf.org/members)
• is open collective/GH have rest api to make thing dynamic.

Edit:

• https://opencollective.com/nodejs/members/users.json

Example for GH

const { graphql } = require('@octokit/graphql');

// Replace 'your-github-token' with your actual GitHub token
const GITHUB_TOKEN = 'your-github-token';

async function getSponsors(username) {
const graphqlWithAuth = graphql.defaults({
  headers: {
    authorization: `token ${GITHUB_TOKEN}`,
  },
});

const query = `
  query($login: String!) {
    user(login: $login) {
      sponsorshipsAsMaintainer(first: 100) {
        edges {
          node {
            sponsorEntity {
              ... on User {
                login
                avatarUrl
              }
              ... on Organization {
                login
                avatarUrl
              }
            }
            tier {
              monthlyPriceInDollars
            }
          }
        }
      }
    }
  }
`;

const variables = {
  login: username,
};

try {
  const response = await graphqlWithAuth(query, variables);
  return response.user.sponsorshipsAsMaintainer.edges.map(edge => ({
    username: edge.node.sponsorEntity.login,
    avatar: edge.node.sponsorEntity.avatarUrl,
    tier: edge.node.tier.monthlyPriceInDollars,
  }));
} catch (error) {
  console.error('Error fetching sponsors:', error);
  throw error;
}
}

// Example usage
getSponsors('octocat')
.then(sponsors => console.log(sponsors))
.catch(error => console.error(error));

[ovflowd]

We don't need a specific GitHub Sponsors integration. OpenCollective itself can connect to GH Sponsors, so we only need to render one place.

Also for OpenCollective, we don't need any dynamic code, OpenCollective has specific image URLs they generate whose are exactly for that, so no code is needed, only listing them on Markdown.

[ovflowd]

I've already talked with @mhdawson and Ill update this discussion with some of our conversation; ideas and details that we've had.