diff --git a/SetUp.md b/SetUp.md index 1739270..44695f3 100644 --- a/SetUp.md +++ b/SetUp.md @@ -1,113 +1,141 @@ -# Spotify API +# Set Up -* Create a [Spotify Application](https://developer.spotify.com/dashboard/applications) -* Take note of: - * `Client ID` - * `Client Secret` -* Click on **Edit Settings** -* In **Redirect URIs**: - * Add `http://localhost/callback/` +## Spotify API App -# Refresh Token +- Create a [Spotify Application](https://developer.spotify.com/dashboard/applications) +- Take note of: + - `Client ID` + - `Client Secret` +- Click on **Edit Settings** +- In **Redirect URIs**: + - Add `http://localhost/callback/` -* Navigate to the following URL: +## Refresh Token + +### Powershell + +
+ +Script to complete this section + +```powershell +$ClientId = Read-Host "Client ID" +$ClientSecret = Read-Host "Client Secret" + +Start-Process "https://accounts.spotify.com/authorize?client_id=$ClientId&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/" + +$Code = Read-Host "Please insert everything after 'https://localhost/callback/?code='" + +$ClientBytes = [System.Text.Encoding]::UTF8.GetBytes("${ClientId}:${ClientSecret}") +$EncodedClientInfo =[Convert]::ToBase64String($ClientBytes) + +curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic $EncodedClientInfo" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code=$Code" https://accounts.spotify.com/api/token +``` + +
+ +### Manual + +- 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}` +- 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](https://base64.io/). +- Create a string combining `{SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET}` (e.g. `5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5`) and **encode** into [Base64](https://base64.io/). + +- Then run a [curl command](https://httpie.org/run) in the form of: -* Then run a [curl command](https://httpie.org/run) in the form of: ```sh 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 +- Save the Refresh token -# Deployment +## Deployment -## Deploy to Vercel +### Deploy to Vercel -* Register on [Vercel](https://vercel.com/) +- Register on [Vercel](https://vercel.com/) -* Fork this repo, then create a vercel project linked to it +- Fork this repo, then create a vercel project linked to it -* Add Environment Variables: - * `https://vercel.com///settings/environment-variables` - * `SPOTIFY_REFRESH_TOKEN` - * `SPOTIFY_CLIENT_ID` - * `SPOTIFY_SECRET_ID` +- Add Environment Variables: -* Deploy! + - `https://vercel.com///settings/environment-variables` + - `SPOTIFY_REFRESH_TOKEN` + - `SPOTIFY_CLIENT_ID` + - `SPOTIFY_SECRET_ID` -## Deploy to Heroku +- Deploy! + +### Deploy to Heroku [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fnovatorem%2Fnovatorem) + - Create a Heroku application via the Heroku CLI or via the Heroku Dashboard. Connect the app with your GitHub repository and enable automatic builds
- `PS. automatic build means that everytime you push changes to remote, heroku will rebuild and redeploy the app.` - - To start the Flask server execute `heroku ps:scale web=1` once the build is completed. + `PS. automatic build means that everytime you push changes to remote, heroku will rebuild and redeploy the app.` + - To start the Flask server execute `heroku ps:scale web=1` once the build is completed. - Or click the `Deploy to Heroku` button above to automatically start the deployment process. -## Run locally with Docker +### Run locally with Docker -* You need to have [Docker](https://docs.docker.com/get-docker/) installed. +- You need to have [Docker](https://docs.docker.com/get-docker/) installed. -* Add Environment Variables: - * `SPOTIFY_REFRESH_TOKEN` - * `SPOTIFY_CLIENT_ID` - * `SPOTIFY_SECRET_ID` - -* To run the service, open a terminal in the root folder of the repo:
- Execute: - ``` - docker compose up - ``` -* When finished, navigate to [http://localhost:5000/](http://localhost:5000/) - -* To stop the service, open a terminal in the root folder of the repo:
- Execute: - ``` - docker compose down - ``` +- Add Environment Variables: + - `SPOTIFY_REFRESH_TOKEN` + - `SPOTIFY_CLIENT_ID` + - `SPOTIFY_SECRET_ID` +- To run the service, open a terminal in the root folder of the repo:
+ Execute: + ``` + docker compose up + ``` +- When finished, navigate to [http://localhost:5000/](http://localhost:5000/) +- To stop the service, open a terminal in the root folder of the repo:
+ Execute: + ``` + docker compose down + ``` -# Readme +## 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)``` +`[![Spotify](https://USER_NAME.vercel.app/api/spotify)](https://open.spotify.com/user/USER_NAME)` -# Customization +## Customization -## Hide the EQ bar +### Hide the EQ bar Remove the `#` in front of `contentBar` in [line 81](https://github.com/novatorem/novatorem/blob/98ba4a8489ad86f5f73e95088e620e8859d28e71/api/spotify.py#L81) of current master, then the EQ bar will be hidden when you're in not currently playing anything. -## Status String +### Status String Have a string saying either "Vibing to:" or "Last seen playing:". -* Change [`height` to `height + 40`](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L1-L2) (or whatever `margin-top` is set to) -* Uncomment [**.main**'s `margin-top`](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L10) -* Uncomment [currentStatus](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L93) +- Change [`height` to `height + 40`](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L1-L2) (or whatever `margin-top` is set to) +- Uncomment [**.main**'s `margin-top`](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L10) +- Uncomment [currentStatus](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L93) -## Theme Templates +### Theme Templates If you want to change the widget theme, you can do so by the changing the `current-theme` property in the `templates.json` file. Themes: -* `light` -* `dark` + +- `light` +- `dark` If you wish to customize farther, you can add your own customized `spotify.html.j2` file to the templates folder, and add the theme and file name to the `templates` dictionary in the `templates.json` file. -## Color +### Color You can customize the appearance of your `Card` however you wish with URL params. -### Common Options: +#### Common Options: - `background_color` - Card's background color _(hex color)_ without `#` - `border_color` - Card border color _(hex color)_ without `#` @@ -115,12 +143,18 @@ You can customize the appearance of your `Card` however you wish with URL params Use `/?background_color=8b0000&border_color=ffffff` parameter like so:  
[![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)]() -## Spotify Logo +### Spotify Logo You can add the spotify logo by removing the commented out code, seen below: + ```html ``` @@ -130,12 +164,13 @@ Customization requests can be submitted as an issue, like https://github.com/nov 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 +## Debugging + If you have issues setting up, try following this [guide](https://youtu.be/n6d4KHSKqGk?t=615). Followed the guide and still having problems? Try checking out the functions tab in vercel, linked as: -```https://vercel.com/{name}/spotify/{build}/functions``` +`https://vercel.com/{name}/spotify/{build}/functions`
Which looks like-