more refactoring of <head>; login -> alpine ajax

This commit is contained in:
Simon Martens
2025-05-29 14:15:02 +02:00
parent 0d0918fb5d
commit cbbfa77865
9 changed files with 86 additions and 160 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,46 +1,11 @@
<!doctype html> <!doctype html>
<html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}> <html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
<head> <head>
<meta charset="UTF-8" />
<meta
name="htmx-config"
content='{"defaultSwapStyle":"outerHTML", "scrollBehavior": "instant"}' />
{{ block "head" . }} {{ block "head" . }}
<!-- Default Head elements --> <!-- Default Head elements -->
{{ end }} {{ end }}
{{ if .isDev }} {{ template "_head" . }}
<link rel="icon" href="/assets/logo/dev_favicon.png" />
<meta name="robots" content="noindex" />
{{ else }}
{{ if .url }}
<link rel="canonical" href="{{ .url }}" />
{{ end }}
<link rel="icon" href="/assets/logo/favicon.png" />
{{ end }}
<script src="/assets/js/alpine.min.js" defer></script>
<script src="/assets/js/htmx.min.js" defer></script>
<script src="/assets/js/htmx-response-targets.js" defer></script>
<script src="/assets/js/mark.min.js" defer></script>
<script type="module" src="/assets/scripts.js"></script>
<link href="/assets/css/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<script type="module">
document.body.addEventListener("htmx:responseError", function (event) {
const config = event.detail.requestConfig;
if (config.boosted) {
document.body.innerHTML = event.detail.xhr.responseText;
const newUrl = event.detail.xhr.responseURL || config.url;
window.history.pushState(null, "", newUrl);
}
});
</script>
</head> </head>
<body class="w-full min-h-full" hx-ext="response-targets" hx-boost="true"> <body class="w-full min-h-full" hx-ext="response-targets" hx-boost="true">
@@ -49,5 +14,7 @@
<!-- Default app body... --> <!-- Default app body... -->
{{ end }} {{ end }}
</div> </div>
{{ template "_scripts" . }}
</body> </body>
</html> </html>

View File

@@ -1,46 +1,11 @@
<!doctype html> <!doctype html>
<html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}> <html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
<head> <head>
<meta charset="UTF-8" />
<meta
name="htmx-config"
content='{"defaultSwapStyle":"outerHTML", "scrollBehavior": "instant"}' />
{{ block "head" . }} {{ block "head" . }}
<!-- Default Head elements --> <!-- Default Head elements -->
{{ end }} {{ end }}
{{ if .isDev }} {{ template "_head" . }}
<link rel="icon" href="/assets/logo/dev_favicon.png" />
<meta name="robots" content="noindex" />
{{ else }}
{{ if .url }}
<link rel="canonical" href="{{ .url }}" />
{{ end }}
<link rel="icon" href="/assets/logo/favicon.png" />
{{ end }}
<script src="/assets/js/alpine.min.js" defer></script>
<script src="/assets/js/htmx.min.js" defer></script>
<script src="/assets/js/htmx-response-targets.js" defer></script>
<script src="/assets/js/mark.min.js" defer></script>
<script type="module" src="/assets/scripts.js"></script>
<link href="/assets/css/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<script type="module">
document.body.addEventListener("htmx:responseError", function (event) {
const config = event.detail.requestConfig;
if (config.boosted) {
document.body.innerHTML = event.detail.xhr.responseText;
const newUrl = event.detail.xhr.responseURL || config.url;
window.history.pushState(null, "", newUrl);
}
});
</script>
</head> </head>
<body class="w-full min-h-full" hx-ext="response-targets" hx-boost="true"> <body class="w-full min-h-full" hx-ext="response-targets" hx-boost="true">
@@ -55,27 +20,13 @@
{{ end }} {{ end }}
</main> </main>
{{ block "_footer" . }} {{ template "_footer" . }}
{{ end }}
<scroll-button></scroll-button>
{{ block "scripts" . }} {{ block "scripts" . }}
<!-- Default scripts... --> <!-- Default scripts... -->
{{ end }} {{ end }}
{{ template "_scripts" . }}
<script type="module">
const hash = window.location.hash;
if (hash) {
const stripped = hash.slice(1);
const element = document.getElementById(stripped);
if (element) {
element.setAttribute("aria-current", "location");
}
}
</script>
</div> </div>
</body> </body>
</html> </html>

View File

@@ -77,3 +77,5 @@
</div> </div>
</div> </div>
</footer> </footer>
<scroll-button></scroll-button>

View File

@@ -0,0 +1,38 @@
{{ $model := . }}
<meta charset="UTF-8" />
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML", "scrollBehavior": "instant"}' />
{{ if $model.isDev }}
<link rel="icon" href="/assets/logo/dev_favicon.png" />
<meta name="robots" content="noindex" />
{{ else }}
{{ if $model.url }}
<link rel="canonical" href="{{ $model.url }}" />
{{ end }}
<link rel="icon" href="/assets/logo/favicon.png" />
{{ end }}
<script src="/assets/js/alpine.ajax.min.js"></script>
<script src="/assets/js/alpine.min.js"></script>
<script src="/assets/js/htmx.min.js"></script>
<script src="/assets/js/htmx-response-targets.js"></script>
<script src="/assets/js/mark.min.js" defer></script>
<script type="module" src="/assets/scripts.js"></script>
<link href="/assets/css/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<script type="module">
document.body.addEventListener("htmx:responseError", function (event) {
const config = event.detail.requestConfig;
if (config.boosted) {
document.body.innerHTML = event.detail.xhr.responseText;
const newUrl = event.detail.xhr.responseURL || config.url;
window.history.pushState(null, "", newUrl);
}
});
</script>

