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

@inject HttpClient httpClient

@if (content == null)
{
    <LoadingComponent/>
}
else
{
    <div class="note">
        <div class="noteHeader">
            <div class="noteTitle">@NoteContentModel.Name</div>

            <div class="noteDates">
                <div class="noteDateUpdated"><b>Updated</b>: @NoteContentModel.UpdatedDate.ToString("MM/dd/yyyy")</div>
                <div class="noteDateCreated"><b>Created</b>: @NoteContentModel.CreatedDate.ToString("MM/dd/yyyy")</div>
            </div>
        </div>
        <div class="noteContent">@((MarkupString)Markdown.ToHtml(content, pipeline))</div>
    </div>
}

<style>
 .noteTitle {
    font-weight: bold;
 }
 
 .noteHeader {
    display: flex;
    justify-content: space-between;
 }
 
 .noteDates {
    display: flex;
    flex-direction: column;
 }
 
</style>

@code {
    [Parameter]
    public NoteContentModel NoteContentModel { get; set; } = default!;
    
    string? content = null;
    MarkdownPipeline pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
    private async Task<string> LoadContent() => content = await httpClient.GetStringAsync($"content/notes/{NoteContentModel.Content}.md");
    protected override async Task OnParametersSetAsync() => await LoadContent();
    protected override async Task OnInitializedAsync() => await LoadContent();

}