Testing htmx

This commit is contained in:
DrMint 2024-02-01 21:01:56 +01:00
parent f35064f2de
commit 03fe8920e8
6 changed files with 106 additions and 2 deletions

1
public/js/htmx1.9.10.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -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>