Remove turbo

src/pages/_components/AppLayout/components/MenuPanel.astro

@@ -29,7 +29,11 @@ const { isReduced = false } = Astro.props;
 <p id="title" class:list={{ hidden: isReduced }}>Accord’s Library</p>
 
 <div id="buttons" class:list={["when-js", { reduced: isReduced }]}>
-  <ReduceToggleButton icon={isReduced ? "material-symbols:chevron-right": "material-symbols:chevron-left"} />
+  <ReduceToggleButton
+    icon={isReduced
+      ? "material-symbols:chevron-right"
+      : "material-symbols:chevron-left"}
+  />
   <ThemeToggleButton />
 </div>
 
@@ -203,28 +207,24 @@ const { isReduced = false } = Astro.props;
 
 <script>
   import tippy, { createSingleton } from "tippy.js";
-  import { onLoad } from "utils/turbo";
+  createSingleton(
-
+    tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
-  onLoad(() => {
+      content: (reference) => {
-    createSingleton(
+        const templateQuery = reference.getAttribute("data-tippy-template")!;
-      tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
+        const template = reference.querySelector(templateQuery)!;
-        content: (reference) => {
+        const container = document.createElement("div");
-          const templateQuery = reference.getAttribute("data-tippy-template")!;
+        container.append(template.cloneNode(true));
-          const template = reference.querySelector(templateQuery)!;
+        container.style.fontSize = "90%";
-          const container = document.createElement("div");
+        return container;
-          container.append(template.cloneNode(true));
+      },
-          container.style.fontSize = "90%";
+    }),
-          return container;
+    {
-        },
+      allowHTML: true,
-      }),
+      placement: "right",
-      {
+      delay: 250,
-        allowHTML: true,
+      moveTransition: "transform 0.2s ease",
-        placement: "right",
+      maxWidth: "18rem",
-        delay: 250,
+      inertia: true,
-        moveTransition: "transform 0.2s ease",
+    }
-        maxWidth: "18rem",
+  );
-        inertia: true,
-      }
-    );
-  });
 </script>

src/pages/_components/AppLayout/components/Navbar.astro

@@ -70,28 +70,25 @@ const { title, showSubPanel } = Astro.props;
 <script>
   import { Elementos } from "utils/Elementos";
   import { observable } from "utils/micro-observables";
-  import { onLoad } from "utils/turbo";
 
