Use Toolbelt.Blazor.HeadElement instead of ms one

Author: linkdotnet

LinkDotNet.Blog.UnitTests/Web/Shared/TitleTests.cs

@@ -21,6 +21,8 @@
           <PrivateAssets>all</PrivateAssets>
           <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
+        <PackageReference Include="Toolbelt.Blazor.HeadElement" Version="5.4.2" />
+        <PackageReference Include="Toolbelt.Blazor.HeadElement.ServerPrerendering" Version="1.5.2" />
     </ItemGroup>
 
     <ItemGroup>

LinkDotNet.Blog.Web/LinkDotNet.Blog.Web.csproj

@@ -3,6 +3,7 @@
 @using LinkDotNet.Infrastructure.Persistence
 @using LinkDotNet.Blog.Web.Shared.Admin
 @using Markdig
+@using Toolbelt.Blazor.HeadElement
 @inject IRepository repository
 @inject IJSRuntime jsRuntime
 @inherits MarkdownComponentBase
@@ -13,7 +14,7 @@
 }
 else
 {
-    <Title Value="@BlogPost.Title"></Title>
+    <Title>@BlogPost.Title</Title>
     <OgData Title="@BlogPost.Title" 
             AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl" 
             Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -40,11 +40,6 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
-<script>
-    window.setDocumentTitle = (title) => {
-        document.title = title;
-    };
-</script>
 <script src="_framework/blazor.server.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js" integrity="sha512-W7EehcwtSbRF63FIQlXEOOd5mnq0Et0V0nUOvwcUvjnCKgOLLYbqriQxEQSp63sfrkryxIg/A/O8v8O18QwQCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/languages/csharp.min.js" integrity="sha512-2GO++5/u4InQ3/o7fLh93nyZIzTFl7fYi7+RjP7pgxsXikSCRf5jjw8U8vQSfCfFolN8G8xAxct9696uVxtQSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

LinkDotNet.Blog.Web/Pages/_Host.cshtml

@@ -1,5 +1,4 @@
 @using LinkDotNet.Domain
-@using Microsoft.AspNetCore.Components.Web.Extensions.Head
 @inherits MarkdownComponentBase
 
 <div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);" class="introduction-container">

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

@@ -1,10 +1,10 @@
-@using Microsoft.AspNetCore.Components.Web.Extensions.Head
-@inject NavigationManager navigationManager
+@inject NavigationManager navigationManager
+@using Toolbelt.Blazor.HeadElement
 
-<Meta name="title" property="og:title" content="@Title" />
-<Meta name="image" property="og:image" content="@AbsolutePreviewImageUrl" />
-<Meta property="og:type" content="article" />
-<Meta property="og:url" content="@navigationManager.Uri" />
+<Meta Name="title" Property="og:title" Content="@Title" />
+<Meta Name="image" Property="og:image" Content="@AbsolutePreviewImageUrl" />
+<Meta Property="og:type" Content="article" />
+<Meta Property="og:url" Content="@navigationManager.Uri" />
 @if (Keywords != null)
 {
     <Meta name="keywords" content="@Keywords"/>

LinkDotNet.Blog.Web/Shared/OgData.razor

@@ -8,6 +8,7 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
+using Toolbelt.Blazor.Extensions.DependencyInjection;
 
 namespace LinkDotNet.Blog.Web
 {
@@ -58,6 +59,7 @@ public void ConfigureServices(IServiceCollection services)
 
             services.AddBlazoredToast();
             services.AddBlazoredLocalStorage();
+            services.AddHeadElementHelper();
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
@@ -72,6 +74,8 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                 app.UseHsts();
             }
 
+            app.UseHeadElementServerPrerendering();
+
             app.UseHttpsRedirection();
             app.UseStaticFiles();