Merge pull request #30 from linkdotnet/feature/giscus

linkdotnet · web-flow · commit 6b13dc9f7e03 · 2021-09-17T19:59:27.000+02:00
Feature/giscus
diff --git a/LinkDotNet.Blog.IntegrationTests/Web/Pages/BlogPostPageTests.cs b/LinkDotNet.Blog.IntegrationTests/Web/Pages/BlogPostPageTests.cs
@@ -87,6 +87,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);
         }
     }
 }
diff --git a/LinkDotNet.Blog.UnitTests/LinkDotNet.Blog.UnitTests.csproj b/LinkDotNet.Blog.UnitTests/LinkDotNet.Blog.UnitTests.csproj
@@ -47,6 +47,10 @@
     <ItemGroup>
       <Folder Include="Infrastructure\Persistence" />
     </ItemGroup>
+
+    <ItemGroup>
+      <Compile Remove="Web\Shared\Services\LocalStorageServiceTests.cs" />
+    </ItemGroup>
     <PropertyGroup>
         <CodeAnalysisRuleSet>..\stylecop.analyzers.ruleset</CodeAnalysisRuleSet>
     </PropertyGroup>
diff --git a/LinkDotNet.Blog.UnitTests/Web/AppConfigurationFactoryTests.cs b/LinkDotNet.Blog.UnitTests/Web/AppConfigurationFactoryTests.cs
@@ -25,6 +25,10 @@ public void ShouldMapFromAppConfiguration()
                 { "AboutMeProfileInformation:Name", "Steven" },
                 { "AboutMeProfileInformation:Heading", "Dev" },
                 { "AboutMeProfileInformation:ProfilePictureUrl", "Url" },
+                { "Giscus:Repository", "repo" },
+                { "Giscus:RepositoryId", "repoid" },
+                { "Giscus:Category", "general" },
+                { "Giscus:CategoryId", "generalid" },
             };
             var configuration = new ConfigurationBuilder()
                 .AddInMemoryCollection(inMemorySettings)
@@ -47,6 +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");
         }
 
         [Theory]
@@ -96,5 +104,24 @@ public void ShouldSetIsAboutMeEnabledToFalseWhenNoInformation()
 
             appConfiguration.IsAboutMeEnabled.Should().BeFalse();
         }
+
+        [Fact]
+        public void ShouldSetGiscusToFalseWhenNoInformation()
+        {
+            var inMemorySettings = new Dictionary<string, string>
+            {
+                { "Introduction:BackgroundUrl", "someurl" },
+                { "Introduction:ProfilePictureUrl", "anotherurl" },
+                { "Introduction:Description", "desc" },
+                { "BlogPostsPerPage", "2" },
+            };
+            var configuration = new ConfigurationBuilder()
+                .AddInMemoryCollection(inMemorySettings)
+                .Build();
+
+            var appConfiguration = AppConfigurationFactory.Create(configuration);
+
+            appConfiguration.IsGiscusEnabled.Should().BeFalse();
+        }
     }
 }
diff --git a/LinkDotNet.Blog.UnitTests/Web/Pages/AboutMeTests.cs b/LinkDotNet.Blog.UnitTests/Web/Pages/AboutMeTests.cs
@@ -26,7 +26,7 @@ public class AboutMeTests : TestContext
         public void ShouldPassIsAuthenticated()
         {
             this.AddTestAuthorization().SetAuthorized("test");
-            var config = CreateAppConfiguration(true);
+            var config = CreateAppConfiguration(new ProfileInformation { ProfilePictureUrl = string.Empty });
             SetupMocks(config);
 
             var cut = RenderComponent<AboutMe>();
@@ -39,7 +39,7 @@ public void ShouldPassIsAuthenticated()
         public void ShouldNotShowWhenEnabledFalse()
         {
             this.AddTestAuthorization().SetNotAuthorized();
-            var config = CreateAppConfiguration(false);
+            var config = CreateAppConfiguration();
             SetupMocks(config);
 
             var cut = RenderComponent<AboutMe>();
@@ -57,7 +57,7 @@ public void ShouldSetOgData()
                 Name = "My Name",
                 ProfilePictureUrl = "someurl",
             };
-            var config = CreateAppConfiguration(false, profileInformation);
+            var config = CreateAppConfiguration(profileInformation);
             SetupMocks(config);
 
             var cut = RenderComponent<AboutMe>();
@@ -69,15 +69,11 @@ public void ShouldSetOgData()
             ogData.Description.Should().Contain("About Me,My Name");
         }
 
