Preload blog posts on current page

Author: CorruptComputer

.github/dependabot.yml

@@ -6,14 +6,14 @@ updates:
     schedule:
       interval: "daily"
     groups:
-      web:
+      nuget:
         patterns:
           - "*"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "daily"
     groups:
-      pipeline:
+      actions:
         patterns:
           - "*"

Home/App.razor

@@ -18,7 +18,7 @@
                     </div>
                     <br />
                     <div style="display: flex; justify-content: space-around;">
-                        <Button OnClick="() => NavigateHome()">Return home</Button>
+                        <LinkButton Href="/">Return home</LinkButton>
                     </div>
                 </Box>
             </Row>

Home/App.razor.cs

@@ -1,12 +1,3 @@
-using System;
-using Microsoft.AspNetCore.Components;
-
 namespace Home;
 
-public partial class App(NavigationManager navManager)
-{
-    private void NavigateHome()
-    {
-        navManager.NavigateTo("/");
-    }
-}
+public partial class App;

Home/Components/Box.razor.cs

@@ -5,6 +5,9 @@ namespace Home.Components;
 
 public partial class Box : ComponentBase
 {
+    /// <summary>
+    ///   The title of the box, by default rendered as an H2 element.
+    /// </summary>
     [Parameter]
     public required string Title { get; set; }
 

Home/Components/Button.razor

@@ -1,3 +1,3 @@
-<a @onclick="OnClick" class="button @(Disabled ? "disabled" : string.Empty)">
+<button @onmousedown="OnMouseDownAsync" class="button @(Disabled ? "disabled" : string.Empty)">
     @ChildContent
-</a>
+</button>

Home/Components/Button.razor.cs

@@ -1,5 +1,5 @@
-
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace Home.Components;
 
@@ -9,8 +9,26 @@ public partial class Button : ComponentBase
     public required RenderFragment ChildContent { get; set; }
 
     [Parameter]
-    public required EventCallback OnClick { get; set; }
+    public required EventCallback OnLeftClickCallback { get; set; }
+
+    [Parameter]
+    public EventCallback OnMiddleClickCallback { get; set; } = new();
 
     [Parameter]
     public bool Disabled { get; set; } = false;
+
+    private async Task OnMouseDownAsync(EventArgs e)
+    {
+        if (!Disabled && e is MouseEventArgs mouseEventArgs)
+        {
+            Task task = mouseEventArgs.Button switch
+            {
+                0 => OnLeftClickCallback.InvokeAsync(), // Left
+                1 => OnMiddleClickCallback.InvokeAsync(), // Middle
+                _ => Task.CompletedTask
+            };
+
+            await task;
+        }
+    }
 }

Home/Components/LinkButton.razor.cs

@@ -0,0 +1,43 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Home.Components;
+
+public partial class LinkButton : Button
+{
+    /// <summary>
+    ///   The URL to navigate to when the button is clicked.
+    /// </summary>
+    [Parameter]
+    [Url(ErrorMessage = "Must be a valid URL.")]
+    public required string Href { get; set; }
+
+    private readonly NavigationManager navManager;
+    private readonly IJSRuntime jSRuntime;
+
+    public LinkButton(NavigationManager navManager, IJSRuntime jSRuntime)
+    {
+        this.navManager = navManager;
+        this.jSRuntime = jSRuntime;
+
+        OnLeftClickCallback = EventCallback.Factory.Create(this, OnClick);
+        OnMiddleClickCallback = EventCallback.Factory.Create(this, OnMiddleClickAsync);
+    }
+
+    protected void OnClick()
+    {
+        if (!Disabled)
+        {
+            navManager.NavigateTo(Href);
+        }
+    }
+
+    protected async Task OnMiddleClickAsync()
+    {
+        if (!Disabled)
+        {
+            await jSRuntime.InvokeVoidAsync("open", Href, "_blank");
+        }
+    }
+}

Home/Models/BlogPostMetaData.cs

@@ -16,4 +16,6 @@ public class BlogPostMetaData
     public DateTimeOffset LastUpdatedDate { get; set; }
 
     public string? ImageUrl { get; set; }
+
+    public Dictionary<DateOnly, string>? Edits { get; set; }
 }

Home/Pages/Blog/Index.razor

@@ -32,7 +32,7 @@
                 <Box Title="@post.Title" Date="@post.PublishedDate">
                     <p>@((MarkupString)post.Excerpt)</p>
 
-                    <Button OnClick="() => NavigateToPost(post.Slug)">Read More</Button>
+                    <LinkButton Href="@GetPostUrlFromSlug(post.Slug)">Read More</LinkButton>
                 </Box>
             </Row>
         }
@@ -42,10 +42,10 @@
 @if (BlogPosts != null && BlogPosts.Count() > PostsPerPage)
 {
     <Row>
-        <Button OnClick="NavigateToPreviousPage" Disabled="CurrentPage <= 0">Prev</Button>
+        <Button OnLeftClickCallback="NavigateToPreviousPage" Disabled="CurrentPage <= 0">Prev</Button>
 
         <!-- TODO: Add page selection here -->
 
-        <Button OnClick="NavigateToNextPage" Disabled="CurrentPage >= TotalPages - 1">Next</Button>
+        <Button OnLeftClickCallback="NavigateToNextPage" Disabled="CurrentPage >= TotalPages - 1">Next</Button>
     </Row>
 }

Home/Pages/Blog/Index.razor.cs

@@ -18,14 +18,22 @@ public partial class Index(NavigationManager navManager, BlogPostService blogPos
 
     protected IOrderedEnumerable<BlogPostMetaData>? BlogPosts { get; set; }
 
-    protected override async void OnInitialized()
+    protected override async Task OnInitializedAsync()
     {
         BlogPosts = await blogPostService.GetPosts();
+        await PreloadCurrentPagePosts();
 
         await InvokeAsync(StateHasChanged);
         base.OnInitialized();
     }
 
+    protected override async Task OnParametersSetAsync()
+    {
+        await PreloadCurrentPagePosts();
+
+        await base.OnParametersSetAsync();
+    }
+
     public void NavigateToPage(int page)
     {
         if (page < TotalPages || page > 0)
@@ -50,8 +58,22 @@ public void NavigateToPreviousPage()
         }
     }
 
-    public void NavigateToPost(string slug)
+    public static string GetPostUrlFromSlug(string slug)
     {
-        navManager.NavigateTo(SiteUrls.BlogPost.Replace(SiteUrls.POST_SLUG_PARAM, slug));
+        return SiteUrls.BlogPost.Replace(SiteUrls.POST_SLUG_PARAM, slug);
+    }
+
+    private async Task PreloadCurrentPagePosts()
+    {
+        if (BlogPosts is null)
+        {
+            return;
+        }
+
+        int startIndex = CurrentPage * PostsPerPage;
+        int endIndex = Math.Min(startIndex + PostsPerPage, BlogPosts.Count());
+
+        IEnumerable<string> slugsToPreload = BlogPosts.Skip(startIndex).Take(endIndex - startIndex).Select(x => x.Slug);
+        await blogPostService.PreloadPostMarkdown(slugsToPreload);
     }
 }