Is your feature request related to a problem? Please describe.

Currently, the only way to create GRS cards is through the Public/Private Vercel instance. This method is user-friendly since people can request their cards from the endpoint. Unfortunately, it, however, comes with several limitations:

• It uses the GraphQL API, which is rate limited (see https://docs.github.com/en/graphql/overview/resource-limitations). As a result, if too many people are using the Public Vercel instance simultaneously, cards can no longer be fetched.
  • Additionally, we can not improve the accuracy of our cards since fetching more data would result in higher GraphQL query costs. Because of this, the results are less accurate for users with more than 100 repositories.
    • Include_all_commits sometimes shows incorrect number of commits #1515
    • Stats and languages results incorrect due to graphql 100 records limit #1852
  • It also prevents us from implementing top feature requests like:
    • [Feature Request] Add organization stats #1
• Further, the code must run on the Vercel instance before the results are returned. This causes long loading times for the cards or even a time-out.

Describe the solution you'd like

In my discussion with @4l1fe on #1975, we concluded that the best way to solve these issues is also to give users the ability to generate the GRS cards periodically inside a GitHub action. Doing this would provide us to solve the points above for the case when users use GRS through an action.

Implementation

We can create such an action by calling the render functions directly and then saving the resulting SVGs to the system. I created the following example to show what I mean:

const fetchStats = require("../src/fetchers/stats-fetcher");
const {
  renderError,
  parseBoolean,
  parseArray,
  clampValue,
  CONSTANTS,
} = require("../src/common/utils");
const renderStatsCard = require("../src/cards/stats-card");
const fs = require("fs");

// Variables (Should be replaced with CLI arguments)
const username = "rickstaa";
const count_private = true;
const count_all_commits = true;
const hide = "";
const show_icons = true;
const hide_title = true;
const hide_border = true;
const hide_rank = true;
const include_all_commits = true;
const line_height = 25;
const title_color = "#000000";
const icon_color = "#000000";
const text_color = "#000000";
const bg_color = "#ffffff";
const custom_title = "Rick Staa";
const border_radius = "1";
const border_color = "#000000";
const theme = "light";
const locale = "en";
const disable_animations = true;

const run = async () => {
  // Retrieve stats
  const stats = await fetchStats(
    username,
    parseBoolean(count_private),
    parseBoolean(count_all_commits),
  );
  console.log(stats);

  // Create card
  const card = renderStatsCard(stats, {
    hide: parseArray(hide),
    show_icons: parseBoolean(show_icons),
    hide_title: parseBoolean(hide_title),
    hide_border: parseBoolean(hide_border),
    hide_rank: parseBoolean(hide_rank),
    include_all_commits: parseBoolean(include_all_commits),
    line_height,
    title_color,
    icon_color,
    text_color,
    bg_color,
    theme,
    custom_title,
    border_radius,
    border_color,
    locale: locale ? locale.toLowerCase() : null,
    disable_animations: parseBoolean(disable_animations),
  });
  console.log(card);

  // Save card
  if (!fs.existsSync("cards")) {
    fs.mkdirSync("cards");
  }
  fs.writeFileSync(`./cards/${username}.svg`, card);

  console.log("finish");
};

run();

We can then wrap this function inside a Javascript GitHub action and let users provide the query parameters for our cards through the action configuration file.

name: GRS card generation
on:
  schedule:
  - cron:  '0 0 */1 * *'

jobs:
  ceateGRSCards:
    name: Create and Store GRS cards
    runs-on: ubuntu-latest
    steps:
    - name: Run top issues action
      uses: anuraghazra/github-readme-stats@master
      env:
        github_token: ${{ secrets.GITHUB_TOKEN }}
      with:
        save_path: ""
        stats_card_query: ?username=anuraghazra
        lang_card_query: ?username=anuraghazra
        repo_card_query: ?username=anuraghazra&repo=github-readme-stats
        wakatime_card_query: ?username=willianrod

Alternatively, we could use Vercels query parsers to call the API endpoints directly.

Todos

• Create a function that calls the card to render functions.

#2473 implements this

• Create a way to store the returned cards in the system.

I think the easiest way to do this is the following:

• Checkout Git branch

• Write SVG to local file

• Push to GRS branch

• Users can use raw githubusercontent or GH Pages to access file

• Inspiration from @Platane/snk :)

• Wrap this functionality in a action.