mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
perennial
400 lines
17 KiB
HTML
400 lines
17 KiB
HTML
{{- extends "layout/default" }}
|
|
{{- import "blocks/pagination" }}
|
|
{{- import "blocks/underlinenavUser" }}
|
|
{{- import "blocks/underlinenav" }}
|
|
{{- block body() }}
|
|
|
|
<div class="d-none">
|
|
<p>Home</p>
|
|
<p>Illustrations</p>
|
|
<p>Manga</p>
|
|
<p>Novels</p>
|
|
<p>Bookmarks</p>
|
|
</div>
|
|
<div class="row justify-content-center g-4">
|
|
<div class="col-12 col-lg-9 mb-4">
|
|
<div class="custom-card bg-charcoal-surface1">
|
|
<!-- Profile background image -->
|
|
{{- if .User.BackgroundImage }}
|
|
<div class="d-flex position-relative mb-5 mb-md-0">
|
|
<img src="{{ .User.BackgroundImage }}" alt="{{ .User.Name }} profile background image"
|
|
class="img-fluid rounded-top-5 object-fit-cover w-100"
|
|
style="max-height: 200px;"
|
|
width="1920px"
|
|
height="960px"
|
|
/>
|
|
<img src="{{.User.Avatar}}" alt="User avatar"
|
|
class="d-inline-block d-md-none border border-5 border-neutral-800 rounded-circle object-fit-cover position-absolute z-1"
|
|
style="width: 150px; height: 150px; bottom: 0; left: 50%; transform: translate(-50%, 50%);">
|
|
</div>
|
|
{{- end }}
|
|
|
|
<div class="custom-card-body p-4 mt-md-0">
|
|
{{- if !.User.BackgroundImage }}
|
|
<img src="{{.User.Avatar}}" alt="User avatar"
|
|
class="d-flex d-md-none border border-5 border-neutral-800 rounded-circle object-fit-cover mx-auto"
|
|
style="width: 150px; height: 150px">
|
|
{{- end }}
|
|
|
|
<div class="row g-4 mt-3 mt-md-0">
|
|
<!-- User avatar and external link to pixiv.net -->
|
|
<div class="col-12 col-md-3 d-none d-md-block mt-0">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<img src="{{.User.Avatar}}" alt="User avatar" class="rounded-circle object-fit-cover mb-3" style="width: 150px; height: 150px">
|
|
|
|
<div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
|
|
<small class="text-center">
|
|
<i class="bi bi-box-arrow-up-right me-1"></i>
|
|
<a href="https://pixiv.net/u/{{ .User.ID }}" class="text-body-secondary fw-semibold">
|
|
View on pixiv.net
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-9 mt-0">
|
|
<!-- User name and follow/unfollow buttons -->
|
|
<div class="d-flex flex-column flex-md-row flex-wrap justify-content-xl-between align-items-center mb-3 mb-md-2">
|
|
<h1 class="flex-grow-1 mb-2 mb-md-0">{{ .User.Name }}</h1>
|
|
<p class="d-inline-block d-md-none text-body-secondary text-center">{{ .User.Following }} Following | {{ .User.MyPixiv }} MyPixiv</p>
|
|
{{- include "fragments/followButtons" .User }}
|
|
</div>
|
|
|
|
<!-- Social media links -->
|
|
<p class="d-none d-md-inline-block text-body-secondary text-md-start">{{ .User.Following }} Following | {{ .User.MyPixiv }} MyPixiv</p>
|
|
<div class="d-flex justify-content-center justify-content-md-start mb-3">
|
|
{{- if .User.Webpage }}
|
|
<a href="{{ .User.Webpage }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
|
|
<i class="bi bi-globe"></i>
|
|
</a>
|
|
{{- end }}
|
|
{{- range index, item := .User.Social }}
|
|
{{- if index == "pawoo" }}
|
|
<a href="{{ item.url }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
|
|
<i class="bi bi-mastodon"></i>
|
|
</a>
|
|
{{- else }}
|
|
<a href="{{ item.url }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
|
|
<i class="bi bi-{{ index }}"></i>
|
|
</a>
|
|
{{- end }}
|
|
{{- end }}
|
|
</div>
|
|
|
|
{* NOTE: this button definitely needs to be in a different place *}
|
|
<div class="d-inline-flex d-md-none border border-neutral-700 rounded py-1 px-2 mb-3">
|
|
<small>
|
|
<i class="bi bi-box-arrow-up-right me-1"></i>
|
|
<a href="https://pixiv.net/u/{{ .User.ID }}" class="text-body-secondary fw-semibold stretched-link">
|
|
View on pixiv.net
|
|
</a>
|
|
</small>
|
|
</div>
|
|
|
|
<!-- User bio and frequently used tags -->
|
|
<p class="mb-0">{{ raw: parsePixivRedirect(.User.Comment) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" id="checkpoint">
|
|
<!-- Navigation -->
|
|
<div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto">
|
|
{* Using an empty fragment identifier so that htmx preserves the page position *}
|
|
{{- baseURL := "/users/" + .User.ID + "/" }}
|
|
{{- paths := slice("" + "#", "illustrations" + "#", "manga" + "#", "novels" + "#", "bookmarks" + "#") }}
|
|
{{- names := slice("Home", "Illustrations", "Manga", "Novels", "Bookmarks") }}
|
|
{{- categoryCounts := slice(1, .User.Categories.illustrations.WorkCount, .User.Categories.manga.WorkCount, .User.Categories.novels.WorkCount, .User.Categories.bookmarks.WorkCount) }}
|
|
{{- yield UnderlineNavUser(baseURL=baseURL, paths=paths, names=names, categoryCounts=categoryCounts, activeState=.Category.Value + "#") }}
|
|
|
|
{*
|
|
NOTE: these filters technically work but are disabled due to issues with pagination and work counts
|
|
|
|
{{- Mode := isset(Queries.mode) ? Queries.mode : "all" }}
|
|
{{- url := replaceQuery(.Queries, "mode", "") }}
|
|
{{- path := slice("all", "safe") }}
|
|
{{- name := slice("All", "Safe")}}
|
|
{{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
|
|
<div class="d-none">
|
|
<p>All</p>
|
|
<p>Safe</p>
|
|
</div>
|
|
*}
|
|
</div>
|
|
|
|
<hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
|
|
|
|
<!-- User content -->
|
|
|
|
<!-- Home category (all works) -->
|
|
{{- if .Category.Value == "" || .Category.Value == "artworks" }}
|
|
|
|
{*
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<!-- NOTE: using sentence case here to be more consistent with the rest of our UI, even though pixiv uses title case -->
|
|
<h2 class="d-flex align-items-end mb-0">Works<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.WorkCounts.All }}</span></h2>
|
|
</div>
|
|
*}
|
|
|
|
{* Initialize a flag to track the first rendered group *}
|
|
{{- isFirstGroup := true }}
|
|
|
|
<!-- Illustrations -->
|
|
{{ if len(.User.Categories.illustrations.IllustWorks) != 0 }}
|
|
{{- if not isFirstGroup }}
|
|
<hr class="my-4">
|
|
{{- end }}
|
|
<h2 class="d-flex align-items-end">Illustrations<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.illustrations.WorkCount }}</span></h2>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.illustrations.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
|
|
{{- include "fragments/small-tn" .User.Categories.illustrations.IllustWorks }}
|
|
</div>
|
|
|
|
{* TODO: use a better check than this *}
|
|
{{ if len(.User.Categories.illustrations.IllustWorks) > 29 }}
|
|
<div class="d-flex mt-3">
|
|
<a href="{{ .User.ID + "/illustrations" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{* After rendering Illustrations, set isFirstGroup to false *}
|
|
{{- isFirstGroup = false }}
|
|
{{- end }}
|
|
|
|
<!-- Manga -->
|
|
{{ if len(.User.Categories.manga.IllustWorks) != 0 }}
|
|
{{- if not isFirstGroup }}
|
|
<hr class="my-4">
|
|
{{- end }}
|
|
<h2 class="d-flex align-items-end">Manga<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.manga.WorkCount }}</span></h2>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.manga.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{- if len(.User.Categories.manga.MangaSeries) != 0 }}
|
|
<div class="overflow-scroll mb-4" id="horizontal-scroll">
|
|
<div class="row flex-nowrap">
|
|
{{- range .User.Categories.manga.MangaSeries }}
|
|
{{- include "fragments/mangaseries-tn" . }}
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
|
|
{{- include "fragments/small-tn" .User.Categories.manga.IllustWorks }}
|
|
</div>
|
|
|
|
{{ if len(.User.Categories.manga.IllustWorks) > 29 }}
|
|
<div class="d-flex mt-3">
|
|
<a href="{{ .User.ID + "/manga" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- isFirstGroup = false }}
|
|
{{- end }}
|
|
|
|
<!-- Novels -->
|
|
{{ if len(.User.Categories.novels.NovelWorks) != 0 }}
|
|
{{- if not isFirstGroup }}
|
|
<hr class="my-4">
|
|
{{- end }}
|
|
<h2 class="d-flex align-items-end">Novels<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.novels.WorkCount }}</span></h2>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.novels.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{- if len(.User.Categories.novels.NovelSeries) != 0 }}
|
|
<div class="overflow-scroll mb-4" id="horizontal-scroll">
|
|
<div class="row flex-nowrap">
|
|
{{- range .User.Categories.novels.NovelSeries }}
|
|
{{- include "fragments/novelseries-tn" . }}
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
<div class="row row-cols-1 row-cols-lg-2 g-4">
|
|
{{- range .User.Categories.novels.NovelWorks }}
|
|
<div class="col mt-1">
|
|
<div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
|
|
{{- include "fragments/novel-tn" . }}
|
|
</div>
|
|
<hr class="my-0">
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{ if len(.User.Categories.novels.NovelWorks) > 29 }}
|
|
<div class="d-flex mt-3">
|
|
<a href="{{ .User.ID + "/novels" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- isFirstGroup = false }}
|
|
{{- end }}
|
|
|
|
{{- end }}
|
|
|
|
<!-- Illustrations category -->
|
|
{{- if .Category.Value == "illustrations" }}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="d-flex align-items-end mb-0">Illustrations<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.illustrations.WorkCount }}</span></h2>
|
|
</div>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.illustrations.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
|
|
{{- include "fragments/small-tn" .User.Categories.illustrations.IllustWorks }}
|
|
</div>
|
|
{{- end }}
|
|
|
|
<!-- Manga category -->
|
|
{{- if .Category.Value == "manga" }}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="d-flex align-items-end mb-0">Manga<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.manga.WorkCount }}</span></h2>
|
|
{{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.User.Categories.manga.IllustWorks) }}
|
|
<!-- <a href="{{combinedUrl}}" class="custom-btn-secondary">View all</a> -->
|
|
</div>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.manga.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{- if len(.User.Categories.manga.MangaSeries) != 0 }}
|
|
<div class="overflow-scroll mb-4" id="horizontal-scroll">
|
|
<div class="row flex-nowrap">
|
|
{{- range .User.Categories.manga.MangaSeries }}
|
|
{{- include "fragments/mangaseries-tn" . }}
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
|
|
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
|
|
{{- include "fragments/small-tn" .User.Categories.manga.IllustWorks }}
|
|
</div>
|
|
{{- end }}
|
|
|
|
<!-- Novels category -->
|
|
{{- if .Category.Value == "novels" }}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="d-flex align-items-end mb-0">Novels<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.novels.WorkCount}}</span></h2>
|
|
</div>
|
|
|
|
<div class="d-flex flex-nowrap overflow-scroll mb-3">
|
|
{{- range .User.Categories.novels.FrequentTags }}
|
|
<div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
|
|
<small class="d-flex flex-column align-items-center">
|
|
<span>
|
|
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
|
|
</span>
|
|
{{- if .TranslatedName }}
|
|
<small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
|
|
{{- end }}
|
|
</small>
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
|
|
<div class="row row-cols-1 row-cols-lg-2 g-4">
|
|
{{- range .User.Categories.novels.NovelWorks }}
|
|
<div class="col mt-1">
|
|
<div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
|
|
{{- include "fragments/novel-tn" . }}
|
|
</div>
|
|
<hr class="my-0">
|
|
</div>
|
|
{{- end }}
|
|
</div>
|
|
{{- end }}
|
|
|
|
<!-- Bookmarks category -->
|
|
{{- if .Category.Value == "bookmarks" }}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="d-flex align-items-end mb-0">Bookmarks<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.bookmarks.WorkCount }}</span></h2>
|
|
</div>
|
|
{* NOTE: using .User.Artworks since there's no need to create a separate bookmarks slice; the category handles it *}
|
|
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
|
|
{{- include "fragments/small-tn" .User.Categories.bookmarks.IllustWorks }}
|
|
</div>
|
|
{{- end }}
|
|
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{* TODO: figure out how to 'paginate' the home tab correctly; htmx for swapping in categories? *}
|
|
{{- if .Category.Value == "illustrations" || .Category.Value == "manga" || .Category.Value == "novels" || .Category.Value == "bookmarks" }}
|
|
{{- url := "/users/" + .User.ID + "/" + .Category.Value + "?page="}}
|
|
{{- paginationData := createPaginator(url, "#checkpoint", .Page, .Category.PageLimit, 1, 5) }}
|
|
{{- yield pagination(data=paginationData) }}
|
|
{{- end }}
|
|
</div>
|
|
{{- end }}
|