Personenliste fertig

dbmodels/agent.go

@@ -1,6 +1,8 @@
 package dbmodels
 
 import (
+	"strings"
+
 	"github.com/pocketbase/pocketbase/core"
 )
 
@@ -64,6 +66,35 @@ func (a *Agent) Profession() string {
 	return a.GetString(AGENTS_PROFESSION_FIELD)
 }
 
+func (a *Agent) ProfessionArray() []string {
+	profession := a.Profession()
+	if profession == "" {
+		return []string{}
+	}
+
+	ret := []string{}
+	profarr := strings.Split(profession, " ")
+	for _, p := range profarr {
+		if p == "" {
+			continue
+		}
+		plow := strings.ToLower(p)
+		if strings.Contains(plow, "text") {
+			ret = append(ret, "Text")
+		} else if strings.Contains(plow, "musik") {
+			ret = append(ret, "Musik")
+		} else if strings.Contains(plow, "graphik") {
+			ret = append(ret, "Graphik")
+		} else if strings.Contains(plow, "hrsg") {
+			ret = append(ret, "Hrsg")
+		} else if strings.Contains(plow, "sonst") {
+			ret = append(ret, "Sonst")
+		}
+	}
+
+	return ret
+}
+
 func (a *Agent) SetProfession(profession string) {
 	a.Set(AGENTS_PROFESSION_FIELD, profession)
 }

views/.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+# For now
+assets

views/routes/personen/body.gohtml

@@ -1,203 +1,102 @@
 {{ $model := . }}
 
