Merge pull request #23 from NielsPilgaard/blogpost-navigation

Blogpost Navigation buttons
NielsPilgaard · Mar 9, 2023 · 2d63988 · 2d63988
2 parents 6e18cb2 + 240f393
commit 2d63988
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 9 deletions.
diff --git a/src/Pilgaard.Blog/Features/BlogPost/BlogPostComponent.razor b/src/Pilgaard.Blog/Features/BlogPost/BlogPostComponent.razor
@@ -5,13 +5,15 @@
         @BlogPostSeries.Title - Part @BlogPost.NumberInSeries
     </MudText>
 
-    <MudText Typo="Typo.h1" Color="Color.Tertiary">@BlogPost.Title</MudText>
+    <MudText Typo="Typo.h1" Color="Color.Tertiary">
+        @BlogPost.Title
+    </MudText>
 
     <hr class="mb-5"/>
 
-    <BlogPostNavigation CurrentBlogPost="BlogPost" BlogPostSeries="BlogPostSeries">
-        @BlogPostText
-    </BlogPostNavigation>
+    @BlogPostText
+
+    <BlogPostNavigation CurrentBlogPost="BlogPost" BlogPostSeries="BlogPostSeries"/>
 
 </article>
 <MetadataComponent 

diff --git a/src/Pilgaard.Blog/Features/BlogPost/BlogPostData.cs b/src/Pilgaard.Blog/Features/BlogPost/BlogPostData.cs
@@ -53,13 +53,21 @@ public static class BlogPostData
                     day: 22),
                 numberInSeries: 6,
                 "seo"),
+            new (title: "Blogpost Navigation",
+                description: "In this post, we add buttons to make navigating between related posts fast and easy.",
+                pathName: "7-blogpost-navigation",
+                publishDate: new DateOnly(2023,
+                    3,
+                    9),
+                numberInSeries: 7,
+                "mudblazor"),
             //new (title: "",
             //    description: "",
             //    pathName: "",
-            //    publishDate: new DateOnly(2022,
-            //        10,
-            //        22),
-            //    numberInSeries: 6,
+            //    publishDate: new DateOnly(202´3,
+            //        3,
+            //        5),
+            //    numberInSeries: 8,
             //    ""),
         }, "blazor", "dotnet");
 

