💖 Toolkit for generating sponsors images 😄

Overview

SponsorKit

NPM version

Toolkit for generating sponsors images.

Usage

Create .env file with:

; Token requires the `read:user` and `read:org` scopes.
SPONSORKIT_GITHUB_TOKEN=your_github_token
SPONSORKIT_GITHUB_LOGIN=your_github_username

Run:

npx sponsorkit

Example Setup | GitHub Actions Setup | Generated SVG

Configurations

Create sponsorkit.config.js file with:

import { defineConfig, presets } from 'sponsorkit'

export default defineConfig({
  // Providers configs
  github: {
    login: 'antfu',
  },

  // Rendering configs
  width: 800,
  formats: ['json', 'svg', 'png'],
  tiers: [
    {
      title: 'Backers',
      preset: presets.base,
    },
    {
      title: 'Sponsors',
      monthlyDollars: 10,
      preset: presets.medium,
    },
    {
      title: 'Silver Sponsors',
      monthlyDollars: 50,
      preset: presets.large,
    },
    {
      title: 'Gold Sponsors',
      monthlyDollars: 100,
      preset: presets.xl,
    },
  ],
})

Also check the example.

Utils

You can also use SponsorKit programmatically:

import { fetchSponsors } from 'sponsorkit'

const sponsors = await fetchSponsors(token, login)

Check the type definition or source code for more utils available.

Sponsors

License

MIT License © 2022 Anthony Fu

