Feature: Bookmarks

src/LinkDotNet.Blog.Web/App.razor

@@ -1,13 +1,14 @@
 @using LinkDotNet.Blog.Web.Features.Home.Components
+
 <CascadingAuthenticationState>
-    <Router AppAssembly="@typeof(Program).Assembly">
-        <Found Context="routeData">
-            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
-        </Found>
-        <NotFound>
-	        <LayoutView Layout="@typeof(MainLayout)">
-		        <ObjectNotFound></ObjectNotFound>
-	        </LayoutView>
-        </NotFound>
-    </Router>
+	<Router AppAssembly="@typeof(Program).Assembly">
+		<Found Context="routeData">
+			<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+		</Found>
+		<NotFound>
+			<LayoutView Layout="@typeof(MainLayout)">
+				<ObjectNotFound></ObjectNotFound>
+			</LayoutView>
+		</NotFound>
+	</Router>
 </CascadingAuthenticationState>

src/LinkDotNet.Blog.Web/Features/Bookmarks/BookmarkService.cs

@@ -0,0 +1,63 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using LinkDotNet.Blog.Domain;
+using LinkDotNet.Blog.Infrastructure.Persistence.Sql;
+using LinkDotNet.Blog.Web.Features.Services;
+using Microsoft.EntityFrameworkCore;
+
+namespace LinkDotNet.Blog.Web.Features.Bookmarks;
+
+public class BookmarkService : IBookmarkService
+{
+    private readonly ILocalStorageService localStorageService;
+
+    public BookmarkService(ILocalStorageService localStorageService)
+    {
+        this.localStorageService = localStorageService;
+    }
+
+    public async Task<bool> IsBookmarked(string postId)
+    {
+        ArgumentException.ThrowIfNullOrEmpty(postId);
+        await InitializeIfNotExists();
+        var bookmarks = await localStorageService.GetItemAsync<HashSet<string>>("bookmarks");
+
+        return bookmarks.Contains(postId);
+    }
+
+    public async Task<IReadOnlyList<string>> GetBookmarkedPostIds()
+    {
+        await InitializeIfNotExists();
+        return await localStorageService.GetItemAsync<IReadOnlyList<string>>("bookmarks");
+    }
+
+    public async Task SetBookmark(string postId, bool isBookmarked)
+    {
+        ArgumentException.ThrowIfNullOrEmpty(postId);
+        await InitializeIfNotExists();
+
+        var bookmarks = await localStorageService.GetItemAsync<HashSet<string>>("bookmarks");
+
+        if (!isBookmarked)
+        {
+            bookmarks.Remove(postId);
+        }
+        else
+        {
+            bookmarks.Add(postId);
+        }
+
+        await localStorageService.SetItemAsync("bookmarks", bookmarks);
+
+    }
+
+    private async Task InitializeIfNotExists()
+    {
+        if (!(await localStorageService.ContainKeyAsync("bookmarks")))
+        {
+            await localStorageService.SetItemAsync("bookmarks", new List<string>());
+        }
+    }
+}

src/LinkDotNet.Blog.Web/Features/Bookmarks/Bookmarks.razor

@@ -0,0 +1,46 @@
+@page "/bookmarks"
+@using LinkDotNet.Blog.Domain
+@using LinkDotNet.Blog.Infrastructure.Persistence
+@inject IBookmarkService BookmarkService
+@inject IRepository<BlogPost> BlogPostRepository;
+
+<div class="container">
+	<h3 class="pb-3 fw-bold">Bookmarks</h3>
+	@if (bookmarkedPosts.Count <= 0)
+	{
+		<div class="alert alert-info" role="alert">
+			<h4 class="alert-heading">No bookmarks yet!</h4>
+			<p>You can bookmark posts while browsing by clicking the bookmark icon <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi text-secondary" viewBox="0 0 16 16">
+				<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
+			</svg> that appears on each post.</p>
+			<hr>
+			<p class="mb-0">Bookmarks are stored in your browser's local storage and are not synchronized across devices or browsers.</p>
+		</div>
+	}
+	else
+	{
+		@foreach (var post in bookmarkedPosts)
+		{
+			<ShortBlogPost BlogPost="post" />
+		}
+	}
+</div>
+
+@code {
+	private IReadOnlyList<BlogPost> bookmarkedPosts = [];
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			var ids = await BookmarkService.GetBookmarkedPostIds();
+
+			if (ids.Any())
+			{
+				bookmarkedPosts = await BlogPostRepository.GetAllByProjectionAsync(post => post, post => ids.Contains(post.Id));
+				StateHasChanged();
+			}
+		}
+	}
+
+}

