oliverbooth.dev/OliverBooth/Pages/Projects/Project.cshtml

@page "/project/{slug}"
@using Markdig
@using OliverBooth.Data.Web
@using OliverBooth.Services
@model Project
@inject IProjectService ProjectService
@inject MarkdownPipeline MarkdownPipeline

@{
    IProject? project = Model.SelectedProject;
    ViewData["Title"] = project is null ? "Projects" : project.Name;
}

<main class="container">
    @if (project is null)
    {
        <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</span>
                        break;

                    case ProjectStatus.Hiatus:
                        <span class="badge rounded-pill text-bg-warning">On Hiatus</span>
                        break;

                    case ProjectStatus.Retired:
                        <span class="badge rounded-pill text-bg-danger">Retired</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>