Move css files into per page/component

src/layouts/BaseLayout/BaseLayout.astro

@@ -2,8 +2,8 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/css/bootstrap-grid.min.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "/src/styles/main.css";
-import "/src/styles/tailwind.css";
+import "./main.css";
+import "./tailwind.css";
 import { Image } from "@astrojs/image/components";
 import DeviceSearch from "../../components/DeviceSearch/DeviceSearch.astro";
 

src/pages/model/[model].astro

@@ -9,7 +9,7 @@ import { DEVICE_MANAGER } from "../../scripts/deviceManager";
 import deviceJson from "../../scripts/device_info.json";
 import type { ModelValue } from "../../scripts/model";
 import { ModelEnum } from "../../scripts/parse";
-import "/src/styles/upload.css";
+import "./upload.css";
 import * as Matrix from "../../scripts/utils/matrix";
 import * as Rect from "../../scripts/utils/rect";
 import * as Quad from "../../scripts/utils/quad";
@@ -59,7 +59,7 @@ function getImageRect(fullPath: string): Rect.Rect {
 function computeDeviceScreenRect(
   screenCoordQuad: Quad.Quad,
   deviceImageRect: Rect.Rect,
-  templateImageRect: Rect.Rect | null,
+  templateImageRect: Rect.Rect | null
 ): Rect.Rect {
   // Assume horizontally center aligned. Try to compute the screen coord space size
   // by adding margins to the screen rect width
@@ -79,7 +79,7 @@ function computeDeviceScreenRect(
     Matrix.scale(imgToScreenCoordSpaceRatio),
 
     // Scale to percentage space
-    Matrix.scale(100 / deviceImageRect.width, 100 / deviceImageRect.height),
+    Matrix.scale(100 / deviceImageRect.width, 100 / deviceImageRect.height)
   );
 
   return Rect.fromQuad(Quad.transformWithMatrix(screenCoordQuad, mat));
@@ -92,14 +92,14 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
     deviceDetail.orientations[0].template_image_size != null
       ? Rect.fromDimension(
           deviceDetail.orientations[0].template_image_size[0],
-          deviceDetail.orientations[0].template_image_size[1],
+          deviceDetail.orientations[0].template_image_size[1]
         )
       : null;
   imgRect = getImageRect(getImagePath(deviceDetail.imagePath[0][0]));
   deviceScreenRect = computeDeviceScreenRect(
     deviceDetail.orientations[0].coords,
     imgRect,
-    templateImageRect,
+    templateImageRect
   );
 }
 ---
@@ -113,7 +113,7 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
         typeof WebAssembly.instantiate === "function"
       ) {
         const module = new WebAssembly.Module(
-          Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00),
+          Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00)
         );
         if (module instanceof WebAssembly.Module)
           return (
@@ -127,7 +127,7 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
 
   const mainElem = document.getElementById("main-page");
   const webassemblyNotSupportedElem = document.getElementById(
-    "webassembly-not-supported",
+    "webassembly-not-supported"
   );
   if (supportWebAssembly()) {
     if (webassemblyNotSupportedElem) {
@@ -275,7 +275,7 @@ if (deviceDetail.imagePath != null && deviceDetail.imagePath.length >= 1) {
                             }
                           />
                         </li>
-                      ),
+                      )
                     )}
                   </ul>
                 </div>