feat: add border_radius URL parameter for customizable container corners

README.md

@@ -12,17 +12,17 @@ Vercel change the package the free tier is not enough for our usage. I moved ser
 
 Please replace your old endpoint `https://spotify-github-profile.vercel.app` to `https://spotify-github-profile.kittinanx.com`
 
-## Table of Contents  
-[Connect And Grant Permission](#connect-and-grant-permission)  
-[Example](#example)  
-[Running for development locally](#running-for-development-locally)  
-[Setting up Vercel](#setting-up-vercel)  
-[Setting up Firebase](#setting-up-firebase)  
-[Setting up Spotify dev](#setting-up-spotify-dev)  
-[Running locally](#running-locally)  
-[How to Contribute](#how-to-contribute)  
-[Known Bugs](#known-bugs)  
-[Features in Progress](#features-in-progress)  
+## Table of Contents
+[Connect And Grant Permission](#connect-and-grant-permission)
+[Example](#example)
+[Customization](#customization)
+[Running for development locally](#running-for-development-locally)
+[Setting up Vercel](#setting-up-vercel)
+[Setting up Firebase](#setting-up-firebase)
+[Setting up Spotify dev](#setting-up-spotify-dev)
+[Running locally](#running-locally)
+[How to Contribute](#how-to-contribute)
+[Known Bugs](#known-bugs)
 [Credit](#credit)  
 
 ## Connect And Grant Permission
@@ -57,6 +57,28 @@ Please replace your old endpoint `https://spotify-github-profile.vercel.app` to
 
 ![spotify-github-profile](/img/spotify-embed.svg)
 
+## Customization
+
+You can customize the appearance by adding query parameters to your URL:
+
+| Parameter | Description | Default |
+|-----------|-------------|---------|
+| `theme` | Theme to use (`default`, `compact`, `natemoo-re`, `novatorem`, `karaoke`, `spotify-embed`, `apple`) | `default` |
+| `background_color` | Background color (hex without #) | `121212` |
+| `border_radius` | Border radius in pixels | `10` |
+| `bar_color` | Equalizer bar color (hex without #) | `53b14f` |
+| `bar_color_cover` | Extract bar color from album cover (`true`/`false`) | `false` |
+| `cover_image` | Show album cover image (`true`/`false`) | `true` |
+| `show_offline` | Show offline status when not playing (`true`/`false`) | `false` |
+| `interchange` | Swap artist and song name positions (`true`/`false`) | `false` |
+| `mode` | Color mode for supported themes (`light`/`dark`) | `light` |
+
+### Example
+
+```
+https://spotify-github-profile.kittinanx.com/api/view?uid=YOUR_UID&cover_image=true&theme=default&border_radius=15&bar_color=53b14f
+```
+
 ## Running for development locally without Vercel
 
 To run the application locally without Vercel:

api/templates/spotify.apple.html.j2

@@ -2,7 +2,7 @@
   <foreignObject width="343" height="534">
     <style>
       .container {
-        border-radius: 12px;
+        border-radius: {{border_radius}}px;
         {% if mode == 'dark' %}
         background-color: #1a1a1a;
         {% else %}

api/templates/spotify.compact.html.j2

@@ -8,7 +8,7 @@
 
       .container {
         background-color: #{{background_color}};
-        border-radius: 10px;
+        border-radius: {{border_radius}}px;
 
         padding: 10px 10px
       }

api/templates/spotify.default.html.j2

@@ -8,7 +8,7 @@
 
       .container {
         background-color: #{{background_color}};
-        border-radius: 10px;
+        border-radius: {{border_radius}}px;
 
         padding: 10px 10px
       }

api/templates/spotify.karaoke.html.j2

@@ -8,6 +8,7 @@
 
       .container {
         background-color: #{{background_color}};
+        border-radius: {{border_radius}}px;
 
         padding: 10px 10px
       }

api/templates/spotify.natemoo-re.html.j2

@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
 
-        border-radius: 10px;
+        border-radius: {{border_radius}}px;
 
         padding: 10px 10px
       }

api/templates/spotify.novatorem.html.j2

@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
 
-        border-radius: 10px;
+        border-radius: {{border_radius}}px;
 
         padding: 10px 10px
       }

api/templates/spotify.spotify-embed.html.j2

@@ -15,7 +15,7 @@
         {% else %}
         background-color: #ffffff;
         {% endif %}
-        border-radius: 8px;
+        border-radius: {{border_radius}}px;
         padding: 16px;
         display: flex;
         align-items: center;

api/view.py

@@ -138,6 +138,7 @@ def make_svg(
     show_offline,
     background_color,
     mode,
+    border_radius="10",
     progress_ms=None,
     duration_ms=None,
 ):
@@ -209,6 +210,7 @@ def make_svg(
         "mode": mode,
         "is_now_playing": is_now_playing,
         "progress_data": progress_data,
+        "border_radius": border_radius,
     }
 
     return render_template(f"spotify.{theme}.html.j2", **rendered_data)
@@ -351,6 +353,7 @@ def catch_all(path):
     show_offline = request.args.get("show_offline", default="false") == "true"
     interchange = request.args.get("interchange", default="false") == "true"
     mode = request.args.get("mode", default="light")
+    border_radius = request.args.get("border_radius", default="10")
     is_enable_profanity = request.args.get("profanity", default="false") == "true"
 
     # Handle invalid request
@@ -388,6 +391,7 @@ def catch_all(path):
             show_offline,
             background_color,
             mode,
+            border_radius,
             progress_ms,
             duration_ms,
         )
@@ -470,6 +474,7 @@ def catch_all(path):
         show_offline,
         background_color,
         mode,
+        border_radius,
         progress_ms,
         duration_ms,
     )