UX: Improve Archive Page

src/LinkDotNet.Blog.Web/Features/Archive/ArchivePage.razor

@@ -7,42 +7,57 @@
 <OgData Title="Archive" Description="Explore all blog posts."></OgData>
 
 <div class="container">
-    <h3 class="pb-3 fw-bold">Archive (@blogPostCount posts)</h3>
+	<h3 class="pb-3 fw-bold">Archive (@blogPostCount posts)</h3>
 
-    @if (blogPostsPerYear is null)
-    {
-        <Loading></Loading>
-    }
-    else
-    {
-        @foreach (var yearGroup in blogPostsPerYear)
-        {
-            <h2>@yearGroup.Key</h2>
-            <ul class="ps-5">
-                @foreach (var blogPost in yearGroup.OrderByDescending(b => b.UpdatedDate))
-                {
-                    <li class="pt-1"><a href="/blogPost/@blogPost.Id/@blogPost.Slug">@blogPost.Title</a></li>
-                }
-            </ul>
-        }
-    }
+	@if (blogPostsPerYear is null)
+	{
+	<Loading></Loading>
+	}
+	else
+	{
+	<div class="accordion" id="archiveAccordion">
+		@foreach (var yearGroup in blogPostsPerYear)
+		{
+		<div class="accordion-item">
+			<h2 class="accordion-header" id="heading">
+				<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="[email protected]">
+					@yearGroup.Key <span class="badge bg-primary ms-2">@yearGroup.Count()</span>
+				</button>
+			</h2>
+			<div id="collapse" class="accordion-collapse collapse show" aria-labelledby="heading" data-bs-parent="#archiveAccordion">
+				<div class="accordion-body">
+					<ul class="list-group">
+						@foreach (var blogPost in yearGroup.OrderByDescending(b => b.UpdatedDate))
+						{
+						<li class="list-group-item">
+							<a href="/blogPost/@blogPost.Id/@blogPost.Slug" class="text-decoration-none">@blogPost.Title</a>
+							<span class="text-muted small ps-2">(@blogPost.UpdatedDate.ToString("MMM dd, yyyy"))</span>
+						</li>
+						}
+					</ul>
+				</div>
+			</div>
+		</div>
+		}
+	</div>
+	}
 </div>
 
 @code {
-    private IReadOnlyCollection<IGrouping<int, BlogPostPerYear>> blogPostsPerYear;
-    private int blogPostCount;
+private IReadOnlyCollection<IGrouping<int, BlogPostPerYear>> blogPostsPerYear;
+private int blogPostCount;
 
-    protected override async Task OnInitializedAsync()
-    {
-        var blogPosts = await Repository.GetAllByProjectionAsync(
-            p => new BlogPostPerYear(p.Id, p.Slug, p.Title, p.UpdatedDate),
-            p => p.IsPublished);
-        blogPostCount = blogPosts.Count;
-        blogPostsPerYear = blogPosts
-            .GroupBy(r => r.UpdatedDate.Year)
-            .OrderByDescending(r => r.Key)
-            .ToImmutableArray();
-    }
+protected override async Task OnInitializedAsync()
+{
+var blogPosts = await Repository.GetAllByProjectionAsync(
+p => new BlogPostPerYear(p.Id, p.Slug, p.Title, p.UpdatedDate),
+p => p.IsPublished);
+blogPostCount = blogPosts.Count;
+blogPostsPerYear = blogPosts
+.GroupBy(r => r.UpdatedDate.Year)
+.OrderByDescending(r => r.Key)
+.ToImmutableArray();
+}
 
-    private sealed record BlogPostPerYear(string Id, string Slug, string Title, DateTime UpdatedDate);
+private sealed record BlogPostPerYear(string Id, string Slug, string Title, DateTime UpdatedDate);
 }

tests/LinkDotNet.Blog.IntegrationTests/Web/Features/Archive/ArchivePageTests.cs

@@ -29,13 +29,13 @@ public async Task ShouldDisplayAllBlogPosts()
         cut.WaitForElements("h2");
         var yearHeader = cut.FindAll("h2");
         yearHeader.Should().HaveCount(2);
-        yearHeader[0].TextContent.Should().Be("2022");
-        yearHeader[1].TextContent.Should().Be("2021");
+        yearHeader[0].TextContent.Should().Contain("2022");
+        yearHeader[1].TextContent.Should().Contain("2021");
         var entries = cut.FindAll("li");
         entries.Should().HaveCount(3);
-        entries[0].TextContent.Should().Be("Blog Post 3");
-        entries[1].TextContent.Should().Be("Blog Post 2");
-        entries[2].TextContent.Should().Be("Blog Post 1");
+        entries[0].TextContent.Should().Contain("Blog Post 3");
+        entries[1].TextContent.Should().Contain("Blog Post 2");
+        entries[2].TextContent.Should().Contain("Blog Post 1");
     }
 
     [Fact]