-  onLoad(() => {
+  const isMenuPanelOpened = observable(false);
-    const isMenuPanelOpened = observable(false);
+  const menuPanel = new Elementos("#menu-panel");
-    const menuPanel = new Elementos("#menu-panel");
+  const menuPanelToggle = new Elementos("#toggle-menu-panel");
-    const menuPanelToggle = new Elementos("#toggle-menu-panel");
 
-    menuPanelToggle.onClick(() => {
+  menuPanelToggle.onClick(() => {
-      isMenuPanelOpened.update((current) => !current);
+    isMenuPanelOpened.update((current) => !current);
-      isSubPanelOpened.set(false);
+    isSubPanelOpened.set(false);
-    });
-    menuPanel.setClass("opened", isMenuPanelOpened);
-    menuPanelToggle.setClass("on", isMenuPanelOpened);
-
-    const isSubPanelOpened = observable(false);
-    const subPanel = new Elementos("#sub-panel");
-    const subPanelToggle = new Elementos("#toggle-sub-panel");
-    subPanelToggle.onClick(() => {
-      isSubPanelOpened.update((current) => !current);
-      isMenuPanelOpened.set(false);
-    });
-    subPanel.setClass("opened", isSubPanelOpened);
-    subPanelToggle.setClass("on", isSubPanelOpened);
   });
+  menuPanel.setClass("opened", isMenuPanelOpened);
+  menuPanelToggle.setClass("on", isMenuPanelOpened);
+
+  const isSubPanelOpened = observable(false);
+  const subPanel = new Elementos("#sub-panel");
+  const subPanelToggle = new Elementos("#toggle-sub-panel");
+  subPanelToggle.onClick(() => {
+    isSubPanelOpened.update((current) => !current);
+    isMenuPanelOpened.set(false);
+  });
+  subPanel.setClass("opened", isSubPanelOpened);
+  subPanelToggle.setClass("on", isSubPanelOpened);
 </script>

src/pages/_components/AppLayout/components/ReduceToggleButton.astro

@@ -24,22 +24,18 @@ const { icon } = Astro.props;
   import { Elementos } from "utils/Elementos";
   import { CookieNames } from "utils/cookies";
   import { observableWithPersistence } from "utils/micro-observables";
-  import { onLoad } from "utils/turbo";
 
-  onLoad(() => {
+  const toggleReducedButton = new Elementos("#reduce-toggle");
-    const toggleReducedButton = new Elementos("#reduce-toggle");
+  const menuPanel = new Elementos("#menu-panel");
-    const menuPanel = new Elementos("#menu-panel");
 
-    const isReduced = observableWithPersistence(
+  const isReduced = observableWithPersistence(
-      CookieNames.MENU_PANEL_REDUCED,
+    CookieNames.MENU_PANEL_REDUCED,
-      false
+    false
-    );
+  );
 
-    toggleReducedButton.onClick(() => {
+  toggleReducedButton.onClick(() => {
-      isReduced.update((oldValue) => !oldValue);
+    isReduced.update((oldValue) => !oldValue);
-      Turbo.cache.clear();
-    });
-
-    menuPanel.setClass("reduced", isReduced);
   });
+
+  menuPanel.setClass("reduced", isReduced);
 </script>

src/pages/_components/AppLayout/components/ThemeToggleButton.astro

@@ -50,38 +50,29 @@ const themeColors = parseCookie<string>(
   import { Elementos } from "utils/Elementos";
   import { CookieNames } from "utils/cookies";
   import { observableWithPersistence } from "utils/micro-observables";
-  import { onLoad } from "utils/turbo";
 
-  onLoad(() => {
+  const body = new Elementos("body");
-    const body = new Elementos("body");
+  const themeToggleButton = new Elementos("#theme-toggle");
-    const themeToggleButton = new Elementos("#theme-toggle");
 
-    const themeColor = observableWithPersistence(
+  const themeColor = observableWithPersistence(
-      CookieNames.THEME_COLOR,
+    CookieNames.THEME_COLOR,
-      "theme-color-light"
+    "theme-color-light"
-    );
+  );
 
-    const isDarkMode = themeColor.select(
+  const isDarkMode = themeColor.select((value) => value === "theme-color-dark");
-      (value) => value === "theme-color-dark"
-    );
 
-    themeToggleButton.onClick(() => {
+  themeToggleButton.onClick(() => {
-      themeColor.update((oldValue) =>
+    themeColor.update((oldValue) =>
-        oldValue === "theme-color-light"
+      oldValue === "theme-color-light"
-          ? "theme-color-dark"
+        ? "theme-color-dark"
-          : "theme-color-light"
+        : "theme-color-light"
-      );
-      Turbo.cache.clear();
-    });
-
-    themeToggleButton.setClass(
-      { ifFalse: "light", ifTrue: "dark" },
-      isDarkMode
-    );
-
-    body.setClass(
-      { ifFalse: "theme-color-light", ifTrue: "theme-color-dark" },
-      isDarkMode
     );
   });
+
+  themeToggleButton.setClass({ ifFalse: "light", ifTrue: "dark" }, isDarkMode);
+
+  body.setClass(
+    { ifFalse: "theme-color-light", ifTrue: "theme-color-dark" },
+    isDarkMode
+  );
 </script>

src/pages/_components/Html.astro

@@ -22,7 +22,6 @@ const themeColors = parseCookie(
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title>{title}</title>
-    <script is:inline src="/js/turbo.es2017-umd.js" async defer></script>
     <link href="/css/sanitize.min.css" rel="stylesheet" />
     <link href="/css/tippy.css" rel="stylesheet" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -43,10 +42,6 @@ const themeColors = parseCookie(
   </body>
 </html>
 
-<script>
-  Turbo.setProgressBarDelay(0);
-</script>
-
 {
   /* ------------------------------------------- CSS -------------------------------------------- */
 }
@@ -389,20 +384,6 @@ const themeColors = parseCookie(
     }
   }
 
-  .turbo-progress-bar {
-    position: fixed;
-    display: block;
-    top: 0;
-    left: 0;
-    height: 5px;
-    background-color: #b07751;
-    z-index: 2147483647;
-    transition:
-      width 1000ms ease-out,
-      opacity 500ms 500ms ease-in;
-    transform: translate3d(0, 0, 0);
-  }
-
   .when-no-js {
     display: none;
   }

src/typings/turbo.d.ts

@@ -1,7 +0,0 @@
-// https://turbo.hotwired.dev/reference/drive
-declare namespace Turbo {
-  const cache: {
-    clear: () => void;
-  };
-  const setProgressBarDelay: (delayInMs: number) => void;
-}

src/utils/turbo.ts

@@ -1,2 +0,0 @@
-export const onLoad = (callback: () => void) =>
-  document.documentElement.addEventListener("turbo:load", callback);