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:

… and that …


This content originally appeared on DEV Community and was authored by johannchopin

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)

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)

📄 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 .

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)

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)

📄 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 .

Push the


This content originally appeared on DEV Community and was authored by johannchopin


Print Share Comment Cite Upload Translate Updates
APA

johannchopin | Sciencx (2021-12-05T15:27:29+00:00) Easily share your Stackoverflow’s profile on your README. Retrieved from https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/

MLA
" » Easily share your Stackoverflow’s profile on your README." johannchopin | Sciencx - Sunday December 5, 2021, https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/
HARVARD
johannchopin | Sciencx Sunday December 5, 2021 » Easily share your Stackoverflow’s profile on your README., viewed ,<https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/>
VANCOUVER
johannchopin | Sciencx - » Easily share your Stackoverflow’s profile on your README. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/
CHICAGO
" » Easily share your Stackoverflow’s profile on your README." johannchopin | Sciencx - Accessed . https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/
IEEE
" » Easily share your Stackoverflow’s profile on your README." johannchopin | Sciencx [Online]. Available: https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/. [Accessed: ]
rf:citation
» Easily share your Stackoverflow’s profile on your README | johannchopin | Sciencx | https://www.scien.cx/2021/12/05/easily-share-your-stackoverflows-profile-on-your-readme/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.