feat: Add ability to see if entry was read

Author: linkdotnet

MIGRATION.md

@@ -1,6 +1,16 @@
 # Migration Guide
 This document describes the changes that need to be made to migrate from one version of the blog to another.
 
+## 11.0 to 12.0
+
+A new config has been added `ShowReadPostIndicator` in `appsettings.json`. The default value is `false`. If set to `true`, a subtle indicator will show which blog posts the user has already read. The read state is stored in the browser's localStorage.
+
+```json
+{
+  "ShowReadPostIndicator": true
+}
+```
+
 ## 9.0 to 11.0
 
 A new config has been added `UseMultiAuthorMode` in `appsettings.json`. The default value of this config is `false`. If set to `true` then author name will be associated with blog posts at the time of creation.

docs/Setup/Configuration.md

@@ -47,6 +47,7 @@ The appsettings.json file has a lot of options to customize the content of the b
 		"Shortname": "blog"
 	},
 	"ShowReadingIndicator": true,
+	"ShowReadPostIndicator": true,
 	"SimlarBlogPosts": "true",
 	"SupportMe": {
 		"KofiToken": "ABC123",
@@ -101,6 +102,7 @@ The appsettings.json file has a lot of options to customize the content of the b
 | [Giscus](./../Comments/Giscus.md)             | node           | Enables the comment section via giscus. If left empty the comment section will not be shown.                                                                                     |
 | [Disqus](./../Comments/Disqus.md)             | node           | Enables the comment section via disqus. If left empty the comment section will not be shown.                                                                                     |
 | ShowReadingIndicator                          | boolean        | If set to `true` (default) a circle indicates the progress when a user reads a blog post (without comments).                                                                     |
+| ShowReadPostIndicator                         | boolean        | If set to `true` a subtle indicator shows which blog posts the user has already read. Read state is stored in the browser's localStorage.                                        |
 | SimilarBlogPosts                              | boolean        | If set to `true` (default) similar blog posts are shown at the end of a blog post.                                                                                               |
 | [SupportMe](./../Donations/Readme.md)         | node           | Donation sections configuration. If left empty no donation sections will not be shown.                                                                                           |
 | [ImageStorageProvider](./../Media/Readme.md)  | string         | Declares the type of the image storage provider (currently only `Azure`).                                                                                                        |

src/LinkDotNet.Blog.Web/ApplicationConfiguration.cs

@@ -22,6 +22,8 @@ public sealed record ApplicationConfiguration
 
     public bool ShowReadingIndicator { get; init; }
 
+    public bool ShowReadPostIndicator { get; init; }
+
     public bool ShowSimilarPosts { get; init; }
 
     public bool UseMultiAuthorMode { get; init; }

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

@@ -0,0 +1,11 @@
+<span class="read-post-indicator text-success" 
+      aria-label="Previously read" 
+      title="You have read this article">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
+    </svg>
+    <span class="ms-1">Read</span>
+</span>
+
+@code {
+}

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

@@ -0,0 +1,11 @@
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace LinkDotNet.Blog.Web.Features.Bookmarks;
+
+public interface IReadStateService
+{
+    Task<bool> IsRead(string postId);
+    Task<IReadOnlyCollection<string>> GetReadPostIds();
+    Task MarkAsRead(string postId);
+}

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

@@ -0,0 +1,51 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using LinkDotNet.Blog.Web.Features.Services;
+
+namespace LinkDotNet.Blog.Web.Features.Bookmarks;
+
+public class ReadStateService : IReadStateService
+{
+    private const string StorageKey = "readPosts";
+    private readonly ILocalStorageService localStorageService;
+
+    public ReadStateService(ILocalStorageService localStorageService)
+    {
+        this.localStorageService = localStorageService;
+    }
+
+    public async Task<bool> IsRead(string postId)
+    {
+        ArgumentException.ThrowIfNullOrEmpty(postId);
+        await InitializeIfNotExists();
+        var readPosts = await localStorageService.GetItemAsync<HashSet<string>>(StorageKey);
+
+        return readPosts.Contains(postId);
+    }
+
+    public async Task<IReadOnlyCollection<string>> GetReadPostIds()
+    {
+        await InitializeIfNotExists();
+        return await localStorageService.GetItemAsync<IReadOnlyCollection<string>>(StorageKey);
+    }
+
+    public async Task MarkAsRead(string postId)
+    {
+        ArgumentException.ThrowIfNullOrEmpty(postId);
+        await InitializeIfNotExists();
+
+        var readPosts = await localStorageService.GetItemAsync<HashSet<string>>(StorageKey);
+        readPosts.Add(postId);
+
+        await localStorageService.SetItemAsync(StorageKey, readPosts);
+    }
+
+    private async Task InitializeIfNotExists()
+    {
+        if (!await localStorageService.ContainsKeyAsync(StorageKey))
+        {
+            await localStorageService.SetItemAsync(StorageKey, Array.Empty<string>());
+        }
+    }
+}

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

@@ -2,6 +2,7 @@
 @using LinkDotNet.Blog.Web.Features.Bookmarks
 @using LinkDotNet.Blog.Web.Features.Bookmarks.Components
 @inject IBookmarkService BookmarkService
+@inject IReadStateService ReadStateService
 @inject IOptions<ApplicationConfiguration> AppConfiguration
 
 <article>
@@ -38,6 +39,12 @@
                 {
                     <li class="me-4"><i class="user-tie"></i> @BlogPost.AuthorName</li>
                 }
+                @if (AppConfiguration.Value.ShowReadPostIndicator && isRead)
+                {
+                    <li class="me-4">
+                        <ReadPostIndicator />
+                    </li>
+                }
             </ul>
 		</div>
 		<div class="description">
@@ -58,6 +65,7 @@
 	public required BlogPost BlogPost { get; set; }
 
 	private bool isBookmarked = false;
+	private bool isRead = false;
 
 	[Parameter]
 	public bool UseAlternativeStyle { get; set; }
@@ -100,6 +108,10 @@
 		if (firstRender)
 		{
 			isBookmarked = await BookmarkService.IsBookmarked(BlogPost.Id);
+			if (AppConfiguration.Value.ShowReadPostIndicator)
+			{
+				isRead = await ReadStateService.IsRead(BlogPost.Id);
+			}
 			StateHasChanged();
 		}
 	}

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

