Citation component to set citation style globally

This commit is contained in:
Simon Martens
2025-09-17 10:27:17 +02:00
parent d1bc8db654
commit 7b4e9498a0
4 changed files with 95 additions and 65 deletions

View File

@@ -73,35 +73,16 @@
{{ end }}"> {{ end }}">
<span class="text-black text-xs font-bold">{{ add $index 1 }}</span> <span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
<span class="w-px h-3 bg-slate-300 mx-1"></span> <span class="w-px h-3 bg-slate-300 mx-1"></span>
<a <span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
href="/{{- $issue.When -}}/{{- $issue.Nr -}}{{- if $issue.Von -}} text-red-700 pointer-events-none
{{- if $issue.Beilage -}} {{ end }}"
#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }} {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
{{- else -}} $model.Datum.When.Year)
#page-{{ $issue.Von }} -}}
{{- end -}} aria-current="page"
{{- end -}}" {{ end }}>
class="text-slate-700 no-underline hover:text-slate-900 {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}} {{ template "_citation" $issue }}
text-red-700 pointer-events-none </span>
{{ end }}"
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
$model.Datum.When.Year)
-}}
aria-current="page"
{{ end }}>
{{- $issueKey := printf "%d-%d" $issue.When.Year $issue.Nr -}}
{{- $issueData := GetIssue $issueKey -}}
{{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}
{{- else -}}
{{ $issue.When.Year }} Nr.
{{ $issue.Nr }}
{{- end -}}
{{- if $issue.Von }}
S.
{{ $issue.Von }}
{{- end -}}
</a>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@@ -210,35 +191,16 @@
{{ end }}"> {{ end }}">
<span class="text-black text-xs font-bold">{{ add $index 1 }}</span> <span class="text-black text-xs font-bold">{{ add $index 1 }}</span>
<span class="w-px h-3 bg-slate-300 mx-1"></span> <span class="w-px h-3 bg-slate-300 mx-1"></span>
<a <span class="{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}}
href="/{{- $issue.When -}}/{{- $issue.Nr -}}{{- if $issue.Von -}} text-red-700 pointer-events-none
{{- if $issue.Beilage -}} {{ end }}"
#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }} {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
{{- else -}} $model.Datum.When.Year)
#page-{{ $issue.Von }} -}}
{{- end -}} aria-current="page"
{{- end -}}" {{ end }}>
class="text-slate-700 no-underline hover:text-slate-900 {{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year $model.Datum.When.Year) -}} {{ template "_citation" $issue }}
text-red-700 pointer-events-none </span>
{{ end }}"
{{- if and (eq $issue.Nr $model.Number.No) (eq $issue.When.Year
$model.Datum.When.Year)
-}}
aria-current="page"
{{ end }}>
{{- $issueKey := printf "%d-%d" $issue.When.Year $issue.Nr -}}
{{- $issueData := GetIssue $issueKey -}}
{{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}
{{- else -}}
{{ $issue.When.Year }} Nr.
{{ $issue.Nr }}
{{- end -}}
{{- if $issue.Von }}
S.
{{ $issue.Von }}
{{- end -}}
</a>
</div> </div>
{{ end }} {{ end }}
</div> </div>

View File

@@ -67,9 +67,9 @@
<div class="flex flex-wrap gap-1 mt-1"> <div class="flex flex-wrap gap-1 mt-1">
{{ range $_, $p := $workPieces }} {{ range $_, $p := $workPieces }}
{{ range $_, $issue := $p.Item.IssueRefs }} {{ range $_, $issue := $p.Item.IssueRefs }}
<a href="/{{ $issue.When }}/{{ $issue.Nr }}{{ if $issue.Von }}{{ if $issue.Beilage }}#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}{{ else }}#page-{{ $issue.Von }}{{ end }}{{ end }}" class="inline-block bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-800 px-2 py-1 rounded text-sm transition-colors"> <span class="inline-block bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-800 px-2 py-1 rounded text-sm transition-colors">
{{ $issue.Nr }}/{{ $issue.When }}{{ if $issue.Von }} [S. {{ $issue.Von }}{{ if $issue.Bis }}-{{ $issue.Bis }}{{ end }}]{{ end }} {{ template "_citation" $issue }}
</a> </span>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
@@ -87,9 +87,9 @@
<div class="flex flex-wrap gap-1 mt-1"> <div class="flex flex-wrap gap-1 mt-1">
{{ range $_, $p := $pieces }} {{ range $_, $p := $pieces }}
{{ range $_, $issue := $p.Item.IssueRefs }} {{ range $_, $issue := $p.Item.IssueRefs }}
<a href="/{{ $issue.When }}/{{ $issue.Nr }}{{ if $issue.Von }}{{ if $issue.Beilage }}#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}{{ else }}#page-{{ $issue.Von }}{{ end }}{{ end }}" class="inline-block bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-800 px-2 py-1 rounded text-sm transition-colors"> <span class="inline-block bg-green-50 hover:bg-green-100 text-green-700 hover:text-green-800 px-2 py-1 rounded text-sm transition-colors">
{{ $issue.Nr }}/{{ $issue.When }}{{ if $issue.Von }} [S. {{ $issue.Von }}{{ if $issue.Bis }}-{{ $issue.Bis }}{{ end }}]{{ end }} {{ template "_citation" $issue }}
</a> </span>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>

View File

@@ -0,0 +1,68 @@
{{- /*
Global citation component for resolving IssueRef elements
Usage: {{ template "_citation" $issueRef }}
Input: xmlmodels.IssueRef with fields:
- .Nr (int): Issue number
- .Von (int): Starting page
- .Bis (int): Ending page (optional)
- .Beilage (int): Beilage number (optional)
- .When (DateAttributes): Date information
Outputs: citation text + link with minimal formatting
Automatically detects current page and styles accordingly
*/ -}}
{{- $issue := . -}}
{{- $issueKey := printf "%d-%d" $issue.When.Year $issue.Nr -}}
{{- $issueData := GetIssue $issueKey -}}
{{- $url := printf "/%s/%d" $issue.When $issue.Nr -}}
<a href="{{- $url -}}{{- if $issue.Von -}}
{{- if $issue.Beilage -}}
#beilage-{{ $issue.Beilage }}-page-{{ $issue.Von }}
{{- else -}}
#page-{{ $issue.Von }}
{{- end -}}
{{- end -}}"
class="citation-link text-slate-700 no-underline hover:text-slate-900"
data-citation-url="{{ $url }}">
{{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}
{{- else -}}
{{ $issue.When.Year }} Nr. {{ $issue.Nr }}
{{- end -}}
{{- if $issue.Von }} S. {{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) -}}
-{{ $issue.Bis }}
{{- end -}}
{{- end -}}
</a>
<script>
// Check if citation links point to current page (without hash)
function updateCitationLinks() {
const currentPath = window.location.pathname;
const citationLinks = document.querySelectorAll('.citation-link[data-citation-url]');
citationLinks.forEach(link => {
const citationUrl = link.getAttribute('data-citation-url');
if (citationUrl === currentPath) {
// Style as current page: red text, no underline, not clickable
link.classList.remove('text-slate-700', 'hover:text-slate-900');
link.classList.add('text-red-700', 'pointer-events-none');
link.setAttribute('aria-current', 'page');
} else {
// Reset to default styling for non-current pages
link.classList.remove('text-red-700', 'pointer-events-none');
link.classList.add('text-slate-700', 'hover:text-slate-900');
link.removeAttribute('aria-current');
}
});
}
// Run on initial load
document.addEventListener('DOMContentLoaded', updateCitationLinks);
// Run on HTMX page swaps
document.addEventListener('htmx:afterSwap', updateCitationLinks);
document.addEventListener('htmx:afterSettle', updateCitationLinks);
</script>

View File

@@ -105,7 +105,7 @@
{{ range $_, $p := $pieces }} {{ range $_, $p := $pieces }}
{{- range $_, $i := $p.Item.IssueRefs -}} {{- range $_, $i := $p.Item.IssueRefs -}}
<div> <div>
<a href="/{{ $i.When }}/{{ $i.Nr }}{{ if $i.Von }}{{ if $i.Beilage }}#beilage-{{ $i.Beilage }}-page-{{ $i.Von }}{{ else }}#page-{{ $i.Von }}{{ end }}{{ end }}">{{ $i.Nr }}/{{ $i.When }}</a> {{ template "_citation" $i }}
</div> </div>
{{- end -}} {{- end -}}
{{ end }} {{ end }}