diff --git a/src/Pilgaard.Blog/Features/BlogPost/BlogPostNavigation.razor b/src/Pilgaard.Blog/Features/BlogPost/BlogPostNavigation.razor
@@ -0,0 +1,33 @@
+<div class="mt-5">
+<BlogPostNavigationButton BlogPost="_previousBlogPost"
+                          BlogPostSeries="BlogPostSeries"
+                          Next="false" />
+
+<BlogPostNavigationButton BlogPost="_nextBlogPost"
+                          BlogPostSeries="BlogPostSeries"
+                          Next="true" />
+</div>
+@code {
+    [Parameter]
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+
+    [Parameter]
+    public BlogPost CurrentBlogPost { get; set; } = null!;
+
+    BlogPost? _previousBlogPost;
+    BlogPost? _nextBlogPost;
+
+    protected override void OnInitialized()
+    {
+        if (CurrentBlogPost.NumberInSeries > 1)
+        {
+            _previousBlogPost = BlogPostSeries
+                .BlogPosts
+                .FirstOrDefault(bp => bp.NumberInSeries == CurrentBlogPost.NumberInSeries - 1);
+        }
+
+        _nextBlogPost = BlogPostSeries
+            .BlogPosts
+            .FirstOrDefault(bp => bp.NumberInSeries == CurrentBlogPost.NumberInSeries + 1);
+    }
+}
diff --git a/src/Pilgaard.Blog/Features/BlogPost/BlogPostNavigationButton.razor b/src/Pilgaard.Blog/Features/BlogPost/BlogPostNavigationButton.razor
@@ -0,0 +1,31 @@
+@inject NavigationManager NavigationManager
+
+@if (BlogPost is null)
+{
+    return;
+}
+
+<MudButton Color="Color.Primary"
+           OnClick="@NavigateToBlogPost"
+           Variant="Variant.Filled"
+           StartIcon="@(Next ? string.Empty : Icons.Material.Filled.NavigateBefore)"
+           EndIcon="@(Next ? Icons.Material.Filled.NavigateNext : string.Empty)"
+           Size="Size.Small">
+    @(Next ? $"Next: {BlogPost.Title}" : $"Previous: {BlogPost.Title}")
+</MudButton>
+
+@code {
+    [Parameter] 
+    public BlogPost? BlogPost { get; set; } = null!;
+
+    [Parameter] 
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+
+    [Parameter] 
+    public bool Next { get; set; }
+
+    private void NavigateToBlogPost() 
+        => NavigationManager.NavigateTo(
+            uri: BlogPostSeries.GetRelativePath(BlogPost!), 
+            forceLoad: true);
+}
diff --git a/src/Pilgaard.Blog/Pages/posts/making-a-blog/7-blogpost-navigation.md b/src/Pilgaard.Blog/Pages/posts/making-a-blog/7-blogpost-navigation.md
@@ -0,0 +1,108 @@
+Currently navigating between posts is cumbersome, so I wanted to add easy navigation.
+
+To do this, I made a `BlogPostNavigation` component and added it to my `BlogPostComponent`
+
+All my blog posts are currently stored in-code, so it's luckily very easy to determine whether there's a next/previous post in the series:
+
+`BlogPostNavigation.razor`
+```csharp
+<div class="mt-5">
+<BlogPostNavigationButton BlogPost="_previousBlogPost"
+                          BlogPostSeries="BlogPostSeries"
+                          Next="false" />
+
+<BlogPostNavigationButton BlogPost="_nextBlogPost"
+                          BlogPostSeries="BlogPostSeries"
+                          Next="true" />
+</div>
+@code {
+    [Parameter]
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+
+    [Parameter]
+    public BlogPost CurrentBlogPost { get; set; } = null!;
+
+    BlogPost? _previousBlogPost;
+    BlogPost? _nextBlogPost;
+
+    protected override void OnInitialized()
+    {
+        if (CurrentBlogPost.NumberInSeries > 1)
+        {
+            _previousBlogPost = BlogPostSeries
+                .BlogPosts
+                .FirstOrDefault(bp => bp.NumberInSeries == CurrentBlogPost.NumberInSeries - 1);
+        }
+
+        _nextBlogPost = BlogPostSeries
+            .BlogPosts
+            .FirstOrDefault(bp => bp.NumberInSeries == CurrentBlogPost.NumberInSeries + 1);
+    }
+}
+```
+
+The next and previous blog posts are determined based on the current blog post's number in it's series +/-1
+
+They're then passed to the `BlogPostNavigationButton` component which renders them nicely, or returns early if they're null.
+
+`BlogPostNavigationButton.razor`
+```csharp
+@inject NavigationManager NavigationManager
+
+@if (BlogPost is null)
+{
+    return;
+}
+
+<MudButton Color="Color.Primary"
+           OnClick="@NavigateToBlogPost"
+           Variant="Variant.Filled"
+           StartIcon="@(Next ? string.Empty : Icons.Material.Filled.NavigateBefore)"
+           EndIcon="@(Next ? Icons.Material.Filled.NavigateNext : string.Empty)"
+           Size="Size.Small">
+    @(Next ? $"Next: {BlogPost.Title}" : $"Previous: {BlogPost.Title}")
+</MudButton>
+
+@code {
+    [Parameter] 
+    public BlogPost? BlogPost { get; set; } = null!;
+
+    [Parameter] 
+    public BlogPostSeries BlogPostSeries { get; set; } = null!;
+
+    [Parameter] 
+    public bool Next { get; set; }
+
+    private void NavigateToBlogPost() 
+        => NavigationManager.NavigateTo(
+            uri: BlogPostSeries.GetRelativePath(BlogPost!), 
+            forceLoad: true);
+}
+```
+
+The BlogPostNavigationButton handles navigating to the previous/next blog post using the built-in `NavigationManager`. 
+It's important to set `forceLoad` to true, because otherwise the markdown isn't reconstructed correctly.
+
+Tying it all together in `BlogPostComponent.razor`
+```csharp
+<BlogPostNavigation CurrentBlogPost="BlogPost" BlogPostSeries="BlogPostSeries"/>
+```
+
+And that's it!
+
+Here's what the end product looks like:
+
+![Blogpost Navigation](https://user-images.githubusercontent.com/21295394/224116593-55383715-a8ff-4c93-929e-e9491e06509a.png)
+
+## Summary
+
+We've added simple navigation buttons to move between blog posts, to make for a nicer reading experience.
+
+### See the code 
+
+https://github.com/NielsPilgaard/Pilgaard.Blog/pull/23
+
+### The state of the blog
+
+![State of the blog](https://user-images.githubusercontent.com/21295394/224152139-cd53b1a6-a89f-4b85-b10a-4beae4b83a22.png)
+
diff --git a/src/Pilgaard.Blog/Pilgaard.Blog.csproj b/src/Pilgaard.Blog/Pilgaard.Blog.csproj
@@ -14,6 +14,7 @@
 	  <None Remove="Pages\posts\making-a-blog\4-improving-appearances.md" />
 	  <None Remove="Pages\posts\making-a-blog\5-adding-comments.md" />
 	  <None Remove="Pages\posts\making-a-blog\6-seo.md" />
+	  <None Remove="Pages\posts\making-a-blog\7-blogpost-navigation.md" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -29,6 +30,9 @@
 	  <Content Include="Pages\posts\making-a-blog\4-improving-appearances.md">
 	    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
 	  </Content>
+	  <Content Include="Pages\posts\making-a-blog\7-blogpost-navigation.md">
+	    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+	  </Content>
 	  <Content Include="Pages\posts\making-a-blog\6-seo.md">
 	    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
 	  </Content>

diff --git a/src/Pilgaard.Blog/wwwroot/css/blog-post.css b/src/Pilgaard.Blog/wwwroot/css/blog-post.css
@@ -78,7 +78,14 @@
     background: #2d2d2d;
     padding: 0.25rem;
 }
-
+.blog-post p code {
+    background: var(--mud-palette-primary-lighten);
+    padding: 0.25rem;
+    color: var(--mud-palette-primary-text);
+}
+.blog-post img {
+    max-width: 100%;
+}
 .blog-post hr {
     border: none;
     height: 1px;

diff --git a/src/Pilgaard.Blog/wwwroot/css/site.css b/src/Pilgaard.Blog/wwwroot/css/site.css
@@ -3,6 +3,10 @@
     src: url(../fonts/mallanna-regular.ttf);
 }
 
+h1:focus {
+    outline: none;
+}
+
 @media screen and (max-width: 1500px) {
     .logo-text {
         font-family: mallanna !important;