From f31d5fd66add985a7ea8f36895e98bf7f131d843 Mon Sep 17 00:00:00 2001 From: Andrew Novac <16753077+novatorem@users.noreply.github.com> Date: Wed, 8 Dec 2021 00:58:41 -0500 Subject: [PATCH] Updated setup instructions and removed default spotify logo --- README.md | 20 +++++------ SetUp.md | 53 +++++++++++++++++------------- api/templates/spotify-dark.html.j2 | 17 ++++++---- api/templates/spotify.html.j2 | 21 +++++++----- 4 files changed, 62 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index e6c4119..5641b43 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,17 @@ -
- - 
[![Spotify](https://novatorem.vercel.app/api/spotify)](https://open.spotify.com/user/omnitenebris) + + 
[![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)](https://open.spotify.com/user/omnitenebris) 		-

Everything here is available under the [Unlicense](https://choosealicense.com/licenses/unlicense/)!

- [![Linkedin](https://img.shields.io/badge/linked-in-369?style=flat-square&logo=linkedin&logoColor=white&color=blue)](https://www.linkedin.com/in/andrew-novac) - [![E-Mail](https://img.shields.io/badge/email-reveal-2a8?style=flat-square&logo=gmail&logoColor=white)](https://mailhide.io/e/5ck1H) - [![Visits](https://komarev.com/ghpvc/?username=novatorem&logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square)](https://github.com/novatorem) -

-
+ 

This repository is [unlicense](https://choosealicense.com/licenses/unlicense/)[d], feel free to fork!

+[![Linkedin](https://img.shields.io/badge/linked-in-369?style=flat-square&logo=linkedin&logoColor=white&color=blue)](https://www.linkedin.com/in/andrew-novac) +[![E-Mail](https://img.shields.io/badge/email-reveal-2a8?style=flat-square&logo=gmail&logoColor=white)](https://mailhide.io/e/5ck1H) +[![Visits](https://komarev.com/ghpvc/?username=novatorem&logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square)](https://github.com/novatorem) -[//]: <> (The ` ` is to have Aphelion take up more space) -[//]: <> (Old Visits: https://badges.pufler.dev/visits/novatorem/novatorem?logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square) +

+ + \ No newline at end of file diff --git a/SetUp.md b/SetUp.md index 51aa550..1739270 100644 --- a/SetUp.md +++ b/SetUp.md @@ -1,6 +1,4 @@ -# Set Up Guide - -##
Spotify API
+# Spotify API * Create a [Spotify Application](https://developer.spotify.com/dashboard/applications) * Take note of: @@ -10,7 +8,7 @@ * In **Redirect URIs**: * Add `http://localhost/callback/` -##
Refresh Token
+# Refresh Token * Navigate to the following URL: @@ -29,7 +27,9 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat * Save the Refresh token -##
Deploy to Vercel
+# Deployment + +## Deploy to Vercel * Register on [Vercel](https://vercel.com/) @@ -43,14 +43,16 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat * Deploy! -##
Deploy to Heroku
+## 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
+## Run locally with Docker + * You need to have [Docker](https://docs.docker.com/get-docker/) installed. * Add Environment Variables: @@ -71,21 +73,19 @@ 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:". @@ -93,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. @@ -103,25 +103,34 @@ 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. -##
Customization
+## 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 # +- `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)]() +Use `/?background_color=8b0000&border_color=ffffff` parameter like so: + 
[![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)]() -##
Requests
+## Spotify Logo + +You can add the spotify logo by removing the commented out code, seen below: +```html + +``` + +## 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/templates/spotify-dark.html.j2 b/api/templates/spotify-dark.html.j2 index 404bcf5..b16c77f 100644 --- a/api/templates/spotify-dark.html.j2 +++ b/api/templates/spotify-dark.html.j2 @@ -33,23 +33,26 @@ } .song { - width: 300px; + width: 330px; color: #f7f7f7; - overflow:hidden; + overflow: hidden; margin-top: 3px; font-size: 24px; text-align: center; - white-space:nowrap; - text-overflow:ellipsis; + white-space: nowrap; + text-overflow: ellipsis; } .artist { - width: 300px; + width: 330px; color: #9f9f9f; font-size: 20px; margin-top: 4px; text-align: center; margin-bottom: 5px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .cover { @@ -123,9 +126,9 @@
{{artistName}}
{{contentBar|safe}}
-
{{artistName}}
 -
{{contentBar|safe}}
-