@@ -17,6 +17,7 @@
 @inject IOptions<ProfileInformation> ProfileInformation
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
 @inject IBookmarkService BookmarkService
+@inject IReadStateService ReadStateService
 
 @if (isLoading)
 {
@@ -149,6 +150,10 @@ else if (BlogPost is not null)
         if (BlogPost is not null && firstRender)
         {
 	        isBookmarked = await BookmarkService.IsBookmarked(BlogPost.Id);
+	        if (AppConfiguration.Value.ShowReadPostIndicator)
+	        {
+		        await ReadStateService.MarkAsRead(BlogPost.Id);
+	        }
 	        StateHasChanged();
         }
     }

src/LinkDotNet.Blog.Web/ServiceExtensions.cs

@@ -21,6 +21,7 @@ public static IServiceCollection AddApplicationServices(this IServiceCollection
         services.AddScoped<ISortOrderCalculator, SortOrderCalculator>();
         services.AddScoped<IUserRecordService, UserRecordService>();
         services.AddScoped<IBookmarkService, BookmarkService>();
+        services.AddScoped<IReadStateService, ReadStateService>();
         services.AddScoped<ISitemapService, SitemapService>();
         services.AddScoped<IXmlWriter, XmlWriter>();
         services.AddScoped<IFileProcessor, FileProcessor>();

src/LinkDotNet.Blog.Web/appsettings.json

@@ -46,6 +46,7 @@
 		"CdnEndpoint": ""
 	},
 	"ShowReadingIndicator": true,
+	"ShowReadPostIndicator": true,
 	"ShowSimilarPosts": true,
 	"UseMultiAuthorMode": false
 }