isladot/spotify-readme-widget

✨ Share your favorite music with everyone! ⚡ Dynamically generated Spotify widgets for GitHub readme.

Spotify Readme Widget

Dynamically generated Spotify widgets for GitHub readme!

Table of Contents

• ✨ Now Playing Card
• 📤 Deploy

✨ Now Playing Card

Copy-paste this in your GitHub readme, and that's it!

Change <HEROKU_INSTANCE_NAME> with the name of your personal instance.

<img src="https://<HEROKU_INSTANCE_NAME>.herokuapp.com/api/spotify/now" />

Themes

You can customize the look of the card using pre-built themes.

Add ?theme=THEME_NAME like so:

<img src="https://<HEROKU_INSTANCE_NAME>.herokuapp.com/api/spotify/now?theme=vue-dark" />

📤 Deploy

To make this app work it is necessary to provide data that changes from user to user, thus making it mandatory to create your own instance.

Of course, everything will be completely free, thanks to Heroku, but it will take a few minutes to set up.

Spotify Setup

Spotify

1. Create a Spotify Application.
2. Take note of Client ID and Client Secret.
3. Click on Edit Settings.
4. Add http://localhost/callback/ on Redirect URIs section.

Refresh Token

1. Navigate to the following URL:
   • Remember to replace {SPOTIFY_CLIENT_ID} with the Client ID of your newly created application.

   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/
   

2. Log in, take note of the {CODE} portion from http://localhost/callback/?code={CODE}.
3. Combine in a string {SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET} and encode into Base64.
   • WARNING: {SPOTIFY_CLIENT_ID} and {SPOTIFY_CLIENT_SECRET} are actually separated by :.
4. Run from Git Bash the following curl command:

   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
   

5. Take note of the Refresh Token.

Heroku Setup

Instructions for deploying to Heroku

1. Sign in to Heroku or create a new account at https://signup.heroku.com/
2. Press the "Deploy to Heroku" button below:

3. Click "Deploy App" on the page that comes up, then wait for the app deploy.
4. Once the app is deployed, click "Manage App" to go to the dashboard.
5. Go to the "Settings" tab and click "Reveal Config Vars".
6. Add your personal data obtained from Spotify:
   • SPOTIFY_CLIENT_ID: Your Spotify Application Client ID
   • SPOTIFY_CLIENT_SECRET: Your Spotify Application Client Secret
   • SPOTIFY_REFRESH_TOKEN: Your Spotify Refresh Token.
7. Check the Domains section to get the URL of your instance.

---

Made with Javascript, EJS and ❤️