IGP-Fan-Reference/IGP/Pages/Notes/Parts/NoteComponent.razor

@inject HttpClient httpClient

@if (content == null)
{
    <LoadingComponent/>
}
else
{
    <div class="note">
        <div class="noteHeader">
            <h1 class="noteTitle">@noteFrontMatter.Title</h1>
            <div class="noteDates">
                <div class="noteDateUpdated"><b>Updated</b>: @noteFrontMatter.UpdatedDate.ToString("MM/dd/yyyy")</div>
                <div class="noteDateCreated"><b>Created</b>: @noteFrontMatter.CreatedDate.ToString("MM/dd/yyyy")</div>
            </div>
        </div>
        <div class="noteContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
        <div class="noteFooter">
            <LinkButtonComponent Href="@GitUrl">
                Edit on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
            </LinkButtonComponent>
        </div>
    </div>
}

<style>
    .noteTitle {
        font-weight: bold;
    }

    .noteHeader {
        display: flex;
        justify-content: space-between;
    }

    .noteDates {
        display: flex;
        flex-direction: column;
    }


    .noteFooter {
        display: flex;
        justify-content: flex-end;
    }

</style>

@code {

    [Parameter] public NoteContentModel NoteContentModel { get; set; } = default!;

    NoteFrontMatterModel noteFrontMatter = null!;
    private string? content;

    private string Filepath => $"content/notes/{NoteContentModel.Content}.md";
    private string GitUrl => $"{Project.GitResourcesUrl}/{Filepath}";
    private MarkdownPipeline Pipeline => MarkdownFiles.Pipeline;

    private async Task<NoteFrontMatterModel> LoadContent()
    {
        content = await MarkdownFiles.LoadMarkdown(httpClient, Filepath);

        return noteFrontMatter =
            await MarkdownFiles.LoadFrontMatter<NoteFrontMatterModel>(httpClient, Filepath);
    }

    protected override async Task OnParametersSetAsync()
    {
        await LoadContent();
    }

    protected override async Task OnInitializedAsync()
    {
        await LoadContent();
    }

}