Add manga library page template

main
Timo Montalto 2026-03-19 15:18:07 +01:00
parent 5922d7f063
commit 3be4ac0459
1 changed files with 117 additions and 0 deletions

117
layouts/_default/manga.html Normal file
View File

@ -0,0 +1,117 @@
{{ define "main" }}
{{ $apiURL := .Params.api }}
{{ $isGerman := eq .Site.Language.Lang "de" }}
{{ $loadingError := "" }}
{{ $ratingMax := 5 }}
{{ $items := slice }}
{{ if $apiURL }}
{{ $remote := try (resources.GetRemote $apiURL (dict "headers" (dict "Accept" "application/json"))) }}
{{ if $remote.Err }}
{{ $loadingError = printf "%v" $remote.Err }}
{{ else }}
{{ with $remote.Value }}
{{ $payload := . | transform.Unmarshal }}
{{ with $payload.ratingMax }}
{{ $ratingMax = . }}
{{ end }}
{{ with $payload.items }}
{{ $items = sort . "updatedAt" "desc" }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<main class="manga-page">
<section class="manga-hero">
<div>
<p class="manga-kicker">{{ if $isGerman }}Bibliothek{{ else }}Library{{ end }}</p>
<h1>{{ .Title }}</h1>
<p class="manga-intro">
{{ if $isGerman }}
Mangas aus der eigenen Bibliothek.
{{ else }}
Manga from your own library.
{{ end }}
</p>
</div>
<div class="manga-hero-meta">
<span>{{ len $items }} {{ if $isGerman }}Bände{{ else }}volumes{{ end }}</span>
</div>
</section>
<section class="manga-library">
{{ if $loadingError }}
<div class="manga-library-status">
{{ if $isGerman }}
Die Bibliothek konnte beim Build nicht geladen werden.
{{ else }}
The library could not be loaded during build.
{{ end }}
</div>
{{ else if eq (len $items) 0 }}
<div class="manga-library-status">
{{ if $isGerman }}
Noch keine gelesenen Mangas gefunden.
{{ else }}
No read manga found yet.
{{ end }}
</div>
{{ else }}
<div class="manga-library-list">
{{ range $items }}
{{ $item := . }}
{{ $authors := cond (gt (len .authors) 0) (delimit .authors ", ") (cond $isGerman "Unbekannt" "Unknown") }}
{{ $displayTitle := printf "%s - %s %s" .editionTitle (cond $isGerman "Band" "Vol.") .numberDisplay }}
{{ if .title }}
{{ $displayTitle = printf "%s - %s" $displayTitle .title }}
{{ end }}
{{ $cover := .cover }}
{{ if not $cover }}
{{ $cover = .editionCover }}
{{ end }}
<article class="manga-list-item">
<div class="manga-list-cover">
{{ if $cover }}
<img src="{{ $cover }}" alt="{{ $displayTitle }}" loading="lazy" referrerpolicy="no-referrer">
{{ else }}
<div class="manga-cover-fallback"></div>
{{ end }}
</div>
<div class="manga-list-body">
<p class="manga-card-series">{{ .editionTitle }}</p>
<h2 class="manga-card-title">{{ $displayTitle }}</h2>
<p class="manga-card-author">{{ $authors }}</p>
</div>
<div class="manga-list-meta">
<div class="manga-card-footer">
<div class="manga-rating" aria-label="{{ if gt .rating 0 }}{{ .rating }} / {{ $ratingMax }}{{ else }}{{ if $isGerman }}Keine Bewertung{{ else }}Unrated{{ end }}{{ end }}">
<span class="manga-rating-stars">
{{ range seq $ratingMax }}
<svg viewBox="0 0 24 24" aria-hidden="true" class="manga-star {{ if le . $item.rating }}is-filled{{ end }}">
<path d="M12 2.25l2.96 6 6.62.96-4.79 4.67 1.13 6.59L12 17.36l-5.92 3.11 1.13-6.59-4.79-4.67 6.62-.96L12 2.25z"></path>
</svg>
{{ end }}
</span>
<span class="manga-rating-value">
{{ if gt .rating 0 }}
{{ .rating }}/{{ $ratingMax }}
{{ else }}
{{ if $isGerman }}Keine Bewertung{{ else }}Unrated{{ end }}
{{ end }}
</span>
</div>
{{ with .updatedAt }}
<span class="manga-card-date">
{{ if $isGerman }}Aktualisiert{{ else }}Updated{{ end }} {{ dateFormat ":date_medium" . }}
</span>
{{ end }}
</div>
</div>
</article>
{{ end }}
</div>
{{ end }}
</section>
</main>
{{ end }}