Code Monkey home page Code Monkey logo

fn-fal113 / github-readme-steam-status Goto Github PK

View Code? Open in Web Editor NEW
15.0 2.0 2.0 798 KB

:video_game: A dynamically generated steam card for your github readme

Home Page: https://github-readme-steam-card.vercel.app

License: GNU General Public License v3.0

TypeScript 100.00%
dynamic github-readme profile-generator profile-readme readme-generator steam-readme steam-github-readme card-generator readme readme-badges readme-card steam steam-api gaming profile-card readme-profile readme-stats steam-card

github-readme-steam-status's Introduction

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.

Deploy with Vercel

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 paylize size of over 5-7mb.
  1. 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.
  1. 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 by the user.

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 and appreciated:

Donate with PayPal

github-readme-steam-status's People

Contributors

fn-fal113 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

lwd-temp je-chen

github-readme-steam-status's Issues

Last played game always is CS

Hello in my profile, status always show my last played game is CS
image
actually last played game is Elden ring
image
any idea?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.