View File

@@ -0,0 +1,10 @@
<script type="module">
const hash = window.location.hash;
if (hash) {
const stripped = hash.slice(1);
const element = document.getElementById(stripped);
if (element) {
element.setAttribute("aria-current", "location");
}
}
</script>

View File

@@ -1,47 +1,12 @@
<!doctype html> <!doctype html>
<html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}> <html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
<head> <head>
<meta charset="UTF-8" />
<meta
name="htmx-config"
content='{"defaultSwapStyle":"outerHTML", "scrollBehavior": "instant"}' />
{{ block "head" . }} {{ block "head" . }}
<!-- Default Head elements --> <!-- Default Head elements -->
{{ end }} {{ end }}
{{ if .isDev }} {{ template "_head" . }}
<link rel="icon" href="/assets/logo/dev_favicon.png" />
<meta name="robots" content="noindex" />
{{ else }}
{{ if .url }}
<link rel="canonical" href="{{ .url }}" />
{{ end }}
<link rel="icon" href="/assets/logo/favicon.png" />
{{ end }}
<script src="/assets/js/alpine.ajax.min.js" defer></script>
<script src="/assets/js/alpine.min.js" defer></script>
<script src="/assets/js/htmx.min.js" defer></script>
<script src="/assets/js/htmx-response-targets.js" defer></script>
<script src="/assets/js/mark.min.js" defer></script>
<script type="module" src="/assets/scripts.js"></script>
<link href="/assets/css/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/style.css" />
<script type="module">
document.body.addEventListener("htmx:responseError", function (event) {
const config = event.detail.requestConfig;
if (config.boosted) {
document.body.innerHTML = event.detail.xhr.responseText;
const newUrl = event.detail.xhr.responseURL || config.url;
window.history.pushState(null, "", newUrl);
}
});
</script>
</head> </head>
<body class="w-full text-lg" hx-ext="response-targets" hx-boost="true"> <body class="w-full text-lg" hx-ext="response-targets" hx-boost="true">
@@ -58,27 +23,13 @@
{{ end }} {{ end }}
</main> </main>
{{ block "_footer" . }} {{ template "_footer" . }}
{{ end }}
<scroll-button></scroll-button>
{{ block "scripts" . }} {{ block "scripts" . }}
<!-- Default scripts... --> <!-- Default scripts... -->
{{ end }} {{ end }}
{{ template "_scripts" . }}
<script type="module">
const hash = window.location.hash;
if (hash) {
const stripped = hash.slice(1);
const element = document.getElementById(stripped);
if (element) {
element.setAttribute("aria-current", "location");
}
}
</script>
</div> </div>
</body> </body>
</html> </html>

View File

@@ -18,14 +18,29 @@
</div> </div>
</div> </div>
<h1 class="text-2xl self-baseline text-center w-full my-6 text-slate-900">Musenalm | Login</h1> <h1 class="text-2xl self-baseline text-center w-full my-6 text-slate-900">Musenalm | Login</h1>
{{ if $model.error }} <form
<div class="w-full grid grid-cols-3 gap-4"
class="text-red-800 text-sm mt-2 rounded bg-red-200 p-2 font-bold border-red-700 method="POST"
border-2 mb-3"> hx-boost="false"
{{ $model.error }} x-target.4xx="ajax-replace"
x-target.away="_top"
x-target="body"
aria-label="Login-Formular">
<div id="ajax-replace" class="col-span-3">
{{ template "_usermessage" $model }}
<input
type="hidden"
name="csrf_nonce"
id="csrf_nonce"
required
value="{{ $model.csrf_nonce }}" />
<input
type="hidden"
name="csrf_token"
id="csrf_token"
required
value="{{ $model.csrf_token }}" />
</div> </div>
{{ end }}
<form class="w-full grid grid-cols-3 gap-4" method="POST">
<div <div
class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5 class="col-span-3 border-2 border-transparent focus-within:border-slate-600 px-2 py-1 pb-1.5
bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100"> bg-slate-200 focus-within:bg-slate-50 rounded-md transition-all duration-100">
@@ -69,18 +84,6 @@
</div> </div>
</div> </div>
<div class="col-span-3"> <div class="col-span-3">
<input
type="hidden"
name="csrf_nonce"
id="csrf_nonce"
required
value="{{ $model.csrf_nonce }}" />
<input
type="hidden"
name="csrf_token"
id="csrf_token"
required
value="{{ $model.csrf_token }}" />
<button <button
type="submit" type="submit"
class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md class="w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md

View File

@@ -86,6 +86,10 @@
@apply ml-14 list-disc; @apply ml-14 list-disc;
} }
label {
@apply select-none;
}
#mainmenu nav > a { #mainmenu nav > a {
@apply hover:!border-zinc-200; @apply hover:!border-zinc-200;
} }