refactor(static): refactor weather-icons lib

static/package-lock.json

@@ -15,6 +15,7 @@
         "flag-icons": "^7.5.0"
       },
       "devDependencies": {
+        "@types/bootstrap": "^5.2.11",
         "@types/node": "^26.1.0",
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.4",
@@ -435,6 +436,15 @@
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "dev": true
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.11.tgz",
+      "integrity": "sha512-69ykbLiNzQxi6Q/y/aYJLrlzI5QkLQjhIYW2U+cxujBxAmaBtmXKtxnFes59Ttfpt936as6xJU0dYnmVpcwIwg==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",

static/package.json

@@ -14,6 +14,7 @@
     "flag-icons": "^7.5.0"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.11",
     "@types/node": "^26.1.0",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",

static/src/index.ts

@@ -1,7 +1,6 @@
 import * as bootstrap from "bootstrap";
 import "./components";
 import "./language";
-//import "./main.scss";
 import "./theme";
 import "./weather/weather";
 import "./schedule/schedule";

static/src/lib/weather-icons.scss

@@ -0,0 +1,3 @@
+@use "./weather-icons/sass/weather-icons" with (
+  $weather-icons-path: "weather-icons/icons"
+);

static/src/lib/weather-icons/build.py

@@ -1,22 +0,0 @@
-from pathlib import Path
-from string import Template
-
-LIST_ITEM = Template(
-    """.$name {
-  mask-image: url(./svg/$name.svg);
-}
-"""
-)
-
-
-def generate():
-    work_dir = Path(__file__).parent
-    data = ""
-    for item in (work_dir / "svg").glob("*.svg"):
-        data += LIST_ITEM.substitute({"name": item.stem})
-    target = work_dir / "classes-list.scss"
-    target.write_text(data)
-
-
-if __name__ == "__main__":
-    generate()

static/src/lib/weather-icons/classes-list.scss

@@ -1,93 +0,0 @@
-.wi-day-snow {
-  mask-image: url(./svg/wi-day-snow.svg);
-}
-.wi-rain-mix {
-  mask-image: url(./svg/wi-rain-mix.svg);
-}
-.wi-thunderstorm {
-  mask-image: url(./svg/wi-thunderstorm.svg);
-}
-.wi-hail {
-  mask-image: url(./svg/wi-hail.svg);
-}
-.wi-day-rain {
-  mask-image: url(./svg/wi-day-rain.svg);
-}
-.wi-cloudy {
-  mask-image: url(./svg/wi-cloudy.svg);
-}
-.wi-day-hail {
-  mask-image: url(./svg/wi-day-hail.svg);
-}
-.wi-night-clear {
-  mask-image: url(./svg/wi-night-clear.svg);
-}
-.wi-day-cloudy {
-  mask-image: url(./svg/wi-day-cloudy.svg);
-}
-.wi-day-storm-showers {
-  mask-image: url(./svg/wi-day-storm-showers.svg);
-}
-.wi-lightning {
-  mask-image: url(./svg/wi-lightning.svg);
-}
-.wi-day-rain-mix {
-  mask-image: url(./svg/wi-day-rain-mix.svg);
-}
-.wi-day-showers {
-  mask-image: url(./svg/wi-day-showers.svg);
-}
-.wi-storm-showers {
-  mask-image: url(./svg/wi-storm-showers.svg);
-}
-.wi-snow {
-  mask-image: url(./svg/wi-snow.svg);
-}
-.wi-cloud {
-  mask-image: url(./svg/wi-cloud.svg);
-}
-.wi-night-alt-snow {
-  mask-image: url(./svg/wi-night-alt-snow.svg);
-}
-.wi-night-alt-lightning {
-  mask-image: url(./svg/wi-night-alt-lightning.svg);
-}
-.wi-day-sunny {
-  mask-image: url(./svg/wi-day-sunny.svg);
-}
-.wi-night-alt-hail {
-  mask-image: url(./svg/wi-night-alt-hail.svg);
-}
-.wi-night-alt-cloudy {
-  mask-image: url(./svg/wi-night-alt-cloudy.svg);
-}
-.wi-night-alt-storm-showers {
-  mask-image: url(./svg/wi-night-alt-storm-showers.svg);
-}
-.wi-day-thunderstorm {
-  mask-image: url(./svg/wi-day-thunderstorm.svg);
-}
-.wi-wind-deg {
-  mask-image: url(./svg/wi-wind-deg.svg);
-}
-.wi-showers {
-  mask-image: url(./svg/wi-showers.svg);
-}
-.wi-night-alt-rain-mix {
-  mask-image: url(./svg/wi-night-alt-rain-mix.svg);
-}
-.wi-rain {
-  mask-image: url(./svg/wi-rain.svg);
-}
-.wi-night-alt-thunderstorm {
-  mask-image: url(./svg/wi-night-alt-thunderstorm.svg);
-}
-.wi-night-alt-showers {
-  mask-image: url(./svg/wi-night-alt-showers.svg);
-}
-.wi-day-lightning {
-  mask-image: url(./svg/wi-day-lightning.svg);
-}
-.wi-night-alt-rain {
-  mask-image: url(./svg/wi-night-alt-rain.svg);
-}

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

@@ -0,0 +1,34 @@
+$weather-icons-path: "../icons" !default;
+$weather-icons-included: (
+  "wi-cloud",
+  "wi-cloudy",
+  "wi-day-cloudy",
+  "wi-day-hail",
+  "wi-day-lightning",
+  "wi-day-rain-mix",
+  "wi-day-rain",
+  "wi-day-showers",
+  "wi-day-snow",
+  "wi-day-storm-showers",
+  "wi-day-sunny",
+  "wi-day-thunderstorm",
+  "wi-hail",
+  "wi-lightning",
+  "wi-night-alt-cloudy",
+  "wi-night-alt-hail",
+  "wi-night-alt-lightning",
+  "wi-night-alt-rain-mix",
+  "wi-night-alt-rain",
+  "wi-night-alt-showers",
+  "wi-night-alt-snow",
+  "wi-night-alt-storm-showers",
+  "wi-night-alt-thunderstorm",
+  "wi-night-clear",
+  "wi-rain-mix",
+  "wi-rain",
+  "wi-showers",
+  "wi-snow",
+  "wi-storm-showers",
+  "wi-thunderstorm",
+  "wi-wind-deg"
+) !default;

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

@@ -1,5 +1,4 @@
-@import "./classes-list";
-@import "./classes-wind-aliases";
+@use "variables";
 
 .wi {
   display: inline-block;
@@ -21,3 +20,9 @@
     font-size: 3.5rem;
   }
 }
