Wave/Wave/Components/ArticleComponent.razor
Mia Rose Winter 461ac238ac
Some checks failed
Build, Tag, Push Docker Image / build (push) Has been cancelled
Create Release / Generate Release (push) Has been cancelled
Improved ArticleView Page header
2024-02-27 16:03:49 +01:00

98 lines
3.6 KiB
Plaintext

@using Wave.Data
@using Humanizer
@using Wave.Utilities
@inject IStringLocalizer<Pages.ArticleView> Localizer
<SectionContent SectionName="GlobalHeader">
<header class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-4 md:px-12">
<h1 class="text-3xl lg:text-5xl font-light">
@Article.Title
</h1>
<p>
<small class="text-sm">
@Article.Author.FullName <br>
<time datetime="@Article.PublishDate.ToString("u")"
title="@Article.PublishDate.ToString("g")">
@Article.PublishDate.ToString("g")
</time>
@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
<time datetime="@Article.LastModified.Value.ToString("u")"
title="@Article.LastModified.Value.ToString("g")">
(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
</time>
}
</small>
@if (Article.Status < ArticleStatus.Published) {
<span class="badge badge-sm badge-outline badge-warning ml-2">
@Article.Status.Humanize()
</span>
}
</p>
<div class="flex justify-between items-end my-3">
@if (Article.Categories.Count > 0) {
<p class="flex flex-wrap gap-2">
@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
<CategoryBadgeComponent Category="category" />
}
</p>
} else {
<p> </p>
}
<ReaderToggle Label="@Localizer["ToggleReader_Label"]" />
</div>
</header>
</SectionContent>
<article class="mb-6">
<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
@Content
</div>
</article>
@if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
<section class="mb-2">
<div class="card sm:card-side card-compact bg-secondary text-secondary-content rounded shadow">
<figure class="shrink-0">
<img class="sm:max-h-56" src="/api/user/pfp/@Article.Author.Id?size=400" alt="" width="400" loading="async">
</figure>
<div class="card-body sm:border-l-2 border-current">
<h2 class="card-title">About The Author</h2>
<h3><strong>@Article.Author.Name</strong></h3>
<p>
@Article.Author.AboutTheAuthor
</p>
<div class="card-actions justify-around md:justify-start flex gap-2 flex-wrap">
@foreach (var link in Article.Author.Links) {
<UserLinkComponent Link="link" class="badge hover:badge-outline flex gap-2 p-4" />
}
<UserContactBadges User="Article.Author" />
<a class="badge hover:badge-outline flex gap-2 p-4" href="/profile/@Article.Author.Id">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" />
</svg>
@Localizer["AboutTheAuthor_Profile_Label"]
</a>
</div>
</div>
</div>
</section>
}
<div class="flex gap-2 flex-wrap">
@if (string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
<ProfilePill Profile="Article.Author" RoleTag="@Localizer["Author"]"/>
}
@if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
<ProfilePill Profile="Article.Reviewer" RoleTag="@Localizer["Reviewer"]"/>
}
</div>
@code {
[Parameter]
public required Article Article { get; set; }
private MarkupString Content => new(Article.BodyHtml);
}