Be honest. We all have a discord rpc plugin installed on our favorite editors. There's no real reason for doing something like that except for bragging rights and a feeling of satisfaction that we get after showing off our precious work to our friends. But what if you could show off such an achievement on your Github profile?
tldr: checkout the ishowoff vscode extension and the github action.
This is something that I've thought of for a while at this point. I've seen beautiful profile readmes and always wanted to do something similar. Being the lazy bum I am, I never got around to it. But then, something struck my eye: Github Activity Readme, a program that works on Github Actions and directly updates your Github profile readme with your recent activities on Github. This is a bit old and Github now has something similar on the profile page, but it still was a fun idea. It runs a cron job every set interval and updates your readme.
That got me wondering: could I do something similar?
I brainstormed the idea and came up with a plan:
- A Github Action that runs a Rust binary to generate svgs.
- An editor extension would make an API request to run the Github action with relevant arguments like current open file, open workspace and start time.
- The Rust binary takes all this input and spits out an svg file.
- The Action commits the file to the main branch. The image in the main branch will always have the url:
https://github.com/{owner}/{repository}/stats.svg.
And surprise, this is exactly what I did.
This was kind of wonky. But I knew it would work (for the most part at least). Now I needed a name. And I think I have done a good job at naming it for what it is: IShowOff.
Yes, the name is inspired from ishowspeed, but instead of showing off your , you show off your editor sessions.
To get started, download the extension and fork this repo with Github actions.
Once done, you'll need to generate a Personal Access Token. Please be sure to not give it more permissions than write:packages. An expiration date is recommended.
This is where it gets a bit weird. To call the API to run the Github Action, you need to supply the Personal Access Token. And as you know, this is similar to a password. I could not find any better ways, so you'll have to supply the extension with the token. And to make sure I am not stealing your token, be sure to go through the extension code 😅.
The rest of it is easy. On your first run after installation, it should prompt you to set the username and the forked Github repo's name in the settings along with the Token. Optionally, you can set an interval to update the session. You have almost 2000 minutes of free Github Action time, and about 15s are required for each run. Do the math and set an appropriate interval yourself.
Now add the following to your profile readme:
<img src="https://raw.githubusercontent.com/{YOUR USERNAME}/{YOUR FORKED REPO: default: ishowoff}/main/stats.svg">
Yeah, that's all.
However, there are some stuff that I still need help with. Like the holes in the Rust svg not showing up, and adding support for new languages by providing their svg files. And I am not particularly fond of having used setInterval to call the API request every 10 minutes (or whatever interval you've set). I am open to suggestions.
I'm also particularly bad with colors, so adding new themes would be appreciated too. Right now, you can send in custom arguments using the custom command setting in the extension to fine-tune the colors and font. Moving the in-memory theme implementation to a JSON file for easy edits is on my bucket list of stuff I'll never get around to doing. So, if anyone can help with that, I'll greatly appreciate it!
Another thing is with Github itself. Github does not immediately replace the new committed file to be under the url I mentioned earlier. Rarely, it has a slight delay before moving the newly committed file to that url. This could be avoided by hosting the image yourself. To help with this, set the custom command setting in the extension with something like: && curl -X POST {your server endpoint} -H "Content-Type: image/svg+xml" -F "file=@stats.svg".
Alright then.
Happy Flexxing ❤️
Top comments (0)