Skip to content

github-readme-profile 1.0.5-beta.2

Install from the command line:
Learn more about npm packages
$ npm install @fajarkim/github-readme-profile@1.0.5-beta.2
Install via package.json:
"@fajarkim/github-readme-profile": "1.0.5-beta.2"

About this version

GitHub Readme Profile

GitHub Readme Profile

🙀 Generate your Stats GitHub Profile in SVG

Report Bugs · Request Feature · Ask Question

GitHub Readme Profile Version GitHub Readme Profile Code Quality GitHub Readme Profile Issues GitHub Readme Profile PRs
Powered by Vercel

📌 Features

🎴 Getting Started

Copy-paste this into your markdown content, and that is it. Simple!

Change the ?username= value to your GitHub username.

[![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim)](https://github.com/FajarKim/github-readme-profile)

GitHub Stats

🎨 Themes

With inbuilt themes, you can customize the look of the card without doing any manual customization.

Use &theme=THEME_NAME parameter like so:

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&theme=dark)
Show Example GitHub Stats

All inbuilt themes

GitHub Readme Profile comes with several built-in themes (e.g. transparent, dark, highcontarst).

Themes Preview
default image
transparent image
dark image
highcontrast image

You can look at a preview for all available themes. You can also contribute new themes if you like, contributing guidelines can be found here.

✏️ Customization

You can customize the appearance of all your cards however you wish with URL parameters.

Options

  • title_color - Card's title color (hex color). Default: 2f80ed.
  • text_color - Body text color (hex color). Default: 434d58.
  • icon_color - Icons color if available (hex color). Default: 4c71f2.
  • border_color - Card's border color (hex color). Default: e4e2e2.
  • bg_color - Card's background color (hex color) or a gradient in the form of angle,start,end. Default: fffefe.
  • stroke_color - Profile image border color (hex color). Default: e4e2e2 or border_color query.
  • username_color - Username text color (hex color). Deafult: 434d58 or text_color query.
  • theme - Name of the theme, choose from all available themes. Default: default theme.
  • locale - Sets the language in the card, you can check full list of available locales here. Default: en.
  • border_width - Sets the border's width manually (number). Default: 1.
  • border_radius - Corner rounding on the card. Default: 4.5.
  • format - Output format card option (svg, png, and json). Default: svg.
  • disabled_animations - Disables all animations in the card (boolean). Default: false.
  • hide - Hides the specified items from stats (Comma-separated values). Default: [] (blank array).
  • show - Shows additional items on stats card (Comma-separated values). Default: [] (blank array).
  • hide_border - Hides the card's border (boolean). Default: false.
  • hide_stroke - Hides the image's profile stroke in the card (boolean). Default: false.

Use the transparent theme

We have included a transparent theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the &theme=transparent parameter like so:

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&theme=transparent)
Show Example GitHub Stats

Add transparent alpha channel to a themes bg_color

You can use the bg_color parameter to make any of the available themes transparent. This is done by setting the bg_color to a color with a transparent alpha channel (i.e. bg_color=00000000):

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&bg_color=00000000)
Show Example GitHub Stats

Use GitHub's theme context tag

You can use GitHub's theme context tags to switch the theme based on the user GitHub theme automatically. This is done by appending #gh-dark-mode-only or #gh-light-mode-only to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:

[![GitHub Stats-Dark](https://gh-readme-profile.vercel.app/api?username=FajarKim&theme=dark#gh-dark-mode-only)](https://github.com/FajarKim/github-readme-profile#gh-dark-mode-only)
[![GitHub Stats-Light](https://gh-readme-profile.vercel.app/api?username=FajarKim&theme=default#gh-light-mode-only)](https://github.com/FajarKim/github-readme-profile#gh-light-mode-only)
Show Example GitHub Stats-Dark GitHub Stats-Light

Use gradient color

You can use the bg_color parameter to make gradient color. This is done by setting the bg_color with format angle,start,end (comma-separated value).

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&bg_color=30,e96443,904e95&title_color=fff&text_color=fff&icon_color=fff)
Show Example GitHub Stats

Hiding individual stats

You can pass a query parameter &hide= to hide any specific stats with comma-separated values.

Options: &hide=repos,stars,forks,commits,prs,prs_merged,issues, contributed

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&hide=repos,forks,prs_merged)
Show Example GitHub Stats

Showing additional individual stats

You can pass a query parameter &show= to show any specific additional stats with comma-separated values

Options: &show=reviews,issues_closed,discussions_started,discussions_answered

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&show=reviews,issues_closed,discussions_started,discussions_answered)
Show Example GitHub Stats

Available locales

Code

Locale

en

English

ar

Arabic (العربية)

fr

French (Français)

id

Indonesian (Bahasa Indonesia)

ja

Japanese (日本語)

ko

Korean (한국어)

See more available locale. The locale code added to file should be a 2-letter abbreviation from ISO 639-1 or a 4-letter code with a language and country code (eg. id or pt-BR). Anything appearing in the list should be fine. You can also contribute new translations if you like, contributing guidelines can be found here.

![GitHub Stats](https://gh-readme-profile.vercel.app/api?username=FajarKim&locale=id)
Show Example GitHub Stats

📑 License

GitHub Readme Profile is released under the MIT license, which grants the following permissions:

  • Commercial use
  • Modification
  • Distribution
  • Private use

For more convoluted language, see the LICENSE.

Deploy on ▲ Vercel

Step-by-step guide on setting up your own Vercel instance.

  1. Go to vercel.com.
  2. Click on Log In.
  3. Sign in with GitHub by pressing Continue with GitHub.
  4. Sign in to GitHub and allow access to all repositories if prompted.
  5. Fork this repository.
  6. Go back to your Vercel dashboard.
  7. To import a project, click the Add New... or + button and select the Project option.
  8. Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the Import button. Alternatively, you can import a Third-Party Git Repository using the Import Third-Party Git Repository link at the bottom of the page.
  9. Create a personal access token (PAT) here and enable the repo and user permissions (this allows access to see private repo and user stats).
  10. Add the PAT as an environment variable named GH_TOKEN.
  11. In build and output settings, you set install command toggle and add command npm install typescript.
  12. Click deploy, and you're good to go. See your domains to use the API!

Deploy

💳 Credits

This repository contains forked from tuhinpal/readme-stats-github and inspired from anuraghazra/github-readme-stats.

💰 Donate

Love the project? Please consider donating to help it improve!

GitHub Sponsor PayPal Donate Buy Me a Coffee Trakteer.id Donate

Are you considering supporting the project by donating to me? Please DO NOT!!

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

👥 Contributions

Contributions are welcome!

Specially thanks ❤️ for contributors bellow:

Want to contribute? Please note our contribution guidelines here.

Made with ❤️ and TypeScript

Copyright © 2023 Rangga Fajar Oktariansyah

GitHub Readme Profile License

Details


Assets

  • github-readme-profile-1.0.5-beta.2.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0