oliverbooth.dev/OliverBooth/Pages/Tutorials/Index.cshtml

98 lines
3.9 KiB
Plaintext

@page "/tutorials/{**slug}"
@using System.Text
@using OliverBooth.Data.Web
@using OliverBooth.Services
@model Index
@inject ITutorialService TutorialService
@{
ViewData["Title"] = "Tutorials";
ITutorialFolder? currentFolder = Model.CurrentFolder;
}
<main class="container">
@if (currentFolder is not null)
{
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a asp-page="/Tutorials/Index" asp-route-slug="">Tutorials</a>
</li>
@{
int? parentId = currentFolder.Id;
while (parentId is not null)
{
ITutorialFolder thisFolder = TutorialService.GetFolder(parentId.Value)!;
<li class="breadcrumb-item active" aria-current="page">@thisFolder.Title</li>
parentId = thisFolder.Parent;
}
}
</ol>
</nav>
}
<h1 class="display-4">@(currentFolder?.Title ?? "Tutorials")</h1>
@foreach (ITutorialFolder[] folders in TutorialService.GetFolders(currentFolder).Chunk(2))
{
<div class="card-group row" style="margin-top: 20px;">
@foreach (ITutorialFolder folder in folders)
{
<div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
<div class="project-card">
<div class="project-image">
<a asp-page="Index" asp-route-slug="@folder.Slug">
<img src="@folder.PreviewImageUrl" class="card-img-top" alt="@folder.Title">
</a>
<a asp-page="Index" asp-route-slug="@folder.Slug">
<p class="project-title">@folder.Title</p>
</a>
</div>
</div>
</div>
}
</div>
}
@if (currentFolder is not null)
{
foreach (ITutorialArticle[] articles in TutorialService.GetArticles(currentFolder).Chunk(2))
{
<div class="card-group row" style="margin-top: 20px;">
@foreach (ITutorialArticle article in articles)
{
var slugBuilder = new StringBuilder();
ITutorialFolder? folder = TutorialService.GetFolder(article.Folder);
if (folder is not null)
{
slugBuilder.Append(folder.Slug);
slugBuilder.Append('/');
}
while (folder?.Parent is { } parentId)
{
folder = TutorialService.GetFolder(parentId);
if (folder is not null)
{
slugBuilder.Append(folder.Slug);
slugBuilder.Append('/');
}
}
string slug = slugBuilder + article.Slug;
<div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
<div class="project-card">
<div class="project-image">
<a asp-page="Article" asp-route-slug="@slug">
<img src="@article.PreviewImageUrl" class="card-img-top" alt="@article.Title">
</a>
<a asp-page="Article" asp-route-slug="@slug">
<p class="project-title">@article.Title</p>
</a>
</div>
</div>
</div>
}
</div>
}
}
</main>