DEV Community

Cover image for Easily share your Stackoverflow's profile on your README
johannchopin
johannchopin

Posted on

Easily share your Stackoverflow's profile on your README

Did you know that it was possible to easily share your Stackoverflow statistics using small dynamic images called "Flair"? This small image simply allows you to embellish your different READMEs like the one on GitHub or your online CV:

SO's Flair

... and that just by adding the following Markdown:

![SO's Flair](https://stackoverflow.com/users/flair/USER_ID.png?theme=dark)
Enter fullscreen mode Exit fullscreen mode

You can check them out at the URL https://stackoverflow.com/users/YOUR_USER_ID/YOUR_USER_NAME/flair :

SO's Flairs page

This service proposed by Stackoverflow works very well, however since it hasn't be updated since a few years, there is some negative point that I noticed:

  • the avatar image is weirdly cropped
  • the only infos are the username, reputation score and badges amount
  • it's a png so there is no fancy animation
  • the image is very pixelated because of its small size (208x58)
  • and most importantly: you cannot improve it because the project is not open-sourced

That's why I developed my own version of this service that would solve all these problems: stackoverflow-readme-profile

GitHub logo johannchopin / stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README

stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README.

SO profile

test workflow codecov This projet uses SemVer for versioning Gitmoji

⁉️ How to use?

You can generate your SO profile by calling this url with the corresponding template name and you SO user id:

https://stackoverflow-readme-profile.johannchopin.fr/:template/:id

Use it like that in your README:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/:template/:id)](https://github.com/johannchopin/stackoverflow-readme-profile)
Enter fullscreen mode Exit fullscreen mode

πŸ“„ Templates

profile

Render a profile image by using the profile template:

https://stackoverflow-readme-profile.johannchopin.fr/profile/:id

profile

Params (as query strings)

param default description
theme default Theme to use. Check them out here!
website true Show or not the website URL (true | false)
location true Show or not the location (true | false)

profile-small

Render a smaller profile image without the location and the website

profile

Params (as query strings)

param default description
theme default Theme to use. Check them out here!

🐳 Docker

Build the image

You can build the image by using the following command:

docker build -t johannchopin/stackoverflow-readme-profile .
Enter fullscreen mode Exit fullscreen mode

Push the

…

This project allows you to embed improved version of those flairs wherever you want:

Default Stackoverflow profile:
johannchopin's SO profile

Smaller profile:
johannchopin's SO profile

Just use the following markdown schema to get your flair:

[![my SO profile](https://stackoverflow-readme-profile.johannchopin.fr/TEMPLATE_NAME/USER_ID?theme=dark)](https://github.com/johannchopin/stackoverflow-readme-profile)
Enter fullscreen mode Exit fullscreen mode

Not yet convinced to use this project? I can understand why using an "unofficial" service doesn't seem like a good idea but here are some points that might change your mind:

  • stackoverflow-readme-profile proposes a higher customisation with multiple themes and templates
  • stackoverflow-readme-profile render a svg so the final image is pixel clear and is animated
  • the project is open-sourced: You want a new feature or improve something? Just open an issue so we can collaborate together
  • you want to self host the application? No problem there is already a docker image for that.

Thanks again for reading. If you are willing to see this project growing don't hesitate to leave a ⭐ to the repo and push your ideas of improvement.

GitHub logo johannchopin / stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README

stackoverflow-readme-profile

Easily share your Stackoverflow's profile on your README.

SO profile

test workflow codecov This projet uses SemVer for versioning Gitmoji

⁉️ How to use?

You can generate your SO profile by calling this url with the corresponding template name and you SO user id:

https://stackoverflow-readme-profile.johannchopin.fr/:template/:id

Use it like that in your README:

[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/:template/:id)](https://github.com/johannchopin/stackoverflow-readme-profile)
Enter fullscreen mode Exit fullscreen mode

πŸ“„ Templates

profile

Render a profile image by using the profile template:

https://stackoverflow-readme-profile.johannchopin.fr/profile/:id

profile

Params (as query strings)

param default description
theme default Theme to use. Check them out here!
website true Show or not the website URL (true | false)
location true Show or not the location (true | false)

profile-small

Render a smaller profile image without the location and the website

profile

Params (as query strings)

param default description
theme default Theme to use. Check them out here!

🐳 Docker

Build the image

You can build the image by using the following command:

docker build -t johannchopin/stackoverflow-readme-profile .
Enter fullscreen mode Exit fullscreen mode

Push the

…

Discussion (0)