Github Readme Steam Card

🎮 A dynamically generated steam card for your github readme

Animated avatar or frames supported!

Usage

Add the following markdown to your github readme

use your steamid64 as the value for ?steamid= (you may use steam id finder).

display through markup

<img src="https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64 here>"/>

or through markdown

![GRSS](https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64 here>)

Available Options

• show_in_game_bg - display in game banner as a partial background, fallback to steam logo if set to false.
• show_recent_game_bg - display recent game banner as partial background, fallback to steam logo if set to false.

https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_in_game_bg=false

Default
https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_in_game_bg=true

https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_recent_game_bg=false

Default
https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_recent_game_bg=true

Default: false (animated avatar only due to payload limit with serverless platforms)
https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_recent_game_bg=true  

You may combine these options together

https://github-readme-steam-card.vercel.app/status/?steamid=<SteamID64here>&show_in_game_bg=true&show_recent_game_bg=false

Deploy your own Vercel instance

Generate your steam api key by going to Steam Web API Docs and supply the environment variable STEAM_API_KEY with your own.

Fork this project and deploy it to your own vercel instance or click the deploy button below which does most of the stuffs for you.

Create an account on vercel if you don't have yet.

FAQ

1. Enable animated avatar and frame at the same time

• Despite previously adding support even with proper image optimizations, the api is hitting a timeout against github's cdn proxy. This is due to the imposed time window by github for rendering images inside readme files which would be ~4s. After tireless testing, I had to further optimize and trim down the app in order to lessen api execution time. The dillemmas associated with enabling both animated avatar and frames:
  1. animated avatars without image optimization reaches payload limit for functions.
  2. animated avatars with image optimization increases execution time and function size due to additional package causing timeouts.
  3. serverless payload limit is capped at 5mb, animated avatar and frames enabled altogether can have a payload size of over 5-7mb.

2. Cold Boot and Github CDN timeouts

• Cold boots may cause image loading or rendering timeouts through github's cdn proxy which has a time limit on serving content from the origin. Subsequent requests might return a stale response while revalidating the cache to serve the most recent content.

3. Recently played game not showing

• To be able to use this feature, an instance of the project through vercel with your steam api key must be created to access user recently played games.

Disclaimer

This project or its author are not affiliated, associated, authorized, endorsed by steam, its affiliates or subsidiaries. Images, names and other form of trademark are registered to their respective owners.

💖 Support the project/dev

Open-sourcing projects are great with all the effort and time I dedicate. However there are some ways you can show your support to me:

• Giving a star or sharing this project to gamer devs out there.
• Through pull requests, if you think you can make essential changes.
• Donations are welcome but not required appreciated: