added themes

Author: david-gasinski

digest.py

@@ -5,35 +5,44 @@
 from utils.load_components import default_theme
 from lib.style import fetchCustomCSS
 from lib.user import User
+from lib.themes import Theme
 
 app = Flask(__name__)
 
 
 # grabs user data from a leetcode api and returns the svg template with the data filled in.
-def populateSVG(svg: str, username: str, styling: str):
+def populateSVG(svg: str, username: str, styling: str, theme: dict):
     data = User(username)
     return svg.format(
             username=data.username,
             rank=data.ranking,  
             easy=data.easySolved, 
             medium=data.mediumSolved, 
             hard=data.hardSolved, 
-            chart=svgDonutChart(275,30, 'lightgreen', 50, 20, data.solvedDeg, 100),
+            chart=svgDonutChart(275,30, theme.green, theme.light, 50, 20, data.solvedDeg, 100),
             totalCompleted=f'{data.totalSolved} / {data.totalQuestions}',
             stylesheet=styling,
+            theme = theme
         )
 
 # returns the generated svg with a given user name
 @app.route('/svg/<username>')
 def svg(username):
     custom_stylesheet = request.args.get('stylesheet')
+    custom_theme = request.args.get('theme')
 
+    if custom_theme == None:
+        # default theme is nord
+        custom_theme = 'nord'
+    
     if custom_stylesheet == None:
         custom_stylesheet = default_theme
     else:
         custom_stylesheet = fetchCustomCSS(custom_stylesheet)
+
+    theme = Theme(custom_theme)
 
-    svg_text = populateSVG(svg_template, escape(username), custom_stylesheet)
+    svg_text = populateSVG(svg_template, escape(username), custom_stylesheet, theme)
     return Response(svg_text, mimetype='image/svg+xml')
 
 # app to customise svg

lib/chart.py

@@ -8,7 +8,7 @@ def getCoordsFromDeg(angle, radius, svgSize):
     return [coordX, coordY] 
 
 
-def svgDonutChart(x : int , y : int, color: str, radius: int, border_size: int, angle: int, svgSize: int):
+def svgDonutChart(x : int , y : int, color: str,bg_color: str, radius: int, border_size: int, angle: int, svgSize: int):
     # due to a bug with svg coordinates, an angle of 360 produces an empty chart.
     if angle == 360:
         angle -= 0.01
