feat(weather): inline weather svg icons

gallery/easel/route/view/weather/__init__.py

@@ -12,7 +12,7 @@ from gallery.sketch.weather.model import WeatherResponse
 
 from ..common.utils.tag import TagType, TagUtil
 from ..common.utils.template import build_templates
-from .filters import cloudness_icon, wind_direction_icon
+from .filters import cloudness_icon, weather_icon_svg, wind_direction_icon
 
 
 def context_procesor(request: AppRequest) -> dict:
@@ -26,6 +26,7 @@ templates = build_templates(
     {
         "wind_direction_icon": wind_direction_icon,
         "cloudness_icon": cloudness_icon,
+        "weather_icon_svg": weather_icon_svg,
     },
     context_procesor,
 )

gallery/easel/route/view/weather/filters.py

@@ -1,5 +1,7 @@
 import datetime
 
+from markupsafe import Markup
+
 from gallery.sketch.weather.model import (
     Cloudness,
     Precipitation,
@@ -7,6 +9,7 @@ from gallery.sketch.weather.model import (
     WindDirection,
     WindDirectionDeg,
 )
+from gallery.util import root_path
 
 
 def wind_direction_icon(wind_direction_deg: float) -> str:
@@ -54,3 +57,25 @@ def cloudness_icon(sky: Sky, date: datetime.datetime, period: str) -> list[str]:
             main_icon = f"{day_prefix}-{main_icon}"
     icons = [main_icon]
     return icons
+
+
+class WeatherIconBundle:
+    def __init__(self):
+        self._icon_path = root_path / "static/dist/weather-icons/icons"
+        self._cache = {}
+
+    def _load_icon(self, icon: str) -> Markup:
+        icon_file = self._icon_path / f"wi-{icon}.svg"
+        return Markup(icon_file.read_text())
+
+    def get(self, icon: str) -> Markup:
+        if icon not in self._cache:
+            self._cache[icon] = self._load_icon(icon)
+        return self._cache[icon]
+
+
+WEATHER_ICON_BUNDLE = WeatherIconBundle()
+
+
+def weather_icon_svg(icon: str) -> Markup:
+    return WEATHER_ICON_BUNDLE.get(icon)

gallery/easel/route/view/weather/templates/weather.html

@@ -66,8 +66,8 @@
             data-bs-toggle="tooltip"
             data-bs-title="{{ value.sky }}">
           {% for icon in value.sky | cloudness_icon(value.date, response.period) %}
-          <!--<div class="wi wi-{{icon}} wi-xl text-primary"></div>-->
+          <div class="wi-svg wi-l wi-border"
-          <weather-icon icon="{{icon}}"></svg-icon>
+               style="margin: 0 auto;">{{ icon | weather_icon_svg }}</div>
           {% endfor %}
         </td>
         {% endfor %}
@@ -103,7 +103,8 @@
         <td class="wind"
             data-bs-toggle="tooltip"
             data-bs-title="{{ value.wind_direction }}">
-          <div class="wi wi-wind-deg wi-{{value.wind_direction | wind_direction_icon}} wi-l text-primary"></div>
+          <div class="wi-svg wi-s wi-{{value.wind_direction | wind_direction_icon}}"
+               style="margin: 0 auto;">{{ 'wind-deg' | weather_icon_svg }}</div>
         </td>
         {% endfor %}
       </tr>

static/src/lib/weather-icons/icons/wi-wind-deg.svg

@@ -1,3 +1,3 @@
 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
-<path d="M3.74,14.5c0-2.04,0.51-3.93,1.52-5.66s2.38-3.1,4.11-4.11s3.61-1.51,5.64-1.51c1.52,0,2.98,0.3,4.37,0.89  s2.58,1.4,3.59,2.4s1.81,2.2,2.4,3.6s0.89,2.85,0.89,4.39c0,1.52-0.3,2.98-0.89,4.37s-1.4,2.59-2.4,3.59s-2.2,1.8-3.59,2.39  s-2.84,0.89-4.37,0.89c-1.53,0-3-0.3-4.39-0.89s-2.59-1.4-3.6-2.4s-1.8-2.2-2.4-3.58S3.74,16.03,3.74,14.5z M6.22,14.5  c0,2.37,0.86,4.43,2.59,6.18c1.73,1.73,3.79,2.59,6.2,2.59c1.58,0,3.05-0.39,4.39-1.18s2.42-1.85,3.21-3.2s1.19-2.81,1.19-4.39  s-0.4-3.05-1.19-4.4s-1.86-2.42-3.21-3.21s-2.81-1.18-4.39-1.18s-3.05,0.39-4.39,1.18S8.2,8.75,7.4,10.1S6.22,12.92,6.22,14.5z   M11.11,20.35l3.75-13.11c0.01-0.1,0.06-0.15,0.15-0.15s0.14,0.05,0.15,0.15l3.74,13.11c0.04,0.11,0.03,0.19-0.02,0.25  s-0.13,0.06-0.24,0l-3.47-1.3c-0.1-0.04-0.2-0.04-0.29,0l-3.5,1.3c-0.1,0.06-0.17,0.06-0.21,0S11.09,20.45,11.11,20.35z"/>
+<path id="wind" d="M3.74,14.5c0-2.04,0.51-3.93,1.52-5.66s2.38-3.1,4.11-4.11s3.61-1.51,5.64-1.51c1.52,0,2.98,0.3,4.37,0.89  s2.58,1.4,3.59,2.4s1.81,2.2,2.4,3.6s0.89,2.85,0.89,4.39c0,1.52-0.3,2.98-0.89,4.37s-1.4,2.59-2.4,3.59s-2.2,1.8-3.59,2.39  s-2.84,0.89-4.37,0.89c-1.53,0-3-0.3-4.39-0.89s-2.59-1.4-3.6-2.4s-1.8-2.2-2.4-3.58S3.74,16.03,3.74,14.5z M6.22,14.5  c0,2.37,0.86,4.43,2.59,6.18c1.73,1.73,3.79,2.59,6.2,2.59c1.58,0,3.05-0.39,4.39-1.18s2.42-1.85,3.21-3.2s1.19-2.81,1.19-4.39  s-0.4-3.05-1.19-4.4s-1.86-2.42-3.21-3.21s-2.81-1.18-4.39-1.18s-3.05,0.39-4.39,1.18S8.2,8.75,7.4,10.1S6.22,12.92,6.22,14.5z   M11.11,20.35l3.75-13.11c0.01-0.1,0.06-0.15,0.15-0.15s0.14,0.05,0.15,0.15l3.74,13.11c0.04,0.11,0.03,0.19-0.02,0.25  s-0.13,0.06-0.24,0l-3.47-1.3c-0.1-0.04-0.2-0.04-0.29,0l-3.5,1.3c-0.1,0.06-0.17,0.06-0.21,0S11.09,20.45,11.11,20.35z"/>
 </svg>

static/src/lib/weather-icons/sass/_variables.scss

@@ -7,6 +7,7 @@ $weather-icons-colors: (
   "moon": #4A4B43,
   "lightning": red,
   "snow": white,
+  "wind": #0d6efd,
 ) !default;
 $weather-icons-included: (
   "wi-cloud",

static/src/lib/weather-icons/sass/_weather-icons-svg.scss

@@ -1,15 +1,13 @@
 @use "variables";
 
-weather-icon {
+weather-icon,
+.wi-svg {
   display: flex;
   width: 3rem;
 
   > svg {
     path {
       fill: gray;
-      stroke: variables.$weather-icons-stroke-color;
-      stroke-width: 0.5;
-      //paint-order: stroke;
     }
     @each $type, $color in variables.$weather-icons-colors {
       path[id="#{$type}"] {
@@ -20,4 +18,19 @@ weather-icon {
       }
     }
   }
+
+  &.wi-border {
+    > svg path {
+      stroke: variables.$weather-icons-stroke-color;
+      stroke-width: 0.5;
+      //paint-order: stroke;
+    }
+  }
+
+  &.wi-s {
+    width: 2.5rem;
+  }
+  &.wi-l {
+    width: 3.5rem;
+  }
 }

static/src/lib/weather-icons/sass/weather-icons.scss

@@ -2,4 +2,4 @@
 @use "weather-icons-base";
 @use "weather-icons-list";
 @use "weather-wind-aliases";
-@use "weather-icons-colors";
+@use "weather-icons-svg";