Single person page + reihen list

dbmodels/dbdata.go

@@ -407,6 +407,7 @@ var AGENT_RELATIONS = []string{
 var SERIES_RELATIONS = []string{
 	"Bevorzugter Reihentitel",
 	"Alternativer Reihentitel",
+	"Alternatives Titelblatt",
 	"Späterer Reihentitel",
 	"Früherer Reihentitel",
 	"In anderer Sprache",

helpers/functions/slices.go

@@ -3,3 +3,12 @@ package functions
 func Length(arr []any) int {
 	return len(arr)
 }
+
+func Contains(arr []string, val string) bool {
+	for _, v := range arr {
+		if v == val {
+			return true
+		}
+	}
+	return false
+}

migrations/seed/r_entries_series.go

@@ -42,7 +42,7 @@ func RecordsFromRelationBändeReihen(
 		case "1":
 			record.SetType("Bevorzugter Reihentitel")
 		case "2":
-			record.SetType("Alternativer Reihentitel")
+			record.SetType("Alternatives Titelblatt")
 		case "3":
 			record.SetType("In anderer Sprache")
 		case "4":
@@ -50,11 +50,11 @@ func RecordsFromRelationBändeReihen(
 			_ = app.Save(entry)
 			record.SetType("In anderer Sprache")
 		case "5":
-			record.SetType("Alternativer Reihentitel")
+			record.SetType("Alternatives Titelblatt")
 		case "6":
-			record.SetType("Früherer Reihentitel")
-		case "7":
 			record.SetType("Späterer Reihentitel")
+		case "7":
+			record.SetType("Früherer Reihentitel")
 		}
 
 		rel := record.Type()

pagemodels/abk.go

@@ -31,3 +31,19 @@ func (a *Abk) Bedeutung() string {
 func (a *Abk) SetBedeutung(bedeutung string) {
 	a.Set(F_BEDEUTUNG, bedeutung)
 }
+
+func GetAbks(app core.App) (map[string]string, error) {
+	ret := make(map[string]string)
+	abks := []*Abk{}
+
+	err := app.RecordQuery(GeneratePageTableName(P_DOK_NAME, T_ABK_NAME)).All(&abks)
+	if err != nil {
+		return ret, err
+	}
+
+	for _, abk := range abks {
+		ret[abk.Abk()] = abk.Bedeutung()
+	}
+
+	return ret, nil
+}

pages/almanach.go

@@ -48,7 +48,7 @@ func (p *AlmanachPage) Setup(router *router.Router[*core.RequestEvent], app core
 		}
 
 		data["srelations"] = srelations
-		data["series"] = s
+		data["series"] = series
 
 		places, err := dbmodels.PlacesForEntry(app, entry)
 		if err != nil {
@@ -80,12 +80,27 @@ func (p *AlmanachPage) Setup(router *router.Router[*core.RequestEvent], app core
 		}
 		data["agents"] = agents
 
+		err = p.getAbbr(app, data)
+		if err != nil {
+			return engine.Response404(e, err, data)
+		}
+
 		return p.Get(e, engine, data)
 	})
 
 	return nil
 }
 
+func (p *AlmanachPage) getAbbr(app core.App, data map[string]interface{}) error {
+	abbrs, err := pagemodels.GetAbks(app)
+	if err != nil {
+		return err
+	}
+
+	data["abbrs"] = abbrs
+	return nil
+}
+
 func (p *AlmanachPage) Get(request *core.RequestEvent, engine *templating.Engine, data map[string]interface{}) error {
 	return engine.Response200(request, TEMPLATE_ALMANACH, data)
 }

pages/reihen.go

@@ -18,6 +18,7 @@ const (
 	PARAM_PERSON = "agent"
 	PARAM_PLACE  = "place"
 	PARAM_YEAR   = "year"
+	PARAM_HIDDEN = "hidden"
 )
 
 func init() {
@@ -65,6 +66,7 @@ func (p *ReihenPage) Setup(router *router.Router[*core.RequestEvent], app core.A
 func (p *ReihenPage) YearRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
 	year := e.Request.URL.Query().Get(PARAM_YEAR)
 	data := map[string]interface{}{}
+	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
 	data[PARAM_YEAR] = year
 
 	y, err := strconv.Atoi(year)
@@ -86,6 +88,7 @@ func (p *ReihenPage) YearRequest(app core.App, engine *templating.Engine, e *cor
 func (p *ReihenPage) LetterRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
 	letter := e.Request.URL.Query().Get(PARAM_LETTER)
 	data := map[string]interface{}{}
+	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
 	if letter == "" {
 		data["startpage"] = true
 		letter = "A"
@@ -114,6 +117,7 @@ func (p *ReihenPage) PersonRequest(app core.App, engine *templating.Engine, e *c
 	person := e.Request.URL.Query().Get(PARAM_PERSON)
 	data := map[string]interface{}{}
 	data[PARAM_PERSON] = person
+	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
 
 	agent, err := dbmodels.AgentForId(app, person)
 	if err != nil {
@@ -137,6 +141,7 @@ func (p *ReihenPage) PlaceRequest(app core.App, engine *templating.Engine, e *co
 	place := e.Request.URL.Query().Get(PARAM_PLACE)
 	data := map[string]interface{}{}
 	data[PARAM_PLACE] = place
+	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
 
 	pl, err := dbmodels.PlaceForId(app, place)
 	if err != nil {
@@ -160,6 +165,7 @@ func (p *ReihenPage) SearchRequest(app core.App, engine *templating.Engine, e *c
 	search := e.Request.URL.Query().Get(PARAM_SEARCH)
 	data := map[string]interface{}{}
 	data[PARAM_SEARCH] = search
+
 	// INFO: normalization happens in the db query
 	series, altseries, err := dbmodels.BasicSearchSeries(app, search)
 

pages/suche.go

@@ -20,7 +20,7 @@ type SuchePage struct {
 const (
 	URL_SUCHE      = "/suche/{type}"
 	URL_SUCHE_ALT  = "/suche/{$}"
-	DEFAULT_SUCHE  = "/suche/reihen"
+	DEFAULT_SUCHE  = "/suche/baende"
 	PARAM_QUERY    = "q"
 	PARAM_EXTENDED = "extended"
 	TEMPLATE_SUCHE = "/suche/"

templating/engine.go

@@ -51,6 +51,7 @@ func (e *Engine) funcs() error {
 	e.AddFunc("Arr", functions.Arr)
 	e.AddFunc("HasPrefix", strings.HasPrefix)
 	e.AddFunc("Dict", functions.Dict)
+	e.AddFunc("Contains", functions.Contains)
 	return nil
 }
 

views/assets/scripts.js

@@ -1,48 +1,48 @@
-var _ = (s) => {
+var L = (s) => {
   throw TypeError(s);
 };
-var L = (s, i, t) => i.has(s) || _("Cannot " + t);
-var d = (s, i, t) => (L(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), a = (s, i, t, e) => (L(s, i, "write to private field"), e ? e.call(s, t) : i.set(s, t), t), u = (s, i, t) => (L(s, i, "access private method"), t);
-const S = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", y = "filter-list", p = "filter-list-list", k = "filter-list-item", A = "filter-list-input", g = "filter-list-searchable", M = "scroll-button", F = "tool-tip";
-var l, f, x;
-class $ {
+var T = (s, e, t) => e.has(s) || L("Cannot " + t);
+var g = (s, e, t) => (T(s, e, "read from private field"), t ? t.call(s) : e.get(s)), c = (s, e, t) => e.has(s) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), u = (s, e, t, i) => (T(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), f = (s, e, t) => (T(s, e, "access private method"), t);
+const w = "script[xslt-onload]", v = "xslt-template", A = "xslt-transformed", k = "filter-list", m = "filter-list-list", M = "filter-list-item", y = "filter-list-input", x = "filter-list-searchable", B = "scroll-button", P = "tool-tip", I = "abbrev-tooltips";
+var h, b, E;
+class R {
   constructor() {
-    n(this, f);
-    n(this, l);
-    a(this, l, /* @__PURE__ */ new Map());
+    c(this, b);
+    c(this, h);
+    u(this, h, /* @__PURE__ */ new Map());
   }
   setup() {
-    let i = htmx.findAll(S);
-    for (let t of i)
-      u(this, f, x).call(this, t);
+    let e = htmx.findAll(w);
+    for (let t of e)
+      f(this, b, E).call(this, t);
   }
   hookupHTMX() {
-    htmx.on("htmx:load", (i) => {
+    htmx.on("htmx:load", (e) => {
       this.setup();
     });
   }
 }
-l = new WeakMap(), f = new WeakSet(), x = function(i) {
-  if (i.getAttribute(w) === "true" || !i.hasAttribute(b))
+h = new WeakMap(), b = new WeakSet(), E = function(e) {
+  if (e.getAttribute(A) === "true" || !e.hasAttribute(v))
     return;
-  let t = "#" + i.getAttribute(b), e = d(this, l).get(t);
-  if (!e) {
-    let c = htmx.find(t);
-    if (c) {
-      let v = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
-      e = new XSLTProcessor(), e.importStylesheet(v), d(this, l).set(t, e);
+  let t = "#" + e.getAttribute(v), i = g(this, h).get(t);
+  if (!i) {
+    let l = htmx.find(t);
+    if (l) {
+      let S = l.innerHTML ? new DOMParser().parseFromString(l.innerHTML, "application/xml") : l.contentDocument;
+      i = new XSLTProcessor(), i.importStylesheet(S), g(this, h).set(t, i);
     } else
       throw new Error("Unknown XSLT template: " + t);
   }
-  let r = new DOMParser().parseFromString(i.innerHTML, "application/xml"), T = e.transformToFragment(r, document), E = new XMLSerializer().serializeToString(T);
-  i.outerHTML = E;
+  let r = new DOMParser().parseFromString(e.innerHTML, "application/xml"), n = i.transformToFragment(r, document), a = new XMLSerializer().serializeToString(n);
+  e.outerHTML = a;
 };
-var o, h, m;
-class I extends HTMLElement {
+var o, p, _;
+class H extends HTMLElement {
   constructor() {
     super();
-    n(this, h);
-    n(this, o, !1);
+    c(this, p);
+    c(this, o, !1);
     this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
   }
   static get observedAttributes() {
@@ -55,40 +55,40 @@ class I extends HTMLElement {
     return this._items;
   }
   connectedCallback() {
-    this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && a(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
+    this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && u(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
   }
-  attributeChangedCallback(t, e, r) {
-    t === "data-url" && e !== r && (this._url = r, this.render()), t === "data-filterstart" && e !== r && (this._filterstart = r === "true", this.render()), t === "data-placeholder" && e !== r && (this._placeholder = r, this.render());
+  attributeChangedCallback(t, i, r) {
+    t === "data-url" && i !== r && (this._url = r, this.render()), t === "data-filterstart" && i !== r && (this._filterstart = r === "true", this.render()), t === "data-placeholder" && i !== r && (this._placeholder = r, this.render());
   }
   onInput(t) {
     t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
   }
   onGainFocus(t) {
-    t.target && t.target.tagName.toLowerCase() === "input" && (a(this, o, !1), this.renderList());
+    t.target && t.target.tagName.toLowerCase() === "input" && (u(this, o, !1), this.renderList());
   }
   onLoseFocus(t) {
-    let e = this.querySelector("input");
-    if (t.target && t.target === e) {
+    let i = this.querySelector("input");
+    if (t.target && t.target === i) {
       if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
         return;
-      e.value = "", this._filter = "", this._filterstart && a(this, o, !0), this.renderList();
+      i.value = "", this._filter = "", this._filterstart && u(this, o, !0), this.renderList();
     }
   }
   onEnter(t) {
     if (t.target && t.target.tagName.toLowerCase() === "input" && t.key === "Enter") {
       t.preventDefault();
-      const e = this.querySelector("a");
-      e && e.click();
+      const i = this.querySelector("a");
+      i && i.click();
     }
   }
   mark() {
     if (typeof Mark != "function")
       return;
-    let t = this.querySelector("#" + p);
+    let t = this.querySelector("#" + m);
     if (!t)
       return;
-    let e = new Mark(t.querySelectorAll("." + g));
-    this._filter && e.mark(this._filter, {
+    let i = new Mark(t.querySelectorAll("." + x));
+    this._filter && i.mark(this._filter, {
       separateWordSearch: !0
     });
   }
@@ -123,11 +123,11 @@ class I extends HTMLElement {
     return t.name;
   }
   getLinkText(t) {
-    let e = this.getSearchText(t);
-    return e === "" ? "" : `<span class="${g}">${e}</span>`;
+    let i = this.getSearchText(t);
+    return i === "" ? "" : `<span class="${x}">${i}</span>`;
   }
   renderList() {
-    let t = this.querySelector("#" + p);
+    let t = this.querySelector("#" + m);
     t && (t.outerHTML = this.List()), this.mark();
   }
   render() {
@@ -139,7 +139,7 @@ class I extends HTMLElement {
         `;
   }
   ActiveDot(t) {
-    return u(this, h, m).call(this, t), "";
+    return f(this, p, _).call(this, t), "";
   }
   NoItems(t) {
     return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
@@ -152,7 +152,7 @@ class I extends HTMLElement {
 						<input
 								type="text"
 								placeholder="${this._placeholder}"
-								class="${A} w-full placeholder:italic px-2 py-0.5" />
+								class="${y} w-full placeholder:italic px-2 py-0.5" />
 						</div>
 				</div>
 				`;
@@ -161,21 +161,21 @@ class I extends HTMLElement {
     let t = this._items;
     if (this._filter)
       if (this._filterstart)
-        t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
+        t = this._items.filter((i) => this.getSearchText(i).toLowerCase().startsWith(this._filter.toLowerCase()));
       else {
-        let e = this._filter.split(" ");
-        t = this._items.filter((r) => e.every((T) => this.getSearchText(r).toLowerCase().includes(T.toLowerCase())));
+        let i = this._filter.split(" ");
+        t = this._items.filter((r) => i.every((n) => this.getSearchText(r).toLowerCase().includes(n.toLowerCase())));
       }
     return `
-							<div id="${p}" class="${p} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, o) ? "hidden" : ""}">
+							<div id="${m}" class="${m} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${g(this, o) ? "hidden" : ""}">
 								${t.map(
-      (e, r) => `
+      (i, r) => `
 									<a
-										href="${this._url}${this.getHREF(e)}"
-										class="${k} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${r % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
-										${u(this, h, m).call(this, e) ? 'aria-current="page"' : ""}>
-										${this.ActiveDot(e)}
-										${this.getLinkText(e)}
+										href="${this._url}${this.getHREF(i)}"
+										class="${M} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${r % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
+										${f(this, p, _).call(this, i) ? 'aria-current="page"' : ""}>
+										${this.ActiveDot(i)}
+										${this.getLinkText(i)}
 									</a>
 								`
     ).join("")}
@@ -184,13 +184,13 @@ class I extends HTMLElement {
 				`;
   }
 }
-o = new WeakMap(), h = new WeakSet(), m = function(t) {
+o = new WeakMap(), p = new WeakSet(), _ = function(t) {
   if (!t)
     return !1;
-  let e = this.getHREF(t);
-  return !(e === "" || !window.location.href.endsWith(e));
+  let i = this.getHREF(t);
+  return !(i === "" || !window.location.href.endsWith(i));
 };
-class B extends HTMLElement {
+class C extends HTMLElement {
   constructor() {
     super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
   }
@@ -226,12 +226,12 @@ class B extends HTMLElement {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 }
-class C extends HTMLElement {
+class F extends HTMLElement {
   static get observedAttributes() {
-    return ["position"];
+    return ["position", "timeout"];
   }
   constructor() {
-    super(), this._tooltipBox = null;
+    super(), this._tooltipBox = null, this._timeout = 200, this._hideTimeout = null, this._hiddenTimeout = null;
   }
   connectedCallback() {
     this.classList.add(
@@ -242,8 +242,8 @@ class C extends HTMLElement {
       "leading-none",
       "[&>*]:leading-normal"
     );
-    const i = this.querySelector(".data-tip"), t = i ? i.innerHTML : "Tooltip";
-    i && i.remove(), this._tooltipBox = document.createElement("div"), this._tooltipBox.innerHTML = t, this._tooltipBox.className = [
+    const e = this.querySelector(".data-tip"), t = e ? e.innerHTML : "Tooltip";
+    e && e.remove(), this._tooltipBox = document.createElement("div"), this._tooltipBox.innerHTML = t, this._tooltipBox.className = [
       "opacity-0",
       "hidden",
       "absolute",
@@ -261,20 +261,20 @@ class C extends HTMLElement {
       "font-sans"
     ].join(" "), this.appendChild(this._tooltipBox), this._updatePosition(), this.addEventListener("mouseenter", () => this._showTooltip()), this.addEventListener("mouseleave", () => this._hideTooltip());
   }
-  attributeChangedCallback(i, t, e) {
-    i === "position" && this._tooltipBox && this._updatePosition();
+  attributeChangedCallback(e, t, i) {
+    e === "position" && this._tooltipBox && this._updatePosition(), e === "timeout" && i && (this._timeout = parseInt(i) || 200);
   }
   _showTooltip() {
-    this._tooltipBox.classList.remove("hidden"), setTimeout(() => {
+    clearTimeout(this._hideTimeout), clearTimeout(this._hiddenTimeout), this._tooltipBox.classList.remove("hidden"), setTimeout(() => {
       this._tooltipBox.classList.remove("opacity-0"), this._tooltipBox.classList.add("opacity-100");
     }, 16);
   }
   _hideTooltip() {
-    setTimeout(() => {
-      this._tooltipBox.classList.remove("opacity-100"), this._tooltipBox.classList.add("opacity-0"), setTimeout(() => {
+    this._hideTimeout = setTimeout(() => {
+      this._tooltipBox.classList.remove("opacity-100"), this._tooltipBox.classList.add("opacity-0"), this._hiddenTimeout = setTimeout(() => {
         this._tooltipBox.classList.add("hidden");
-      }, 200);
-    }, 100);
+      }, this._timeout + 100);
+    }, this._timeout);
   }
   _updatePosition() {
     switch (this._tooltipBox.classList.remove(
@@ -334,11 +334,142 @@ class C extends HTMLElement {
     }
   }
 }
-customElements.define(y, I);
-customElements.define(M, B);
-customElements.define(F, C);
+class d extends HTMLElement {
+  static get observedAttributes() {
+    return ["data-text", "data-abbrevmap"];
+  }
+  static get defaultAbbrevMap() {
+    return {
+      "#": "Hinweis auf weitere Informationen in der Anmerkung.",
+      $: "vermutlich",
+      "+++": "Inhalte aus mehreren Almanachen interpoliert",
+      B: "Blatt",
+      BB: "Blätter",
+      C: "Corrigenda",
+      Diagr: "Diagramm",
+      G: "Graphik",
+      "G-Verz": "Verzeichnis der Kupfer u. ä.",
+      GG: "Graphiken",
+      Hrsg: "Herausgeber",
+      "I-Verz": "Inhaltsverzeichnis",
+      Kal: "Kalendarium",
+      Kr: "Karte",
+      MusB: "Musikbeigabe",
+      MusBB: "Musikbeigaben",
+      S: "Seite",
+      SS: "Seiten",
+      Sp: "Spiegel",
+      T: "Titel",
+      TG: "Titelgraphik, Titelportrait etc",
+      "TG r": "Titelgraphik, Titelportrait etc recto",
+      "TG v": "Titelgraphik, Titelportrait etc verso",
+      Tab: "Tabelle",
+      UG: "Umschlaggraphik",
+      "UG r": "Umschlaggraphik recto",
+      "UG v": "Umschlaggraphik verso",
+      VB: "Vorsatzblatt",
+      Vf: "Verfasser",
+      VrlgM: "Verlagsmitteilung",
+      Vrwrt: "Vorwort",
+      ar: "arabische Paginierung",
+      ar1: "erste arabische Paginierung",
+      ar2: "zweite arabische Paginierung",
+      ar3: "dritte arabische Paginierung",
+      ar4: "vierte arabische Paginierung",
+      ar5: "fünfte arabische Paginierung",
+      ar6: "sechste arabische Paginierung",
+      ar7: "siebte arabische Paginierung",
+      gA: "graphische Anleitung",
+      gT: "graphischer Titel",
+      gTzA: "graphische Tanzanleitung",
+      nT: "Nachtitel",
+      röm: "römische Paginierung",
+      röm1: "erste römische Paginierung",
+      röm2: "zweite römische Paginierung",
+      röm3: "dritte römische Paginierung",
+      röm4: "vierte römische Paginierung",
+      röm5: "fünfte römische Paginierung",
+      röm6: "sechste römische Paginierung",
+      röm7: "siebte römische Paginierung",
+      vT: "Vortitel",
+      zT: "Zwischentitel",
+      "§§": "Hinweis auf Mängel im Almanach (Beschädigungen, fehlende Graphiken, unvollständige Sammlungen etc) in der Anmerkung"
+    };
+  }
+  constructor() {
+    super(), this._abbrevMap = d.defaultAbbrevMap;
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && (e === "data-abbrevmap" && this._parseAndSetAbbrevMap(i), this.render());
+  }
+  _parseAndSetAbbrevMap(e) {
+    if (!e) {
+      this._abbrevMap = d.defaultAbbrevMap;
+      return;
+    }
+    try {
+      this._abbrevMap = JSON.parse(e);
+    } catch {
+      this._abbrevMap = d.defaultAbbrevMap;
+    }
+  }
+  setAbbrevMap(e) {
+    typeof e == "object" && e !== null && (this._abbrevMap = e, this.render());
+  }
+  get text() {
+    return this.getAttribute("data-text") || "";
+  }
+  set text(e) {
+    this.setAttribute("data-text", e);
+  }
+  render() {
+    this.innerHTML = this.transformText(this.text, this._abbrevMap);
+  }
+  transformText(e, t) {
+    let i = "", r = 0;
+    for (; r < e.length; ) {
+      if (r > 0 && !this.isSpaceOrPunct(e[r - 1])) {
+        i += e[r], r++;
+        continue;
+      }
+      const n = this.findLongestAbbrevAt(e, r, t);
+      if (n) {
+        const { match: a, meaning: l } = n;
+        i += `
+            <tool-tip position="top" class="!inline" timeout="300">
+              <div class="data-tip p-2 text-sm text-white bg-gray-700 rounded shadow">
+                ${l}
+              </div>
+              <span class="cursor-help text-blue-900 hover:text-slate-800">
+                ${a}
+              </span>
+            </tool-tip>
+          `, r += a.length;
+      } else
+        i += e[r], r++;
+    }
+    return i;
+  }
+  findLongestAbbrevAt(e, t, i) {
+    let r = null, n = 0;
+    for (const a of Object.keys(i))
+      e.startsWith(a, t) && a.length > n && (r = a, n = a.length);
+    return r ? { match: r, meaning: i[r] } : null;
+  }
+  isSpaceOrPunct(e) {
+    return /\s|[.,;:!?]/.test(e);
+  }
+}
+customElements.define(I, d);
+customElements.define(k, H);
+customElements.define(B, C);
+customElements.define(P, F);
 export {
-  I as FilterList,
-  B as ScrollButton,
-  $ as XSLTParseProcess
+  d as AbbreviationTooltips,
+  H as FilterList,
+  C as ScrollButton,
+  R as XSLTParseProcess
 };

views/routes/almanach/body.gohtml

@@ -1,3 +1,169 @@
 {{ $model := . }}
+{{ $isGer := false }}
+{{ $isFra := false }}
+{{ $isEng := false }}
 
-{{ $model.entry.TitleStmt }}
+
+<div class="container-normal" id="">
+	<div class="flex flex-col" id="entrydata">
+		<div class="entryrow">
+			<div class="fieldlabel">Almanach-Nummer</div>
+			<div class="fieldvalue">{{ $model.entry.MusenalmID }}</div>
+		</div>
+		{{- if $model.entry.PreferredTitle -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Kurztitel</div>
+				<div class="fieldvalue">{{ $model.entry.PreferredTitle }}</div>
+			</div>
+		{{- end -}}
+		{{- if $model.entry.TitleStmt -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Titel</div>
+				<div class="fieldvalue">{{ $model.entry.TitleStmt }}</div>
+			</div>
+		{{- end -}}
+		<div class="entryrow">
+			<div class="fieldlabel">Jahr</div>
+			<div class="fieldvalue">
+				{{- if $model.entry.Year -}}
+					<a href="/reihen?year={{ $model.entry.Year }}&hidden=true">{{ $model.entry.Year }}</a>
+				{{- else -}}
+					[keine Angabe]
+				{{- end -}}
+			</div>
+		</div>
+		{{- if $model.entry.ResponsibilityStmt -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Herausgeber</div>
+				<div class="fieldvalue">{{ $model.entry.ResponsibilityStmt }}</div>
+			</div>
+		{{- end -}}
+		{{- if $model.entry.Extent -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Umfang</div>
+				<div class="fieldvalue">
+					<abbrev-tooltips data-text="{{ $model.entry.Extent }}"></abbrev-tooltips>
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.entry.Language -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Sprache</div>
+				<div class="fieldvalue">
+					{{- range $i, $lang := $model.entry.Language -}}
+						{{- if $i -}},{{- end -}}
+						{{- if eq $lang "ger" -}}
+							{{ $isGer = true }}
+							Deutsch
+						{{- else if eq $lang "eng" -}}
+							{{ $isEng = true }}
+							Englisch
+						{{- else if eq $lang "fre" -}}
+							{{ $isFra = true }}
+							Französisch
+						{{- else if eq $lang "ita" -}}
+							Italienisch
+						{{- else if eq $lang "lat" -}}
+							Latein
+						{{- else -}}
+							{{ $lang }}
+						{{- end -}}
+					{{- end -}}
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.entry.References -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Nachweise</div>
+				<div class="fieldvalue">
+					{{- $model.entry.References -}}
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.series -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Reihen</div>
+				<div class="fieldvalue">
+					{{- range $i, $s := $model.series -}}
+						<div>
+							{{- $rel := index $model.srelations $s.Id -}}
+							{{- if $rel -}}
+								{{- $crel := index $rel 0 -}}
+								{{- if not (eq $crel.Type "Bevorzugter Reihentitel") -}}
+									<span class="text-sm font-sans mr-2">
+										{{- if eq $crel.Type "Früherer Reihentitel" -}}
+											hat Titelauflage s.a.
+										{{- else if eq $crel.Type "Späterer Reihentitel" -}}
+											ist Titelauflage von, s.a.
+										{{- else if eq $crel.Type "In anderer Sprache" -}}
+											{{- if $isFra -}}
+												In deutscher Sprache s.a.
+											{{- else -}}
+												In französischer Sprache s.a.
+											{{- end -}}
+										{{- else if eq $crel.Type "Alternatives Titelblatt" -}}
+											alternatives Titelblatt, s.a.
+										{{- end -}}
+									</span>
+								{{- end -}}
+							{{- end -}}
+							<a href="/reihe/{{ $s.MusenalmID }}">{{ $s.Title }}</a>
+						</div>
+					{{- end -}}
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.places -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Orte</div>
+				<div class="fieldvalue">
+					{{- range $i, $p := $model.places -}}
+						<div>
+							<a href="/reihen?place={{ $p.Id }}&hidden=true">{{ $p.Name }}</a>
+						</div>
+					{{- end -}}
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.arelations -}}
+			{{- $rels := index $model.arelations $model.entry.Id -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Personen</div>
+				<div class="fieldvalue">
+					{{- range $i, $r := $rels -}}
+						{{- $a := index $model.agents $r.Agent -}}
+						{{- if $a -}}
+							<div>
+								<a href="/person/{{ $a.Id }}">
+									{{ $a.Name }}
+								</a>
+								<span class="ml-2 px-2 py-0.5 rounded text-sm font-sans bg-slate-200 inline-block">
+									{{- $r.Type -}}
+								</span>
+							</div>
+						{{- end -}}
+					{{- end -}}
+				</div>
+			</div>
+		{{- end -}}
+		{{- if $model.entry.Annotation -}}
+			<div class="entryrow">
+				<div class="fieldlabel">Anmerkungen</div>
+				<div class="fieldvalue">
+					{{- Safe $model.entry.Annotation -}}
+				</div>
+			</div>
+		{{- end -}}
+	</div>
+</div>
+
+<script type="module">
+	let abbrevs = {{- $model.abbrs -}};
+	let ats = document.querySelectorAll('abbrev-tooltips');
+	if (ats) {
+		ats.forEach((at) => {
+				at.setAbbrevMap(abbrevs);
+		});
+	}
+
+</script>

views/routes/components/_reihe.gohtml

@@ -8,7 +8,7 @@
 {{ $bds := index $relations $r.Id }}
 
 
-<div class="flex flex-col lg:flex-row mb-1.5">
+<div class="flex flex-col lg:flex-row mb-4">
 	<div class="grow-0 shrink-0 w-[12rem] flex flex-col">
 		{{ if $r.References }}
 			<div class="text-sm font-sans px-2 py-1 bg-stone-100 {{ if $markr }}reihen-text{{ end }}">
@@ -33,17 +33,14 @@
 			</a>
 		</div>
 	</div>
-	<div class="grow-0 lg:px-0 ml-3 lg:ml-8 -indent-3">
-		<div class="contents">
+	<div class="grow lg:px-0 ml-3 lg:ml-8">
+		<div class="-indent-3">
 			<span class="font-bold reihen-text">{{ $r.Title }}</span>
 			{{ if $r.Annotation }}
 				<span>&ensp;&middot;&ensp;</span>
 				<span class="{{ if $marka }}reihen-text{{ end }}">{{ Safe $r.Annotation }}</span>
 			{{ end }}
 		</div>
-		<div></div>
-		<div class="ml-3">
 		{{ template "_reiherelations" (Arr $r $bds $entries false) }}
 	</div>
-	</div>
 </div>

views/routes/components/_reiherelations.gohtml

@@ -3,20 +3,49 @@
 {{ $entries := index . 2 }}
 {{ $shownos := index . 3 }}
 
-{{ if $rels }}
-	{{ range $_, $rel := $rels }}
-		{{ $bd := index $entries $rel.Entry }}
-		{{ if $bd }}
-			<a href="/almanach/{{ $bd.MusenalmID }}">
-				{{ if ne $bd.Year 0 }}
-					{{ $bd.Year }}
-				{{ else }}
+{{- if $rels -}}
+	<div class="reiherelations flex flex-col text-base font-sans w-full pt-1 -ml-3">
+		{{- range $_, $rel := $rels -}}
+			{{- $bd := index $entries $rel.Entry -}}
+
+			{{- if $bd -}}
+				<div class="flex flex-row odd:bg-zinc-100 px-3 py-0.5 justify-between w-full">
+					<a href="/almanach/{{ $bd.MusenalmID }}" class="no-underline">
+						<div class="">
+							{{- if $bd.PreferredTitle -}}
+								{{ $bd.PreferredTitle }}
+							{{- else if ne $bd.Year 0 -}}
+								{{- $bd.Year -}}
+							{{- else -}}
 								[o.J.]
-				{{ end }} </a
-			>&ensp;
-			{{ if $shownos }}
+							{{- end -}}
+						</div>
+						{{- if not (eq $rel.Type "Bevorzugter Reihentitel") -}}
+							<div class="text-xs whitespace-nowrap">
+								{{- if eq $rel.Type "Früherer Reihentitel" -}}
+									Titelauflage aus einer anderen Reihe
+								{{- else if eq $rel.Type "Späterer Reihentitel" -}}
+									Titelauflage
+								{{- else if eq $rel.Type "In anderer Sprache" -}}
+									{{- if Contains $bd.Language "ger" -}}
+										In deutscher Sprache
+									{{- else -}}
+										In französischer Sprache
+									{{- end -}}
+								{{- else -}}
+									{{ $rel.Type }}
+								{{- end -}}
+							</div>
+						{{- end -}}
+					</a>
+					<div class="whitespace-nowrap align-top">
+						Alm
 						{{ $bd.MusenalmID }}
-			{{ end }}
-		{{ end }}
-	{{ end }}
-{{ end }}
+					</div>
+				</div>
+			{{- end -}}
+
+		{{- end -}}
+
+	</div>
+{{- end -}}

views/routes/person/body.gohtml

@@ -1,14 +1,57 @@
 {{ $model := . }}
 
-{{ if .entries }}
-	<h2>Bände nach Riehentiteln</h2>
-	{{ range $id, $r := .series }}
-		<div>
-			{{ template "_reihe" (Arr $model $r) }}
+
+<div class="container-normal font-serif">
+	{{ if $model.a.CorporateBody }}
+		<div class="notifier font-sans">
+			<i class="ri-team-line"></i>
+			<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span>
+		</div>
+	{{ else }}
+		<div class="notifier font-sans">
+			<i class="ri-user-line"></i>
+			<span class="filtercategory">Person</span>
 		</div>
 	{{ end }}
-{{ else }}
-	<div>Keine Bände</div>
+	<h1 class="text-3xl font-bold">{{ $model.a.Name }}</h1>
+	<div>
+		<span class="">
+			{{ $model.a.BiographicalData }}
+		</span>
+		<span class="">
+			{{- $arr := $model.a.ProfessionArray -}}
+			{{- if $arr -}}
+				{{- range $i, $p := $arr -}}
+					<div
+						class="inline-block align-middle bg-slate-200 px-2 font-sans text-sm py-0.5 rounded mx-1">
+						{{- $p -}}
+					</div>
+				{{- end -}}
+			{{- end -}}
+		</span>
+	</div>
+</div>
+
+{{ if .entries }}
+	<div class="container-normal flex flex-col font-serif mt-7 gap-y-6">
+		<h2>Bände nach Reihentiteln</h2>
+		{{ range $id, $r := .series }}
+			<div class="grow-0 max-w-[48rem]">
+				<div>
+					<span class="font-bold">{{ $r.Title }}</span>
+				</div>
+				{{ if $r.Annotation }}
+					<div class="max-w-[48rem]">
+						<span class="">{{ Safe $r.Annotation }}</span>
+					</div>
+				{{ end }}
+				<div class="">
+					{{- $bds := index $model.relations $r.Id -}}
+					{{ template "reiherelations" (Arr $r $bds $model.entries true $model.relations) }}
+				</div>
+			</div>
+		{{ end }}
+	</div>
 {{ end }}
 
 {{ if .contents }}

views/routes/person/components/reiherelations.gohtml

@@ -0,0 +1,51 @@
+{{ $reihe := index . 0 }}
+{{ $rels := index . 1 }}
+{{ $entries := index . 2 }}
+{{ $shownos := index . 3 }}
+
+{{- if $rels -}}
+	<div class="reiherelations flex flex-col text-base font-sans w-full pt-1 -ml-3">
+		{{- range $_, $rel := $rels -}}
+			{{- $bd := index $entries $rel.Entry -}}
+
+			{{- if $bd -}}
+				<div class="flex flex-row odd:bg-zinc-100 px-3 py-0.5 justify-between w-full">
+					<a href="/almanach/{{ $bd.MusenalmID }}" class="no-underline">
+						<div class="">
+							{{- if $bd.PreferredTitle -}}
+								{{ $bd.PreferredTitle }}
+							{{- else if ne $bd.Year 0 -}}
+								{{- $bd.Year -}}
+							{{- else -}}
+								[o.J.]
+							{{- end -}}
+						</div>
+						{{- if not (eq $rel.Type "Bevorzugter Reihentitel") -}}
+							<div class="text-xs whitespace-nowrap">
+								{{- if eq $rel.Type "Früherer Reihentitel" -}}
+									Titelauflage aus einer anderen Reihe
+								{{- else if eq $rel.Type "Späterer Reihentitel" -}}
+									Titelauflage
+								{{- else if eq $rel.Type "In anderer Sprache" -}}
+									{{- if Contains $bd.Language "ger" -}}
+										In deutscher Sprache
+									{{- else -}}
+										In französischer Sprache
+									{{- end -}}
+								{{- else -}}
+									{{ $rel.Type }}
+								{{- end -}}
+							</div>
+						{{- end -}}
+					</a>
+					<div class="whitespace-nowrap align-top">
+						Alm
+						{{ $bd.MusenalmID }}
+					</div>
+				</div>
+			{{- end -}}
+
+		{{- end -}}
+
+	</div>
+{{- end -}}

views/routes/personen/body.gohtml

@@ -7,25 +7,25 @@
 
 
 	<!-- INFO: 2. Spalten-Layout -->
-	<div class="flex flex-row">
+	<div class="flex flex-row items-stretch">
 		{{ template "alphabet" . }}
 
 
 		<!-- INFO: 3. rechte Spalte -->
-		<div class="w-full">
+		<div class="w-full self-stretch {{ if not .search -}}border-b border-zinc-300{{- end -}}">
 			<!-- INFO: 4. Header -->
 			<div id="personheader" class="border-t border-r border-zinc-300 relative w-full">
 				{{ template "heading" . }}
 
 
-				<div class="flex flex-row justify-end">
+				<div class="flex flex-row justify-end mt-12">
 					{{ template "professionselectbox" . }}
 					{{ template "searchbox" . }}
 				</div>
 			</div>
 
 			<!-- INFO: 4. Personenliste -->
-			<div class="mt-7 ml-9 mr-5 font-serif font-lg" id="searchresults">
+			<div class="mt-7 pl-9 pr-5 font-serif font-lg pb-7" id="searchresults">
 				{{ if or .agents .altagents }}
 					{{ if .agents }}
 						<div class="w-full flex flex-col">

views/routes/personen/components/alphabet.gohtml

@@ -1,7 +1,7 @@
 {{ $model := . }}
 
 {{- if and $model.letters (not $model.search) -}}
-	<div id="personalphabet" class="flex flex-col text-xl pt-20 relative">
+	<div id="personalphabet" class="flex flex-col text-xl pt-[4.875rem] pb-4 relative">
 		{{- range $id, $r := .letters -}}
 			<a
 				class="{{ if not $model.letter -}}inactive{{- end -}}"

views/routes/personen/components/searchbox.gohtml

@@ -2,7 +2,7 @@
 
 
 <div class="ml-12 shrink-0 grow-0 mr-2.5">
-	<div class="min-w-[22.5rem] max-w-96 flex flex-row relative mt-9 ml-auto">
+	<div class="min-w-[22.5rem] max-w-96 flex flex-row relative ml-auto">
 		<div class="">
 			<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
 		</div>
@@ -19,8 +19,8 @@
 				hx-sync="this:replace"
 				hx-select="#searchresults"
 				hx-target="#searchresults"
+				hx-swap="outerHTML"
 				autocomplete="off"
-				{{ if $model.active }}autofocus="true"{{ end }}
 				{{ if $model.search }}disabled="true"{{ end }} />
 		</div>
 		<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">

views/routes/reihen/body.gohtml

@@ -12,7 +12,7 @@
 		<h1 class="heading">Bände nach Reihentiteln</h1>
 		{{ template "notifier" . }}
 
-		{{ if not .search }}
+		{{ if not (or .search .hidden) }}
 			<div class="mt-2">
 				{{ template "alphabet" Dict "active" .letter "letters" .letters "search" .search }}
 			</div>
@@ -22,8 +22,13 @@
 	</div>
 
 	<!-- INFO: 2. Breite Anzeige -->
-	<div class="container-oversize mt-4">
-		{{ if not .search }}
+	<div
+		class="{{ if or .search .hidden }}
+			container-normal
+		{{ else }}
+			container-oversize
+		{{ end }} mt-4">
+		{{ if not (or .search .hidden) }}
 			{{ template "filter" . }}
 		{{ end }}
 

views/routes/reihen/components/alphabet.gohtml

@@ -39,7 +39,6 @@
 					hx-select="#searchcontent"
 					hx-target="#searchcontent"
 					autocomplete="off"
-					{{ if $model.active }}autofocus="true"{{ end }}
 					{{ if $model.search }}disabled="true"{{ end }} />
 			</div>
 			<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">

views/routes/suche/body.gohtml

@@ -9,12 +9,14 @@
 			text-zinc-800">
 				Suche nach:
 			</div>
+			<!--
 			<a
 				href="/suche/reihen"
 				class="block no-underline"
 				{{ if eq $model.type "reihen" }}aria-current="page"{{- end -}}
 				>Reihen</a
 			>
+			-->
 			<a
 				href="/suche/baende"
 				class="block no-underline"
@@ -27,12 +29,14 @@
 				{{ if eq $model.type "beitraege" }}aria-current="page"{{- end -}}
 				>Beiträgen</a
 			>
+			<!--
 			<a
 				href="/suche/personen"
 				class="block no-underline"
 				{{ if eq $model.type "personen" }}aria-current="page"{{- end -}}
 				>Personen</a
 			>
+			-->
 		</nav>
 		<h1
 			class="text-3xl font-bold px-3 relative translate-y-[45%] w-min whitespace-nowrap

views/routes/suche/components/searchboxsimple.gohtml

@@ -7,7 +7,6 @@
 	{{ if $model.q }}value="{{ $model.q }}"{{- end -}}
 	type="search"
 	name="q"
-	autofocus="true"
 	minlength="3"
 	required
 	placeholder="Suchbegriff (min. 3 Zeichen)"

views/transform/main.js

@@ -13,6 +13,7 @@ const FILTER_LIST_SEARCHABLE = "filter-list-searchable";
 
 const SCROLL_BUTTON_ELEMENT = "scroll-button";
 const TOOLTIP_ELEMENT = "tool-tip";
+const ABBREV_TOOLTIPS_ELEMENT = "abbrev-tooltips";
 
 class XSLTParseProcess {
 	#processors;
@@ -421,12 +422,15 @@ class ScrollButton extends HTMLElement {
 
 class ToolTip extends HTMLElement {
 	static get observedAttributes() {
-		return ["position"];
+		return ["position", "timeout"];
 	}
 
 	constructor() {
 		super();
 		this._tooltipBox = null;
+		this._timeout = 200;
+		this._hideTimeout = null;
+		this._hiddenTimeout = null;
 	}
 
 	connectedCallback() {
@@ -477,9 +481,14 @@ class ToolTip extends HTMLElement {
 		if (name === "position" && this._tooltipBox) {
 			this._updatePosition();
 		}
+		if (name === "timeout" && newValue) {
+			this._timeout = parseInt(newValue) || 200;
+		}
 	}
 
 	_showTooltip() {
+		clearTimeout(this._hideTimeout);
+		clearTimeout(this._hiddenTimeout);
 		this._tooltipBox.classList.remove("hidden");
 		setTimeout(() => {
 			this._tooltipBox.classList.remove("opacity-0");
@@ -488,13 +497,13 @@ class ToolTip extends HTMLElement {
 	}
 
 	_hideTooltip() {
-		setTimeout(() => {
+		this._hideTimeout = setTimeout(() => {
 			this._tooltipBox.classList.remove("opacity-100");
 			this._tooltipBox.classList.add("opacity-0");
-			setTimeout(() => {
+			this._hiddenTimeout = setTimeout(() => {
 				this._tooltipBox.classList.add("hidden");
-			}, 200);
-		}, 100);
+			}, this._timeout + 100);
+		}, this._timeout);
 	}
 
 	_updatePosition() {
@@ -557,8 +566,181 @@ class ToolTip extends HTMLElement {
 	}
 }
 
+class AbbreviationTooltips extends HTMLElement {
+	static get observedAttributes() {
+		return ["data-text", "data-abbrevmap"];
+	}
+
+	static get defaultAbbrevMap() {
+		return {
+			"#": "Hinweis auf weitere Informationen in der Anmerkung.",
+			$: "vermutlich",
+			"+++": "Inhalte aus mehreren Almanachen interpoliert",
+			B: "Blatt",
+			BB: "Blätter",
+			C: "Corrigenda",
+			Diagr: "Diagramm",
+			G: "Graphik",
+			"G-Verz": "Verzeichnis der Kupfer u. ä.",
+			GG: "Graphiken",
+			Hrsg: "Herausgeber",
+			"I-Verz": "Inhaltsverzeichnis",
+			Kal: "Kalendarium",
+			Kr: "Karte",
+			MusB: "Musikbeigabe",
+			MusBB: "Musikbeigaben",
+			S: "Seite",
+			SS: "Seiten",
+			Sp: "Spiegel",
+			T: "Titel",
+			TG: "Titelgraphik, Titelportrait etc",
+			"TG r": "Titelgraphik, Titelportrait etc recto",
+			"TG v": "Titelgraphik, Titelportrait etc verso",
+			Tab: "Tabelle",
+			UG: "Umschlaggraphik",
+			"UG r": "Umschlaggraphik recto",
+			"UG v": "Umschlaggraphik verso",
+			VB: "Vorsatzblatt",
+			Vf: "Verfasser",
+			VrlgM: "Verlagsmitteilung",
+			Vrwrt: "Vorwort",
+			ar: "arabische Paginierung",
+			ar1: "erste arabische Paginierung",
+			ar2: "zweite arabische Paginierung",
+			ar3: "dritte arabische Paginierung",
+			ar4: "vierte arabische Paginierung",
+			ar5: "fünfte arabische Paginierung",
+			ar6: "sechste arabische Paginierung",
+			ar7: "siebte arabische Paginierung",
+			gA: "graphische Anleitung",
+			gT: "graphischer Titel",
+			gTzA: "graphische Tanzanleitung",
+			nT: "Nachtitel",
+			röm: "römische Paginierung",
+			röm1: "erste römische Paginierung",
+			röm2: "zweite römische Paginierung",
+			röm3: "dritte römische Paginierung",
+			röm4: "vierte römische Paginierung",
+			röm5: "fünfte römische Paginierung",
+			röm6: "sechste römische Paginierung",
+			röm7: "siebte römische Paginierung",
+			vT: "Vortitel",
+			zT: "Zwischentitel",
+			"§§": "Hinweis auf Mängel im Almanach (Beschädigungen, fehlende Graphiken, unvollständige Sammlungen etc) in der Anmerkung",
+		};
+	}
+
+	constructor() {
+		super();
+		this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
+	}
+
+	connectedCallback() {
+		this.render();
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal !== newVal) {
+			if (name === "data-abbrevmap") {
+				this._parseAndSetAbbrevMap(newVal);
+			}
+			this.render();
+		}
+	}
+
+	_parseAndSetAbbrevMap(jsonStr) {
+		if (!jsonStr) {
+			this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
+			return;
+		}
+		try {
+			this._abbrevMap = JSON.parse(jsonStr);
+		} catch {
+			this._abbrevMap = AbbreviationTooltips.defaultAbbrevMap;
+		}
+	}
+
+	setAbbrevMap(map) {
+		if (typeof map === "object" && map !== null) {
+			this._abbrevMap = map;
+			this.render();
+		}
+	}
+
+	get text() {
+		return this.getAttribute("data-text") || "";
+	}
+	set text(value) {
+		this.setAttribute("data-text", value);
+	}
+
+	render() {
+		this.innerHTML = this.transformText(this.text, this._abbrevMap);
+	}
+
+	transformText(text, abbrevMap) {
+		let result = "";
+		let i = 0;
+
+		while (i < text.length) {
+			// Only match if at start of text or preceded by a boundary character
+			if (i > 0 && !this.isSpaceOrPunct(text[i - 1])) {
+				result += text[i];
+				i++;
+				continue;
+			}
+
+			const matchObj = this.findLongestAbbrevAt(text, i, abbrevMap);
+			if (matchObj) {
+				const { match, meaning } = matchObj;
+				result += `
+            <tool-tip position="top" class="!inline" timeout="300">
+              <div class="data-tip p-2 text-sm text-white bg-gray-700 rounded shadow">
+                ${meaning}
+              </div>
+              <span class="cursor-help text-blue-900 hover:text-slate-800">
+                ${match}
+              </span>
+            </tool-tip>
+          `;
+				i += match.length;
+			} else {
+				result += text[i];
+				i++;
+			}
+		}
+
+		return result;
+	}
+
+	findLongestAbbrevAt(text, i, abbrevMap) {
+		let bestKey = null;
+		let bestLength = 0;
+
+		for (const key of Object.keys(abbrevMap)) {
+			if (text.startsWith(key, i)) {
+				if (key.length > bestLength) {
+					bestKey = key;
+					bestLength = key.length;
+				}
+			}
+		}
+
+		if (bestKey) {
+			return { match: bestKey, meaning: abbrevMap[bestKey] };
+		}
+		return null;
+	}
+
+	isSpaceOrPunct(ch) {
+		// Adjust if you want a different set of punctuation recognized
+		return /\s|[.,;:!?]/.test(ch);
+	}
+}
+
+customElements.define(ABBREV_TOOLTIPS_ELEMENT, AbbreviationTooltips);
 customElements.define(FILTER_LIST_ELEMENT, FilterList);
 customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);
 customElements.define(TOOLTIP_ELEMENT, ToolTip);
 
-export { XSLTParseProcess, FilterList, ScrollButton };
+export { XSLTParseProcess, FilterList, ScrollButton, AbbreviationTooltips };

views/transform/site.css

@@ -312,4 +312,19 @@
 	#personalphabet a.inactive {
 		@apply !text-gray-400;
 	}
+
+	#entrydata .fieldlabel {
+		@apply font-bold text-base font-sans whitespace-nowrap w-60 grow-0 shrink-0 pt-0.5;
+	}
+
+	#entrydata .fieldvalue {
+		@apply font-serif text-left grow align-top max-w-[60ch];
+	}
+
+	#entrydata .entryrow {
+		@apply flex flex-row gap-x-3.5 items-start py-0.5 px-4;
+	}
+
+	#entrydata {
+	}
 }