Added Kofi as donation / micro payment system

Author: linkdotnet

Readme.md

@@ -57,7 +57,8 @@ The appsettings.json file has a lot of options to customize the content of the b
   },
  "Disqus": {
   "Shortname": "blog"
- }
+ },
+ "KofiToken": "ABC123"
 }
 
 ```
@@ -88,6 +89,7 @@ The appsettings.json file has a lot of options to customize the content of the b
 | ProfilePictureUrl         | string         | Displayed profile picture                                                                                                                                       |
 | Giscus                    | node           | Enables the comment section via giscus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
 | Disqus                    | node           | Enables the comment section via disqus. If left empty the comment secion will not be shown. For more information checkout the section about comments down below |
+| KofiToken                 | string         | Enables the "Buy me a Coffee" button of Kofi. To aquire the token head down to the "Kofi" section                                                               |
 
 ## Storage Provider
 Currently there are 4 Storage-Provider:
@@ -144,6 +146,13 @@ The main advantage of Auth0 is the easy configurable dashboard on their website.
 
 For testing purposes you can use `services.UseDummyAuthentication();`. This allows every user, who presses Login, to be logged in.
 
+## Donations
+The blog software allows you to integrate via different micro-transaction services. The following chapter will show you how to setup donations.
+
+### Ko-fi
+You can use [Ko-fi](https://Ko-fi.com/) as payment service to receive donations. To aquire the `KofiToken` as seen in the config above, head to [wdigets page](https://Ko-fi.com/manage/widgets), click on "Ko-fi Button".
+Now choose "Image" as type. In the field below under `Copy & Paste Code` you see an `<a href='https://ko-fi.com/XYZ'` tag. Just take the `XYZ` part and put it into `KofiToken`.
+
 ## Search Engine Optimization (SEO)
 The blog includes some of the most important tags to get indexed by a crawler. Furthermore some aspects of the Open Graph specification are implemented.
 

src/LinkDotNet.Blog.Web/AppConfiguration.cs

@@ -30,4 +30,8 @@ public record AppConfiguration
     public DisqusConfiguration DisqusConfiguration { get; init; }
 
     public bool IsDisqusEnabled => DisqusConfiguration != null;
+
+    public string KofiToken { get; set; }
+
+    public bool IsKofiEnabled => !string.IsNullOrEmpty(KofiToken);
 }

src/LinkDotNet.Blog.Web/AppConfigurationFactory.cs

@@ -25,6 +25,7 @@ public static AppConfiguration Create(IConfiguration config)
             ProfileInformation = profileInformation,
             GiscusConfiguration = giscus,
             DisqusConfiguration = disqus,
+            KofiToken = config["KofiToken"],
         };
 
         return configuration;

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/DonationSection.razor

@@ -0,0 +1,6 @@
+@inject AppConfiguration appConfiguration
+
+@if (appConfiguration.IsKofiEnabled)
+{
+    <Kofi KofiToken="@appConfiguration.KofiToken"></Kofi>
+}

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/Kofi.razor

@@ -0,0 +1,8 @@
+<a href="https://ko-fi.com/@KofiToken" target="_blank">
+    <img height="36" style="border:0;height:36px;" src="https://cdn.ko-fi.com/cdn/kofi2.png?v=3" alt="Buy Me a Coffee at ko-fi.com"/>
+</a>
+
+@code {
+    [Parameter]
+    public string KofiToken { get; set; } = string.Empty;
+}

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor

@@ -41,6 +41,7 @@ else
                 <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
                 <ShareBlogPost></ShareBlogPost>
             </div>
+            <DonationSection></DonationSection>
             <CommentSection></CommentSection>
         </div>
     </div>

tests/LinkDotNet.Blog.UnitTests/Web/AppConfigurationFactoryTests.cs

@@ -30,6 +30,7 @@ public void ShouldMapFromAppConfiguration()
                 { "Giscus:Category", "general" },
                 { "Giscus:CategoryId", "generalid" },
                 { "Disqus:Shortname", "blog" },
+                { "KofiToken", "ABC" },
             };
         var configuration = new ConfigurationBuilder()
             .AddInMemoryCollection(inMemorySettings)
@@ -60,6 +61,7 @@ public void ShouldMapFromAppConfiguration()
         appConfiguration.GiscusConfiguration.Category.Should().Be("general");
         appConfiguration.GiscusConfiguration.CategoryId.Should().Be("generalid");
         appConfiguration.DisqusConfiguration.Shortname.Should().Be("blog");
+        appConfiguration.KofiToken.Should().Be("ABC");
     }
 
     [Theory]

tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/DonationSectionTests.cs

@@ -0,0 +1,34 @@
+using Bunit;
+using LinkDotNet.Blog.Web;
+using LinkDotNet.Blog.Web.Features.ShowBlogPost.Components;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Features.ShowBlogPost.Components;
+
+public class DonationSectionTests : TestContext
+{
+    [Fact]
+    public void ShouldShowKofiWhenTokenIsSet()
+    {
+        var appConfig = new AppConfiguration
+        {
+            KofiToken = "set",
+        };
+        Services.AddScoped(_ => appConfig);
+
+        var cut = RenderComponent<DonationSection>();
+
+        cut.FindComponents<Kofi>().Should().HaveCount(1);
+    }
+
+    [Fact]
+    public void ShouldHideKofiWhenTokenNotSet()
+    {
+        var appConfig = new AppConfiguration();
+        Services.AddScoped(_ => appConfig);
+
+        var cut = RenderComponent<DonationSection>();
+
+        cut.FindComponents<Kofi>().Should().HaveCount(0);
+    }
+}

tests/LinkDotNet.Blog.UnitTests/Web/Features/ShowBlogPost/Components/KofiTests.cs

@@ -0,0 +1,17 @@
+using AngleSharp.Html.Dom;
+using AngleSharpWrappers;
+using Bunit;
+using LinkDotNet.Blog.Web.Features.ShowBlogPost.Components;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Features.ShowBlogPost.Components;
+
+public class KofiTests : TestContext
+{
+    [Fact]
+    public void ShouldSetToken()
+    {
+        var cut = RenderComponent<Kofi>(p => p.Add(s => s.KofiToken, "Token"));
+
+        ((IHtmlAnchorElement)cut.Find("a").Unwrap()).Href.Should().Contain("https://ko-fi.com/Token");
+    }
+}