+
+@mixin weather-icon($icon) {
+  .#{$icon} {
+    mask-image: url(#{variables.$weather-icons-path}/#{$icon}.svg);
+  }
+}

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

@@ -0,0 +1,6 @@
+@use "variables";
+@use "weather-icons-base";
+
+@each $icon in variables.$weather-icons-included {
+  @include weather-icons-base.weather-icon($icon);
+}

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

@@ -0,0 +1,4 @@
+@forward "variables";
+@use "weather-icons-base";
+@use "weather-icons-list";
+@use "weather-wind-aliases";

static/src/main.scss

@@ -1,7 +1,7 @@
 @import "./lib/flag-icons";
 @import "./lib/bootstrap";
 @import "./lib/bootstrap-icons";
-@import "./lib/weather-icons/weather-icons";
+@import "./lib/weather-icons";
 
 @import "./widget.scss";
 @import "./weather/weather.scss";

static/webpack.config.ts

@@ -5,9 +5,6 @@ import { fileURLToPath } from "url";
 import webpack from "webpack";
 import packageInfo from "./package.json" with { type: "json" };
 
-// in case you run into any TypeScript error when configuring `devServer`
-//import "webpack-dev-server";
-
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -49,9 +46,8 @@ const config: webpack.Configuration = {
     new CopyPlugin({
       patterns: [
         {
-          from: "./src/**/*.svg",
-          //to: "[path][name].[contenthash][ext]",
-          to: "svg/[name][ext]",
+          from: "./src/lib/weather-icons/icons/*.svg",
+          to: "weather-icons/icons/[name][ext]",
         },
         {
           from: "./node_modules/bootstrap-icons/icons/*.svg",
@@ -60,7 +56,7 @@ const config: webpack.Configuration = {
         {
           from: "./node_modules/flag-icons/flags/1x1/*.svg",
           to: "flag-icons/flags/1x1/[name][ext]",
-        }
+        },
       ],
     }),
   ],