-{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
-
-{{ $isNoOrg := and $model.filter (eq $model.filter "noorg") }}
-
-{{ $isOrg := and $model.filter (eq $model.filter "org") }}
-
-{{ $isMusik := and $model.filter (eq $model.filter "musik") }}
-
-{{ $isAutor := and $model.filter (eq $model.filter "autor") }}
-
-{{ $isGraphik := and $model.filter (eq $model.filter "graphik") }}
-
-{{ $isHrsg := and $model.filter (eq $model.filter "hrsg") }}
-
 
+<!-- INFO: 1. Container -->
 <div class="container-normal mt-4" x-data="{ search : '{{ $model.search }}'}">
-	{{- if not $model.search -}}
-		<div
-			id="persontype"
-			class="flex flex-row justify-end align-right text-right mr-4 gap-x-3"
-			:class="search ? 'inactive' : ''">
-			<a
-				href="/personen{{ if .letter }}?letter={{ .letter }}{{ end }}"
-				{{ if $isPerson -}}aria-current="page"{{- end -}}
-				>Personen</a
-			>
-
-			<a
-				href="/personen?filter=org{{ if .letter }}&letter={{ .letter }}{{ end }}"
-				{{ if $isOrg -}}aria-current="page"{{- end -}}
-				>Verlage, Druckereien &amp; Vertriebe</a
-			>
-		</div>
-	{{- end -}}
+	{{ template "menu" . }}
 
 
+	<!-- INFO: 2. Spalten-Layout -->
 	<div class="flex flex-row">
-		{{- if and $model.letters (not $model.search) -}}
-			<div id="personalphabet" class="flex flex-col text-xl pt-8 relative">
-				{{- range $id, $r := .letters -}}
-					<a
-						class="odd:bg-stone-100 even:bg-zinc-100 mb-1 border-zinc-300 border-y border-l [&>a[aria-current='page']]:font-bold
-				px-2 no-underline transition-all duration-75
-				{{ if not $model.letter -}}inactive{{- end -}}"
-						:class="search ? 'inactive' : 'active'"
-						href="?letter={{ $r }}{{- if $model.filter }}&filter={{ $model.filter }}{{- end -}}"
-						{{ if eq $model.letter $r }}aria-current="page"{{ end }}
-						hx-select="main"
-						hx-target="main"
-						hx-swap="outerHTML scroll:#pageheading:top"
-						>{{ $r }}</a
-					>
-				{{- end -}}
-			</div>
-		{{- end -}}
+		{{ template "alphabet" . }}
 
 
+		<!-- INFO: 3. rechte Spalte -->
 		<div class="w-full">
+			<!-- INFO: 4. Header -->
 			<div id="personheader" class="border-t border-r border-zinc-300 relative w-full">
-						<h1
-							class="text-3xl font-bold px-3 relative -translate-y-[55%] w-min whitespace-nowrap bg-stone-50 ml-24 z-20">
-							<span x-show="!search">
-								{{- if $isPerson -}}
-									Personen
-								{{- else if $isOrg -}}
-									Verlage, Druckereien &amp; Vertriebe
-								{{- end -}}
-							</span>
-							<span x-show="search"> Suche &middot; Alle Personen &amp; Körperschaften </span>
-						</h1>
+				{{ template "heading" . }}
 
-				<div class="flex flex-row justify-between">
-					<div class="w-[60%] shrink-0 grow-0">
-					<div class="min-w-[22.5rem] max-w-96 flex flex-row relative mt-9 ml-auto">
-						<div class="">
-							<i class="ri-search-line"></i
-							><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
-						</div>
-						<div class="pb-0 border-b-4 border-zinc-300 grow">
-							<input
-								class="px-1.5 font-serif placeholder:italic w-full"
-								type="search"
-								name="search"
-								value="{{ $model.search }}"
-								placeholder="Suchbegriff"
-								x-model="search"
-								hx-get=""
-								hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
-								hx-sync="this:replace"
-								hx-select="#searchresults"
-								hx-target="#searchresults"
-								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">
-							<tool-tip position="right" x-show="search">
-								<a
-									:href="'/personen/?search=' + search"
-									x-show="search"
-									class="inline-block px-1
-				text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
-									hx-boost="false">
-									<i class="ri-links-line"></i
-								></a>
-								<div class="data-tip">Link zu dieser Suchanfrage</div>
-							</tool-tip>
-						</div>
-					</div>
-					</div>
 
-					{{- if $isPerson -}}
-						<div x-show="!search" class="flex flex-row gap-x-3 font-serif mr-6 items-end">
-							<label
-								for="filter"
-								class="align-bottom h-min self-end pb-1 text-sm	font-sans text-stone-700"
-								>Anzeige:</label
-							>
-							<select
-								class="h-min pb-1 border-b-4 border-zinc-300 px-1.5"
-								name="filter"
-								id="filter"
-								hx-get="/personen{{- if .letter -}}?letter={{ .letter }}{{- end -}}"
-								trigger="change"
-								hx-push-url="true"
-								hx-select="main"
-								hx-target="main">
-								<option value="noorg" {{ if $isNoOrg }}selected{{ end }}>Alle Personen</option>
-								<option value="musik" {{ if $isMusik }}selected{{ end }}>Musiker:innen</option>
-								<option value="autor" {{ if $isAutor }}selected{{ end }}>Autor:innen</option>
-								<option value="graphik" {{ if $isGraphik }}selected{{ end }}>
-									Graphiker:innen
-								</option>
-								<option value="hrsg" {{ if $isHrsg }}selected{{ end }}>Herausgeber:innen</option>
-							</select>
-						</div>
-					{{- end -}}
-					</div>
-				</div>
-
-				<div class="mt-4 ml-4 font-serif font-lg" id="searchresults">
-					{{ if or .agents .altagents }}
-						{{ if .agents }}
-							<table class="w-full [&_td]:!align-top">
-								{{ range $count, $agent := .agents }}
-									<tr>
-										<td>
-											<a href="/person/{{ $agent.Id }}" class="font-bold">
-												{{ $agent.Name }}
-												{{ if $agent.Pseudonyms }}
-													<br />
-													({{ $agent.Pseudonyms }})
-												{{ end }}
-											</a>
-										</td>
-										<td>
-											{{ if $agent.CorporateBody }}
-												Körperschaft
-											{{ else }}
-												{{ $agent.Profession }},
-												{{ $agent.BiographicalData }}
-											{{ end }}
-										</td>
-										<td>{{ $agent.References }}</td>
-									</tr>
-								{{ end }}
-
-							</table>
-						{{ end }}
-						{{ if .altagents }}
-							<table class="w-full mt-6">
-								{{ range $count, $agent := .altagents }}
-									<tr>
-										<td>
-											{{ $agent.Name }}
-											{{ if $agent.Pseudonyms }}
-												<br />
-												({{ $agent.Pseudonyms }})
-											{{ end }}
-										</td>
-										<td>
-											{{ if $agent.CorporateBody }}
-												Körperschaft
-											{{ else }}
-												{{ $agent.Profession }},
-												{{ $agent.BiographicalData }}
-											{{ end }}
-										</td>
-										<td>{{ $agent.References }}</td>
-									</tr>
-								{{ end }}
-							</table>
-						{{ end }}
-					{{ else }}
-						<p>Keine Personen gefunden.</p>
-					{{ end }}
+				<div class="flex flex-row justify-end">
+					{{ template "professionselectbox" . }}
+					{{ template "searchbox" . }}
 				</div>
 			</div>
+
+			<!-- INFO: 4. Personenliste -->
+			<div class="mt-7 ml-9 mr-5 font-serif font-lg" id="searchresults">
+				{{ if or .agents .altagents }}
+					{{ if .agents }}
+						<div class="w-full flex flex-col">
+							{{ range $count, $agent := .agents }}
+								<div class="flex flex-row odd:bg-stone-100 even:bg-stone-50 px-3 py-0.5">
+									<div class="grow">
+										<a href="/person/{{ $agent.Id }}" class="search-result font-bold">
+											{{ $agent.Name }}
+										</a>
+										<span class="inline-block font-sans text-sm">
+											{{ if not $agent.CorporateBody }}
+												{{ $agent.BiographicalData }}
+											{{ end }}
+										</span>
+
+										{{ if $agent.Pseudonyms }}
+											<p class="italic indent-3">
+												auch:
+												<span class="search-result">
+													{{ $agent.Pseudonyms }}
+												</span>
+											</p>
+										{{ end }}
+									</div>
+
+									<div class="w-48 text-right shrink-0">
+										{{- if $agent.CorporateBody -}}
+											<span class="text-sm font-sans text-gray-500">Körperschaft</span>
+										{{ else }}
+											{{- $parr := $agent.ProfessionArray -}}
+											{{- if $parr -}}
+												{{- range $i, $p := $parr -}}
+													<div
+														class="inline-block px-2 py-0.5 text-sm font-sans
+													bg-slate-200 rounded ml-2">
+														{{ $p }}
+													</div>
+												{{- end -}}
+											{{- end -}}
+										{{- end -}}
+									</div>
+
+									<div class="w-64 ml-4 shrink-0">{{ $agent.References }}</div>
+								</div>
+							{{ end }}
+
+						</div>
+					{{ end }}
+					{{ if .altagents }}
+					{{ end }}
+				{{ else }}
+					<p>Keine Personen gefunden.</p>
+				{{ end }}
+
+				{{ if .search }}
+					<script type="module">
+					let elements = document.querySelectorAll('.search-result');
+					let mark_instance = new Mark(elements);
+					// INFO: we wait a little bit before marking, to settle everything
+						setTimeout(() => {
+							mark_instance.mark('{{ $model.search }}', {
+								"seperateWordSearch": true,
+							});
+						}, 200);
+					</script>
+				{{ end }}
+				<!-- INFO: Ende Personenliste -->
+			</div>
+			<!-- INFO: Ende rechte Spalte -->
 		</div>
+		<!-- INFO: Ende Spalten-Layout -->
 	</div>
+	<!-- INFO: Ende Container -->
 </div>

views/routes/personen/components/alphabet.gohtml

@@ -0,0 +1,18 @@
+{{ $model := . }}
+
+{{- if and $model.letters (not $model.search) -}}
+	<div id="personalphabet" class="flex flex-col text-xl pt-20 relative">
+		{{- range $id, $r := .letters -}}
+			<a
+				class="{{ if not $model.letter -}}inactive{{- end -}}"
+				:class="search ? 'inactive' : 'active'"
+				href="?letter={{ $r }}{{- if $model.filter }}&filter={{ $model.filter }}{{- end -}}"
+				{{ if eq $model.letter $r }}aria-current="page"{{ end }}
+				hx-select="main"
+				hx-target="main"
+				hx-swap="outerHTML scroll:#pageheading:top"
+				>{{ $r }}</a
+			>
+		{{- end -}}
+	</div>
+{{- end -}}

views/routes/personen/components/heading.gohtml

@@ -0,0 +1,20 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isNoOrg := and $model.filter (eq $model.filter "noorg") }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+
+<h1
+	class="text-3xl font-bold px-3 relative -translate-y-[55%] w-min whitespace-nowrap bg-stone-50 ml-24 z-20">
+	<span x-show="!search">
+		{{- if $isPerson -}}
+			Personen
+		{{- else if $isOrg -}}
+			Verlage, Druckereien &amp; Vertriebe
+		{{- end -}}
+	</span>
+	<span x-show="search"> Suche &middot; Alle Personen &amp; Körperschaften </span>
+</h1>

