fix code style issues

.github/workflows/ci.yml

@@ -31,12 +31,13 @@ jobs:
       image: oven/bun
     steps:
       - uses: actions/checkout@v4
-      - name: Install Biome
-        run: bun install -g biome
-      - name: Run Biome lint
-        run: biome lint --write
-      - name: Run Biome format check
-        run: biome format --write
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+          token: ${{ secrets.BIOME_TOKEN }}
+      - name: Run Biome
+        run: biome ci .
 
   build-and-push-docker:
     needs: [build]

biome.json

@@ -6,7 +6,7 @@
     },
     "files": {
         "ignoreUnknown": false,
-        "includes": ["**","!**/dist"]
+        "includes": ["**", "!**/dist"]
     },
     "formatter": {
         "enabled": true,

src/api/homeAssistant.ts

@@ -1,8 +1,8 @@
-const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
+const token =
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3N2JmOTk1ODI3MzA0ZWIzOWYwNThjMzQ4YTY3ZDJkYyIsImlhdCI6MTc1NjQ3NTM4OSwiZXhwIjoyMDcxODM1Mzg5fQ.TZZ4SUGlERuIVrhzC_wfCN-qS1wSAKNN9uMMDjkqOgA";
 
 async function fetchTentHumidity() {
-    const url =
-        `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
+    const url = `https://home.rivercry.com/api/states/sensor.third_reality_inc_3rths0224z_luftfeuchtigkeit_2`;
     const response = await fetch(url, {
         method: "GET",
         headers: {

src/components/Dashboard/Dashboard.tsx

@@ -12,6 +12,8 @@ import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
 import Weather from "@/components/Weather/Weather";
 
+import amogus from "/img/amogus.png";
+import FourTwenty from "../FourTwenty/FourTwenty";
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -42,6 +44,9 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
+            <div className={style.amogus}>
+                <img src={amogus} alt="Amogus" />
+            </div>
             <div className={style.body}>
                 <CardColumn>
                     <Card icon="🚊" name="Timetable">
@@ -56,6 +61,9 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
+                        <Card icon="🍁" name="420">
+                            <FourTwenty />
+                        </Card>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>

src/components/Dashboard/style.module.css

@@ -7,7 +7,7 @@
 
 .body {
     height: 100%;
-    margin: 30px;
+    padding: 30px;
     overflow: scroll;
 }
 
@@ -25,3 +25,30 @@
 .night {
     background-color: #2a3f55;
 }
+
+.amogus {
+    z-index: 100;
+    position: absolute;
+    scale: 60%;
+    animation:
+        x 10s linear infinite alternate,
+        y 7s linear infinite alternate;
+}
+
+@keyframes x {
+    from {
+        left: 0;
+    }
+    to {
+        left: calc(100vw - 70px);
+    }
+}
+
+@keyframes y {
+    from {
+        top: 0;
+    }
+    to {
+        top: calc(100vh - 90px);
+    }
+}

src/components/Datetime/Datetime.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import clockImage from "/img/clock.png"
+import clockImage from "/img/clock.png";
 
 import style from "./style.module.css";
 

src/components/Footer/Footer.tsx

@@ -1,6 +1,5 @@
-import style from "./style.module.css";
-
 import weedImage from "/img/weed.png";
+import style from "./style.module.css";
 
 export default function Footer() {
     return (

src/components/FourTwenty/FourTwenty.tsx

@@ -0,0 +1,37 @@
+// import style from "./style.module.css";
+
+// function Timer({ hours, minutes }: { hours: number; minutes: number }) {
+//     const x = hours > 0 ? `${hours}h ` : "";
+//     const y = minutes > 0 ? `${minutes % 60}m` : "";
+
+//     return (
+//         <div>
+//             <p>
+//                 {x}
+//                 {y}
+//             </p>
+//         </div>
+//     );
+// }
+
+// function FourTwentyLoading() {}
+
+// function FourTwentySmoking() {
+//     return (
+//         <div className={style.container}>
+//             <img
+//                 className={style.image}
+//                 src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjFlYnhzYzJnc3ZzejBnOGZzcHFpNGpxOHNrN2dwcnZ3NmZ2eWJ0dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5xaOcLRnsWIB0CkfE3u/giphy.gif"
+//                 alt="Smoking"
+//             />
+//         </div>
+//     );
+// }
+
+export default function FourTwenty() {
+    return (
+        <div>
+            <FourTwentySmoking />
+        </div>
+    );
+}

src/components/FourTwenty/style.module.css

@@ -0,0 +1,5 @@
+.container img {
+    all: unset;
+    object-fit: contain;
+    width: 200px;
+}

vite.config.ts

@@ -1,7 +1,7 @@
 import path from "node:path";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
-import mkcert from 'vite-plugin-mkcert'
+import mkcert from "vite-plugin-mkcert";
 
 export default defineConfig({
     plugins: [react(), mkcert()],