-        private static AppConfiguration CreateAppConfiguration(bool pageEnabled, ProfileInformation info = null)
+        private static AppConfiguration CreateAppConfiguration(ProfileInformation info = null)
         {
             return new AppConfiguration
             {
-                IsAboutMeEnabled = pageEnabled,
-                ProfileInformation = info ?? new ProfileInformation
-                {
-                    ProfilePictureUrl = "not null",
-                },
+                ProfileInformation = info,
             };
         }
 
diff --git a/LinkDotNet.Blog.UnitTests/Web/Pages/Admin/DashboardTests.cs b/LinkDotNet.Blog.UnitTests/Web/Pages/Admin/DashboardTests.cs
@@ -38,7 +38,7 @@ private static AppConfiguration CreateAppConfiguration(bool aboutMeEnabled)
         {
             return new AppConfiguration
             {
-                IsAboutMeEnabled = aboutMeEnabled,
+                ProfileInformation = aboutMeEnabled ? new ProfileInformation() : null,
             };
         }
     }
diff --git a/LinkDotNet.Blog.UnitTests/Web/Shared/Services/GiscusServiceTests.cs b/LinkDotNet.Blog.UnitTests/Web/Shared/Services/GiscusServiceTests.cs
@@ -0,0 +1,39 @@
+﻿using System.Linq;
+using System.Threading.Tasks;
+using Bunit;
+using FluentAssertions;
+using LinkDotNet.Blog.Web;
+using LinkDotNet.Blog.Web.Shared.Services;
+using Xunit;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Shared.Services
+{
+    public class GiscusServiceTests : TestContext
+    {
+        [Fact]
+        public async Task ShouldInitGiscus()
+        {
+            var giscus = new Giscus();
+            JSInterop.Mode = JSRuntimeMode.Loose;
+            var sut = new GiscusService(JSInterop.JSRuntime, new AppConfiguration { Giscus = giscus });
+
+            await sut.EnableCommentSection("div");
+
+            var init = JSInterop.Invocations.SingleOrDefault(i => i.Identifier == "initGiscus");
+            init.Should().NotBeNull();
+            init.Arguments.Should().Contain("giscus");
+            init.Arguments.Should().Contain(giscus);
+        }
+
+        [Fact]
+        public async Task ShouldNotEnabledGiscussWhenNotSet()
+        {
+            JSInterop.Mode = JSRuntimeMode.Loose;
+            var sut = new GiscusService(JSInterop.JSRuntime, new AppConfiguration { Giscus = null });
+
+            await sut.EnableCommentSection("div");
+
+            JSInterop.Invocations.Any(i => i.Identifier == "initGiscus").Should().BeFalse();
+        }
+    }
+}
diff --git a/LinkDotNet.Blog.Web/AppConfiguration.cs b/LinkDotNet.Blog.Web/AppConfiguration.cs
@@ -1,4 +1,5 @@
-﻿using LinkDotNet.Domain;
+﻿using LinkDotNet.Blog.Web.Shared.Services;
+using LinkDotNet.Domain;
 
 namespace LinkDotNet.Blog.Web
 {
@@ -22,8 +23,12 @@ public record AppConfiguration
 
         public int BlogPostsPerPage { get; init; }
 
-        public bool IsAboutMeEnabled { get; init; }
+        public bool IsAboutMeEnabled => ProfileInformation != null;
 
-        public ProfileInformation ProfileInformation { get; set; }
+        public ProfileInformation ProfileInformation { get; init; }
+
+        public Giscus Giscus { get; init; }
+
+        public bool IsGiscusEnabled => Giscus != null;
     }
 }
diff --git a/LinkDotNet.Blog.Web/AppConfigurationFactory.cs b/LinkDotNet.Blog.Web/AppConfigurationFactory.cs
@@ -1,4 +1,5 @@
-﻿using LinkDotNet.Domain;
+﻿using LinkDotNet.Blog.Web.Shared.Services;
+using LinkDotNet.Domain;
 using Microsoft.Extensions.Configuration;
 
 namespace LinkDotNet.Blog.Web
@@ -8,6 +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 configuration = new AppConfiguration
             {
                 BlogName = config["BlogName"],
@@ -18,7 +20,7 @@ public static AppConfiguration Create(IConfiguration config)
                 DatabaseName = config["DatabaseName"],
                 BlogPostsPerPage = int.Parse(config["BlogPostsPerPage"]),
                 ProfileInformation = profileInformation,
-                IsAboutMeEnabled = profileInformation != null,
+                Giscus = giscus,
             };
 
             return configuration;
diff --git a/LinkDotNet.Blog.Web/Pages/AboutMe.razor b/LinkDotNet.Blog.Web/Pages/AboutMe.razor
@@ -5,13 +5,13 @@
 @inject AuthenticationStateProvider authenticationStateProvider
 @inject IUserRecordService userRecordService
 @inject NavigationManager navigationManager
-<OgData Title="@("About Me - " + appConfiguration.ProfileInformation.Name)"
-        Description="@("About Me," + appConfiguration.ProfileInformation.Name)"
-        Keywords="@appConfiguration.ProfileInformation.Name"
-        AbsolutePreviewImageUrl="@ImageUrl"></OgData>
-
 @if (appConfiguration.IsAboutMeEnabled)
 {
+    <OgData Title="@("About Me - " + appConfiguration.ProfileInformation.Name)"
+            Description="@("About Me," + appConfiguration.ProfileInformation.Name)"
+            Keywords="@appConfiguration.ProfileInformation.Name"
+            AbsolutePreviewImageUrl="@ImageUrl"></OgData>
+
     <div class="page">
         <div class="container">
             <div class="row">
diff --git a/LinkDotNet.Blog.Web/Pages/BlogPostPage.razor b/LinkDotNet.Blog.Web/Pages/BlogPostPage.razor
@@ -8,6 +8,7 @@
 @inject IRepository<BlogPost> blogPostRepository
 @inject IJSRuntime jsRuntime
 @inject IUserRecordService userRecordService
+@inject IGiscusService gisgusService
 @inherits MarkdownComponentBase
 
 <div class="page">
@@ -40,6 +41,8 @@
                     </div>
                 </div>
                 <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
+                <div class="giscus">
+                </div>
             </div>
         </div>
     }
@@ -66,6 +69,7 @@
         {
             await userRecordService.StoreUserRecordAsync();
             await jsRuntime.InvokeVoidAsync("hljs.highlightAll");
+            await gisgusService.EnableCommentSection("giscus");
             StateHasChanged();
         }
     }
diff --git a/LinkDotNet.Blog.Web/Pages/_Host.cshtml b/LinkDotNet.Blog.Web/Pages/_Host.cshtml
@@ -47,5 +47,26 @@
 <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/bootstrap@5.0.2/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>
diff --git a/LinkDotNet.Blog.Web/Shared/Services/Giscus.cs b/LinkDotNet.Blog.Web/Shared/Services/Giscus.cs
@@ -0,0 +1,13 @@
+﻿namespace LinkDotNet.Blog.Web.Shared.Services
+{
+    public class Giscus
+    {
+        public string Repository { get; set; }
+
+        public string RepositoryId { get; set; }
+
+        public string Category { get; set; }
+
+        public string CategoryId { get; set; }
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Shared/Services/GiscusService.cs b/LinkDotNet.Blog.Web/Shared/Services/GiscusService.cs
@@ -0,0 +1,25 @@
+﻿using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace LinkDotNet.Blog.Web.Shared.Services
+{
+    public class GiscusService : IGiscusService
+    {
+        private readonly IJSRuntime jsRuntime;
+        private readonly AppConfiguration appConfiguration;
+
+        public GiscusService(IJSRuntime jsRuntime, AppConfiguration appConfiguration)
+        {
+            this.jsRuntime = jsRuntime;
+            this.appConfiguration = appConfiguration;
+        }
+
+        public async Task EnableCommentSection(string className)
+        {
+            if (appConfiguration.IsGiscusEnabled)
+            {
+                await jsRuntime.InvokeVoidAsync("initGiscus", "giscus", appConfiguration.Giscus);
+            }
+        }
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Shared/Services/IGiscusService.cs b/LinkDotNet.Blog.Web/Shared/Services/IGiscusService.cs
@@ -0,0 +1,9 @@
+﻿using System.Threading.Tasks;
+
+namespace LinkDotNet.Blog.Web.Shared.Services
+{
+    public interface IGiscusService
+    {
+        Task EnableCommentSection(string className);
+    }
+}
diff --git a/LinkDotNet.Blog.Web/Startup.cs b/LinkDotNet.Blog.Web/Startup.cs
@@ -54,6 +54,7 @@ public void ConfigureServices(IServiceCollection services)
             services.AddSingleton<ISortOrderCalculator, SortOrderCalculator>();
             services.AddScoped<IUserRecordService, UserRecordService>();
             services.AddScoped<IDashboardService, DashboardService>();
+            services.AddScoped<IGiscusService, GiscusService>();
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
diff --git a/LinkDotNet.Blog.Web/appsettings.json b/LinkDotNet.Blog.Web/appsettings.json
@@ -28,5 +28,11 @@
     "Name": "Steven Giesel",
     "Heading": "Software Engineer",
     "ProfilePictureUrl": "assets/profile-picture.webp"
+  },
+  "Giscus": {
+    "Repository": "",
+    "RepositoryId": "",
+    "Category": "",
+    "CategoryId": ""
   }
 }
diff --git a/Readme.md b/Readme.md

Original file line number	Diff line number	Diff line change
`@@ -87,6 +87,7 @@ private void RegisterComponents(TestContextBase ctx, ILocalStorageService localS`
`87`	`87`	`ctx.Services.AddScoped(_ => new Mock<IToastService>().Object);`
`88`	`88`	`ctx.Services.AddScoped(_ => new Mock<IHeadElementHelper>().Object);`
`89`	`89`	`ctx.Services.AddScoped(_ => new Mock<IUserRecordService>().Object);`
	`90`	`+ ctx.Services.AddScoped(_ => new Mock<IGiscusService>().Object);`
`90`	`91`	`}`
`91`	`92`	`}`
`92`	`93`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ private static AppConfiguration CreateAppConfiguration(bool aboutMeEnabled)`
`38`	`38`	`{`
`39`	`39`	`return new AppConfiguration`
`40`	`40`	`{`
`41`		`- IsAboutMeEnabled = aboutMeEnabled,`
	`41`	`+ ProfileInformation = aboutMeEnabled ? new ProfileInformation() : null,`
`42`	`42`	`};`
`43`	`43`	`}`
`44`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`		`-using LinkDotNet.Domain;`
	`1`	`+using LinkDotNet.Blog.Web.Shared.Services;`
	`2`	`+using LinkDotNet.Domain;`
`2`	`3`
`3`	`4`	`namespace LinkDotNet.Blog.Web`
`4`	`5`	`{`
`@@ -22,8 +23,12 @@ public record AppConfiguration`
`22`	`23`
`23`	`24`	`public int BlogPostsPerPage { get; init; }`
`24`	`25`
`25`		`- public bool IsAboutMeEnabled { get; init; }`
	`26`	`+ public bool IsAboutMeEnabled => ProfileInformation != null;`
`26`	`27`
`27`		`- public ProfileInformation ProfileInformation { get; set; }`
	`28`	`+ public ProfileInformation ProfileInformation { get; init; }`
	`29`	`+`
	`30`	`+ public Giscus Giscus { get; init; }`
	`31`	`+`
	`32`	`+ public bool IsGiscusEnabled => Giscus != null;`
`28`	`33`	`}`
`29`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`@inject IRepository<BlogPost> blogPostRepository`
`9`	`9`	`@inject IJSRuntime jsRuntime`
`10`	`10`	`@inject IUserRecordService userRecordService`
	`11`	`+@inject IGiscusService gisgusService`
`11`	`12`	`@inherits MarkdownComponentBase`
`12`	`13`
`13`	`14`	`<div class="page">`
`@@ -40,6 +41,8 @@`
`40`	`41`	`</div>`
`41`	`42`	`</div>`
`42`	`43`	`<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>`
	`44`	`+ <div class="giscus">`
	`45`	`+ </div>`
`43`	`46`	`</div>`
`44`	`47`	`</div>`
`45`	`48`	`}`
`@@ -66,6 +69,7 @@`
`66`	`69`	`{`
`67`	`70`	`await userRecordService.StoreUserRecordAsync();`
`68`	`71`	`await jsRuntime.InvokeVoidAsync("hljs.highlightAll");`
	`72`	`+ await gisgusService.EnableCommentSection("giscus");`
`69`	`73`	`StateHasChanged();`
`70`	`74`	`}`
`71`	`75`	`}`