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,2 +1,3 @@
 .dockerignore
 Dockerfile
+__pycache__

.gitignore

@@ -3,3 +3,6 @@
 
 # Environment variables
 .env
+
+# Pycache
+__pycache__

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"]

Procfile

@@ -0,0 +1 @@
+web: gunicorn --workers=1 api.spotify:app

SetUp.md

@@ -1,6 +1,6 @@
 # Set Up Guide
 
-## Spotify
+## <div align="center">Spotify API</div>
 
 * 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
+## <div align="center">Refresh Token</div>
 
 * 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
+## <div align="center">Deploy to Vercel</div>
 
 * 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
+## <div align="center">Deploy to Heroku</div>
+[![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 <br>
+    `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.
 
+## <div align="center">Run locally with Docker</div>
 * 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
+## <div align="center">Readme</div>
 
 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
+## <div align="center">Customization</div>
 
 If you want a distinction between the widget showing your currently playing, and your recently playing:
 
-### Hide the EQ bar
+## <div align="center">Hide the EQ bar</div>
 
 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
+## <div align="center">Status String</div>
 
 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
+## <div align="center">Theme Templates</div>
 
 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
+## <div align="center">Customization</div>
+
+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 :
+&nbsp; <br> [![Spotify](https://spotify-readmemd.herokuapp.com/?background_color=6b0000&border_color=ffffff)]()
+
+## <div align="center">Requests</div>
 
 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
-
+## <div align="center">Debugging</div>
 If you have issues setting up, try following this [guide](https://youtu.be/n6d4KHSKqGk?t=615).
 
 Followed the guide and still having problems?

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(["<div class='bar'></div>" 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("/<path:path>")
+@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)

api/templates.json

@@ -1,5 +1,5 @@
 {
-    "current-theme": "light",
+    "current-theme": "dark",
     "templates": {
         "light": "spotify.html.j2",
         "dark": "spotify-dark.html.j2"

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 {

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"
+}

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