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>-->
-          <weather-icon icon="{{icon}}"></svg-icon>
+          <div class="wi-svg wi-l wi-border"
+               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>