vstatus is a Visual Studio Code extension that extracts workspace information, such as filename, workspace name, and time elapsed, and sends this data to a server. The server then generates an SVG image based on the received information and serves it on an endpoint. This endpoint can be used to retrieve the updated SVG image containing filename, workspace name, and time lapse. (Intented to be used for github readme)
More examples below.
- Visual Studio Code version 1.78.0 or higher.
To setup vstatus for yourself, follow these steps:
- Deploy the server by clicking on the "Deploy with Vercel" button below:
You will be asked to add value for
DB_TYPE. For API key generate a secure key add inside the value field and keep it safe, you will need that in step 6. For Database either insert
kv as it's value. Remember which one you set, you will need that in next step. Now you may proceed and press deploy button. YAY you are done with the deployment. Keep your server url, you will need that in step 6.
Once you've deployed your server, you'll need to go back to your Vercel dashboard and open the project dashboard you just created. From here, navigate to Storage > Create New Database > KV or postgres (whatever you set as your
DB_TYPE value) >> Continue. After successfully creating the database, There will be a connect button, where you can click and connect it to the project you just created. ezpz!!!.
Install the vstatus extension in Visual Studio Code.
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install rubennnk.vstatus
Or you can do it manually. Search
vstatus and install.
Open the extension's settings by navigating to File > Preferences > Settings or using the keyboard shortcut Ctrl+Comma (,).
Configure the following settings:
vstatus.interval: Specifies the interval (in seconds) at which vstatus extracts workspace information.
Default: 10. Sending a request to server each 10 secon makes 1 vercel KV query. On hobby tier of vercel, you can send 30,000 KV query per month. So use calculate and set it accordingly.
vstatus.serverurl: This is the URL of the deployed server. Provide the URL where the server is hosted and accessible.
vstatus.vstatus_api_key: This is the API key set during the deployment of the server. The server stores the key in the .env file with the variable name
- Save the settings.
To retrieve the SVG image containing the workspace information, use the following URL/endpoint:
Replace with the URL where your server is hosted.
The following query parameters can be used to customize the appearance of the SVG image:
||Specifies the theme of the image. Valid values:
light. If not provided, other color parameters will be used.
||Specifies whether the time is shown for
||Sets the background color of the image. Provide a color code.
||Sets the color of the key name in the SVG image. Provide a color code.
||Sets the color of the value name in the SVG image. Provide a color code.
If you choose the theme parameter, the bgc, keyfillc, and valuefillc parameters will be ignored. However, if you don't specify the theme parameter, you can customize the colors using the bgc, keyfillc, and valuefillc parameters.
Note: You can specify colors using valid color codes, such as #RRGGBB or color names.
Example usage with query parameters:
This will generate an SVG image with a dark theme, showing the time for the file, a black background color, white key name, and green value name.
This project is licensed under the MIT License.