Testing htmx

src/components/AppLayout/components/Html.astro

@@ -359,3 +359,11 @@ const { currentTheme } = Astro.locals;
     }
   }
 </style>
+
+<script>
+  import htmx from "htmx.org";
+  // On any page navigation, reprocess HTMX
+  document.addEventListener("astro:page-load", () => {
+    htmx.process(document.querySelector("main")!);
+  });
+</script>

src/components/Button.astro

@@ -54,7 +54,7 @@ const icons =
     cursor: pointer;
 
     transition-duration: 250ms;
-    transition-property: translate, box-shadow, background-color, color,
+    transition-property: padding-top, box-shadow, background-color, color,
       border-color;
     transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 
@@ -79,7 +79,7 @@ const icons =
       background-color: var(--color-elevation-2);
       box-shadow: inset 0 0.1em 0.1em 0.1em var(--color-shadow-2);
 
-      translate: 0 0.1em;
+      padding-top: 0.2em;
     }
   }
 </style>

src/components/Tooltip.astro

@@ -14,6 +14,7 @@ const { class: className, trigger = "mouseenter focus" } = Astro.props;
 
 <script>
   import tippy from "tippy.js";
+  import htmx from "htmx.org";
 
   class TippyTooltip extends HTMLElement {
     constructor() {
@@ -24,6 +25,9 @@ const { class: className, trigger = "mouseenter focus" } = Astro.props;
         content: (ref) =>
           ref.querySelector(":scope > template")?.innerHTML ?? "",
         interactive: true,
+        onMount: (instance) => {
+          htmx.process(instance.popper);
+        },
       });
     }
   }

src/pages/[locale]/others/index.astro

@@ -0,0 +1,32 @@
+---
+import AppLayout from "components/AppLayout/AppLayout.astro";
+import Content from "pages/api/content.astro";
+
+const { currentLocale } = Astro.locals;
+---
+
+{
+  /* ------------------------------------------- HTML ------------------------------------------- */
+}
+
+<AppLayout
+  breadcrumb={[{ name: "Drakengard", slug: "drakengard" }]}
+  title="Others"
+  description="This is a page to test the Temporary Language Override™ feature"
+>
+  <div id="main" slot="main">
+    <Content lang={currentLocale} />
+  </div>
+</AppLayout>
+
+{
+  /* ------------------------------------------- CSS -------------------------------------------- */
+}
+
+<style>
+  #main {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 0.7rem 1rem;
+  }
+</style>

src/pages/api/content.astro

@@ -0,0 +1,59 @@
+---
+import Button from "components/Button.astro";
+import Tooltip from "components/Tooltip.astro";
+import { getI18n, locales } from "translations/translations";
+
+export const partial = true;
+
+interface Props {
+  lang?: string;
+}
+
+const reqUrl = new URL(Astro.request.url);
+const lang = Astro.props.lang ?? reqUrl.searchParams.get("lang")!;
+
+const { t } = await getI18n(lang);
+---
+
+<div class="hx-swap-content">
+  <Tooltip trigger="click" class="when-js">
+    <Button
+      icon="material-symbols:translate"
+      title={lang.toUpperCase()}
+      ariaLabel={t("header.topbar.language.tooltip")}
+    />
+
+    <div id="content" slot="tooltip-content">
+      {
+        locales.map((locale) => (
+          <a
+            class:list={{ current: locale === lang }}
+            hx-get={`/api/content?lang=${locale}`}
+            hx-trigger="click"
+            hx-target="closest .hx-swap-content"
+            hx-swap="outerHTML"
+          >
+            {locale.toString().toUpperCase()}
+          </a>
+        ))
+      }
+    </div>
+  </Tooltip>
+  <div set:html={t("home.description")} />
+</div>
+
+<style>
+  #content {
+    display: grid;
+    gap: 0.5em;
+
+    & > a {
+      cursor: pointer;
+    }
+
+    & > .current {
+      color: var(--color-base-750);
+      text-decoration: underline 0.08em var(--color-base-650);
+    }
+  }
+</style>