mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 09:15:33 +00:00
more refactoring of <head>; login -> alpine ajax
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -77,3 +77,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<scroll-button></scroll-button>
|
||||||
|
|||||||
38
views/layouts/components/_head.gohtml
Normal file
38
views/layouts/components/_head.gohtml
Normal 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>
|
||||||
10
views/layouts/components/_scripts.gohtml
Normal file
10
views/layouts/components/_scripts.gohtml
Normal 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>
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user