@diegovictor/github-profile-summary v1.0.6

Github Profile Summary

Use this component to show a summary of your github stats with a cool design 😎

Installing

Just run:

npm install @diegovictor/github-profile-summary

Or simply:

yarn add @diegovictor/github-profile-summary

Usage

So easy than make a lemonade:

import React from 'react';
import ReactDOM from "react-dom/client";
import { ProfileSummary } from '@diegovictor/github-profile-summary';
import data from "./data.json";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ProfileSummary data={data} />,);

Structure

The data attribute must receive an object with the following structure:

{
  user: {
    name: 'Diego Victor',
    avatar_url: 'https://avatars3.githubusercontent.com/u/15165349?v=4',
    login: 'DiegoVictor',
    url: 'https://github.com/DiegoVictor',
  },
  languages: [
    {
      name: 'JS',
      usage: '67%',
      percent: 67,
      color: '#f1e05a',
    },
    ...
  ],
  stats: [
    {
      key: 1,
      title: 'Commit\nAverage',
      value: 59,
      description: 'in 18 repos',
    },
    ...
  ],
}

The stats array must have only 3 items, any item after the third position will be ignored

Data

With in this package there is a script to calcule stats and language usage from a provided github's user, just run scripts/main.js passing the user github's username as parameter:

$ node scripts/main.js diegovictor

Github has a low limit of requests non authenticated, if the provided user have a lot of repositories probably the limit will be reached easyly, to avoid this problem create a personal access token to have a greater limit, then pass it as a second parameter to the script:

$ node scripts/main.js diegovictor ghp_p07LDQ1xUyRJ4dExb6U1YfVlEW1vgX2SKiFQ

A stats.json file will be create aside the script, just copy its content and pass it to component into data attribute.