views/routes/personen/components/menu.gohtml

@@ -0,0 +1,25 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+{{- if not $model.search -}}
+	{{/* INFO: We always redrect to letter = A bc some letters dont exist for other types */}}
+	<div
+		id="persontype"
+		class="flex flex-row justify-end align-right text-right mr-4 gap-x-3"
+		:class="search ? 'inactive' : ''">
+		<a
+			href="/personen?letter=A"
+			{{ if $isPerson -}}aria-current="page"{{- end -}}
+			>Personen</a
+		>
+
+		<a
+			href="/personen?filter=org"
+			{{ if $isOrg -}}aria-current="page"{{- end -}}
+			>Verlage, Druckereien &amp; Vertriebe</a
+		>
+	</div>
+{{- end -}}

views/routes/personen/components/professionselectbox.gohtml

@@ -0,0 +1,40 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isNoOrg := and $model.filter (eq $model.filter "noorg") }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+{{ $isMusik := and $model.filter (eq $model.filter "musik") }}
+
+{{ $isAutor := and $model.filter (eq $model.filter "autor") }}
+
+{{ $isGraphik := and $model.filter (eq $model.filter "graphik") }}
+
+{{ $isHrsg := and $model.filter (eq $model.filter "hrsg") }}
+
+{{- if $isPerson -}}
+	<div x-show="!search" class="flex flex-row gap-x-3 font-serif mr-6 items-end">
+		<label for="filter" class="align-bottom h-min self-end pb-1 text-sm	font-sans text-stone-700"
+			>Berufe</label
+		>
+
+		{{/* INFO:  We always redrect to letter = A bc some letters dont exist for other professions */}}
+		<select
+			class="h-min pb-1 border-b-4 border-zinc-300 px-1.5"
+			name="filter"
+			id="filter"
+			hx-get="/personen?letter=A"
+			trigger="change"
+			hx-push-url="true"
+			hx-select="main"
+			hx-target="main">
+			<option value="noorg" {{ if $isNoOrg }}selected{{ end }}>Alle</option>
+			<option value="musik" {{ if $isMusik }}selected{{ end }}>Musiker:innen</option>
+			<option value="autor" {{ if $isAutor }}selected{{ end }}>Autor:innen</option>
+			<option value="graphik" {{ if $isGraphik }}selected{{ end }}>Graphiker:innen</option>
+			<option value="hrsg" {{ if $isHrsg }}selected{{ end }}>Herausgeber:innen</option>
+		</select>
+	</div>
+{{- end -}}

