From e77fc521bfdd4b75d7802f2e02ff2744f0fd245a Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 29 May 2024 18:57:32 +0200
Subject: [PATCH] feat: introduce dynamic SVG icon functionality

Implemented a new template filter in Flask to dynamically render SVG icons, allowing for cleaner HTML templates and easier icon management. Added `coffee` and `envelope` SVG icons to the project's asset directory. This change not only streamlines the incorporation of new icons but also enhances the maintainability of the codebase by centralizing icon resources and reducing HTML clutter. Modified existing HTML templates to use this new dynamic icon rendering method, replacing hard-coded SVG and img tag icon implementations with the newly created template filter.

This update significantly improves the way icons are handled throughout the application, providing a more scalable and efficient approach to managing and displaying graphical elements.
---
 assets/css/base.css            |  4 ++++
 assets/dist/icons/coffee.svg   |  1 +
 assets/dist/icons/envelope.svg |  1 +
 main.py                        |  7 +++++++
 templates/base.html            | 16 +---------------
 templates/index.html           | 10 +++-------
 6 files changed, 17 insertions(+), 22 deletions(-)
 create mode 100644 assets/dist/icons/coffee.svg
 create mode 100644 assets/dist/icons/envelope.svg

diff --git a/assets/css/base.css b/assets/css/base.css
index 60880c9..0fa6901 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -119,6 +119,10 @@ h5 {
   color: #604c2e;
 }
 
+.bs-icon.bs-icon-primary svg {
+  fill: var(--bs-primary-bg-subtle);
+}
+
 /* Responsive Styles */
 @media (max-width: 768px) {
   .navbar .container {
diff --git a/assets/dist/icons/coffee.svg b/assets/dist/icons/coffee.svg
new file mode 100644
index 0000000..4d4e30a
--- /dev/null
+++ b/assets/dist/icons/coffee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"></path></svg>
\ No newline at end of file
diff --git a/assets/dist/icons/envelope.svg b/assets/dist/icons/envelope.svg
new file mode 100644
index 0000000..30b1cee
--- /dev/null
+++ b/assets/dist/icons/envelope.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>
\ No newline at end of file
diff --git a/main.py b/main.py
index dc49b56..9312623 100644
--- a/main.py
+++ b/main.py
@@ -81,6 +81,13 @@ if os.environ.get("PRIVATECOFFEE_DEV"):
     app.development_mode = True
 
 
+def icon(icon_name):
+    file = send_from_directory("assets", f"dist/icons/{icon_name}.svg")
+    file_content = file.response.file.read().decode("utf-8")
+    return file_content
+
+app.add_template_filter(icon)
+
 if __name__ == "__main__":
     parser = ArgumentParser(description="Run the private.coffee web server.")
     parser.add_argument("--port", type=int, default=9810)
diff --git a/templates/base.html b/templates/base.html
index 13593f7..2a5fa97 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -75,21 +75,7 @@
             <div class="fw-bold d-flex align-items-center mb-2">
               <span
                 class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"
-                ><svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="1em"
-                  height="1em"
-                  fill="currentColor"
-                  viewBox="0 0 16 16"
-                  class="bi bi-bezier"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"
-                  ></path>
-                  <path
-                    d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"
-                  ></path></svg></span
+                >{{ "coffee" | icon | safe }}</span
               ><span>Private.coffee</span>
             </div>
             <p class="text-muted">
diff --git a/templates/index.html b/templates/index.html
index 94bf775..19c0522 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,7 +30,7 @@
                   <div class="card shadow-sm">
                       <div class="card-body px-4 py-5 px-md-5">
                           <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;">
-                          {% if service.icon %}<img src="/assets/dist/icons/{{ service.icon }}.svg" alt="{{ service.name }}" style="max-width: 3rem;">{% endif %}
+                          {% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
                         </div>
                           <h5 class="fw-bold card-title">{{ service.name }}</h5>
                           <p class="text-muted card-text mb-4">{{ service.long_description }}</p>
@@ -91,9 +91,7 @@
           <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
               <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                   <div class="d-flex align-items-center p-3">
-                      <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
-                              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
-                          </svg></div>
+                      <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "envelope" | icon | safe }}</div>
                           <div class="px-2">
                             <h6 class="fw-bold mb-0">Email</h6>
                             <p class="text-muted mb-0">support@private.coffee</p>
@@ -106,9 +104,7 @@
         <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
             <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                 <div class="d-flex align-items-center p-3">
-                    <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
-                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
-                        </svg></div>
+                    <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "matrix-logo" | icon | safe }}</div>
                       <div class="px-2">
                         <h6 class="fw-bold mb-0">Matrix</h6>
                         <p class="text-muted mb-0"><a href="https://matrix.pcof.fi/#/#private.coffee:private.coffee">#private.coffee:private.coffee</a></p>