Merge pull request #716 from poppastring/bluesky-share-button

Add BlueSky sharing support to blog posts

close #712

Author: poppastring

source/DasBlog.Web.UI/TagHelpers/Post/PostToBlueSkyTagHelper.cs

@@ -0,0 +1,33 @@
+using System;
+using System.Text.Encodings.Web;
+using System.Threading.Tasks;
+using DasBlog.Services;
+using DasBlog.Web.Models.BlogViewModels;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace DasBlog.Web.TagHelpers
+{
+	public class PostToBlueSkyTagHelper : TagHelper
+	{
+		private const string BLUESKY_SHARE_URL = "https://bsky.app/intent/compose?text={0}";
+		private readonly IDasBlogSettings dasBlogSettings;
+		public PostViewModel Post { get; set; }
+
+		public PostToBlueSkyTagHelper(IDasBlogSettings dasBlogSettings)
+		{
+			this.dasBlogSettings = dasBlogSettings;
+		}
+
+		public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+		{
+			output.TagName = "a";
+			output.TagMode = TagMode.StartTagAndEndTag;
+			output.Attributes.SetAttribute("class", "dasblog-a-share-bluesky");
+			string text = $"{Post.Title} {dasBlogSettings.RelativeToRoot(Post.PermaLink)}";
+			output.Attributes.SetAttribute("href", string.Format(BLUESKY_SHARE_URL, UrlEncoder.Default.Encode(text)));
+
+			var content = await output.GetChildContentAsync();
+			output.Content.SetHtmlContent(content.GetContent());
+		}
+	}
+}

source/DasBlog.Web.UI/Themes/darkly/_BlogItem.cshtml

@@ -22,7 +22,7 @@
             Categories: <post-categories-list post="@Model" >, </post-categories-list>
         </div>
         <div class="col-md-12 mb-6">
-            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>
+            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>, <post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>
         </div>
         <div dasblog-authorized class="col-md-12 mb-6">
             <post-edit-link post="@Model" />

source/DasBlog.Web.UI/Themes/dasblog/_BlogItem.cshtml

@@ -21,7 +21,7 @@
             Categories: <post-categories-list post="@Model" >, </post-categories-list>
         </div>
         <div class="col-md-12 mb-6">
-            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>
+            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>, <post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>
         </div>
         <div dasblog-authorized class="col-md-12 mb-6">
             <post-edit-link post="@Model" />

source/DasBlog.Web.UI/Themes/fulcrum/_BlogItem.cshtml

@@ -24,7 +24,7 @@
             <post-created-date post="@Model" />
         </div>
         <div class="col-md-12 mb-6">
-            <post-to-twitter post="@Model">Share on Twitter</post-to-twitter>
+            <post-to-twitter post="@Model">Share on Twitter</post-to-twitter>, <post-to-blue-sky post="@Model">Share BlueSky</post-to-blue-sky>
         </div>
         <div dasblog-authorized class="col-md-12 mb-6">
             <post-edit-link post="@Model" />

source/DasBlog.Web.UI/Themes/journal/_BlogItem.cshtml

@@ -21,7 +21,7 @@
             Categories: <post-categories-list post="@Model" >, </post-categories-list>
         </div>
         <div class="col-md-12 mb-6">
-            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>
+            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>, <post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>
         </div>
         <div dasblog-authorized class="col-md-12 mb-6">
             <post-edit-link post="@Model" />

source/DasBlog.Web.UI/Themes/median/_BlogItem.cshtml

@@ -25,7 +25,7 @@
                 <post-created-date post="@Model" />
             </div>
             <div class="col-md-12 mb-6">
-                Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>
+            Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>, <post-to-reddit post="@Model">Reddit</post-to-reddit>, <post-to-facebook post="@Model">Facebook</post-to-facebook> or <post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>, <post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>
             </div>
             <div dasblog-authorized class="col-md-12 mb-6">
                 <post-edit-link post="@Model" />