views/routes/personen/components/searchbox.gohtml

@@ -0,0 +1,40 @@
+{{ $model := . }}
+
+
+<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="">
+			<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
+		</div>
+		<div class="pb-0 border-b-4 border-zinc-300 grow">
+			<input
+				class="px-1.5 font-serif placeholder:italic w-full"
+				type="search"
+				name="search"
+				value="{{ $model.search }}"
+				placeholder="Suchbegriff"
+				x-model="search"
+				hx-get=""
+				hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
+				hx-sync="this:replace"
+				hx-select="#searchresults"
+				hx-target="#searchresults"
+				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">
+			<tool-tip position="right" x-show="search">
+				<a
+					:href="'/personen/?search=' + search"
+					x-show="search"
+					class="inline-block px-1
+				text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
+					hx-boost="false">
+					<i class="ri-links-line"></i
+				></a>
+				<div class="data-tip">Link zu dieser Suchanfrage</div>
+			</tool-tip>
+		</div>
+	</div>
+</div>

views/routes/personen/head.gohtml

@@ -0,0 +1 @@
+<title>{{ .site.title }}: Personen</title>

views/routes/reihen/body.gohtml

@@ -1,187 +1,81 @@
 {{ $model := . }}
 
 {{ if and .startpage .record }}
-	<div
-		class="bg-[url(/assets/hintergrund.png)] w-full border-t border-b py-8 mt-9 relative"
-		x-data="{ open: true }"
-		x-show="open">
-		<div class="container-extraoversize flex flex-row gap-x-8">
-			<div class="max-w-[52rem] font-serif text-lg hyphens-auto">
-				{{ Safe .record.Text }}
-			</div>
-			<div class="-mr-16 pt-2 grow-0 shrink-0">
-				<img src="{{ .record.ImagePath }}" />
-			</div>
-		</div>
-		<div class="absolute top-0 right-0 m-4 mr-8">
-			<tool-tip position="left">
-				<div class="data-tip">Hinweis schließen</div>
-				<button
-					@click="open = false"
-					class="text-3xl text-stone-500 opacity-85 hover:opacity-100 transition-opacity
-					duration-200 hover:text-stone-900 leading-none
-			hover:cursor-pointer">
-					<i class="ri-close-circle-fill"></i>
-				</button>
-			</tool-tip>
-		</div>
-	</div>
+	{{ template "hero" . }}
 {{ end }}
 
 
