Set Up Guide

Spotify

Create a Spotify Application
Take note of:
- Client ID
- Client Secret
Click on Edit Settings
In Redirect URIs:
- Add http://localhost/callback/

Refresh Token

Navigate to the following URL:

https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/

After logging in, save the {CODE} portion of: http://localhost/callback/?code={CODE}
Create a string combining {SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET} (e.g. 5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5) and encode into Base64.
Then run a curl command in the form of:

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}" https://accounts.spotify.com/api/token

Save the Refresh token

Vercel

Register on Vercel
Create project linked to your github repo
Add Environment Variables:
- https://vercel.com/<YourName>/<ProjectName>/settings/environment-variables
  - SPOTIFY_REFRESH_TOKEN
  - SPOTIFY_CLIENT_ID
  - SPOTIFY_SECRET_ID
Deploy!

ReadMe

You can now use the following in your readme:

[![Spotify](https://USER_NAME.vercel.app/api/spotify)](https://open.spotify.com/user/USER_NAME)

Customization

If you want a distinction between the widget showing your currently playing, and your recently playing:

Hide the EQ bar

Remove the # in front of contentBar in line 81 of current master, then the EQ bar will be hidden when you're in not currently playing anything.

Status String

Have a string saying either "Vibing to:" or "Last seen playing:".

Change height to height + 40 (or whatever margin-top is set to)
Uncomment .main's margin-top
Uncomment currentStatus

Requests

Customization requests can be submitted as an issue, like https://github.com/novatorem/novatorem/issues/2

If you want to share your own customization options, open a PR if it's done or open an issue if you want it implemented by someone else.

Debugging

If you have issues setting up, try following this guide.

Followed the guide and still having problems? Try checking out the functions tab in vercel, linked as: https://vercel.com/{name}/spotify/{build}/functions

Which looks like-

You will see a log there, and most issues can be resolved by ensuring you have the correct variables from setup.

3.3 KiB Raw Blame History