Updated setup instructions and removed default spotify logo

HamzaYslmn · Apr 19, 2023 · f31d5fd · f31d5fd
1 parent 883abac
commit f31d5fd
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,17 @@
 <table width="100%"> 
   <tr>
   <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 width="50%">
 
-<br><p align="center">Everything here is available under the [Unlicense](https://choosealicense.com/licenses/unlicense/)!<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)
-  [![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)
-</p>
-  </td>
-  </table>
+&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)
+[![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 `&nbsp;` 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)
+  </p>
+  </td>
+</table>
diff --git a/SetUp.md b/SetUp.md
@@ -1,6 +1,4 @@
-# Set Up Guide
-
-## <div align="center">Spotify API</div>
+# 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/`
 
-## <div align="center">Refresh Token</div>
+# 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
 
-## <div align="center">Deploy to Vercel</div>
+# 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!
 
-## <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)
 - 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>
+## Run locally with Docker
+
 * You need to have [Docker](https://docs.docker.com/get-docker/) installed.
 
 * Add Environment Variables:
@@ -71,29 +73,27 @@ curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorizat
     docker compose down
     ```
 
-## <div align="center">Readme</div>
+# 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)```
 
-## <div align="center">Customization</div>
+# Customization
 
-If you want a distinction between the widget showing your currently playing, and your recently playing:
-
-## <div align="center">Hide the EQ bar</div>
+## 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.
 
-## <div align="center">Status String</div>
+## 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)
 
-## <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.
 
@@ -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.
 
-## <div align="center">Customization</div>
+## 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:  
+&nbsp; <br> [![Spotify](https://novatorem.vercel.app/api/spotify?background_color=0d1117&border_color=ffffff)]()
 
-Use `/?background_color=8b0000&border_color=ffffff` parameter like so :
-&nbsp; <br> [![Spotify](https://spotify-readmemd.herokuapp.com/?background_color=6b0000&border_color=ffffff)]()
+## 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>
+```
 
-## <div align="center">Requests</div>
+## 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.
 
-## <div align="center">Debugging</div>
+# 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
@@ -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 @@
                         <div class="artist">{{artistName}}</div>
                     </a>
                     <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>
-                    </a>
+                    </a> -->
                 </div>
             </div>
 

diff --git a/api/templates/spotify.html.j2 b/api/templates/spotify.html.j2
@@ -31,23 +31,26 @@
                 }
 
                 .song {
-                    width: 300px;
+                    width: 330px;
                     color: #666;
-                    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: #b3b3b3;
                     font-size: 20px;
                     margin-top: 4px;
                     text-align: center;
                     margin-bottom: 5px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                 }
 
                 .cover {
@@ -119,13 +122,13 @@
                     <a href="{{artistURI}}" target="_blank">
                         <div class="artist">{{artistName}}</div>
                     </a>
-                    <div id="bars">{{contentBar|safe}}</div>
-                    <a href="{{songURI}}" class="spotify-logo">
+                    <div id="bars">{{contentBar|safe}}</div> 
+                    <!-- <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>
+                    </a> -->
                 </div>
             </div>
 
         </div>
     </foreignObject>
-</svg>
+</svg>