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

@@ -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 {

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>

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>

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)

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
+                >{{ "coffee" | icon | safe }}</span
-                  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
               ><span>Private.coffee</span>
             </div>
             <p class="text-muted">

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">
+                      <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>
-                              <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="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">
+                    <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>
-                            <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="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>