Merge branch 'remove-turbo'

package.json

@@ -12,15 +12,12 @@
   },
   "dependencies": {
     "@astrojs/node": "^6.0.0",
-    "@hotwired/turbo": "^7.3.0",
     "accept-language": "^3.0.18",
     "astro": "^3.0.3",
     "astro-icon": "next",
     "hono": "^3.5.7",
-    "htmx.org": "^1.9.5",
     "js-cookie": "^3.0.5",
     "node-cache": "^5.1.2",
-    "sanitize.css": "^13.0.0",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {

src/pages/_components/AppLayout/AppLayout.astro

@@ -1,8 +1,7 @@
 ---
 import Html from "pages/_components/Html.astro";
 import Navbar from "./components/Navbar.astro";
-import { parseCookie } from "utils/astro";
+import { CookieNames, parseCookie } from "utils/cookies";
-import { CookieNames } from "utils/cookies";
 import MenuPanel from "./components/MenuPanel.astro";
 
 interface Props {

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

@@ -18,18 +18,18 @@ const { isReduced = false } = Astro.props;
   /* ------------------------------------------- HTML ------------------------------------------- */
 }
 
-<a
+<a id="accords-logo" href={getLocalizedUrl("/", locale)}>
-  id="accords-logo"
-  data-turbo-confirm="Do you want to leave this page?"
-  href={getLocalizedUrl("/", locale)}
->
   <Icon name="accords" />
 </a>
 
 <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>
 
@@ -118,9 +118,11 @@ const { isReduced = false } = Astro.props;
   </p>
 
   <div id="social-links">
-    <Icon name="github-brands" />
+    <a href="https://github.com/accords-Library"
-    <Icon name="x-brands" />
+      ><Icon name="github-brands" /></a
-    <Icon name="discord-brands" />
+    >
+    <a href="https://twitter.com/AccordsLibrary"><Icon name="x-brands" /></a>
+    <a href="/discord"><Icon name="discord-brands" /></a>
   </div>
 </div>
 
@@ -190,7 +192,7 @@ const { isReduced = false } = Astro.props;
     place-items: center;
     gap: 2rem;
 
-    & > svg {
+    & > a > svg {
       width: 40px;
       height: 40px;
     }
@@ -203,28 +205,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

@@ -1,7 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import { parseCookie } from "utils/astro";
+import { CookieNames, parseCookie } from "utils/cookies";
-import { CookieNames } from "utils/cookies";
 
 const themeColors = parseCookie<string>(
   Astro.cookies.get(CookieNames.THEME_COLOR),
@@ -50,38 +49,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

@@ -1,6 +1,5 @@
 ---
-import { parseCookie } from "utils/astro";
+import { CookieNames, parseCookie } from "utils/cookies";
-import { CookieNames } from "utils/cookies";
 
 interface Props {
   title: string;
@@ -22,7 +21,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" />
@@ -297,7 +295,7 @@ const themeColors = parseCookie(
   @font-face {
     font-family: "Vollkorn";
     src: url("/fonts/Vollkorn-Bold.woff2") format("woff2");
-    font-weight: bold;
+    font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
@@ -305,7 +303,7 @@ const themeColors = parseCookie(
   @font-face {
     font-family: "Noto Sans";
     src: url("/fonts/NotoSans-Medium.woff2") format("woff2");
-    font-weight: medium;
+    font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
@@ -313,7 +311,7 @@ const themeColors = parseCookie(
   @font-face {
     font-family: "Noto Sans";
     src: url("/fonts/NotoSans-Bold.woff2") format("woff2");
-    font-weight: bold;
+    font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
@@ -321,7 +319,7 @@ const themeColors = parseCookie(
   @font-face {
     font-family: "Angelic Agrippa";
     src: url("/fonts/AngelicAgrippa-Regular.woff2") format("woff2");
-    font-weight: normal;
+    font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
@@ -448,38 +446,4 @@ const themeColors = parseCookie(
     --font-headers: "Vollkorn", serif;
     --font-angelic: "Angelic Agrippa", serif;
   }
-</style>
+</style>
-
-{
-  /* -------------------------------------------- JS -------------------------------------------- */
-}
-
-<script>
-  import { Elementos } from "utils/Elementos";
-  import { observable } from "utils/micro-observables";
-  import { onRequestEnd, onRequestStart, onLoad } from "utils/turbo";
-
-  onLoad(() => {
-    const progressBar = new Elementos("#turbo-progress-bar");
-    const isLoading = observable(false);
-    const isCompleted = observable(false);
-
-    progressBar.setClass("loading", isLoading);
-    progressBar.setClass("completed", isCompleted);
-
-    let requestStartTime = 0;
-
-    onRequestStart(() => {
-      isLoading.set(true);
-      isCompleted.set(false);
-      requestStartTime = Date.now();
-    });
-
-    onRequestEnd(() => {
-      isLoading.set(false);
-      if (Date.now() - requestStartTime > 500) {
-        isCompleted.set(true);
-      }
-    });
-  });
-</script>

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/astro.ts

@@ -1,8 +0,0 @@
-import { type AstroCookies } from "astro";
-
-type AstroCookie = ReturnType<AstroCookies["get"]>;
-
-export const parseCookie = <T>(cookies: AstroCookie, defaultValue: T): T => {
-  const value: T | null = JSON.parse(cookies?.value ?? "null");
-  return value ?? defaultValue;
-};

src/utils/cookies.ts

@@ -1,3 +1,12 @@
+import { type AstroCookies } from "astro";
+
+type AstroCookie = ReturnType<AstroCookies["get"]>;
+
+export const parseCookie = <T>(cookies: AstroCookie, defaultValue: T): T => {
+  const value: T | null = JSON.parse(cookies?.value ?? "null");
+  return value ?? defaultValue;
+};
+
 export enum CookieNames {
   MENU_PANEL_REDUCED = "menuPanelReduced",
   THEME_COLOR = "themeColor",

src/utils/events.ts

@@ -1,5 +0,0 @@
-export const customEvents = {
-  mainPanel: {
-    reduce: { toggle: "mainPanel.reduce.toggle" },
-  },
-};

src/utils/turbo.ts

@@ -1,14 +0,0 @@
-export const onLoad = (callback: () => void) =>
-  document.documentElement.addEventListener("turbo:load", callback);
-
-export const onRequestStart = (callback: () => void) =>
-  document.documentElement.addEventListener(
-    "turbo:before-fetch-request",
-    callback
-  );
-
-export const onRequestEnd = (callback: () => void) =>
-  document.documentElement.addEventListener(
-    "turbo:render",
-    callback
-  );