feat(static): update and optimizate

gallery/easel/route/view/common/templates/base.html

@@ -32,10 +32,10 @@
                   type="button"
                   aria-expanded="false"
                   data-bs-toggle="dropdown"
-                  aria-label="Select language (default)">
-            <span class="me-2 language-icon-active">🇬🇧</span>
+                  aria-label="{{_('Select language')}} (default)">
+            <span class="fi fi-gb me-2 language-icon-active"></span>
             <span class="d-lg-none ms-2"
-                  id="bd-language-text">Select language</span>
+                  id="bd-language-text">{{_("Select language")}}</span>
           </button>
           <ul class="dropdown-menu dropdown-menu-end"
               aria-labelledby="bd-language-text">
@@ -44,8 +44,8 @@
                       class="dropdown-item d-flex align-items-center"
                       data-bs-language-value="en"
                       aria-pressed="false">
-                <span class="me-2 language-icon">🇬🇧</span>
-                English
+                <span class="fi fi-gb me-2 language-icon-active"></span>
+                {{_("English")}}
               </button>
             </li>
             <li>
@@ -53,8 +53,8 @@
                       class="dropdown-item d-flex align-items-center"
                       data-bs-language-value="ru"
                       aria-pressed="false">
-                <span class="me-2 language-icon">🇷🇺</span>
-                Russian
+                <span class="fi fi-ru me-2 language-icon-active"></span>
+                {{_("Russian")}}
               </button>
             </li>
           </ul>
@@ -66,9 +66,9 @@
                   aria-expanded="false"
                   data-bs-toggle="dropdown"
                   aria-label="Toggle theme (auto)">
-            <i class="bi me-2 opacity-50 theme-icon-active"></i>
+            <span class="bi bi-circle-half me-2 opacity-50 theme-icon-active"></span>
             <span class="d-lg-none ms-2"
-                  id="bd-theme-text">Toggle theme</span>
+                  id="bd-theme-text">{{_("Toggle theme")}}</span>
           </button>
           <ul class="dropdown-menu dropdown-menu-end"
               aria-labelledby="bd-theme-text">
@@ -77,8 +77,8 @@
                       class="dropdown-item d-flex align-items-center"
                       data-bs-theme-value="light"
                       aria-pressed="false">
-                <i class="bi bi-sun-fill me-2 opacity-50 theme-icon"></i>
-                Light
+                <span class="bi bi-sun-fill me-2 opacity-50 theme-icon"></span>
+                {{_("Light")}}
               </button>
             </li>
             <li>
@@ -86,8 +86,8 @@
                       class="dropdown-item d-flex align-items-center"
                       data-bs-theme-value="dark"
                       aria-pressed="false">
-                <i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></i>
-                Dark
+                <span class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"></span>
+                {{_("Dark")}}
               </button>
             </li>
             <li>
@@ -95,8 +95,8 @@
                       class="dropdown-item d-flex align-items-center active"
                       data-bs-theme-value="auto"
                       aria-pressed="true">
-                <i class="bi bi-circle-half me-2 opacity-50 theme-icon"></i>
-                Auto
+                <span class="bi bi-circle-half me-2 opacity-50 theme-icon"></span>
+                {{_("Auto")}}
               </button>
             </li>
           </ul>

gallery/easel/route/view/common/templates/root_index.html

@@ -1,11 +1,11 @@
 {% extends "base.html" %}
-{% block title %}Index{% endblock %}
+{% block title %}{{_("Index")}}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block content %}
-<h1>View</h1>
+<h1>{{_("View")}}</h1>
 <div class="list-group mb-5">
   {% for section in sections %}
   <a href="{{section.link}}"
@@ -18,7 +18,7 @@
   {% endfor %}
 </div>
 <hr class="col-3 col-md-2 mb-5">
-<h1>Docs</h1>
+<h1>{{_("Docs")}}</h1>
 <a href="/docs"
    target="_blank">
   <h4>Swagger</h4>

