Enable giscus

Author: linkdotnet

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>

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
 {
@@ -24,6 +25,10 @@ public record AppConfiguration
 
         public bool IsAboutMeEnabled { get; init; }
 
-        public ProfileInformation ProfileInformation { get; set; }
+        public ProfileInformation ProfileInformation { get; init; }
+
+        public Giscus Giscus { get; init; }
+        
+        public bool IsGiscusEnabled { get; init; }
     }
 }

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"],
@@ -19,6 +21,8 @@ public static AppConfiguration Create(IConfiguration config)
                 BlogPostsPerPage = int.Parse(config["BlogPostsPerPage"]),
                 ProfileInformation = profileInformation,
                 IsAboutMeEnabled = profileInformation != null,
+                Giscus = giscus,
+                IsGiscusEnabled = giscus != null,
             };
 
             return configuration;

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -8,6 +8,7 @@
 @inject IRepository<BlogPost> blogPostRepository
 @inject IJSRuntime jsRuntime
 @inject IUserRecordService userRecordService
+@inject ICommentService commentService
 @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 commentService.EnableCommentSection("giscus");
             StateHasChanged();
         }
     }

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/[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/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; }
+    }
+}

LinkDotNet.Blog.Web/Shared/Services/GiscusService.cs

@@ -0,0 +1,28 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace LinkDotNet.Blog.Web.Shared.Services
+{
+    public class GiscusService : ICommentService
+    {
+        private readonly IJSRuntime jsRuntime;
+
+        public GiscusService(IJSRuntime jsRuntime)
+        {
+            this.jsRuntime = jsRuntime;
+        }
+
+        public async Task EnableCommentSection(string className)
+        {
+            var giscus = new Giscus
+            {
+                Repository = "linkdotnet/Blog.Discussions",
+                RepositoryId = "MDEwOlJlcG9zaXRvcnk0MDc1MzQ0OTA=",
+                Category = "General",
+                CategoryId = "DIC_kwDOGEp7ms4B_Fx_",
+            };
+
+            await jsRuntime.InvokeVoidAsync("initGiscus", "giscus", giscus);
+        }
+    }
+}

LinkDotNet.Blog.Web/Shared/Services/ICommentService.cs

@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace LinkDotNet.Blog.Web.Shared.Services
+{
+    public interface ICommentService
+    {
+        Task EnableCommentSection(string className);
+    }
+}

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<ICommentService, GiscusService>();
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

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": ""
   }
 }