ShowBlogPostPage.razor

@page "/blogPost/{blogPostId}/{slug?}"
@using System.Text
@using Markdig
@using LinkDotNet.Blog.Domain
@using LinkDotNet.Blog.Infrastructure.Persistence
@using LinkDotNet.Blog.Web.Features.Bookmarks
@using LinkDotNet.Blog.Web.Features.Services
@using LinkDotNet.Blog.Web.Features.ShowBlogPost.Components
@using LinkDotNet.Blog.Web.Features.SupportMe.Components
@using LinkDotNet.Blog.Web.Features.Bookmarks.Components
@inject IRepository<BlogPost> BlogPostRepository
@inject IRepository<ShortCode> ShortCodeRepository
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@inject IUserRecordService UserRecordService
@inject IOptions<ApplicationConfiguration> AppConfiguration
@inject IOptions<ProfileInformation> ProfileInformation
@inject IOptions<SupportMeConfiguration> SupportConfiguration
@inject IBookmarkService BookmarkService

@if (isLoading)
{
    <Loading></Loading>
}
else if (!isLoading && BlogPost is null)
{
	<ObjectNotFound></ObjectNotFound>
}
else if (BlogPost is not null)
{
	<PageTitle>@BlogPost.Title</PageTitle>
	<OgData Title="@BlogPost.Title"
	        AbsolutePreviewImageUrl="@OgDataImage"
	        Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
	        Keywords="@BlogPost.TagsAsString"
	        CanonicalRelativeUrl="@BlogPostCanoncialUrl">
		<StructuredData Headline="@BlogPost.Title"
		                PreviewImage="@BlogPost.PreviewImageUrl"
		                PreviewFallbackImage="@BlogPost.PreviewImageUrlFallback"
		                PublishedDate="@BlogPost.UpdatedDate"
		                Author="@ProfileInformation.Value.Name"/>
	</OgData>

	<div class="d-flex justify-content-center pt-2 blog-outer-box">
		<div class="blog-container">
			<div class="blog-inner-content">
				<header class="text-center">
					<h1 class="fw-bold">@BlogPost.Title</h1></header>
				<div class="text-body-secondary d-flex flex-wrap align-items-center gap-3 meta-info">
					<div class="d-inline-flex align-items-center">
						<span class="date me-1"></span>
						<span>@BlogPost.UpdatedDate.ToShortDateString()</span>
					</div>
					<div class="d-inline-flex align-items-center">
						<span class="read-time me-1"></span>
						<span>@BlogPost.ReadingTimeInMinutes minute read</span>
					</div>
                    @if (AppConfiguration.Value.UseMultiAuthorMode && BlogPost.AuthorName is not null)
                    {
						<div class="d-inline-flex align-items-center">
							<i class="user-tie me-1"></i>
							<span>@BlogPost.AuthorName</span>
						</div>
                    }
                    <div class="d-inline-flex align-items-center">
						<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="BlogPostBookmarked"></BookmarkButton>
					</div>
					@if (BlogPost.Tags is not null && BlogPost.Tags.Any())
					{
						<div class="d-inline-flex align-items-center flex-wrap">
							<span class="blogpost-tag me-2"></span>
							<div class="d-flex flex-wrap gap-2">
								@foreach (var tag in BlogPost.Tags)
								{
									<a class="goto-tag badge bg-primary rounded-pill text-decoration-none" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
								}
							</div>
						</div>
					}
				</div>

				<div class="pt-2">
					<BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
				</div>

				<div class="pt-2">
					<TableOfContents Content="@BlogPost.Content" CurrentUri="@NavigationManager.Uri"></TableOfContents>
				</div>

				<div class="blogpost-content">
					@(EnrichWithShortCodes(BlogPost.Content))
				</div>
			</div>
			<div class="d-flex justify-content-between py-2 border-top border-bottom align-items-center">
				<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
				<ShareBlogPost></ShareBlogPost>
			</div>
            @if (SupportConfiguration.Value.ShowUnderBlogPost)
            {
                <DonationSection />
            }
            @if (AppConfiguration.Value.ShowSimilarPosts)
			{
				<SimilarBlogPostSection BlogPost="@BlogPost" />
			}
			<CommentSection></CommentSection>
		</div>
	</div>

	@if (AppConfiguration.Value.ShowReadingIndicator)
	{
		<ReadingIndicator ContainerCssSelector=".blog-inner-content"/>
	}
}

@code {
    [Parameter, EditorRequired]
    public required string BlogPostId { get; set; }

    [Parameter]
    public string? Slug { get; set; }

    private bool isLoading;

	private string OgDataImage => BlogPost!.PreviewImageUrlFallback ?? BlogPost.PreviewImageUrl;
	private string BlogPostCanoncialUrl => $"blogPost/{BlogPost?.Id}";
	private IReadOnlyCollection<ShortCode> shortCodes = [];
	private bool isBookmarked;

	private BlogPost? BlogPost { get; set; }

	protected override async Task OnInitializedAsync()
	{
		shortCodes = await ShortCodeRepository.GetAllAsync();
	}

	protected override async Task OnParametersSetAsync()
    {
	    isLoading = true;
	    BlogPost = await BlogPostRepository.GetByIdAsync(BlogPostId);
	    isLoading = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("hljs.highlightAll");
        _ = UserRecordService.StoreUserRecordAsync();

        if (BlogPost is not null && firstRender)
        {
	        isBookmarked = await BookmarkService.IsBookmarked(BlogPost.Id);
	        StateHasChanged();
        }
    }

    private MarkupString EnrichWithShortCodes(string content)
	{
		if (shortCodes.Count == 0)
		{
			return MarkdownConverter.ToMarkupString(content);
		}

		var sb = new StringBuilder(content);
		foreach (var shortCode in shortCodes)
		{
			sb.Replace($"[[{shortCode.Name}]]", shortCode.MarkdownContent);
		}

		return MarkdownConverter.ToMarkupString(sb.ToString());
	}

    private async Task UpdateLikes(bool hasLiked)
    {
        BlogPost = await BlogPostRepository.GetByIdAsync(BlogPostId)
                   ?? throw new InvalidOperationException("Blog post not found");
        BlogPost.Likes = hasLiked ? BlogPost.Likes + 1 : BlogPost.Likes - 1;
        await BlogPostRepository.StoreAsync(BlogPost);
    }

    private async Task BlogPostBookmarked()
    {
	    if (BlogPost is null)
	    {
		    return;
	    }

	    isBookmarked = !isBookmarked;
	    await BookmarkService.SetBookmark(BlogPost.Id, isBookmarked);
	    StateHasChanged();
    }

}