gallery/easel/route/view/locales/ru/LC_MESSAGES/messages.po

@@ -1,15 +0,0 @@
-msgid ""
-msgstr ""
-"Project-Id-Version: Gallery\n"
-"Last-Translator: shmyga <shmyga.z@gmail.com>\n"
-"Language: ru\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
-
-msgid "Weather"
-msgstr "Погода"
-
-msgid "TV program"
-msgstr "Телепрограмма"

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

@@ -1,6 +1,7 @@
 import datetime
 from pathlib import Path
 
+from babel.dates import format_date
 from fastapi import APIRouter
 from fastapi.responses import HTMLResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
@@ -20,7 +21,13 @@ templates = Jinja2Templates(
         base_dir / "templates",
     ]
 )
-templates.env.globals.update({"_": _})
+templates.env.globals.update(
+    {
+        "_": _,
+        "version": __version__,
+        "format_date": format_date,
+    }
+)
 templates.env.filters["timedelta_format"] = timedelta_format
 
 router = APIRouter()

gallery/easel/route/view/schedule/templates/channel.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}
-Программа | {{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}
+{{_("TV program")}} | {{response.channel.name}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}
 {% endblock %}
 
 {% block header %}
@@ -15,7 +15,7 @@
      href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
   <a class="button"
      href="../..">⬆️</a>
-  <span>{{response.channel.name}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <span>{{response.channel.name}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
   <a class="button"
      href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
 </h4>

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

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}
-{{'Прямые трансляции' if live else _("TV program")}} | {{response.date.strftime('%a, %d %B %Y')}}
+{{_("Live broadcasts") if live else _("TV program")}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}
 {% endblock %}
 
 {% block header %}
@@ -15,7 +15,7 @@
      href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
   <a class="button"
      href="..">⬆️</a>
-  <span>{{'Прямые трансляции' if live else 'Программа'}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <span>{{_("Live broadcasts") if live else _("TV program")}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
   <a class="button"
      href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
 </h4>
@@ -36,8 +36,6 @@
         <td colspan="3">
           <div>{{response.channel.name}}</div>
         </td>
-        <td></td>
-        <td></td>
       </tr>
       {% for value in values %}
       <tr class="{{'table-success' if not live and value.live else ''}}">

gallery/easel/route/view/translation.py

@@ -1,9 +1,10 @@
 import gettext
 from contextvars import ContextVar
-from pathlib import Path
 
 from fastapi import Cookie, Header, Request
 
+from gallery.util import root_path
+
 _translation: ContextVar[gettext.GNUTranslations | gettext.NullTranslations] = (
     ContextVar("translation")
 )
@@ -19,7 +20,7 @@ async def set_language(
 
     try:
         t = gettext.translation(
-            "messages", localedir=Path(__file__).parent / "locales", languages=[lang]
+            "messages", localedir=root_path / "locales", languages=[lang]
         )
     except FileNotFoundError:
         t = gettext.NullTranslations()

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

@@ -1,11 +1,10 @@
 import datetime
 from pathlib import Path
 
-from fastapi import APIRouter, FastAPI
+from fastapi import APIRouter
 from fastapi.responses import HTMLResponse, RedirectResponse
-from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-
+from babel.dates import format_date
 from gallery.easel.core import AppRequest
 from gallery.sketch.weather.model import WeatherResponse
 from gallery.version import __version__
@@ -22,7 +21,13 @@ templates = Jinja2Templates(
         base_dir / "templates",
     ]
 )
-templates.env.globals.update({"_": _})
+templates.env.globals.update(
+    {
+        "_": _,
+        "version": __version__,
+        "format_date": format_date,
+    }
+)
 templates.env.filters["wind_direction_icon"] = wind_direction_icon
 templates.env.filters["cloudness_icon"] = cloudness_icon
 
@@ -32,15 +37,16 @@ def build_weather_response(request: AppRequest, response: WeatherResponse):
         request=request,
         name="weather.html",
         context={
-            "version": __version__,
             "tag_util": TagUtil,
             "datetime": datetime,
             "response": response,
         },
     )
 
+
 router = APIRouter()
 
+
 @router.get("/weather", response_class=HTMLResponse)
 async def get_weather_index(request: AppRequest, query: str | None = None):
     weather_api = request.app.state.api.weather
@@ -49,7 +55,6 @@ async def get_weather_index(request: AppRequest, query: str | None = None):
         request=request,
         name="index.html",
         context={
-            "version": __version__,
             "locations": locations,
         },
     )

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

@@ -1,8 +1,8 @@
 {% extends "base.html" %}
-{% block title %}Weather{% endblock %}
+{% block title %}{{_("Weather")}}{% endblock %}
 
 {% block content %}
-<h1>Weather</h1>
+<h1>{{_("Weather")}}</h1>
 <form action=""
       method="get"
       class="mb-4">
@@ -11,9 +11,9 @@
            class="form-control"
            id="query"
            name="query"
-           placeholder="Enter the city name">
+           placeholder="{{_('Enter the city name')}}">
     <button class="btn btn-primary"
-            type="submit">Search</button>
+            type="submit">{{_("Search")}}</button>
   </div>
 </form>
 <ul id="locations"
@@ -22,6 +22,7 @@
   <a href="weather/{{location.id}}"
      class="list-group-item list-group-item-action px-4"
      onclick="saveLocation({id:'{{location.id}}', name:'{{location.name}}'});">
+    <span class="fi fi-{{location.country_code}} me-1"></span>
     <span class="text-primary">{{location.name}}</span>
     <span class="small ms-1 text-secondary">
       {{location.country}}, {{location.district}}, {{location.subdistrict}}

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

@@ -13,12 +13,12 @@
      href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
   <a class="button"
      href="../tag/days-10">⬆️</a>
-  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <span>{{response.location}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
   <a class="button"
      href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
   {% endif %}
   {% if response.period == 'days' %}
-  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <span>{{response.location}} | {{format_date(response.date, 'E, d MMMM Y', locale=request.state.language)}}</span>
   {% endif %}
 </h4>
 <div class="table-responsive">
@@ -36,9 +36,9 @@
         {% endif %}
         {% if response.period == 'days' %}
         <td class="date {{'now' if value.date.date() == datetime.date.today() else ''}}">
-          <span class="value">
+          <span class="value {{'text-danger' if value.date.weekday() in [5,6] else ''}}">
             <a href="../tag/{{tag_util.create_tag('day', value.date.date())}}">
-              {{value.date.strftime('%a %d')}}
+              {{format_date(value.date, 'E d', locale=request.state.language)}}
             </a>
           </span>
         </td>
@@ -49,7 +49,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Облачность
+          {{_("Cloudiness")}}
         </td>
       </tr>
       <tr>
@@ -65,7 +65,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Температура, °C
+          {{_("Temperature, °C")}}
         </td>
       </tr>
       <tr>
@@ -84,7 +84,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Направление ветра
+          {{_("Wind direction")}}
         </td>
       </tr>
       <tr>
@@ -98,7 +98,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Скорость ветра, м/с
+          {{_("Wind speed, m/s")}}
         </td>
       </tr>
       <tr>
@@ -118,7 +118,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Осадки, мм
+          {{_("Precipitation, mm")}}
         </td>
       </tr>
       <tr>
@@ -133,7 +133,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Давление, мм рт. ст.
+          {{_("Pressure, mmHg")}}
         </td>
       </tr>
       <tr>
@@ -151,7 +151,7 @@
       <tr>
         <td colspan="{{response.values | length}}"
             class="header">
-          Влажность, %
+          {{_("Humidity, %")}}
         </td>
       </tr>
       <tr>