Playing with xbar: Showing WordPress Site Page Views In Menu Bar


Today while reading a tech newsletter I discovered xbar. xbar[1] lets you put output from any script/program in your macOS menu bar. Xbar is built using Wails. Wails[2] allows you to build desktop apps using Golang and Web technologies.

Xbar has a plugin based architecture. There are hundreds of pre-built plugins that help you view information about AWS, cryptocurrency, weather, date & time, and many others.

You can download and install the latest binary of xbar from the release page https://github.com/matryer/xbar/releases

Once installed you can install plugins and start viewing information in your menu bar. xbar will become visible in your menu bar.

I wanted to use xbar to show my wordpress blog daily page view stats. I host my blog on wordpress.com. Running your blog on wordpress.com has its limitations and cost but since I only care about writing rather than hosting and managing a blog I am fine using it for the time being.

xbar makes it dead simple to write a plugin. All plugins exist in the ~/Library/Application Support/xbar/plugins. You can open it either manually or by using the shortcut in your xbar app.

To create a plugin create a file name with the following format.

{name}.{time}.{ext}
  • name – The name of the file
  • time – The refresh rate (see below)
  • ext – The file extension

You can read the full plugin documentation here[3].

In our case we will create a file with the name wordpress.30s.sh.

Next, we need to make a cURL request to the WordPress REST API to fetch the stats for my blog https://shekhargulati.com/.

The REST API for wordpress is located at https://developer.wordpress.com/docs/api/. We need to use GET /sites/$site/stats to fetch stats for my blog.

If we make a cURL request to the endpoint mentioned above we will get an error as shown below.

curl -s --request GET --url https://public-api.wordpress.com/rest/v1.1/sites/shekhargulati.com/stats | jq .
{
 "error": "unauthorized",
 "message": "user cannot view stats"
}

This post assumes that you have jq installed on your machine. In case you don’t have jq installed, you can install it using brew by running brew install jq

We are getting this error because we need to provide the access token for calling this endpoint.

It took me an hour to figure out how to get the access token for calling the WordPress.com REST API. The example mentioned in the documentation talks about OAuth 2 Authorization code grant flow. Authorization code grant flow is applicable when you want to access someone else’s resources on their behalf. Since our use case involves accessing resources that we own, the recommended grant type should be client credentials or password. I couldn’t get client credentials grant type work so I ended by using password grant type.

The password credentials grant type supports situations where an application is trusted to handle end-user credentials and no other grant type is possible. For this grant type, the application collects the user’s credentials directly instead of redirecting the user to the authorization server. The application passes the collected credentials to the authorization server for validation as part of its request to get an access token.

You can make the following cURL command to get the access token. You will have to register an application here https://developer.wordpress.com/apps/new/. It will give you client id and client secret that you need to pass in the request below.

curl --request POST \
--url https://public-api.wordpress.com/oauth2/token \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data grant_type=password \
--data username=<username> \
--data password=<password> \
--data client_id=<client_id> \
--data client_secret=<client_secret>

On success the above cURL command will return the following response.

{
  "access_token": "your_access_token",
  "token_type": "bearer",
  "blog_id": "0",
  "blog_url": null,
  "scope": "global"
}

Now, we have everything we need to write our plugin. Paste the content shown below in the wordpress.30s.sh script.

#!/bin/bash
# Assumes jq is installed

export PATH="/usr/local/bin:/usr/bin:$PATH"

stats=$(curl --request GET --url https://public-api.wordpress.com/rest/v1.1/sites/shekhargulati.com/stats --header 'Authorization: Bearer <your_access_token>' --header 'Content-Type: application/json' | jq '.stats.views_today')

echo "Pageviews:" $stats

In the script shown above,

We first add the /usr/local/bin to the PATH. This will ensure jq is found in the path. Next, we make the cURL request passing the JSON output to jq. jq extracts the stats.views_today field from the JSON. Finally we echo the page views.

Make the script executable chmod +x wordpress.30s.sh

Use the Refresh All option in the xbar app to reload the plugin. You will start seeing stats of your WordPress blog as shown below.

References

Leave a comment