DEV Community

Cover image for You can flex your VSCODE's live update on Github readme.
Ruben Kharel
Ruben Kharel

Posted on

You can flex your VSCODE's live update on Github readme.

GithubReadmeAutomation

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.

Pros and Cons.

Pros

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

Cons

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

Alt Text

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.

Prerequisite.

  • 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)

Step 1: Google Service Account

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.p12 file (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

Setp 2: Visual Studio Code

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

GoogleSheetLogger VsCode Extension setting page

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.

Windows %USERPROFILE%\.vscode\extensions\rubenkharel.googlesheetlogger-0.0.3
Mac $HOME/.vscode/extensions/rubenkharel.googlesheetlogger-0.0.3
WSL/Linux $HOME/.vscode/extensions/rubenkharel.googlesheetlogger-0.0.3

Paste mykey.p12 file in that folder. That's it you are done with vscode part.

Step 3: Github

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 index.js later.

Alright, we are about to finish it now. Go to repo's Settings > Secrets > and click New Secret Button.

Name API
Value https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID/values/Sheet1?key=API_KEY

replace SHEET_ID and API_KEY with your KEY and ID you got from Step 1

Alt Text

Hit Add Secret

Now create a folder .github in the repo and inside of .github, create another folder named workflows it should look like this .github/workflows/.
After that, create a main.yml file inside the workflows folder. And paste this inside of it.

Hit SAVE!

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!

Discussion (1)

Collapse
rubenk profile image
Ruben Kharel Author • Edited on

DEMO

FileName!FileName!WorkSpace!
FileName!FileName!WorkSpace!
FileName!FileName!WorkSpace!