src/LinkDotNet.Blog.Web/Features/Bookmarks/Components/BookmarkButton.razor

@@ -0,0 +1,17 @@
+<button type="button" class="btn btn-sm bg-transparent border-0" @onclick="OnBookmarkClicked" title="@(IsBookmarked ? "Remove bookmark" : "Add bookmark")">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="@(IsBookmarked ? "text-warning" : "text-secondary")" viewBox="0 0 16 16">
+        <path d="@(IsBookmarked ?
+            "M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z" :
+            "M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z")"/>
+    </svg>
+</button>
+
+@code {
+	[Parameter] public bool IsBookmarked { get; set; }
+	[Parameter] public EventCallback Bookmarked { get; set; }
+
+	private async Task OnBookmarkClicked()
+	{
+		await Bookmarked.InvokeAsync();
+	}
+}

src/LinkDotNet.Blog.Web/Features/Bookmarks/IBookmarkService.cs

@@ -0,0 +1,11 @@
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace LinkDotNet.Blog.Web.Features.Bookmarks;
+
+public interface IBookmarkService
+{
+    public Task<bool> IsBookmarked(string postId);
+    public Task<IReadOnlyList<string>> GetBookmarkedPostIds();
+    public Task SetBookmark(string postId, bool isBookmarked);
+}

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor

@@ -1,4 +1,7 @@
 @using LinkDotNet.Blog.Domain
+@using LinkDotNet.Blog.Web.Features.Bookmarks
+@using LinkDotNet.Blog.Web.Features.Bookmarks.Components
+@inject IBookmarkService BookmarkService
 
 <article>
 	<div class="blog-card @AltCssClass">
@@ -33,11 +36,13 @@
 			</ul>
 		</div>
 		<div class="description">
-			<h1>@BlogPost.Title</h1>
-			<h2></h2>
+			<div class="header">
+				<h1>@BlogPost.Title</h1>
+				<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="ToggleBookmark"></BookmarkButton>
+			</div>
 			<p>@MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)</p>
 			<p class="read-more">
-                <a href="/blogPost/@BlogPost.Id/@BlogPost.Slug" aria-label="@BlogPost.Title">Read the whole article</a>
+				<a href="/blogPost/@BlogPost.Id/@BlogPost.Slug" aria-label="@BlogPost.Title">Read the whole article</a>
 			</p>
 		</div>
 	</div>
@@ -47,6 +52,8 @@
 	[Parameter, EditorRequired]
 	public required BlogPost BlogPost { get; set; }
 
+	private bool isBookmarked = false;
+
 	[Parameter]
 	public bool UseAlternativeStyle { get; set; }
 
@@ -55,6 +62,13 @@
 
 	private string AltCssClass => UseAlternativeStyle ? "alt" : string.Empty;
 
+	private async Task ToggleBookmark()
+	{
+		isBookmarked = !isBookmarked;
+		await BookmarkService.SetBookmark(BlogPost.Id, isBookmarked);
+		StateHasChanged();
+	}
+
 	public override Task SetParametersAsync(ParameterView parameters)
 	{
 		foreach (var parameter in parameters)
@@ -75,4 +89,13 @@
 
 		return base.SetParametersAsync(ParameterView.Empty);
 	}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			isBookmarked = await BookmarkService.IsBookmarked(BlogPost.Id);
