alvin/novatorem
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/novatorem.git synced 2026-03-06 13:24:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated setup instructions and removed default spotify logo

Browse Source
This commit is contained in:
Andrew Novac
2021-12-08 00:58:41 -05:00
parent 883abaca0c
commit f31d5fd66a
4 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@@ -2,18 +2,16 @@
<tr> <tr>
<td width="50%"> <td width="50%">
&nbsp; <br> [![Spotify](https://novatorem.vercel.app/api/spotify)](https://open.spotify.com/user/omnitenebris) &nbsp; <br> [![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)](https://open.spotify.com/user/omnitenebris)
</td> </td>
<td width="50%"> <td width="50%">
<br><p align="center">Everything here is available under the [Unlicense](https://choosealicense.com/licenses/unlicense/)!<br><br> &nbsp;<p align="center">This repository is [unlicense](https://choosealicense.com/licenses/unlicense/)[d], feel free to fork!<br><br>
[![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) [![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) [![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) [![Visits](https://komarev.com/ghpvc/?username=novatorem&logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square)](https://github.com/novatorem)
</p>
</td>
</table>
[//]: <> (The `&nbsp;` is to have Aphelion take up more space) </p>
[//]: <> (Old Visits: https://badges.pufler.dev/visits/novatorem/novatorem?logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square) </td>
</table>

53
SetUp.md
View File

@@ -1,6 +1,4 @@
# Set Up Guide # Spotify API
## <div align="center">Spotify API</div>
* Create a [Spotify Application](https://developer.spotify.com/dashboard/applications) * Create a [Spotify Application](https://developer.spotify.com/dashboard/applications)
* Take note of: * Take note of:
@@ -10,7 +8,7 @@
* In **Redirect URIs**: * In **Redirect URIs**:
* Add `http://localhost/callback/` * Add `http://localhost/callback/`
## <div align="center">Refresh Token</div> # Refresh Token
* Navigate to the following URL: * 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 * Save the Refresh token
## <div align="center">Deploy to Vercel</div> # Deployment
## Deploy to Vercel
* Register on [Vercel](https://vercel.com/) * 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!
## <div align="center">Deploy to Heroku</div> ## Deploy to Heroku
[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fnovatorem%2Fnovatorem) [![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> - 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.` `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. - 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. - Or click the `Deploy to Heroku` button above to automatically start the deployment process.
## <div align="center">Run locally with Docker</div> ## 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: * Add Environment Variables:
@@ -71,21 +73,19 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat
docker compose down docker compose down
``` ```
## <div align="center">Readme</div> # Readme
You can now use the following in your 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)```
## <div align="center">Customization</div> # Customization
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. 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.
## <div align="center">Status String</div> ## Status String
Have a string saying either "Vibing to:" or "Last seen playing:". 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 [**.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) * Uncomment [currentStatus](https://github.com/novatorem/novatorem/blob/5194a689253ee4c89a9d365260d6050923d93dd5/api/templates/spotify.html.j2#L93)
## <div align="center">Theme Templates</div> ## 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. 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. 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.
## <div align="center">Customization</div> ## Color
You can customize the appearance of your `Card` however you wish with URL params. 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 # - `background_color` - Card's background color _(hex color)_ without `#`
- `border_color` - Card border color _(hex color)_ without # - `border_color` - Card border color _(hex color)_ without `#`
Use `/?background_color=8b0000&border_color=ffffff` parameter like so : Use `/?background_color=8b0000&border_color=ffffff` parameter like so:
&nbsp; <br> [![Spotify](https://spotify-readmemd.herokuapp.com/?background_color=6b0000&border_color=ffffff)]() &nbsp; <br> [![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)]()
## <div align="center">Requests</div> ## Spotify Logo
You can add the spotify logo by removing the commented out code, seen below:
```html
<a href="{{songURI}}" class="spotify-logo">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</a>
```
## Requests
Customization requests can be submitted as an issue, like https://github.com/novatorem/novatorem/issues/2 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. 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.
## <div align="center">Debugging</div> # Debugging
If you have issues setting up, try following this [guide](https://youtu.be/n6d4KHSKqGk?t=615). If you have issues setting up, try following this [guide](https://youtu.be/n6d4KHSKqGk?t=615).
Followed the guide and still having problems? Followed the guide and still having problems?

17
api/templates/spotify-dark.html.j2
View File

@@ -33,23 +33,26 @@
} }
.song { .song {
width: 300px; width: 330px;
color: #f7f7f7; color: #f7f7f7;
overflow:hidden; overflow: hidden;
margin-top: 3px; margin-top: 3px;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
white-space:nowrap; white-space: nowrap;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
.artist { .artist {
width: 300px; width: 330px;
color: #9f9f9f; color: #9f9f9f;
font-size: 20px; font-size: 20px;
margin-top: 4px; margin-top: 4px;
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.cover { .cover {
@@ -123,9 +126,9 @@
<div class="artist">{{artistName}}</div> <div class="artist">{{artistName}}</div>
</a> </a>
<div id="bars">{{contentBar|safe}}</div> <div id="bars">{{contentBar|safe}}</div>
<a href="{{songURI}}" class="spotify-logo"> <!-- <a href="{{songURI}}" class="spotify-logo">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</a> </a> -->
</div> </div>
</div> </div>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

17
api/templates/spotify.html.j2
View File

@@ -31,23 +31,26 @@
} }
.song { .song {
width: 300px; width: 330px;
color: #666; color: #666;
overflow:hidden; overflow: hidden;
margin-top: 3px; margin-top: 3px;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
white-space:nowrap; white-space: nowrap;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
.artist { .artist {
width: 300px; width: 330px;
color: #b3b3b3; color: #b3b3b3;
font-size: 20px; font-size: 20px;
margin-top: 4px; margin-top: 4px;
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.cover { .cover {
@@ -120,9 +123,9 @@
<div class="artist">{{artistName}}</div> <div class="artist">{{artistName}}</div>
</a> </a>
<div id="bars">{{contentBar|safe}}</div> <div id="bars">{{contentBar|safe}}</div>
<a href="{{songURI}}" class="spotify-logo"> <!-- <a href="{{songURI}}" class="spotify-logo">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
</a> </a> -->
</div> </div>
</div> </div>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB