Giscus in separate component instead of service

Author: linkdotnet

LinkDotNet.Blog.IntegrationTests/Web/Pages/BlogPostPageTests.cs

@@ -6,6 +6,7 @@
 using LinkDotNet.Blog.Domain;
 using LinkDotNet.Blog.Infrastructure.Persistence;
 using LinkDotNet.Blog.TestUtilities;
+using LinkDotNet.Blog.Web;
 using LinkDotNet.Blog.Web.Pages;
 using LinkDotNet.Blog.Web.Shared;
 using LinkDotNet.Blog.Web.Shared.Services;
@@ -87,7 +88,7 @@ private void RegisterComponents(TestContextBase ctx, ILocalStorageService localS
             ctx.Services.AddScoped(_ => new Mock<IToastService>().Object);
             ctx.Services.AddScoped(_ => new Mock<IHeadElementHelper>().Object);
             ctx.Services.AddScoped(_ => new Mock<IUserRecordService>().Object);
-            ctx.Services.AddScoped(_ => new Mock<IGiscusService>().Object);
+            ctx.Services.AddScoped(_ => new AppConfiguration());
         }
     }
 }

LinkDotNet.Blog.UnitTests/Web/AppConfigurationFactoryTests.cs

@@ -51,10 +51,10 @@ public void ShouldMapFromAppConfiguration()
             appConfiguration.ProfileInformation.Name.Should().Be("Steven");
             appConfiguration.ProfileInformation.Heading.Should().Be("Dev");
             appConfiguration.ProfileInformation.ProfilePictureUrl.Should().Be("Url");
-            appConfiguration.Giscus.Repository.Should().Be("repo");
-            appConfiguration.Giscus.RepositoryId.Should().Be("repoid");
-            appConfiguration.Giscus.Category.Should().Be("general");
-            appConfiguration.Giscus.CategoryId.Should().Be("generalid");
+            appConfiguration.GiscusConfiguration.Repository.Should().Be("repo");
+            appConfiguration.GiscusConfiguration.RepositoryId.Should().Be("repoid");
+            appConfiguration.GiscusConfiguration.Category.Should().Be("general");
+            appConfiguration.GiscusConfiguration.CategoryId.Should().Be("generalid");
         }
 
         [Theory]

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

@@ -0,0 +1,46 @@
+using System.Linq;
+using Bunit;
+using FluentAssertions;
+using LinkDotNet.Blog.Web;
+using LinkDotNet.Blog.Web.Shared;
+using LinkDotNet.Blog.Web.Shared.Services;
+using Microsoft.Extensions.DependencyInjection;
+using Xunit;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Shared
+{
+    public class GiscusTests : TestContext
+    {
+        [Fact]
+        public void ShouldLoadJavascript()
+        {
+            var giscusData = new GiscusConfiguration
+            {
+                Repository = "linkdotnet/somerepo",
+                RepositoryId = "some_repo_id",
+                Category = "General",
+                CategoryId = "GeneralId",
+            };
+            Services.AddScoped(_ => new AppConfiguration { GiscusConfiguration = giscusData });
+            JSInterop.SetupModule("./Shared/Giscus.razor.js");
+            JSInterop.Mode = JSRuntimeMode.Loose;
+
+            RenderComponent<Giscus>();
+
+            var init = JSInterop.Invocations.SingleOrDefault(i => i.Identifier == "initGiscus");
+            init.Should().NotBeNull();
+            init.Arguments.Should().Contain("giscus");
+            init.Arguments.Should().Contain(giscusData);
+        }
+
+        [Fact]
+        public void ShouldNotInitGiscusWhenNoInformationProvided()
+        {
+            Services.AddScoped(_ => new AppConfiguration());
+
+            RenderComponent<Giscus>();
+
+            JSInterop.Invocations.Should().BeEmpty();
+        }
+    }
+}

LinkDotNet.Blog.UnitTests/Web/Shared/Services/GiscusServiceTests.cs

@@ -27,8 +27,8 @@ public record AppConfiguration
 
         public ProfileInformation ProfileInformation { get; init; }
 