+<!-- INFO: 1. Container -->
 <div x-data="{ search : '{{ $model.search }}' }" :class="search ? 'searchfilter' : ''">
+	<!-- INFO: 2. Header -->
 	<div id="pageheading" class="headingcontainer">
 		<h1 class="heading">Bände nach Reihentiteln</h1>
-
-		<div class="flex flex-row justify-center ">
-			{{ if .letter }}
-				<div class="notifier" x-show="!search">
-					<i class="ri-sort-alphabet-asc"></i>
-					<span class="filtercategory">Alle Reihen</span> &middot;
-					<span class="">Anfangsbuchstabe <span class="filterterm">{{ .letter }}</span></span>
-				</div>
-			{{ end }}
-
-
-			<div class="notifier" x-show="search">
-				<i class="ri-search-line"></i>
-				<span class="filtercategory">Suche</span>
-				&middot; <span class="filterterm" x-text="search"></span>
-			</div>
-
-			{{ if .search }}
-				<div class="notifier" x-show="search">
-					<i class="ri-links-line"></i>
-					<span class="filtercategory">Link</span>
-					&middot; <span class="filterterm" x-text="window.location.href"></span>
-				</div>
-			{{ end }}
-
-			{{ if .a }}
-				<div class="notifier" x-show="!search">
-					{{ if .a.CorporateBody }}
-						<i class="ri-team-line"></i>
-						<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> &middot;
-					{{ else }}
-						<i class="ri-user-line"></i>
-						<span class="filtercategory">Herausgeber:in</span> &middot;
-					{{ end }}
-					<span class="filterterm">{{ .a.Name }}</span>
-				</div>
-			{{ end }}
-
-			{{ if .p }}
-				<div class="notifier" x-show="!search">
-					<i class="ri-map-pin-line"></i>
-					<span class="filtercategory">Erscheinungsort</span> &middot;
-					<span class="filterterm">{{ .p.Name }}</span>
-				</div>
-			{{ end }}
-
-			{{ if .year }}
-				<div class="notifier" x-show="!search">
-					<i class="ri-calendar-line"></i>
-					<span class="filtercategory">Geltungsjahr</span> &middot;
-					<span class="filterterm">{{ .year }}</span>
-				</div>
-			{{ end }}
-
-			{{ if not .letter }}
-				<div class="notifier ml-2" x-show="!search">
-					<a href="/reihen" class="no-underline">
-						<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
-					</a>
-				</div>
-			{{ end }}
-
-
-			<div class="notifier ml-2" x-show="search">
-				<a href="/reihen" class="no-underline">
-					<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
-				</a>
-			</div>
-		</div>
+		{{ template "notifier" . }}
 
 		{{ if not .search }}
 			<div class="mt-2">
