364 lines
17 KiB
Plaintext
364 lines
17 KiB
Plaintext
@page
|
|
@using NodaTime.Serialization.Protobuf
|
|
@model AboutModel
|
|
|
|
@{
|
|
Layout = "_LayoutContained";
|
|
|
|
var pageTitle = "About";
|
|
var pageDescription = "Information page.";
|
|
var ogType = "website";
|
|
string? ogImageUrl = null;
|
|
var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
|
|
var siteName = Model.Site?.Name ?? "Solar Network";
|
|
|
|
if (Model.UserAccount != null)
|
|
{
|
|
pageTitle = $"About {Model.UserAccount.Nick ?? Model.UserAccount.Name}";
|
|
pageDescription = !string.IsNullOrWhiteSpace(Model.UserAccount.Profile?.Bio) ? Model.UserAccount.Profile.Bio : $"Profile of {Model.UserAccount.Nick ?? Model.UserAccount.Name} on {siteName}";
|
|
|
|
ogType = "profile";
|
|
ogImageUrl = Model.UserBackgroundUrl;
|
|
if (!string.IsNullOrEmpty(ogImageUrl) && !ogImageUrl.StartsWith("http"))
|
|
ogImageUrl = $"{Request.Scheme}://{Request.Host}{ogImageUrl}";
|
|
}
|
|
else if (Model.Site != null)
|
|
{
|
|
pageTitle = $"About {Model.Site.Name}";
|
|
if (!string.IsNullOrWhiteSpace(Model.Site.Description))
|
|
{
|
|
pageDescription = Model.Site.Description;
|
|
}
|
|
|
|
ogType = "website";
|
|
ogImageUrl = null;
|
|
}
|
|
|
|
if (!string.IsNullOrWhiteSpace(pageDescription) && pageDescription.Length > 160)
|
|
{
|
|
pageDescription = pageDescription.Substring(0, 157) + "...";
|
|
}
|
|
|
|
ViewData["Title"] = $"{pageTitle} - {siteName}";
|
|
}
|
|
|
|
@section Head {
|
|
|
|
<meta name="description" content="@pageDescription"/>
|
|
<link rel="canonical" href="@canonicalUrl"/>
|
|
|
|
<meta property="og:title" content="@pageTitle"/>
|
|
<meta property="og:description" content="@pageDescription"/>
|
|
<meta property="og:type" content="@ogType"/>
|
|
<meta property="og:url" content="@canonicalUrl"/>
|
|
@if (!string.IsNullOrEmpty(ogImageUrl))
|
|
{
|
|
<meta property="og:image" content="@ogImageUrl"/>
|
|
}
|
|
<meta property="og:site_name" content="@siteName"/>
|
|
|
|
<meta name="twitter:card" content="summary"/>
|
|
<meta name="twitter:title" content="@pageTitle"/>
|
|
<meta name="twitter:description" content="@pageDescription"/>
|
|
@if (!string.IsNullOrEmpty(ogImageUrl))
|
|
{
|
|
<meta name="twitter:image" content="@ogImageUrl"/>
|
|
}
|
|
}
|
|
|
|
|
|
@if (Model.UserAccount != null)
|
|
{
|
|
@if (!string.IsNullOrEmpty(Model.UserBackgroundUrl))
|
|
{
|
|
<img src="@Model.UserBackgroundUrl" class="w-full max-h-48 object-cover mb-8" alt="Background Image"/>
|
|
}
|
|
|
|
<div class="container mx-auto px-8 pb-8">
|
|
<h2 class="text-xl flex gap-2 mb-5 px-3">
|
|
<span class="mdi mdi-account-circle"></span>
|
|
About me
|
|
</h2>
|
|
|
|
<div class="flex items-center gap-6 mb-8">
|
|
@if (!string.IsNullOrEmpty(Model.UserPictureUrl))
|
|
{
|
|
<img src="@Model.UserPictureUrl" class="w-20 h-20 rounded-full object-cover" alt="Avatar"/>
|
|
}
|
|
else
|
|
{
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center">
|
|
<span class="text-2xl">@(Model.UserAccount.Name != null ? Model.UserAccount.Name[0] : '?')</span>
|
|
</div>
|
|
}
|
|
<div>
|
|
<div class="text-2xl font-bold">
|
|
@(Model.UserAccount.Nick ?? Model.UserAccount.Name)
|
|
</div>
|
|
<div class="text-body-2 text-base-content/60">@@@Model.UserAccount.Name</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="flex flex-col gap-4 flex-1">
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title"><span class="mdi mdi-home"></span> Info</h3>
|
|
|
|
<div class="space-y-2">
|
|
@if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.TimeZone))
|
|
{
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-map-clock"></span>
|
|
Time Zone
|
|
</span>
|
|
<span class="text-right">
|
|
@Model.GetCurrentTimeInTimeZone(Model.UserAccount.Profile.TimeZone)
|
|
<span class="text-base-content/50">·</span>
|
|
@Model.GetOffsetUtcString(Model.UserAccount.Profile.TimeZone)
|
|
<span class="text-base-content/50">·</span>
|
|
@Model.UserAccount.Profile.TimeZone
|
|
</span>
|
|
</div>
|
|
}
|
|
@if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Location))
|
|
{
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-map-marker"></span> Location
|
|
</span>
|
|
<span>@Model.UserAccount.Profile.Location</span>
|
|
</div>
|
|
}
|
|
@if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.FirstName) || !string.IsNullOrEmpty(Model.UserAccount.Profile?.LastName))
|
|
{
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-card-bulleted-outline"></span> Name
|
|
</span>
|
|
<span>
|
|
@string.Join(" ", new[]
|
|
{
|
|
Model.UserAccount.Profile.FirstName,
|
|
Model.UserAccount.Profile.MiddleName,
|
|
Model.UserAccount.Profile.LastName
|
|
}.Where(s => !string.IsNullOrEmpty(s)))
|
|
</span>
|
|
</div>
|
|
}
|
|
@if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Gender))
|
|
{
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-human-non-binary"></span> Gender
|
|
</span>
|
|
<span>
|
|
@Model.UserAccount.Profile.Gender
|
|
@if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Pronouns))
|
|
{
|
|
<span class="text-base-content/50">·</span>
|
|
@Model.UserAccount.Profile.Pronouns
|
|
}
|
|
</span>
|
|
</div>
|
|
}
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-history"></span> Joined at
|
|
</span>
|
|
<span>
|
|
@Model.UserAccount.CreatedAt?.ToDateTimeOffset().ToString("MMMM d, yyyy")
|
|
</span>
|
|
</div>
|
|
@if (Model.UserAccount.Profile?.Birthday != null)
|
|
{
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-cake-variant"></span> Birthday
|
|
</span>
|
|
<span>
|
|
@Model.CalculateAge(Model.UserAccount.Profile.Birthday.ToInstant()) yrs old
|
|
<span class="text-base-content/50">·</span>
|
|
@Model.UserAccount.Profile.Birthday?.ToDateTimeOffset().ToString("MMMM d")
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (Model.UserAccount.PerkSubscription != null)
|
|
{
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-col">
|
|
<div class="text-xl font-bold">
|
|
@Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Name Tier
|
|
</div>
|
|
<div class="text-sm text-base-content/70">Stellar Program Member</div>
|
|
</div>
|
|
<div class="text-4xl"
|
|
style="color: @Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Color">
|
|
★
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<div class="flex justify-between mb-2">
|
|
<div>Level @Model.UserAccount.Profile?.Level</div>
|
|
<div>@Model.UserAccount.Profile?.Experience XP</div>
|
|
</div>
|
|
<progress class="progress progress-success"
|
|
value="@(Model.UserAccount.Profile?.LevelingProgress ?? 0)" max="1"></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 flex-1">
|
|
@if (Model.UserAccount.Profile?.Links.Count > 0)
|
|
{
|
|
<div>
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<span class="mdi mdi-link-variant"></span> Links
|
|
</h3>
|
|
<ul class="list pt-2">
|
|
@foreach (var link in Model.UserAccount.Profile.Links)
|
|
{
|
|
<li class="list-row p-0">
|
|
<div class="list-col-grow">
|
|
<div>@(link.Name)</div>
|
|
<div class="text-xs font-semibold opacity-60">@(link.Url)</div>
|
|
</div>
|
|
<a class="btn btn-square btn-ghost" href="@link.Url" target="_blank">
|
|
<span class="mdi mdi-launch"></span>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (Model.UserAccount.Contacts.Count > 0)
|
|
{
|
|
<div>
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<span class="mdi mdi-contacts"></span> Contacts
|
|
</h3>
|
|
<ul class="list pt-2">
|
|
@foreach (var contact in Model.UserAccount.Contacts)
|
|
{
|
|
<li class="list-row p-0" x-data="{ content: '@contact.Content' }">
|
|
<div class="list-col-grow">
|
|
<div>@(contact.Content)</div>
|
|
<div
|
|
class="text-xs font-semibold opacity-60">@(contact.Type.ToString())</div>
|
|
</div>
|
|
<button class="btn btn-square btn-ghost" x-clipboard="content">
|
|
<span class="mdi mdi-content-copy"></span>
|
|
</button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (!string.IsNullOrEmpty(Model.HtmlBio))
|
|
{
|
|
<div>
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<span class="mdi mdi-information"></span> Bio
|
|
</h3>
|
|
<div class="prose prose-sm max-w-none">
|
|
@Html.Raw(Model.HtmlBio)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (Model.Site != null)
|
|
{
|
|
<div class="container mx-auto px-8 pb-8">
|
|
<h2 class="text-xl flex gap-2 mb-5 px-3">
|
|
<span class="mdi mdi-sitemap"></span>
|
|
About the site
|
|
</h2>
|
|
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<div class="flex flex-col gap-4 flex-1">
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title"><span class="mdi mdi-home"></span> Info</h3>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-label"></span>
|
|
Name
|
|
</span>
|
|
<span class="text-right">@Model.Site.Name</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between">
|
|
<span class="flex gap-2">
|
|
<span class="mdi mdi-tag"></span>
|
|
Slug
|
|
</span>
|
|
<span class="text-right font-mono">@Model.Site.Slug</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 flex-1">
|
|
@if (!string.IsNullOrEmpty(Model.Site.Description))
|
|
{
|
|
<div class="flex-1">
|
|
<div class="card bg-base-100 border">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
<span class="mdi mdi-information"></span> Description
|
|
</h3>
|
|
<div class="prose prose-sm max-w-none">
|
|
@Model.Site.Description
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div class="flex-1">
|
|
<div class="flex flex-col p-5 opacity-80 text-sm">
|
|
<p>Proudly powered by the Solar Network Pages</p>
|
|
<p>Hosted on the Solar Network</p>
|
|
<p class="mt-2">Network powered by Cloudflare</p>
|
|
<p>Therefore, if the site is down, 99% is Cloudflare's fault</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|