feat(easel): add localization

static/src/components.ts

@@ -0,0 +1,17 @@
+class AppLinkElement extends HTMLElement {
+  static observedAttributes = ["icon", "href"];
+
+  constructor() {
+    super();
+    this.innerHTML = `
+    <a href="${this.getAttribute("href")}"
+      class="d-flex align-items-center text-body text-decoration-none">
+      <span class="fs-4">
+        <i class="bi bi-${this.getAttribute("icon")}"></i>
+        <span>${this.textContent}</span>
+      </span>
+    </a>`;
+  }
+}
+
+customElements.define("app-link", AppLinkElement);

static/src/index.ts

@@ -1,3 +1,5 @@
 import "./main.scss";
 import "bootstrap";
 import "./theme";
+import "./language";
+import "./components";

static/src/language.ts

@@ -0,0 +1,62 @@
+(() => {
+  const getStoredLanguage = () => {
+    const m = document.cookie.match(/language=(\w+)/);
+    return m ? m[1] : null;
+  };
+  const setStoredLanguage = (language: string) => (document.cookie = `language=${language}; max-age=34560000; path=/`);
+
+  const getPreferredLanguage = () => {
+    const storedLanguage = getStoredLanguage();
+    if (storedLanguage) {
+      return storedLanguage;
+    }
+    const result = window.navigator.language.split("-")[0];
+    return ["en", "ru"].includes(result) ? result : "en";
+  };
+
+  const setLanguage = (language: string) => {};
+
+  setLanguage(getPreferredLanguage());
+
+  const showActiveLanguage = (language: string, focus = false) => {
+    const languageSwitcher = document.querySelector("#bd-language");
+
+    if (!languageSwitcher) {
+      return;
+    }
+
+    const languageSwitcherText = document.querySelector("#bd-language-text");
+    const activeLanguageIcon = document.querySelector(".language-icon-active");
+    const btnToActive = document.querySelector(`[data-bs-language-value="${language}"]`);
+    const activeLanguageIconContent = btnToActive?.querySelector("span")?.textContent;
+
+    document.querySelectorAll("[data-bs-language-value]").forEach((element) => {
+      element.classList.remove("active");
+      element.setAttribute("aria-pressed", "false");
+    });
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    activeLanguageIcon.textContent = activeLanguageIconContent;
+    const languageSwitcherLabel = `${languageSwitcherText.textContent} (${btnToActive.dataset.bsLanguageValue})`;
+    languageSwitcher.setAttribute("aria-label", languageSwitcherLabel);
+
+    if (focus) {
+      languageSwitcher.focus();
+    }
+  };
+
+  window.addEventListener("DOMContentLoaded", () => {
+    showActiveLanguage(getPreferredLanguage());
+
+    document.querySelectorAll("[data-bs-language-value]").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const language = toggle.getAttribute("data-bs-language-value") || "";
+        setStoredLanguage(language);
+        setLanguage(language);
+        showActiveLanguage(language, true);
+        window.location.reload();
+      });
+    });
+  });
+})();

static/src/main.scss

@@ -2,8 +2,18 @@
 $bootstrap-icons-font-dir: "bootstrap-icons/font/fonts";
 @import "bootstrap-icons/font/bootstrap-icons";
 
+@import "./widget.scss";
+@import "./weather.scss";
+
 .table.table-compact {
   td {
     padding: 0.1rem 0.4rem;
   }
 }
+
+.icon {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-size: contain;
+}

static/src/theme.ts

@@ -1,14 +1,6 @@
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- */
-
 (() => {
-  "use strict";
-
   const getStoredTheme = () => localStorage.getItem("theme");
-  const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
+  const setStoredTheme = (theme: string) => localStorage.setItem("theme", theme);
 
   const getPreferredTheme = () => {
     const storedTheme = getStoredTheme();
@@ -19,7 +11,7 @@
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
 
-  const setTheme = (theme) => {
+  const setTheme = (theme: string) => {
     if (theme === "auto") {
       document.documentElement.setAttribute(
         "data-bs-theme",
@@ -32,7 +24,7 @@
 
   setTheme(getPreferredTheme());
 
-  const showActiveTheme = (theme, focus = false) => {
+  const showActiveTheme = (theme: string, focus = false) => {
     const themeSwitcher = document.querySelector("#bd-theme");
 
     if (!themeSwitcher) {
@@ -74,7 +66,7 @@
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
       toggle.addEventListener("click", () => {
-        const theme = toggle.getAttribute("data-bs-theme-value");
+        const theme = toggle.getAttribute("data-bs-theme-value") || '';
         setStoredTheme(theme);
         setTheme(theme);
         showActiveTheme(theme, true);

static/src/weather.scss

@@ -0,0 +1,73 @@
+.table-weather {
+  .header {
+    font-size: 0.9rem;
+    text-align: left;
+    padding-top: 0.25rem;
+  }
+
+  .date {
+    background: rgba(1, 0, 0, 0.1) !important;
+  }
+
+  .date.now {
+    background: rgba(0, 128, 255, 0.2) !important;
+  }
+
+  .date .value a {
+    all: unset;
+    cursor: pointer;
+  }
+
+  .cloudness {
+    vertical-align: top;
+  }
+
+  .cloudness .icon {
+    font-size: 1rem;
+  }
+
+  .cloudness .icon:first-child {
+    font-size: 2rem;
+  }
+
+  .temperature {
+    padding: 0;
+  }
+
+  .temperature .value {
+    padding: 0.1rem 0.4rem;
+  }
+
+  .temperature .value.positive {
+    color: orangered;
+  }
+
+  .temperature .value.negative {
+    color: blue;
+  }
+
+  .wind .direction {
+    font-size: 1rem;
+  }
+
+  .wind .gust {
+    font-size: 1rem;
+  }
+
+  .precipitation .value {
+    color: blue;
+  }
+
+  .pressure {
+    padding: 0 !important;
+  }
+
+  .pressure .value {
+    padding: 0.1rem 0.4rem;
+    color: blueviolet;
+  }
+
+  .humidity .value {
+    color: blue;
+  }
+}

static/src/widget.scss

@@ -0,0 +1,17 @@
+.widget .app {
+  padding: 0.5rem !important;
+}
+
+.widget header {
+  display: none !important;
+}
+
+.widget main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.widget footer {
+  display: none !important;
+}