migrate images

_src/styles/_utils.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+@use "sass:list";
+@mixin dark {
+  @if map.get(jekyll-config(), "issue") {
+    @content;
+  } @else {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  }
+}
+
+@mixin noissue {
+  @if map.get(jekyll-config(), "issue") {
+  } @else {
+    @content;
+  }
+}
+
+@mixin imgurl($img, $style: "light", $scales: 4, $ext: "png") {
+  background-image: url("#{getimgName($img, $style, 1, $ext)}");
+  $imgset: ();
+  @for $scale from 1 through $scales {
+    $imgset: list.append(
+      $imgset,
+      url("#{getimgName($img, $style, $scale, $ext)}") #{$scale}x,
+      comma
+    );
+  }
+  @each $pfx in ("-webkit-", "") {
+    background-image: #{$pfx}image-set($imgset);
+  }
+}
+
+@function getimgName($img, $style, $scale, $ext) {
+  @if $scale == 1 {
+    $scale: "";
+  } @else {
+    $scale: "@#{$scale}x";
+  }
+  @if $style == "light" {
+    $style: "";
+  } @else {
+    $style: "-#{$style}";
+  }
+  @return "#{$img}#{$style}#{$scale}.#{$ext}";
+}

_src/styles/notfound.scss

@@ -26,37 +26,13 @@
   @include utils.noissue {
     opacity: 0.5;
     filter: grayscale(0.2);
-    background-image: url(/static/img/missing.png);
-    background-image: -webkit-image-set(
-      url("/static/img/missing.png") 1x,
-      url("/static/img/missing@2x.png") 2x,
-      url("/static/img/missing@3x.png") 3x,
-      url("/static/img/missing@4x.png") 4x
-    );
-    background-image: image-set(
-      url("/static/img/missing.png") 1x,
-      url("/static/img/missing@2x.png") 2x,
-      url("/static/img/missing@3x.png") 3x,
-      url("/static/img/missing@4x.png") 4x
-    );
+    @include utils.imgurl("../imgs/missing", "light");
   }
 
   @include utils.dark {
     opacity: 1;
     filter: none;
-    background-image: url(/static/img/missing-dark.png);
-    background-image: -webkit-image-set(
-      url("/static/img/missing-dark.png") 1x,
-      url("/static/img/missing-dark@2x.png") 2x,
-      url("/static/img/missing-dark@3x.png") 3x,
-      url("/static/img/missing-dark@4x.png") 4x
-    );
-    background-image: image-set(
-      url("/static/img/missing-dark.png") 1x,
-      url("/static/img/missing-dark@2x.png") 2x,
-      url("/static/img/missing-dark@3x.png") 3x,
-      url("/static/img/missing-dark@4x.png") 4x
-    );
+    @include utils.imgurl("../imgs/missing", "dark");
   }
 }
 

_src/styles/utils.scss

@@ -1,17 +0,0 @@
-@use "sass:map";
-@mixin dark {
-  @if map.get(jekyll-config(), "issue") {
-    @content;
-  } @else {
-    @media (prefers-color-scheme: dark) {
-      @content;
-    }
-  }
-}
-
-@mixin noissue {
-  @if map.get(jekyll-config(), "issue") {
-  } @else {
-    @content;
-  }
-}

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "homepage": "https://github.com/tuna/mirror-web",
   "scripts": {
-    "format": "prettier --write \"_src/**\""
+    "format": "prettier --write \"_src/**/*.vue\" \"_src/**/*.html\" \"_src/**/*.js\" \"_src/**/*.scss\""
   },
   "dependencies": {
     "@vitejs/plugin-legacy": "^5.3.2",