Titelzeile

views/assets/scripts.js

@@ -1,51 +1,64 @@
-const p = "script[xslt-onload]", a = "xslt-template", u = "xslt-transformed", c = /* @__PURE__ */ new Map();
-function m() {
-  let t = htmx.findAll(p);
-  for (let e of t)
-    T(e);
+const f = "script[xslt-onload]", i = "xslt-template", m = "xslt-transformed", c = /* @__PURE__ */ new Map();
+function u() {
+  let t = htmx.findAll(f);
+  for (let r of t)
+    p(r);
 }
-function T(t) {
-  if (t.getAttribute(u) === "true" || !t.hasAttribute(a))
+function p(t) {
+  if (t.getAttribute(m) === "true" || !t.hasAttribute(i))
     return;
-  let e = "#" + t.getAttribute(a), o = c.get(e);
+  let r = "#" + t.getAttribute(i), o = c.get(r);
   if (!o) {
-    let n = htmx.find(e);
-    if (n) {
-      let l = n.innerHTML ? new DOMParser().parseFromString(n.innerHTML, "application/xml") : n.contentDocument;
-      o = new XSLTProcessor(), o.importStylesheet(l), c.set(e, o);
+    let s = htmx.find(r);
+    if (s) {
+      let l = s.innerHTML ? new DOMParser().parseFromString(s.innerHTML, "application/xml") : s.contentDocument;
+      o = new XSLTProcessor(), o.importStylesheet(l), c.set(r, o);
     } else
-      throw new Error("Unknown XSLT template: " + e);
+      throw new Error("Unknown XSLT template: " + r);
   }
-  let i = new DOMParser().parseFromString(t.innerHTML, "application/xml"), s = o.transformToFragment(i, document), r = new XMLSerializer().serializeToString(s);
-  t.outerHTML = r;
+  let a = new DOMParser().parseFromString(t.innerHTML, "application/xml"), e = o.transformToFragment(a, document), n = new XMLSerializer().serializeToString(e);
+  t.outerHTML = n;
 }
-function f() {
-  document.querySelectorAll("template[simple]").forEach((e) => {
-    let o = e.getAttribute("id"), i = e.content;
+function d() {
+  document.querySelectorAll("template[simple]").forEach((r) => {
+    let o = r.getAttribute("id"), a = r.content;
     customElements.define(
       o,
       class extends HTMLElement {
         constructor() {
-          super(), this.appendChild(i.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
+          super(), this.appendChild(a.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
         }
         connectedCallback() {
-          let s = [];
-          this.slots.forEach((r) => {
-            let n = r.getAttribute("name"), l = this.querySelector(`[slot="${n}"]`);
-            l && (r.replaceWith(l.cloneNode(!0)), s.push(l));
-          }), s.forEach((r) => {
-            r.remove();
+          let e = [];
+          this.slots.forEach((n) => {
+            let s = n.getAttribute("name"), l = this.querySelector(`[slot="${s}"]`);
+            l && (n.replaceWith(l.cloneNode(!0)), e.push(l));
+          }), e.forEach((n) => {
+            n.remove();
           });
         }
       }
     );
   });
 }
-function d() {
-  m(), htmx.on("htmx:load", function(t) {
-    m();
-  }), f();
+function h() {
+  u(), htmx.on("htmx:load", function(t) {
+    u();
+  }), d();
+}
+function T(t) {
+  t || (t = window.location.href);
+  const r = document.querySelectorAll("nav");
+  if (r && r.length > 0)
+    for (const o of r)
+      o.querySelectorAll("a, [data-url]").forEach((e) => {
+        if (e.dataset.url && e.dataset.url !== "") {
+          let n = window.location.origin + e.dataset.url;
+          t.startsWith(n) ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current");
+        } else e.href && (t.startsWith(e.href) ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current"));
+      });
 }
 export {
-  d as setup
+  T as setMenuActive,
+  h as setup
 };

views/layouts/components/_menu.gohtml

@@ -1,4 +1,43 @@
-<div class="flex flex-row justify-center mt-8 gap-x-2">
-	<a href="/reihen">Reihen</a>
-	<a href="/personen/">Personen</a>
+<div
+	class="pb-1.5 border-b border-zinc-300"
+	x-data="{ openeditionmenu: window.location.pathname.startsWith('/edition/')}">
+	<div class="flex flex-row justify-between">
+		<div>
+			<h1 class="font-bold">{{ .site.title }}</h1>
+			<h2 class="italic">{{ .site.desc }}</h2>
+		</div>
+
+		<nav
+			class="self-end font-serif font-bold flex flex-row gap-x-6 [&>a]:no-underline
+		 [&>*]:px-1.5 [&>*]:pt-1 [&>*]:-mb-1.5">
+			<a href="/reihen/">Reihen</a>
+			<a href="/personen/">Personen</a>
+			<a href="/suche/">Suche</a>
+			<button
+				data-url="/edition/"
+				class="text-slate-600 hover:text-slate-900 hover:cursor-pointer"
+				:class="openeditionmenu? 'bg-slate-200' : 'closed'"
+				@click="openeditionmenu = !openeditionmenu">
+				<i x-show="!openeditionmenu" class="ri-arrow-right-s-fill"></i>
+				<i x-show="openeditionmenu" class="ri-arrow-down-s-fill"></i>
+				Redaktion &amp; Kontakt
+			</button>
+		</nav>
+	</div>
+	<nav
+		:class="openeditionmenu? 'open' : 'closed'"
+		x-show="openeditionmenu"
+		class="submenu w-full flex flex-row justify-end pt-3 gap-x-6 font-bold font-serif
+		[&>a]:no-underline [&>*]:-mb-1.5">
+		<a href="/edition/einfuehrung/">Einführung</a>
+		<a href="/edition/dokumentation/">Dokumentation</a>
+		<a href="/edition/literatur/">Literatur</a>
+		<a href="/edition/danksagungen/">Danksagungen</a>
+		<a href="/edition/kontakt/">Kontakt</a>
+	</nav>
 </div>
+
+<script type="module">
+	import { setMenuActive } from "/assets/scripts.js";
+	setMenuActive();
+</script>

views/layouts/default/root.gohtml

@@ -30,18 +30,14 @@
 	</head>
 
 	<body class="w-full" hx-ext="response-targets" hx-boost="true">
-		<div class="container flex flex-col min-h-screen max-w-(--breakpoint-2xl) mx-auto">
-			<header>
-				{{ block "_header" . }}
-					<!-- Default app header... -->
-				{{ end }}
-			</header>
-
-			<div>
+		<div class="container flex flex-col min-h-screen max-w-(--breakpoint-xl) mx-auto">
+			<header class="px-3 py-2.5" id="header">
 				{{ block "_menu" . }}
 					<!-- Default app menu... -->
 				{{ end }}
-			</div>
+			</header>
+
+			<div></div>
 
 			<main class="">
 				{{ block "body" . }}

views/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@tailwindcss/postcss": "^4.0.0",
+        "daisyui": "^5.0.0-beta.8",
         "postcss": "^8.4.47",
         "postcss-cli": "^11.0.0",
         "prettier": "^3.3.3",
@@ -1143,6 +1144,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/daisyui": {
+      "version": "5.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.0-beta.8.tgz",
+      "integrity": "sha512-jSokqm5i+Pv1jG80wliNzMHjmcF+iMx5xRUpk0/QExVoVNyQNWeCsaWJQubPvUq7bt9nzSsQTR2uIZBoyIIoaA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
     "node_modules/dependency-graph": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",

views/package.json

@@ -23,6 +23,7 @@
   "license": "MIT",
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
+    "daisyui": "^5.0.0-beta.8",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.3.3",

views/transform/main.js

@@ -90,4 +90,32 @@ function setup() {
 	setup_templates();
 }
 
-export { setup };
+function setMenuActive(url) {
+	if (!url) {
+		url = window.location.href;
+	}
+	const menus = document.querySelectorAll("nav");
+	if (menus && menus.length > 0) {
+		for (const menu of menus) {
+			const links = menu.querySelectorAll("a, [data-url]");
+			links.forEach((link) => {
+				if (link.dataset.url && link.dataset.url !== "") {
+					let fullurl = window.location.origin + link.dataset.url;
+					if (url.startsWith(fullurl)) {
+						link.setAttribute("aria-current", "page");
+					} else {
+						link.removeAttribute("aria-current");
+					}
+				} else if (link.href) {
+					if (url.startsWith(link.href)) {
+						link.setAttribute("aria-current", "page");
+					} else {
+						link.removeAttribute("aria-current");
+					}
+				}
+			});
+		}
+	}
+}
+
+export { setup, setMenuActive };

views/transform/site.css

@@ -1,9 +1,8 @@
-@import 'tailwindcss';
-
+@import "tailwindcss";
 @theme {
-  --font-script: Rancho, ui-serif;
-  --font-sans: 'Source Sans 3', 'Merriweather Sans', ui-sans-serif;
-  --font-serif: 'Merriweather', ui-serif;
+	--font-script: Rancho, ui-serif;
+	--font-sans: "Source Sans 3", "Merriweather Sans", ui-sans-serif;
+	--font-serif: "Merriweather", ui-serif;
 }
 
 /*
@@ -15,17 +14,17 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
 }
 
 @utility font-variant-small-caps {
-  font-variant-caps: small-caps;
+	font-variant-caps: small-caps;
 }
 
 @layer base {
@@ -44,7 +43,7 @@
 	h2,
 	h3,
 	h4 {
-		@apply font-serif font-bold;
+		@apply font-serif;
 	}
 
 	a {
@@ -59,8 +58,20 @@
 		@apply ml-14 list-disc;
 	}
 
-	a[aria-current="page"] {
-		@apply text-red-500!;
+	nav > * {
+		@apply border-b-4 border-transparent hover:!border-zinc-200;
+	}
+
+	nav a[aria-current="page"] {
+		@apply text-blue-400;
+	}
+
+	nav a[aria-current="page"] {
+		@apply !border-zinc-300;
+	}
+
+	nav.submenu a[aria-current="page"] {
+		@apply text-blue-400;
 	}
 
 	main {