From 883abaca0c36119c5c272266342f06f5477248dc Mon Sep 17 00:00:00 2001 From: AlexandrosAlexiou Date: Fri, 3 Dec 2021 23:50:52 +0200 Subject: [PATCH] Prepare for Heroku deployment - Heroku will bind the app to $PORT - Add parameter to API to be able to customize the background color of the svg - Add parameter to API to be able to customize the border color of the svg - Add SetUp.md section on how to customize your card with URL parameters Update SetUp.md with a section on how to customize the card --- .dockerignore | 1 + .gitignore | 3 +++ Dockerfile | 2 +- Procfile | 1 + SetUp.md | 41 +++++++++++++++++++++--------- api/__init__.py | 0 api/spotify.py | 18 ++++++++----- api/templates.json | 2 +- api/templates/spotify-dark.html.j2 | 3 ++- app.json | 30 ++++++++++++++++++++++ requirements.txt | 17 +++++++++++-- 11 files changed, 95 insertions(+), 23 deletions(-) create mode 100644 Procfile create mode 100644 api/__init__.py create mode 100644 app.json diff --git a/.dockerignore b/.dockerignore index 6e19512..dd496ef 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,2 +1,3 @@ .dockerignore Dockerfile +__pycache__ diff --git a/.gitignore b/.gitignore index 33a346d..74bf44a 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,6 @@ # Environment variables .env + +# Pycache +__pycache__ diff --git a/Dockerfile b/Dockerfile index cd8b0d2..7115b9f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,4 +9,4 @@ RUN pip3 install -r requirements.txt --no-cache-dir COPY api/ . -CMD [ "python3", "spotify.py"] +CMD ["gunicorn", "--workers=1", "--bind", "0.0.0.0:5000", "spotify:app"] diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..22fd396 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: gunicorn --workers=1 api.spotify:app diff --git a/SetUp.md b/SetUp.md index e2259f1..51aa550 100644 --- a/SetUp.md +++ b/SetUp.md @@ -1,6 +1,6 @@ # Set Up Guide -## Spotify +##
Spotify API
* Create a [Spotify Application](https://developer.spotify.com/dashboard/applications) * Take note of: @@ -10,7 +10,7 @@ * In **Redirect URIs**: * Add `http://localhost/callback/` -## Refresh Token +##
Refresh Token
* Navigate to the following URL: @@ -29,7 +29,7 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat * Save the Refresh token -## Vercel +##
Deploy to Vercel
* Register on [Vercel](https://vercel.com/) @@ -43,8 +43,14 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat * Deploy! -## Run locally with Docker +##
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. +- Or click the `Deploy to Heroku` button above to automatically start the deployment process. +##
Run locally with Docker
* You need to have [Docker](https://docs.docker.com/get-docker/) installed. * Add Environment Variables: @@ -65,21 +71,21 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat 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)``` -## Customization +##
Customization
If you want a distinction between the widget showing your currently playing, and your recently playing: -### 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:". @@ -87,7 +93,7 @@ Have a string saying either "Vibing to:" or "Last seen playing:". * 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. @@ -97,14 +103,25 @@ Themes: 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. -## Requests +##
Customization
+ +You can customize the appearance of your `Card` however you wish with URL params. + +#### Common Options: + +- `background_color` - Card's background color _(hex color)_ without # +- `border_color` - Card border color _(hex color)_ without # + +Use `/?background_color=8b0000&border_color=ffffff` parameter like so : + 
[![Spotify](https://spotify-readmemd.herokuapp.com/?background_color=6b0000&border_color=ffffff)]() + +##
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 - +##
Debugging
If you have issues setting up, try following this [guide](https://youtu.be/n6d4KHSKqGk?t=615). Followed the guide and still having problems? diff --git a/api/__init__.py b/api/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/api/spotify.py b/api/spotify.py index c4c3912..d44f9d5 100644 --- a/api/spotify.py +++ b/api/spotify.py @@ -5,7 +5,7 @@ import requests from base64 import b64encode from dotenv import load_dotenv, find_dotenv -from flask import Flask, Response, jsonify, render_template, templating +from flask import Flask, Response, jsonify, render_template, templating, request load_dotenv(find_dotenv()) @@ -96,11 +96,11 @@ def getTemplate(): def loadImageB64(url): - resposne = requests.get(url) - return b64encode(resposne.content).decode("ascii") + response = requests.get(url) + return b64encode(response.content).decode("ascii") -def makeSVG(data): +def makeSVG(data, background_color, border_color): barCount = 84 contentBar = "".join(["
" for i in range(barCount)]) barCSS = barGen(barCount) @@ -135,6 +135,8 @@ def makeSVG(data): "artistURI": artistURI, "image": image, "status": currentStatus, + "background_color": background_color, + "border_color": border_color } return render_template(getTemplate(), **dataDict) @@ -142,9 +144,13 @@ def makeSVG(data): @app.route("/", defaults={"path": ""}) @app.route("/") +@app.route('/with_parameters') def catch_all(path): + background_color = request.args.get('background_color') or "181414" + border_color = request.args.get('border_color') or "181414" + data = nowPlaying() - svg = makeSVG(data) + svg = makeSVG(data, background_color, border_color) resp = Response(svg, mimetype="image/svg+xml") resp.headers["Cache-Control"] = "s-maxage=1" @@ -153,4 +159,4 @@ def catch_all(path): if __name__ == "__main__": - app.run(host="0.0.0.0", debug=True) + app.run(host="0.0.0.0", debug=True, port=os.getenv("PORT") or 5000) diff --git a/api/templates.json b/api/templates.json index a0d08ee..841adff 100644 --- a/api/templates.json +++ b/api/templates.json @@ -1,5 +1,5 @@ { - "current-theme": "light", + "current-theme": "dark", "templates": { "light": "spotify.html.j2", "dark": "spotify-dark.html.j2" diff --git a/api/templates/spotify-dark.html.j2 b/api/templates/spotify-dark.html.j2 index 34b28e3..404bcf5 100644 --- a/api/templates/spotify-dark.html.j2 +++ b/api/templates/spotify-dark.html.j2 @@ -18,7 +18,8 @@ .container { border-radius: 5px; padding: 10px 10px 10px 0px; - background-color:#181414; + background-color: #{{background_color}}; + border: 1px solid #{{border_color}}; } .art { diff --git a/app.json b/app.json new file mode 100644 index 0000000..2316712 --- /dev/null +++ b/app.json @@ -0,0 +1,30 @@ +{ + "name": "novatorem", + "description": "Realtime profile Readme displaying currently playing song on Spotify using the Spotify API.", + "scripts": { + "postdeploy": "gunicorn --workers=1 api.spotify:app" + }, + "env": { + "SPOTIFY_CLIENT_ID": { + "required": true + }, + "SPOTIFY_REFRESH_TOKEN": { + "required": true + }, + "SPOTIFY_SECRET_ID": { + "required": true + } + }, + "formation": { + "web": { + "quantity": 1 + } + }, + "addons": [], + "buildpacks": [ + { + "url": "heroku/python" + } + ], + "stack": "heroku-20" +} diff --git a/requirements.txt b/requirements.txt index 6f2b06a..f08d2d3 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,16 @@ -flask==1.1.4 -requests==2.24.0 +autopep8==1.6.0 +certifi==2020.6.20 +chardet==3.0.4 +click==7.1.2 +Flask==1.1.4 +gunicorn==20.1.0 +idna==2.10 +itsdangerous==1.1.0 +Jinja2==2.11.3 +MarkupSafe==2.0.1 +pycodestyle==2.8.0 python-dotenv==0.14.0 +requests==2.24.0 +toml==0.10.2 +urllib3==1.25.11 +Werkzeug==1.0.1