Do you see this? If you are active, offline, or idle, You can display that in your GitHub readme and it's a realtime update.
You can check the live demo here on my Github profile
Sounds cool, isn't it?
We have a few Pros and Cons here... Check it before you try it out.
- Your Github will have green signals every day even if you don't code. :)
- You can flex what you are working on, in your Github's profile to your visitors.
- Your GitHub gets 200+ commit spams in a day.
- The setup instruction might get hard if you don't know what you are doing.
Alright, If you are still interested in doing this I will write detailed instructions on how can it be done. First, you need to understand we are using google sheet as our database and google sheet's API to put and get the data from our database. Don't worry you don't need to bother about code and stuff.
Let's look at this workflow.
We need a vscode extension to send data from vscode to google sheet. Whenever you open vscode or in every few minutes interval that extension will send data from vscode to your google sheet. And we have something called Github action, a feature provided by Github. GitHub action then runs a small script which gets data from google sheet and updates readme approx. every 6 minutes. It's simple alright.
- Throwaway Gmail account
You can also use your main account without a problem. It's just that you will be keeping your .p12 key and secrets in cleartext. It can be used to access your account without your password. Be careful who you give your computer to.
- Github.com/YOUR_USERNAME/YOUR_USERNAME repo
To have a Github profile readme, you need a repo matching your Github's username. I guess you knew this.
- Visual Studio Code
Currently it is only built for vscode, will release a better method to do this without those above cons, and for other Text editor and IDEs on v1.0 release (a few months from now)
Create a Google service account. Here is a youtube video I made to help you to create a Google service account and get the required information you need for further setup.
By the end of this video, you should be able to grab
mykey.p12file (I want you to rename it to mykey.p12)
- Google Sheet ID (Acquired from the URL)
- Google Sheet Name (Default: Sheet1)
- Google Service account's email
- Google Service account's API key
First, install This extension in your VScode.
To configure the extension's configuration, you will need all the files and info from Step1 except, Google service API key. We will use that later in Github Action.
Open Visual Studio Code
- Then navigate to > File > Preferences > Settings
- Now click Extension > GoogleSheetLogger
Ahh, Welcome to the configuration page. Fill out those 2 fields. Or all 4 if you have a different file name or sheet name.
Now open the extension's folder.
mykey.p12 file in that folder. That's it you are done with vscode part.
Presuming you have the GitHub repo named same as your Github's username, You need to first add a README.md to your repo(Leave it black for now). If you already have one, backup that README.md file.
Now create an index.js file in that repo. and paste this code in it.
In the code find the line starting with
fs.writeFile and below that you will see the real readme file you need to edit for yourself, according to the information you want in the readme. Let it be yet, you can edit
Alright, we are about to finish it now. Go to repo's Settings > Secrets > and click
New Secret Button.
API_KEYwith your KEY and ID you got from Step 1
Now create a folder
.github in the repo and inside of
.github, create another folder named
workflows it should look like this
After that, create a
main.yml file inside the workflows folder. And paste this inside of it.
Cool, we are done. Hope it was not that hard. :)
Thank you for reading my blog! Give star if you like the idea or the extension. And If you see any bugs in code, just open an issue. If you want to contribute just give a pull request.
If you want an update on version 1 which is going to be lot better and easier. Hit watch in this repo or follow me on Github
Have a wonderful day!