-        public Giscus Giscus { get; init; }
+        public GiscusConfiguration GiscusConfiguration { get; init; }
 
-        public bool IsGiscusEnabled => Giscus != null;
+        public bool IsGiscusEnabled => GiscusConfiguration != null;
     }
 }

LinkDotNet.Blog.Web/AppConfiguration.cs

@@ -9,7 +9,7 @@ public static class AppConfigurationFactory
         public static AppConfiguration Create(IConfiguration config)
         {
             var profileInformation = config.GetSection("AboutMeProfileInformation").Get<ProfileInformation>();
-            var giscus = config.GetSection("Giscus").Get<Giscus>();
+            var giscus = config.GetSection("Giscus").Get<GiscusConfiguration>();
             var configuration = new AppConfiguration
             {
                 BlogName = config["BlogName"],
@@ -20,7 +20,7 @@ public static AppConfiguration Create(IConfiguration config)
                 DatabaseName = config["DatabaseName"],
                 BlogPostsPerPage = int.Parse(config["BlogPostsPerPage"]),
                 ProfileInformation = profileInformation,
-                Giscus = giscus,
+                GiscusConfiguration = giscus,
             };
 
             return configuration;

LinkDotNet.Blog.Web/AppConfigurationFactory.cs

@@ -36,6 +36,12 @@
     <ItemGroup>
         <AdditionalFiles Include="..\stylecop.json" Link="stylecop.json" />
     </ItemGroup>
+
+    <ItemGroup>
+      <None Update="Shared\Giscus.razor.js">
+        <DependentUpon>Giscus.razor</DependentUpon>
+      </None>
+    </ItemGroup>
     <PropertyGroup>
         <CodeAnalysisRuleSet>..\stylecop.analyzers.ruleset</CodeAnalysisRuleSet>
     </PropertyGroup>

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

@@ -8,7 +8,6 @@
 @inject IRepository<BlogPost> blogPostRepository
 @inject IJSRuntime jsRuntime
 @inject IUserRecordService userRecordService
-@inject IGiscusService gisgusService
 @inherits MarkdownComponentBase
 
 <div class="page">
@@ -41,8 +40,7 @@
                     </div>
                 </div>
                 <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
-                <div class="giscus">
-                </div>
+                <Giscus></Giscus>
             </div>
         </div>
     }
@@ -69,7 +67,6 @@
         {
             await userRecordService.StoreUserRecordAsync();
             await jsRuntime.InvokeVoidAsync("hljs.highlightAll");
-            await gisgusService.EnableCommentSection("giscus");
             StateHasChanged();
         }
     }

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -47,26 +47,5 @@
 <script async src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 <script async src="components/slideshow.js" ></script>
-V
-<script>
-    window.initGiscus = (divClass, giscus) => {
-        const script = document.createElement('script');
-        script.src = 'https://giscus.app/client.js'
-        script.setAttribute('data-repo', giscus.repository)
-        script.setAttribute('data-repo-id', giscus.repositoryId)
-        script.setAttribute('data-category', giscus.category)
-        script.setAttribute('data-category-id', giscus.categoryId)
-        script.setAttribute('data-mapping', 'title')
-        script.setAttribute('data-reactions-enabled', '0')
-        script.setAttribute('data-emit-metadata', '0')
-        script.setAttribute('data-theme', 'light')
-        script.crossOrigin = 'anonymous'
-
-        const elementToAppend = document.getElementsByClassName(divClass)[0]
-        if (elementToAppend) {
-            elementToAppend.appendChild(script)
-        }
-    }
-</script>
 </body>
 </html>

LinkDotNet.Blog.Web/Pages/_Host.cshtml

@@ -0,0 +1,16 @@
+@inject IJSRuntime jsRuntime
+@inject AppConfiguration appConfiguration
+<div class="giscus">
+</div>
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && appConfiguration.IsGiscusEnabled)
+        {
+            await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./Shared/Giscus.razor.js");
+            await jsRuntime.InvokeVoidAsync("initGiscus", "giscus", appConfiguration.GiscusConfiguration);
+        }
+    }
+
+}