fix: 🚨 fix linters + new eslint rule

.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    route: 'readonly',
+  },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: 2020,

app/Http/Middlewares/HandleInertiaRequests.php

@@ -38,7 +38,7 @@ class HandleInertiaRequests extends Middleware
             'recaptchaKey' => config('services.google.recaptcha.public'),
             'dynamicPages' => $dynamicPages,
             'ziggy' => fn(): array => [
-                ...(new Ziggy)->toArray(),
+                ...(new Ziggy())->toArray(),
                 'location' => $request->url(),
             ],
             // More props here.

config/inertia.php

@@ -24,10 +24,8 @@ return [
         'enabled' => true,
 
         'url' => 'http://127.0.0.1:13714',
-        // avec k8s 'url' => 'http://inertia-ssr:13714',
-
+        // Avec k8s 'url' => 'http://inertia-ssr:13714',.
         // "ensure_bundle_exists" => false,
-
     ],
 
     /**

resources/ts/front/Components/Theme/Sections/CarouselSection.tsx

@@ -15,7 +15,7 @@ type CarouselSectionProps = CarouselProps & {
   itemCardSize?: {
     width?: string;
     height?: string;
-  }
+  };
 };
 
 /**
@@ -68,18 +68,18 @@ export default function CarouselSection(props: CarouselSectionProps) {
   } = props;
   const buttonProps = button
     ? {
-      button: {
-        href: button.href,
-        label: button.label,
-        ...(button.icon
-          ? {
-            icon: {
-              icon: button.icon.icon,
-            },
-          }
-          : {}),
-      },
-    }
+        button: {
+          href: button.href,
+          label: button.label,
+          ...(button.icon
+            ? {
+                icon: {
+                  icon: button.icon.icon,
+                },
+              }
+            : {}),
+        },
+      }
     : {};
   return (
     <Section

resources/ts/front/Components/Theme/TripleCol.tsx

@@ -26,7 +26,10 @@ export default function TripleCol(props: Props) {
       {cols.map((col, index) => {
         const isLast = index === cols.length - 1;
         return (
-          <div className="text-center flex flex-col items-center gap-5" key={index}>
+          <div
+            className="text-center flex flex-col items-center gap-5"
+            key={col.title.text}
+          >
             <Image
               size={`${width} ${height}`}
               image={col.image}

resources/ts/front/Pages/Errors/Default.tsx

@@ -2,21 +2,24 @@
 import { Head, Link } from "@inertiajs/react";
 // * Other
 import AppLayout from "@/front/Layouts/AppLayout";
-import useTrans from "@/hooks/use-translations";
 import DynamicPageResolver from "@/front/Components/DynamicPageResolver";
+import { GetTranslation } from "@/lib/utils";
 
 export default function Default({ status }: { status: number }) {
   return (
     <AppLayout>
       <Head title={String(status)} />
       <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
-        {status} - {useTrans(`errors.${status}.title`)}
+        {status} - {GetTranslation(`errors.${status}.title`)}
       </h1>
-      <p className="my-5">{useTrans(`errors.${status}.description`)}</p>
+      <p className="my-5">{GetTranslation(`errors.${status}.description`)}</p>
       <DynamicPageResolver pageKey="pageAccueil">
         {({ href }) => (
-          <Link href={href} className="rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline text-blue-600 hover:text-blue-600/80 visited:text-purple-600">
-            {useTrans("front.back_to_your_website")}
+          <Link
+            href={href}
+            className="rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 underline-offset-4 hover:underline text-blue-600 hover:text-blue-600/80 visited:text-purple-600"
+          >
+            {GetTranslation("front.back_to_your_website")}
           </Link>
         )}
       </DynamicPageResolver>

resources/ts/front/Pages/MadeInFrance.tsx

@@ -90,7 +90,7 @@ export default function MadeInFrance() {
 
       <CarouselSection
         itemCardSize={{
-          width: "w-[85%] md:w-72 lg:w-72"
+          width: "w-[85%] md:w-72 lg:w-72",
         }}
         variant={bgColors.PRIMARY}
         title={{

resources/ts/ssr.tsx

@@ -1,10 +1,10 @@
-import { createInertiaApp } from '@inertiajs/react';
-import createServer from '@inertiajs/react/server';
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import ReactDOMServer from 'react-dom/server';
-import { type RouteName, route } from 'ziggy-js';
+import { createInertiaApp } from "@inertiajs/react";
+import createServer from "@inertiajs/react/server";
+import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
+import ReactDOMServer from "react-dom/server";
+import { type RouteName, route } from "ziggy-js";
 
-const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+const appName = import.meta.env.VITE_APP_NAME || "Laravel";
 
 createServer((page) =>
   createInertiaApp({
@@ -27,9 +27,8 @@ createServer((page) =>
           // @ts-expect-error
           location: new URL(page.props.ziggy.location),
         });
+        return <App {...props} />;
       /* eslint-enable */
-
-      return <App {...props} />;
     },
   }),
 );

resources/ts/ziggy.d.ts

@@ -1,5 +1,5 @@
-import type { route as routeFn } from 'ziggy-js';
+import type { route as routeFn } from "ziggy-js";
 
 declare global {
-    const route: typeof routeFn;
+  const route: typeof routeFn;
 }