Added share possibility

Author: linkdotnet

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

@@ -0,0 +1,42 @@
+using System.Linq;
+using AngleSharp.Html.Dom;
+using Blazored.Toast.Services;
+using Bunit;
+using Bunit.TestDoubles;
+using FluentAssertions;
+using LinkDotNet.Blog.Web.Shared;
+using Microsoft.Extensions.DependencyInjection;
+using Moq;
+using Xunit;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Shared;
+
+public class ShareBlogPostTests : TestContext
+{
+    [Fact]
+    public void ShouldCopyLinkToClipboard()
+    {
+        JSInterop.Mode = JSRuntimeMode.Loose;
+        Services.AddScoped(_ => new Mock<IToastService>().Object);
+        Services.GetRequiredService<FakeNavigationManager>().NavigateTo("blogPost/1");
+        var cut = RenderComponent<ShareBlogPost>();
+
+        cut.FindAll("a")[1].Click();
+
+        var copyToClipboardInvocation = JSInterop.Invocations.SingleOrDefault(i => i.Identifier == "navigator.clipboard.writeText");
+        copyToClipboardInvocation.Arguments[0].Should().Be("http://localhost/blogPost/1");
+    }
+
+    [Fact]
+    public void ShouldShareToLinkedIn()
+    {
+        Services.AddScoped(_ => new Mock<IToastService>().Object);
+        Services.GetRequiredService<FakeNavigationManager>().NavigateTo("blogPost/1");
+
+        var cut = RenderComponent<ShareBlogPost>();
+
+        var linkedInShare = (IHtmlAnchorElement)cut.FindAll("a")[0];
+        linkedInShare.Href.Should()
+            .Be("https://www.linkedin.com/shareArticle?mini=true&url=http://localhost/blogPost/1");
+    }
+}

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -37,7 +37,10 @@ else
                     @(RenderMarkupString(BlogPost.Content))
                 </div>
             </div>
-            <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
+            <div class="d-flex justify-content-between py-2">
+                <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
+                <ShareBlogPost></ShareBlogPost>
+            </div>            
             <Giscus></Giscus>
         </div>
     </div>

LinkDotNet.Blog.Web/Shared/Like.razor.css

@@ -0,0 +1,17 @@
+@inject NavigationManager navigationManager
+@inject IJSRuntime jsRuntime
+@inject IToastService toastService
+
+<div class="flex-row">
+    <a href="@LinkedInShare" target="_blank"><i class="fab fa-linkedin"></i></a>
+    <a href="javascript:void(0)" @onclick="CopyToClipboard"><i class="fas fa-link"></i></a>
+</div>
+@code {
+    private string LinkedInShare => $"https://www.linkedin.com/shareArticle?mini=true&url={navigationManager.Uri}";
+
+    private async Task CopyToClipboard()
+    {
+        await jsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", navigationManager.Uri);
+        toastService.ShowSuccess("Copied link to clipboard");
+    }
+}