-				{{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
+				{{ template "alphabet" Dict "active" .letter "letters" .letters "search" .search }}
 			</div>
 		{{ else }}
 			<div class="mt-2 border-b border-zinc-300 w-full"></div>
 		{{ end }}
 	</div>
 
+	<!-- INFO: 2. Breite Anzeige -->
 	<div class="container-oversize mt-4">
 		{{ if not .search }}
-			<div class="">
-				{{ template "_reihenfilter" . }}
-			</div>
+			{{ template "filter" . }}
 		{{ end }}
 
 
+		<!-- INFO: 3. Treffer -->
 		<div id="searchcontent" class="font-serif">
-			{{ if $model.search }}
-		<script type="module">
-		let elements = document.querySelectorAll('.reihen-text');
-		let mark_instance = new Mark(elements);
-		// INFO: we wait a little bit before marking, to settle everything
-			setTimeout(() => {
-				mark_instance.mark('{{ $model.search }}', {
-					"seperateWordSearch": true,
-				});
-			}, 200);
-		</script>
+			{{ if and .search .idseries }}
+				<div class="mb-1 max-w-[60rem] hyphens-auto">
+					{{ range $id, $r := .idseries }}
+						{{ template "_reihe" (Arr $r $model.entries $model.relations true false false) }}
+					{{ end }}
+				</div>
 			{{ end }}
 
+			{{ if .series }}
+				<div class="mb-1 max-w-[60rem] hyphens-auto">
+					{{ range $id, $r := .series }}
+						{{ template "_reihe" (Arr $r $model.entries $model.relations false false
+							false)
+						}}
+					{{ end }}
+				</div>
+			{{ end }}
 
-			<div class="">
-				{{ if and .search .idseries }}
-					<div class="mb-1 max-w-[60rem] hyphens-auto">
-						{{ range $id, $r := .idseries }}
-							{{ template "_reihe" (Arr $r $model.entries $model.relations true false false) }}
-						{{ end }}
+			{{ if and .search .altseries }}
+				{{ if .idseries }}
+					<div class="border-b text-sm font-sans text-right pb-0.5">
+						Treffer in Almanach-Nummer &uarr;
 					</div>
 				{{ end }}
 
 				{{ if .series }}
-					<div class="mb-1 max-w-[60rem] hyphens-auto">
-						{{ range $id, $r := .series }}
-							{{ template "_reihe" (Arr $r $model.entries $model.relations false false
-								false)
-							}}
-						{{ end }}
+					<div class="border-b text-sm font-sans text-right pb-0.5">
+						Treffer in Reihentiteln &uarr;
 					</div>
 				{{ end }}
 
-				{{ if and .search .altseries }}
-					{{ if .idseries }}
-						<div class="border-b text-sm font-sans text-right pb-0.5">
-							Treffer in Almanach-Nummer &uarr;
-						</div>
-					{{ end }}
-
-					{{ if .series }}
-						<div class="border-b text-sm font-sans text-right pb-0.5">
-							Treffer in Reihentiteln &uarr;
-						</div>
-					{{ end }}
-
-					{{ if not (or .series .idseries) }}
-						<div class="border-b text-sm font-sans text-right pb-0.5">
-							Keine Treffer im Reihentitel
-							<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
-						</div>
-					{{ end }}
-					<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
-						Treffer in allen Feldern (inkl. Anmerkungen &amp; Verweise) &darr;
-					</div>
-					<div class="mb-1 max-w-[60rem] hyphens-auto">
-						{{ range $id, $r := .altseries }}
-							{{ template "_reihe" (Arr $r $model.entries $model.relations false true true) }}
-						{{ end }}
+				{{ if not (or .series .idseries) }}
+					<div class="border-b text-sm font-sans text-right pb-0.5">
+						Keine Treffer im Reihentitel
+						<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
 					</div>
 				{{ end }}
-			</div>
+				<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
+					Treffer in allen Feldern (inkl. Anmerkungen &amp; Verweise) &darr;
+				</div>
+				<div class="mb-1 max-w-[60rem] hyphens-auto">
+					{{ range $id, $r := .altseries }}
+						{{ template "_reihe" (Arr $r $model.entries $model.relations false true true) }}
+					{{ end }}
+				</div>
+			{{ end }}
 			{{ if not (or .series .altseries .idseries) }}
 				<div class="mt-8">
 					Keine Reihen
@@ -189,6 +83,26 @@
 					gefunden.
 				</div>
 			{{ end }}
+
+			{{ if $model.search }}
+				<script type="module">
+				let elements = document.querySelectorAll('.reihen-text');
+				let mark_instance = new Mark(elements);
+				// INFO: we wait a little bit before marking, to settle everything
+					setTimeout(() => {
+						mark_instance.mark('{{ $model.search }}', {
+							"seperateWordSearch": true,
+						});
+					}, 200);
+				</script>
+			{{ end }}
+
+
+			<!-- INFO: Ende 3. Treffer -->
 		</div>
+
+		<!-- INFO: Ende 2. Breite Anzeige -->
 	</div>
+
+	<!-- INFO: Ende 1. Container -->
 </div>

views/routes/reihen/components/hero.gohtml

@@ -0,0 +1,26 @@
+{{ $model := . }}
+<div
+	class="bg-[url(/assets/hintergrund.png)] w-full border-t border-b py-8 mt-9 relative"
+	x-data="{ open: true }"
+	x-show="open">
+	<div class="container-extraoversize flex flex-row gap-x-8">
+		<div class="max-w-[52rem] font-serif text-lg hyphens-auto">
+			{{ Safe $model.record.Text }}
+		</div>
+		<div class="-mr-16 pt-2 grow-0 shrink-0">
+			<img src="{{ $model.record.ImagePath }}" />
+		</div>
+	</div>
+	<div class="absolute top-0 right-0 m-4 mr-8">
+		<tool-tip position="left">
+			<div class="data-tip">Hinweis schließen</div>
+			<button
+				@click="open = false"
+				class="text-3xl text-stone-500 opacity-85 hover:opacity-100 transition-opacity
+					duration-200 hover:text-stone-900 leading-none
+			hover:cursor-pointer">
+				<i class="ri-close-circle-fill"></i>
+			</button>
+		</tool-tip>
+	</div>
+</div>

views/routes/reihen/components/notifier.gohtml

@@ -0,0 +1,71 @@
+{{ $model := . }}
+
+
+<div class="flex flex-row justify-center ">
+	{{ if .letter }}
+		<div class="notifier" x-show="!search">
+			<i class="ri-sort-alphabet-asc"></i>
+			<span class="filtercategory">Alle Reihen</span> &middot;
+			<span class="">Anfangsbuchstabe <span class="filterterm">{{ .letter }}</span></span>
+		</div>
+	{{ end }}
+
+
+	<div class="notifier" x-show="search">
+		<i class="ri-search-line"></i>
+		<span class="filtercategory">Suche</span>
+		&middot; <span class="filterterm" x-text="search"></span>
+	</div>
+
+	{{ if .search }}
+		<div class="notifier" x-show="search">
+			<i class="ri-links-line"></i>
+			<span class="filtercategory">Link</span>
+			&middot; <span class="filterterm" x-text="window.location.href"></span>
+		</div>
+	{{ end }}
+
+	{{ if .a }}
+		<div class="notifier" x-show="!search">
+			{{ if .a.CorporateBody }}
+				<i class="ri-team-line"></i>
+				<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> &middot;
+			{{ else }}
+				<i class="ri-user-line"></i>
+				<span class="filtercategory">Herausgeber:in</span> &middot;
+			{{ end }}
+			<span class="filterterm">{{ .a.Name }}</span>
+		</div>
+	{{ end }}
+
+	{{ if .p }}
+		<div class="notifier" x-show="!search">
+			<i class="ri-map-pin-line"></i>
+			<span class="filtercategory">Erscheinungsort</span> &middot;
+			<span class="filterterm">{{ .p.Name }}</span>
+		</div>
+	{{ end }}
+
+	{{ if .year }}
+		<div class="notifier" x-show="!search">
+			<i class="ri-calendar-line"></i>
+			<span class="filtercategory">Geltungsjahr</span> &middot;
+			<span class="filterterm">{{ .year }}</span>
+		</div>
+	{{ end }}
+
+	{{ if not .letter }}
+		<div class="notifier ml-2" x-show="!search">
+			<a href="/reihen" class="no-underline">
+				<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
+			</a>
+		</div>
+	{{ end }}
+
+
+	<div class="notifier ml-2" x-show="search">
+		<a href="/reihen" class="no-underline">
+			<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
+		</a>
+	</div>
+</div>

views/transform/site.css

@@ -44,9 +44,17 @@
 }
 
 @layer components {
-	@media screen and (min-width: 96rem) {
+	html {
+		font-size: 16px;
+	}
+	@media (max-width: 1280px) {
 		html {
-			font-size: 16px;
+			font-size: 14px;
+		}
+	}
+	@media (max-width: 640px) {
+		html {
+			font-size: 12px;
 		}
 	}
 
@@ -101,12 +109,16 @@
 		@apply font-variant-small-caps;
 	}
 
-	.alphabet a[aria-current="page"]:not(.inactive) {
+	#alphabet a[aria-current="page"]:not(.inactive) {
 		@apply pb-3 pt-2 font-bold italic !bg-stone-50 relative -bottom-3 border-b;
 	}
 
-	.alphabet a:hover:not([aria-current="page"]:not(.inactive)) {
-		@apply pb-1 pt-0.5 !bg-stone-50 relative;
+	#alphabet a:hover:not([aria-current="page"]:not(.inactive)) {
+		@apply pb-1 pt-0.5 !bg-stone-50 relative !text-stone-900;
+	}
+
+	#alphabet a.inactive {
+		@apply !text-gray-400;
 	}
 
 	.headingcontainer:before {
@@ -203,11 +215,11 @@
 	}
 
 	#searchnav > a {
-		@apply odd:bg-stone-100 even:bg-zinc-100 mx-1.5 border-zinc-300 border-x border-t px-2.5 no-underline transition-all duration-75 py-0.5;
+		@apply odd:bg-stone-100 even:bg-zinc-100 mx-1.5 border-zinc-300 border-x border-t px-2.5 no-underline transition-all duration-75 py-0.5 text-lg;
 	}
 
 	#searchnav > a[aria-current="page"]:not(.inactive) {
