Update Prettier and fix linting issues

Author: floscher

client/package.json

@@ -38,7 +38,7 @@
     "@types/node": "^18.16.10",
     "@unhead/vue": "^1.1.26",
     "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/tsconfig": "^0.4.0",
     "eslint": "^8.36.0",

client/src/App.vue

@@ -86,12 +86,18 @@ footer.page-footer {
       max-width: 16rem;
       opacity: 0.6;
       clip-path: polygon(0 5%, 100% 5%, 100% 55%, 0 55%);
-      transition: 15s ease-in opacity, 20s ease-in clip-path, 5s ease-in max-width;
+      transition:
+        15s ease-in opacity,
+        20s ease-in clip-path,
+        5s ease-in max-width;
     }
 
     &:hover img {
       opacity: 1;
-      transition: 1s ease-out opacity, 1s ease-out clip-path, 1s ease-out max-width;
+      transition:
+        1s ease-out opacity,
+        1s ease-out clip-path,
+        1s ease-out max-width;
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       max-width: 25rem;
     }

client/src/components/LightDarkToggler.vue

@@ -11,8 +11,18 @@
 
 <style lang="scss">
 .emoji {
-  font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Android Emoji, EmojiSymbols, EmojiOne Mozilla, Twemoji Mozilla,
-    Segoe UI Symbol, Noto Color Emoji Compat, emoji, noto-emojipedia-fallback;
+  font-family:
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Noto Color Emoji,
+    Android Emoji,
+    EmojiSymbols,
+    EmojiOne Mozilla,
+    Twemoji Mozilla,
+    Segoe UI Symbol,
+    Noto Color Emoji Compat,
+    emoji,
+    noto-emojipedia-fallback;
   font-weight: 400;
 }
 
@@ -62,7 +72,9 @@
     height: calc(var(--element-size) * 0.4);
     width: calc(var(--element-size) * 0.4);
     transform: translateX(0);
-    transition: transform 0.3s ease, background-color 0.5s ease;
+    transition:
+      transform 0.3s ease,
+      background-color 0.5s ease;
   }
 
   .modeswitch-toggle-checked {

client/src/components/SplitFlap.vue

@@ -44,16 +44,19 @@ function animate() {
   if (numStepsRemaining > 0) {
     isAnimated.isAnimated = true;
     // Wait for the animation to finish
-    setTimeout(() => {
-      currentChar.value = nextChar.value;
-      // Execute immediately before the style calculations for the next frame
-      requestAnimationFrame(() => {
-        isAnimated.isAnimated = false;
-        nextChar.value = findNextChar(currentChar.value) ?? " ";
-        // Wait with continuing the animation until immediately before the style calculations for the next frame
-        requestAnimationFrame(animate);
-      });
-    }, timeout.value + Math.random() * 50);
+    setTimeout(
+      () => {
+        currentChar.value = nextChar.value;
+        // Execute immediately before the style calculations for the next frame
+        requestAnimationFrame(() => {
+          isAnimated.isAnimated = false;
+          nextChar.value = findNextChar(currentChar.value) ?? " ";
+          // Wait with continuing the animation until immediately before the style calculations for the next frame
+          requestAnimationFrame(animate);
+        });
+      },
+      timeout.value + Math.random() * 50,
+    );
   }
 }
 

client/src/debounce.ts

@@ -16,9 +16,12 @@ export const debounce = <T>(callback: () => T, timeout = 500): ComputedRef<T> =>
       if (lastTimeout !== null) {
         clearTimeout(lastTimeout);
       }
-      lastTimeout = window.setTimeout(() => {
-        current.value = newValue;
-      }, Math.max(timeout, 1));
+      lastTimeout = window.setTimeout(
+        () => {
+          current.value = newValue;
+        },
+        Math.max(timeout, 1),
+      );
     }
   });
   return computed(() => current.value);

client/src/util/api-client.ts

@@ -69,7 +69,10 @@ interface ApiRequestJsonPayload<T> {
   json: NonNullable<T>;
 }
 class ApiRequestJsonPayloadWithFiles<T> implements ApiRequestJsonPayload<T> {
-  constructor(public json: NonNullable<T>, public files: File[]) {}
+  constructor(
+    public json: NonNullable<T>,
+    public files: File[],
+  ) {}
 }
 
 function toFormData<T>(payload: ApiRequestJsonPayloadWithFiles<T> | null): FormData | null {

client/src/views/PostFormView.vue

@@ -203,7 +203,9 @@
   text-align: center;
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 0 #ffc377;
-  transition: 0.5s ease-out box-shadow, 3s ease border-color;
+  transition:
+    0.5s ease-out box-shadow,
+    3s ease border-color;
   width: 100%;
 
   .plus {
@@ -219,7 +221,9 @@
   &:active {
     border: 2px dashed #aaa;
     box-shadow: inset 0 -15rem 0 0 #ffc377;
-    transition: 0.5s ease-in box-shadow, 3s ease border-color;
+    transition:
+      0.5s ease-in box-shadow,
+      3s ease border-color;
   }
 }
 

package-lock.json

@@ -26,12 +26,12 @@
   "devDependencies": {
     "@types/multer": "^1.4.7",
     "concurrently": "^8.0.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-unused-imports": "2.0.0",
     "json-source-map": "0.6.1",
     "lerna": "8.1.3",
     "npm-run-all": "4.1.5",
-    "prettier": "3.3.2"
+    "prettier": "^3.3.2"
   },
   "author": "fumiX GmbH & Co KG",
   "bugs": {

package.json

@@ -47,8 +47,8 @@ router.get("/", async (req, res) => {
               <span>Code <code>${userInfosById[it.oauthId].code}</code></span><br>
               ${it.user.roles.map((r) => '<span class="badge rounded-pill text-bg-info m-1">' + r + "</span>").join("")}<br>
               <a class="btn btn-outline-primary" href="${req.query.redirect_uri}?state=${req.query.state ?? ""}&code=${
-          userInfosById[it.oauthId].code
-        }">Login</a>
+                userInfosById[it.oauthId].code
+              }">Login</a>
             </form>
           </div>
         </li>`;

portal/src/routes/login.ts

@@ -44,7 +44,7 @@
     "node-fetch": "^3.3.1",
     "nodemon": "^2.0.20",
     "openid-client": "^5.4.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.3.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   }

server/package.json

@@ -11,16 +11,19 @@ export function generateShareImage(title: string, date: Date, image: Image | Can
   const titleWords = title.split(/\s+/).map((word) => ({ word, width: context.measureText(word).width }));
 
   const lines = titleWords
-    .reduce((acc, current) => {
-      const lastLineIndex = acc.length - 1;
-      if (lastLineIndex >= 0 && acc[lastLineIndex].width + current.width < 600) {
-        acc[lastLineIndex].line += ` ${current.word}`;
-        acc[lastLineIndex].width += current.width;
-      } else {
-        acc.push({ line: current.word, width: current.width });
-      }
-      return acc;
-    }, [] as { line: string; width: number }[])
+    .reduce(
+      (acc, current) => {
+        const lastLineIndex = acc.length - 1;
+        if (lastLineIndex >= 0 && acc[lastLineIndex].width + current.width < 600) {
+          acc[lastLineIndex].line += ` ${current.word}`;
+          acc[lastLineIndex].width += current.width;
+        } else {
+          acc.push({ line: current.word, width: current.width });
+        }
+        return acc;
+      },
+      [] as { line: string; width: number }[],
+    )
     .map((line) => line.line);
   const overlong = lines.length > 6;
   lines.length = Math.min(lines.length, 6); // max 4 lines