oliverbooth.dev/OliverBooth/Pages/Projects/Project.cshtml
Oliver Booth cbfdefae71
style: redesign projects page
This change separates the project logo and details into separate pages and makes the list more visually striking.
2023-12-24 12:20:03 +00:00

84 lines
2.6 KiB
Plaintext

@page "/project/{slug}"
@using Markdig
@using OliverBooth.Data.Web
@using OliverBooth.Services
@model Project
@inject IProjectService ProjectService
@inject MarkdownPipeline MarkdownPipeline
@{
ViewData["Title"] = "Projects";
}
<main class="container">
@if (Model.SelectedProject is not { } project)
{
<h1>Project Not Found</h1>
return;
}
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a asp-page="/Projects/Index">Projects</a>
</li>
<li class="breadcrumb-item active" aria-current="page">@project.Name</li>
</ol>
</nav>
<h1>@project.Name</h1>
@if (!string.IsNullOrWhiteSpace(project.Tagline))
{
<p class="lead">@project.Tagline</p>
}
<p class="text-center">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="img-fluid" alt="@project.Name">
</p>
<table class="table">
<tr>
<th style="width: 20%">Languages</th>
<td>
@foreach (IProgrammingLanguage language in ProjectService.GetProgrammingLanguages(project))
{
<img src="https://cdn.olivr.me/img/assets/p/@(language.Key).svg" alt="@language.Name" title="@language.Name" style="height: 2em">
}
</td>
</tr>
<tr>
<th>Status</th>
<td>
@switch (project.Status)
{
case ProjectStatus.Ongoing:
<span class="badge rounded-pill text-bg-success">In Active Development</span>
break;
case ProjectStatus.Past:
<span class="badge rounded-pill text-bg-primary">Completed / Retired</span>
break;
case ProjectStatus.Hiatus:
<span class="badge rounded-pill text-bg-danger">On Hiatus</span>
break;
}
</td>
</tr>
@if (project.RemoteUrl != null)
{
<tr>
<th>View</th>
<td>
<a href="@project.RemoteUrl">
@(new Uri(project.RemoteUrl).Host) <i class="fa-solid fa-arrow-up-right-from-square"></i>
</a>
</td>
</tr>
}
<tr>
<th>Details</th>
<td class="trim-p">@Html.Raw(Markdown.ToHtml(project.Details, MarkdownPipeline))</td>
</tr>
</table>
</main>