+			StateHasChanged();
+		}
+	}
 }

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css

@@ -80,6 +80,11 @@
     z-index: 1;
 }
 
+.blog-card .description .header {
+	display: flex;
+	justify-content: space-between;
+}
+
 .blog-card .description h1 {
     line-height: 1;
     margin: 0 0 5px 0;

src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor

@@ -23,9 +23,11 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5">
-                <li><a class="nav-link" href="/"><i class="home"></i> Home</a></li>
-                <li><a class="nav-link" href="/archive"><i class="books"></i> Archive</a></li>
-                @if (Configuration.Value.IsAboutMeEnabled)
+	            <li><a class="nav-link" href="/"><i class="home"></i> Home</a></li>
+	            <li><a class="nav-link" href="/archive"><i class="books"></i> Archive</a></li>
+	            <li><a class="nav-link" href="/bookmarks"><i class="bookmark"></i> Bookmarks</a>
+		        </li>
+	            @if (Configuration.Value.IsAboutMeEnabled)
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="AboutMe">
@@ -48,8 +50,8 @@
                         <i class="rss2"></i> RSS
                     </a>
                     <ul class="dropdown-menu" aria-labelledby="rssDropdown">
-                        <li><a class="dropdown-item" href="/feed.rss" aria-label="RSS with All Posts">All Posts (Summary)</a></li>
-                        <li><a class="dropdown-item" href="/feed.rss?withContent=true" aria-label="RSS with Full Content">Most Recent Posts (Full Content)</a></li>
+	                    <li><a class="dropdown-item" href="/feed.rss" aria-label="RSS with All Posts">All Posts (Summary)</a></li>
+	                    <li><a class="dropdown-item" href="/feed.rss?withContent=true" aria-label="RSS with Full Content">Most Recent Posts (Full Content)</a></li>
                     </ul>
                 </li>
 

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

@@ -3,9 +3,11 @@
 @using Markdig
 @using LinkDotNet.Blog.Domain
 @using LinkDotNet.Blog.Infrastructure.Persistence
+@using LinkDotNet.Blog.Web.Features.Bookmarks
 @using LinkDotNet.Blog.Web.Features.Services
 @using LinkDotNet.Blog.Web.Features.ShowBlogPost.Components
 @using LinkDotNet.Blog.Web.Features.SupportMe.Components
+@using LinkDotNet.Blog.Web.Features.Bookmarks.Components
 @inject IRepository<BlogPost> BlogPostRepository
 @inject IRepository<ShortCode> ShortCodeRepository
 @inject IJSRuntime JsRuntime
@@ -14,6 +16,7 @@
 @inject IOptions<ApplicationConfiguration> AppConfiguration
 @inject IOptions<ProfileInformation> ProfileInformation
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
+@inject IBookmarkService BookmarkService
 
 @if (isLoading)
 {
@@ -25,7 +28,7 @@ else if (!isLoading && BlogPost is null)
 }
 else if (BlogPost is not null)
 {
-    <PageTitle>@BlogPost.Title</PageTitle>
+	<PageTitle>@BlogPost.Title</PageTitle>
 	<OgData Title="@BlogPost.Title"
 	        AbsolutePreviewImageUrl="@OgDataImage"
 	        Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"
@@ -49,7 +52,10 @@ else if (BlogPost is not null)
 						<span class="ms-1">@BlogPost.UpdatedDate.ToShortDateString()</span>
 					</div>
           				<span class="read-time"></span>
-          				<span class="me-2">@BlogPost.ReadingTimeInMinutes minute read</span>
+					<span class="me-2">@BlogPost.ReadingTimeInMinutes minute read</span>
+					<div class="d-flex align-items-center">
+						<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="BlogPostBookmarked"></BookmarkButton>
+					</div>
 					@if (BlogPost.Tags is not null && BlogPost.Tags.Any())
 					{
 						<div class="d-flex align-items-center">
@@ -110,6 +116,7 @@ else if (BlogPost is not null)
 	private string OgDataImage => BlogPost!.PreviewImageUrlFallback ?? BlogPost.PreviewImageUrl;
 	private string BlogPostCanoncialUrl => $"blogPost/{BlogPost?.Id}";
 	private IReadOnlyCollection<ShortCode> shortCodes = [];
+	private bool isBookmarked;
 
 	private BlogPost? BlogPost { get; set; }
 
@@ -129,6 +136,12 @@ else if (BlogPost is not null)
     {
         await JsRuntime.InvokeVoidAsync("hljs.highlightAll");
         _ = UserRecordService.StoreUserRecordAsync();
+
+        if (BlogPost is not null && firstRender)
+        {
+	        isBookmarked = await BookmarkService.IsBookmarked(BlogPost.Id);
+	        StateHasChanged();
+        }
     }
 
     private MarkupString EnrichWithShortCodes(string content)
@@ -154,4 +167,17 @@ else if (BlogPost is not null)
         BlogPost.Likes = hasLiked ? BlogPost.Likes + 1 : BlogPost.Likes - 1;
         await BlogPostRepository.StoreAsync(BlogPost);
     }
+
+    private async Task BlogPostBookmarked()
+    {
+	    if (BlogPost is null)
+	    {
+		    return;
+	    }
+
+	    isBookmarked = !isBookmarked;
+	    await BookmarkService.SetBookmark(BlogPost.Id, isBookmarked);
+	    StateHasChanged();
+    }
+
 }

src/LinkDotNet.Blog.Web/Pages/_Host.cshtml

@@ -5,4 +5,4 @@
     Layout = "_Layout";
 }
 
