IGP-Fan-Reference/IGP/Pages/Documentation/Parts/DocumentComponent.razor

@using System.Net.Http.Json
@using Markdig.Extensions.Yaml
@using Markdig.Syntax
@using YamlDotNet.Serialization
@inject HttpClient httpClient

@if (content == null)
{
    <LoadingComponent/>
}
else
{
    <div class="doc">
        <div class="docHeader">
            <div class="docTitle">@docFrontMatter.Title</div>
            <div class="docDates">
                <div class="docDateUpdated"><b>Updated</b>: @docFrontMatter.UpdatedDate.ToString("MM/dd/yyyy")</div>
                <div class="docDateCreated"><b>Created</b>: @docFrontMatter.CreatedDate.ToString("MM/dd/yyyy")</div>
            </div>
        </div>
        <div class="docContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
        <div class="docFooter"><EditLinkComponent Href="@GitUrl"></EditLinkComponent></div>
    </div>
    
    
}

<style>
 .docTitle {
    font-weight: bold;
 }
 
 .docHeader {
    display: flex;
    justify-content: space-between;
 }
 
 .docDates {
    display: flex;
    flex-direction: column;
 }
 
 .docFooter {
    display: flex;
    justify-content: flex-end;
 }
 
 th {
    padding:  8px;
    border: 1px solid gray;
 }
  td {
    padding:  8px;
    border: 1px solid gray;
  }  
</style>

@code {
    [Parameter] public DocContentModel DocContentModel { get; set; } = default!;

    DocFrontMatterModel docFrontMatter = null!;
    private string? content = null;
    
    private string Filepath => $"content/docs/{DocContentModel.Content}.md";
    private string GitUrl => $"{Project.GitResourcesUrl}/{Filepath}";
    private MarkdownPipeline Pipeline => MarkdownFiles.Pipeline;

    private async Task<DocFrontMatterModel> LoadContent() {
        content = await MarkdownFiles.LoadMarkdown(httpClient, Filepath);
        
        return docFrontMatter =
            await MarkdownFiles.LoadFrontMatter<DocFrontMatterModel>(httpClient, Filepath);
    }

    protected override async Task OnParametersSetAsync() => await LoadContent();
    protected override async Task OnInitializedAsync() => await LoadContent();
}