Comments
  • Display the past sponsors.

    Display the past sponsors.

    Clear and concise description of the problem

    Maybe we can display the past sponsors because I saw GitHub shows it in the sponsor profile.

    Suggested solution

        {
          title: 'Past Sponsors',
          monthlyDollars: -1,
          preset: presets.base,
        },
    

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [x] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    enhancement 
    opened by dohooo 7
  • feat: add OpenCollective provider

    feat: add OpenCollective provider

    This PR adds an OpenCollective provider.

    Blocking

    ~~OpenCollective returns an avatar url even if the user doesn't have one (which fails on resolveAvatars), a default one should be provided instead.~~

    Concerns

    • OpenCollective suppots multiple currencies which might confuse users since the key is called monthlyDollars
    • OpenCollective graphql api is not fully documented (eg. pagination)

    Output (on babel with a 10 backers hard limit):

    sponsors of babel on opencollective

    closes: #8

    opened by GeopJr 5
  • feat: add patreon provider

    feat: add patreon provider

    Close #7

    Result

    (Using custom sponsorkit.config.js)

    SponsorKit v0.3.2
    
    [sponsorkit] env.SPONSORKIT_LOGIN is deprecated, use env.SPONSORKIT_GITHUB_LOGIN instead
    [sponsorkit] env.SPONSORKIT_TOKEN is deprecated, use env.SPONSORKIT_GITHUB_TOKEN instead
    ℹ Fetching sponsorships from patreon...                                                                     13:55:16
    ✔ 2 sponsorships fetched from patreon                                                                       13:55:18
    ℹ Resolving avatars...                                                                                      13:55:18
    ✔ Avatars resolved                                                                                          13:55:18
    ✔ Wrote to ./sponsorkit/sponsors.json                                                                       13:55:18
    ℹ Composing SVG...                                                                                          13:55:18
    ✔ Wrote to ./sponsorkit/sponsors.svg                                                                        13:55:18
    ✔ Wrote to ./sponsorkit/sponsors.png                                                                        13:55:19
    

    sponsors

    Notes

    1. I left the [sponsorkit] env.SPONSORKIT_LOGIN is deprecated, use env.SPONSORKIT_GITHUB_LOGIN instead as refactoring it made the PR complex. Might be better to cut a minor and remove the deprecated API.
    2. Added a deprecated patreon.token property to ProvidersConfig interface so types work in src/env.ts. We could also deprecate the providers config entirely?
    3. Hopefully I format the code right
    opened by bluwy 2
  • GitHub token is required

    GitHub token is required

    What I have as files :

    • ./workflows/sponsor_gen.yml
    • ./package.json (like this one)
    • ./sponsor.config.ts with defaults configs.

    In settings, I've got SPONSORS_TOKEN in Actions secrets with org:read and user:read perms.

    When I run the action, I've got this error :

    Run npm run build
      npm run build
      shell: /usr/bin/bash -e {0}
      env:
        SPONSORKIT_GITHUB_TOKEN: ***
        SPONSORKIT_GITHUB_LOGIN: thomasbnt
    
    > build
    > sponsorkit
    
    [log] 
    SponsorKit v0.[2](https://github.com/thomasbnt/sponsors/runs/5741141885?check_suite_focus=true#step:5:2).2
    
    [info] Fetching sponsorships from github...
    Error: GitHub token is required
        at fetchGitHubSponsors (/home/runner/work/sponsors/sponsors/node_modules/.pnpm/[email protected]/node_modules/sponsorkit/dist/chunks/index.cjs:284:11)
        at Object.fetchSponsors (/home/runner/work/sponsors/sponsors/node_modules/.pnpm/[email protected]/node_modules/sponsorkit/dist/chunks/index.cjs:279:12)
        at run (/home/runner/work/sponsors/sponsors/node_modules/.pnpm/[email protected]/node_modules/sponsorkit/dist/cli.cjs:[3](https://github.com/thomasbnt/sponsors/runs/5741141885?check_suite_focus=true#step:5:3)[9](https://github.com/thomasbnt/sponsors/runs/5741141885?check_suite_focus=true#step:5:9):32)
        at async Object.handler (/home/runner/work/sponsors/sponsors/node_modules/.pnpm/[email protected]/node_modules/sponsorkit/dist/cli.cjs:[13](https://github.com/thomasbnt/sponsors/runs/5741141885?check_suite_focus=true#step:5:13)0:3)
    Error: Process completed with exit code 1.
    

    How I can resolve this error?

    opened by thomasbnt 1
  • fix:

    fix: "sliver" typo

    This PR fixes a small typo that can be seen on your sponsor image, it says "sliver sponsors" instead of "silver sponsors" (which can be correct but I doubt it's what you meant 😄)

    opened by innocenzi 1
  • feat: support Afdian as a provider

    feat: support Afdian as a provider

    Description

    Afdian (爱发电) is one of the most popular sponsor platform in China. Will be nice to support Afdian.

    Linked Issues

    None

    Additional context

    I don't think of any.

    opened by ModyQyW 0
  • fix: past sponsor link is undefined.

    fix: past sponsor link is undefined.

    Description

    open https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg The links are undefined when you mouse over past sponsors.

    <a xlink:href="https://github.com/undefined" class="sponsorkit-link" target="_blank" id="undefined">
     <image x="72.5" y="1557" width="25" height="25" xlink:href="..."/>
    </a>
    
    opened by loosheng 0
  • fix: filter decline payment users in Patreon provider

    fix: filter decline payment users in Patreon provider

    Description

    If a user sponsors use on Patreon and decline payment after a period, the user's avatar will not disappear.

    So this PR fixes this issue, filtering sponsors with declined payment and only showing currently active Patreon sponsors.

    Additional context

    Reference Patreon API: https://docs.patreon.com/#pledge

    opened by ycs77 0
  • feat: fallback avatar

    feat: fallback avatar

    Description

    This PR adds a fallback avatar as well as an option to configure it. (Following the comment at https://github.com/antfu/sponsorkit/pull/10#issuecomment-1226836097)

    Linked Issues

    #11

    Additional context

    • Avatar copyright The icon is the one GitHub uses for "private sponsors". I don't think there's a license issue but if there is, I can quickly make a different one in inkscape (circle + half circle) image of a generic person icon (a circle on top of half circle) in grey with a darker grey background

    • Config The current config option allows the user to replace the avatar with another bitmap. If that's too much, I can replace it with a config option to replace the default fallback icon's colors instead.

    closes: #11

    opened by GeopJr 0
  • fix: should not appear deprecated warning

    fix: should not appear deprecated warning

    Description

    I used the Patreon provider for SponsorKit, not adding any GitHub tokens (no SPONSORKIT_LOGIN and SPONSORKIT_GITHUB_LOGIN), but show the warning on build time:

    [sponsorkit] env.SPONSORKIT_LOGIN is deprecated, use env.SPONSORKIT_GITHUB_LOGIN instead
    

    Because the getDeprecatedEnv('SPONSORKIT_LOGIN', 'SPONSORKIT_GITHUB_LOGIN') using const value = process.env[name] to get the global variable, the global variable is a string or undefined, if the variable is not found is return the undefined. But it is not equal to null, so the deprecation warning appears when the variable is equal to undefined.

    https://github.com/antfu/sponsorkit/blob/0c285ea3dd80fed581ab228b9d021ab83554908a/src/env.ts#L4-L9

    So this PR resolved the issue.

    opened by ycs77 0
  • fix: merge patreon config

    fix: merge patreon config

    Forgot to handle patreon config merging in #15. This PR adds it.

    Also added docs to use patreon provider. Added a link as the Patreon docs & DX isn't great.

    opened by bluwy 0
  • Support custom provider for wechat, alipay, etc.

    Support custom provider for wechat, alipay, etc.

    Clear and concise description of the problem

    Now sponsorkit only supports platform sponsors. It is hard to add sponsors sponsored by wechat, alipay, etc.

    Suggested solution

    We can specify a file read by unconfig, named custom-sponsors.config.ts or something. The file exports sponsors, matching type Sponsorship[].

    Alternative

    No response

    Additional context

    This is a raw idea. I will make a pr if this idea is possible.

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    enhancement 
    opened by ModyQyW 0
  • OpenCollective should use monthly amount instead of total

    OpenCollective should use monthly amount instead of total

    Describe the bug

    I just tried this by adding both GitHub Sponsors and Open Collective tokens. The way this tool handle each is different.

    For GitHub, it's taking into account the monthly value (as it should), but for Open Collective it's using the total, which results is a wrong output image.

    Reproduction

    Use GitHub and OpenCollective at the same time and see that they use different values.

    System Info

    System:
        OS: macOS 12.6
        CPU: (10) arm64 Apple M1 Pro
        Memory: 89.61 MB / 16.00 GB
        Shell: 5.8.1 - /bin/zsh
      Binaries:
        Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
        Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.1/bin/yarn
        npm: 8.6.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
      Browsers:
        Brave Browser: 101.1.38.115
        Chrome: 108.0.5359.94
        Firefox: 107.0.1
        Firefox Developer Edition: 108.0
        Safari: 16.0
    

    Used Package Manager

    yarn

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.
    pr welcome 
    opened by andreynering 1
  • 3rd party providers support

    3rd party providers support

    Clear and concise description of the problem

    As title

    Suggested solution

    As title

    Alternative

    No response

    Additional context

    No response

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
    enhancement 
    opened by JounQin 1
  • [Bug Report]: defaultComposer maybe have bug

    [Bug Report]: defaultComposer maybe have bug

    Background

    Description

    When i use this project to generator my sponsors meta info. I found when i remove Backers . And set anthor tier monthlyDollars as 1. I got a mistake.

    Just like

    image

    In my consola

    image

    Expcet

    I noticed that if I run the example it defaults to a blank which is normal. But there may be cases where the user deletes these isn't it? I think defaultComposer should judge 0 and null(undefined) respectively. Currently. In defaultComposer logic is const finalSponsors = config.tiers!.filter(i => i.monthlyDollars == null || i.monthlyDollars === 0)

    opened by nonzzz 0
Releases(v0.7.0)
Owner
Anthony Fu
A ship in harbor is safe, but that is not what ships are built for.
Anthony Fu
A Figma plugin for generating skeleton UI placeholders, specific to Discord's usecases.

Project Scaffold Generator Why? This is an internal tool we use at Discord to generate Discord specific "skeleton/placeholders" for help in designing

Bryan Berger 17 Nov 22, 2022
Vite-plugin-web-extension - A vite plugin for generating cross browser platform, ES module based web extensions.

vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Support Compl

Ruben Medina 81 Dec 31, 2022
A Vue.js 2.0 UI Toolkit for Web

A Vue.js 2.0 UI Toolkit for Web. Element will stay with Vue 2.x For Vue 3.0, we recommend using Element Plus from the same team Links Homepage and doc

饿了么前端 53k Jan 3, 2023
A high quality UI Toolkit built on Vue.js 2.0

iView A high quality UI Toolkit built on Vue.js. Docs 3.x | 2.x | 1.x Features Dozens of useful and beautiful components. Friendly API. It's made for

iView 24k Jan 5, 2023
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A zero-dependencies script to generate sponsors SVG from Patreon

sponsors A zero-dependencies script to generate sponsors SVG from Patreon. Usage Go to https://www.patreon.com/portal/registration/register-clients to

Bjorn Lu 3 Apr 25, 2022
Repository to generate meetup trailers for social network like Twitter, Reddit, Slack to announce speakers and talks and sponsors 📣

LyonJS meetup social trailer videos generator This github project use Remotion to generate video for LyonJS social network. We could generate video di

LyonJS 5 Dec 13, 2022
Utility for generating preview images of StarCraft: Brood War and Remastered maps

bwpreview Utility for generating preview images of StarCraft: Brood War and Remastered maps (.scm and .scx files). All of the actual work of parsing m

Michiel Sikma 5 Oct 14, 2022
A tiny script and component intended to be used with Astro for generating images with eleventy-img.

Astro + eleventy-img A tiny script and component intended to be used with Astro for generating images with eleventy-img. It also supports creating blu

Erika 36 Dec 16, 2022
Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

Olayinka Atobiloye 3 Dec 15, 2022
jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Jono Menz 3.2k Dec 30, 2022
Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

John Christensen 399 Jan 3, 2023
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
A tiny script for generating attractive colors

Random Color A tiny script for generating attractive random colors. See the demo for an explanation and some samples. randomColor has been ported to C

David Merfield 5.9k Dec 24, 2022