@@ -28,5 +28,5 @@ def svgDonutChart(x : int , y : int, color: str, radius: int, border_size: int,
     """
     full_slice = f"M {svgSize} {radius} \n A {radius} {radius} 0 1 0 {outer_coords_full[0]} {outer_coords_full[1]} \n L {inner_coords_full[0]} {inner_coords_full[1]} \n A {radius - border_size} {radius - border_size} 0 1 1 {svgSize - border_size} {radius}"
     return svg_chart_template.format(
-        x=x, y=y, color=color, path_slice=path_string, full_slice=full_slice
+        x=x, y=y, color=color, bg_color=bg_color, path_slice=path_string, full_slice=full_slice
     )

lib/json/colours.json

@@ -0,0 +1,65 @@
+{
+    "nord" : {
+        "dark" : "#2e3440",
+        "light" : "#eceff4",
+        "green" : "#eceff4",
+        "yellow" : "#eceff4",
+        "red" : "#eceff4"
+    },
+    "dracula" : {
+        "dark" : "#282a36",
+        "light" : "#f8f8f2",
+        "green" : "#50fa7b",
+        "yellow" : "#f1fa8c",
+        "red" : "#ff5555"
+    },
+    "gruvbox" : {
+        "dark" : "#282828",
+        "light" : "#fbf1c7",
+        "green" : "#98971a",
+        "yellow" : "#d79921",
+        "red" : "#cc241d"
+    },
+    "one_dark" : {
+        "dark" : "#282c34",
+        "light" : "#Abb2bF",
+        "green" : "#98c379",
+        "yellow" : "#E5c07b",
+        "red" : "#e06c75"
+    },
+    "monokai" : {
+        "dark" : "#2e2e2e",
+        "light" : "#d6d6d6",
+        "green" : "#b4d273",
+        "yellow" : "#e5b567",
+        "red" : "#e56767"
+    },
+    "solarized_dark" : {
+        "dark" : "#073642",
+        "light" : "#fdf6e3",
+        "green" : "#859900",
+        "yellow" : "#b58900",
+        "red" : "#d30102"
+    }, 
+    "solarized_light" : {
+        "dark" : "#fdf6e3",
+        "light" : "#073642",
+        "green" : "#859900",
+        "yellow" : "#b58900",
+        "red" : "#d30102"
+    },
+    "tokyo" : {
+        "dark" : "#24283b",
+        "light" : "#9aa5ce",
+        "green" : "#9ece6a",
+        "yellow" : "#e0af68",
+        "red" : "#f7768e"
+    },
+    "terminal" : {
+        "dark" : "#0c0c0c",
+        "light" : "#cccccc",
+        "green" : "#13a10e",
+        "yellow" : "#c19c00",
+        "red" : "#c50f1f"
+    }
+}

lib/json/themes.json

@@ -2,12 +2,12 @@
 
 class Theme():
     def __init__(self, theme: str) -> None:
-        self.path = './lib/json/colours.json'
+        self.path = './lib/json/themes.json'
         self.theme = theme
         self._loadTheme()
 
     def _loadTheme(self) -> None:
-        """ Loads the colour themes from json file and appends to colours object """
+        """ Loads the colour themes from json file and appends to object """
         with open(self.path, 'r') as f:
             colours_dic = json.loads(f.read())
 

lib/themes.py

@@ -1,7 +1,7 @@
 const themes = {
     "nord" : "nord.png",
     "dracula" : "dracula.png",
-    "gruvbox" : "base16.png",
+    "gruvbox" : "gruvbox.png",
     "one_dark" : "one_dark.png",
     "monokai" : "monokai.png",
     "solarized_dark" : "solarized_dark.png",
@@ -10,19 +10,13 @@ const themes = {
     "terminal" : "terminal.png"  
 }
 
-
-// on click
-// fetch url from flask 
-
 const url = document.getElementById("url")
 const theme = document.getElementById("theme");
 const user = document.getElementById("username"); 
 
 function updateURL(){
     // find url and set style
-    
     var unique_url = `![](https://digest.gasinski.dev/svg/${user.value}?theme=${theme.value})`
-
     // set to new text, prevents text s
     url.innerHTML = unique_url
     url.href = unique_url
@@ -33,3 +27,8 @@ let button = document.getElementById("submit");
 button.addEventListener("click", updateURL);
 
 // update image on theme change
+theme.addEventListener("change", function() {
+    // get img and update it to theme
+    document.getElementById("example_img").setAttribute("src", `/static/img/${themes[theme.value]}`)
+
+})

static/components/chart.svg

@@ -20,7 +20,6 @@ <h1> Leetcode Digest </h1>
                     <option value="nord"> nord </option>
                     <option value="dracula"> dracula </option>
                     <option value="gruvbox"> gruvbox </option>
-                    <option value="base16"> base16 </option>
                     <option value="one_dark"> one dark </option>
                     <option value="monokai"> monokai </option>
                     <option value="solarized_dark"> solarized dark </option>
@@ -37,8 +36,8 @@ <h1> Leetcode Digest </h1>
             <br><br>
             <br><br>
             <h4> Paste this into your <b>Github <a>README.md</a></b></h4>
-            <div class="url" id="url" href="https://www.digest.gasinski.dev/svg/" >https://www.digest.gasinski.dev/svg/</div>
-            <img alt="example of the panel" src="/static/img/example.png"/>
+            <div class="url" id="url" href="![](https://www.digest.gasinski.dev/svg/)" >https://www.digest.gasinski.dev/svg/</div>
+            <img id="example_img" alt="example of the panel" src="/static/img/nord.png"/>
             <div class="footer"> Made by <a href="https://gasinski.dev"> David Gasinski</a> </div>
         </div>