-<component type="typeof(App)" render-mode="ServerPrerendered" />
+<component type="typeof(App)" render-mode="ServerPrerendered" />

src/LinkDotNet.Blog.Web/ServiceExtensions.cs

@@ -4,6 +4,7 @@
 using Blazorise.Bootstrap5;
 using LinkDotNet.Blog.Web.Features.Admin.BlogPostEditor.Services;
 using LinkDotNet.Blog.Web.Features.Admin.Sitemap.Services;
+using LinkDotNet.Blog.Web.Features.Bookmarks;
 using LinkDotNet.Blog.Web.Features.Services;
 using LinkDotNet.Blog.Web.RegistrationExtensions;
 using Microsoft.AspNetCore.Builder;
@@ -19,6 +20,7 @@ public static IServiceCollection AddApplicationServices(this IServiceCollection
         services.AddScoped<ILocalStorageService, LocalStorageService>();
         services.AddScoped<ISortOrderCalculator, SortOrderCalculator>();
         services.AddScoped<IUserRecordService, UserRecordService>();
+        services.AddScoped<IBookmarkService, BookmarkService>();
         services.AddScoped<ISitemapService, SitemapService>();
         services.AddScoped<IXmlWriter, XmlWriter>();
         services.AddScoped<IFileProcessor, FileProcessor>();

src/LinkDotNet.Blog.Web/wwwroot/css/fonts/Blog.json

@@ -1929,7 +1929,10 @@
           "ligatures": "bookmark, ribbon",
           "name": "bookmark",
           "id": 210,
-          "order": 0
+          "order": 87,
+          "prevSize": 32,
+          "code": 59858,
+          "tempChar": ""
         },
         {
           "ligatures": "bookmarks, ribbons",
@@ -3150,7 +3153,7 @@
           "order": 85,
           "prevSize": 32,
           "code": 60061,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "ligatures": "youtube2, brand22",
@@ -13357,6 +13360,5 @@
     "showCodes": true,
     "gridSize": 16
   },
-  "uid": -1,
-  "time": 1731146188893
+  "uid": -1
 }