DEV Community

Cover image for Show off your games using this tool
Azizul Haque Ananto
Azizul Haque Ananto

Posted on

2

Show off your games using this tool

I have built this dynamic 🖌 SVG generator that collects the 🕹 games you play from Steam and generates an image that can be embedded in any site (cause all sites use html 😅). You can also put it in ⓘ .md files (like readme)! For example in GitHub profile readme, look at mine -

GitHub logo Ananto30 / Ananto30

My profile with Steam stats card

👋 Hi, I'm Ananto

LinkedIn | Codersrank | Dev.to | Medium | Portfolio

🚀 Projects

🔬 POC's

  • Async to sync using
  • A Fiber(Go) backend for a diary app - repo

🎮 My Steam games! (repo) -

Travis

🧑‍💻 My codersrank




All you need is to make your Steam profile public. The steps are shown in the repo -

GitHub logo Ananto30 / steam-stat

🎮 Dynamically generate your Steam (game) stats card on SVG

Steam-stats

Steam stats svg generator. Create your own Steam stat dynamically and share anywhere.

This can be used with .md files!

You can put in your GitHub readme too 😃

Example 📝

For .md files -

![Travis](https://steam-stat.vercel.app/api?profileName=ananto)

For using as img property in html or md files -

<img src="https://steam-stat.vercel.app/api?profileName=ananto"/>

Travis

You need to provide the profile name in query parameter ?profileName=ananto.

Please ensure that your Steam profile is public!

How to get profile name or url

Go to profile Get profile name

How to make profile public

Make profile public

Contribution

Contributions are welcomed ❀

There are many things to add, so please feel free to discuss and improve the code quality


Inspired by github-readme-stats and natemoo-re




I am attaching the following line in this blog post and it will dynamically generate the SVG every time someone visits this page!

![Travis](https://steam-stat.vercel.app/api?profileName=ananto)
Enter fullscreen mode Exit fullscreen mode

Result -
Travis

(Obviously this has some caching to reduce spamming the Steam API 😛)

Please give it a ⭐ star if you like it. 😃
Suggest any further improvements and contributions are also welcomed. 👏
Share your profile in the comment! 👇

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❀ or a friendly comment on this post if you found it helpful!

Okay