finally got the image properly creating

.github/workflows/statistics.yml

@@ -19,6 +19,12 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - name: Install Imgkit
+        run: |
+          pip install imgkit
+      - name: Install wkhtmltopdf
+        run: |
+          sudo apt-get install wkhtmltopdf
       - name: Generate SVG graphic
         id: build
         run: bash ./generate_svg.sh

stats_tracker/generate_svg.sh

@@ -9,17 +9,4 @@ echo "Deletion(s): $d"
 value=$(($i - $d))
 echo "Lines of code: $value"
 mkdir build
-echo "<svg width=\"300px\" height=\"200px\" xmlns=\"http://www.w3.org/2000/svg\">
-    <style>
-        @import url(\"https://fonts.googleapis.com/css?family=Source+Code+Pro\");
-    </style>
-    <image href=\"https://picsum.photos/300/200\" width=\"100%\" height=\"100%\"/>
-    <text x=\"50%\" y=\"90px\" font-size=\"65\" text-anchor=\"middle\" fill=\"black\" font-family=\"Source Code Pro:700\" font-weight=\"bold\">$value</text>
-</svg>" > loc.svg
-# TEMP_DEB="$(mktemp)" &&
-# wget -O "$TEMP_DEB" 'https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-2/wkhtmltox_0.12.6.1-2.jammy_amd64.deb' &&
-# sudo dpkg -i "$TEMP_DEB"
-# rm -f "$TEMP_DEB"
-sudo apt-get install wkhtmltopdf
-pip install imgkit
-python html-to-img.py
+python html-to-img.py $value

stats_tracker/html-to-img.py

@@ -1,7 +1,32 @@
 import imgkit
+import os
+import sys
 
-with open('loc.svg') as f:
-  options = {
-    "enable-local-file-access": ""
+my_path = os.path.abspath("background.png")
+
+value = sys.argv[1]
+
+f = f"""
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,700;1,700&display=swap');
+    * {{
+        margin: 0px;
+        font-family: "Source Code Pro";
+        font-optical-sizing: auto;
+        font-weight: 700;
+        font-style: normal;
+    }}
+</style>
+<div style="width:300px">
+    <img width="300px" src="{my_path}">
+    <div style="font-size:65px; position: absolute; top: 20px; left: 0px; width: 300px;">
+        <div style="margin-left: auto; margin-right: auto; width: min; text-align: center;">{value}</div>
+</div>
+"""
+
+options = {
+    "enable-local-file-access": "",
+    "width": "300",
+    "height": "163"
   }
-  imgkit.from_file(f, 'build/loc.png', options)
+imgkit.from_string(f, 'build/loc.png', options)