-		@apply font-bold italic !bg-stone-50 relative -bottom-3 border-b z-20;
+		@apply font-bold italic !bg-stone-50 relative -bottom-2 border-b z-20;
 	}
 
 	#searchnav > a:hover:not([aria-current="page"]:not(.inactive)) {
@@ -237,7 +249,7 @@
 	}
 
 	#searchform button:disabled {
-		@apply bg-stone-400 cursor-not-allowed;
+		@apply bg-stone-300 text-gray-500 cursor-not-allowed;
 	}
 
 	#searchform .selectgroup {
@@ -264,6 +276,10 @@
 		@apply font-bold;
 	}
 
+	#persontype.inactive a {
+		@apply text-gray-500;
+	}
+
 	#personheader:before {
 		content: "";
 		@apply bg-zinc-300 w-[50%] absolute bottom-0 left-[50%] h-[1px];
@@ -271,6 +287,29 @@
 
 	#personalphabet:after {
 		content: "";
-		@apply absolute right-0 top-0 h-[44em] border-r border-zinc-300;
+		@apply absolute right-0 top-0 h-full border-r border-zinc-300;
+	}
+
+	#personalphabet a {
+		@apply box-border odd:bg-stone-100 even:bg-zinc-100 mb-1 border-zinc-300 border-y border-l pl-2 pr-3 no-underline transition-all duration-75 text-center text-lg overflow-visible relative;
+	}
+
+	#personalphabet a[aria-current="page"]:not(.inactive) {
+		@apply font-bold italic !bg-stone-50 relative -mr-4 border-r border-b pl-3 z-20 text-xl;
+	}
+
+	#personalphabet a[aria-current="page"]:not(.inactive):before {
+		aspect-ratio: 1;
+		clip-path: polygon(100% 66%, 66% 100%, 100% 100%);
+		content: " ";
+		@apply bg-red-600 absolute -bottom-[1px] -right-[1px] h-full z-30;
+	}
+
+	#personalphabet a:hover:not([aria-current="page"]:not(.inactive)) {
+		@apply !bg-stone-50 -ml-2 relative;
+	}
+
+	#personalphabet a.inactive {
+		@apply !text-gray-400;
 	}
 }