Add manga library page template
parent
5922d7f063
commit
3be4ac0459
|
|
@ -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 }}
|
||||
Loading…
Reference in New Issue