Skip to content

Commit 29e809f

Browse files
linkdotnetlinkdotnet
committed
ui/ux: Better Similiar Blog Posts
1 parent b67fa66 commit 29e809f

File tree

3 files changed

+81
-42
lines changed

3 files changed

+81
-42
lines changed

‎src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/SimilarBlogPostSection.razor‎

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,89 @@
11
@using LinkDotNet.Blog.Domain
22
@using LinkDotNet.Blog.Infrastructure.Persistence
3+
@using LinkDotNet.Blog.Web.Features
34
@inject IRepository<BlogPost> BlogPostRepository
45
@inject IRepository<SimilarBlogPost> SimilarBlogPostJobRepository
56

67
@if (similarBlogPosts.Count > 0)
78
{
8-
<div class="accordion my-5" id="similarBlogPosts">
9-
<div class="accordion-item">
10-
<h2 class="accordion-header" id="similar-post-header">
11-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#similiar-post-body" aria-expanded="false" aria-controls="similiar-post-body">
12-
Want to read more? Check out these related blog posts!
13-
</button>
14-
</h2>
15-
<div id="similiar-post-body" class="accordion-collapse collapse" aria-labelledby="similar-post-header">
16-
<div class="row p-4">
17-
@foreach (var relatedBlogPost in similarBlogPosts)
18-
{
19-
<div class="col-12 col-md-4 pt-2">
20-
<div class="card h-100">
21-
<div class="card-body">
22-
<h5 class="card-title fw-bold">@relatedBlogPost.Title</h5>
23-
<p class="card-text">@MarkdownConverter.ToMarkupString(relatedBlogPost.ShortDescription)</p>
24-
</div>
25-
<a href="blogPost/@relatedBlogPost.Id/@relatedBlogPost.Slug" class="stretched-link"></a>
26-
</div>
27-
</div>
28-
}
29-
</div>
30-
</div>
31-
</div>
32-
</div>
9+
<div class="accordion my-4" id="similarBlogPosts">
10+
<div class="accordion-item border-start-0 border-end-0">
11+
<h2 class="accordion-header" id="similar-post-header">
12+
<button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#similiar-post-body" aria-expanded="false" aria-controls="similiar-post-body">
13+
<i class="bi bi-book me-2"></i> Related articles you might enjoy
14+
</button>
15+
</h2>
16+
<div id="similiar-post-body" class="accordion-collapse collapse" aria-labelledby="similar-post-header">
17+
<div class="accordion-body p-3">
18+
<div class="list-group list-group-flush">
19+
@foreach (var post in similarBlogPosts)
20+
{
21+
<a href="blogPost/@post.Id/@post.Slug" class="list-group-item list-group-item-action px-0 py-3 border-top">
22+
<div class="row gx-3">
23+
<div class="col-2 col-sm-1">
24+
@if (!string.IsNullOrEmpty(post.PreviewImageUrl))
25+
{
26+
<img src="@post.PreviewImageUrl"
27+
alt="@post.Title"
28+
class="img-fluid rounded w-100 aspect-ratio-1x1"
29+
loading="lazy"
30+
onerror="this.onerror=null; this.src='@(post.PreviewImageUrlFallback ?? "assets/image-placeholder.webp")';">
31+
}
32+
else
33+
{
34+
<div class="bg-light rounded d-flex align-items-center justify-content-center aspect-ratio-1x1">
35+
<i class="bi bi-image text-secondary"></i>
36+
</div>
37+
}
38+
</div>
39+
<div class="col-10 col-sm-11">
40+
<div class="d-flex flex-column h-100">
41+
<h6 class="mb-1 fw-bold">@post.Title</h6>
42+
<p class="mb-1 small text-body-secondary">
43+
@MarkdownConverter.ToPlainString(post.ShortDescription)
44+
</p>
45+
<div class="text-dark-emphasis d-flex flex-wrap gap-2 mt-1">
46+
<div class="me-2">
47+
<span class="date"></span>
48+
<span class="ms-1">@post.UpdatedDate.ToShortDateString()</span>
49+
</div>
50+
<span class="read-time"></span>
51+
<span class="me-2">@post.ReadingTimeInMinutes minute read</span>
52+
</div>
53+
@if (post.Tags.Any())
54+
{
55+
<div class="d-flex flex-wrap gap-2 mt-2">
56+
@foreach (var tag in post.Tags)
57+
{
58+
<a class="goto-tag badge bg-primary rounded-pill text-decoration-none" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
59+
}
60+
</div>
61+
}
62+
</div>
63+
</div>
64+
</div>
65+
</a>
66+
}
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
3372
}
3473

3574
@code {
36-
[Parameter, EditorRequired]
75+
[Parameter, EditorRequired]
3776
public required BlogPost BlogPost { get; set; }
3877

39-
private IReadOnlyCollection<BlogPost> similarBlogPosts = [];
78+
private IReadOnlyCollection<BlogPost> similarBlogPosts = [];
4079

41-
protected override async Task OnParametersSetAsync()
42-
{
43-
var similarBlogPostIds = await SimilarBlogPostJobRepository.GetByIdAsync(BlogPost.Id);
44-
if (similarBlogPostIds is not null)
45-
{
46-
similarBlogPosts = await BlogPostRepository.GetAllAsync(
47-
b => similarBlogPostIds.SimilarBlogPostIds.Contains(b.Id));
48-
}
49-
}
80+
protected override async Task OnParametersSetAsync()
81+
{
82+
var similarBlogPostIds = await SimilarBlogPostJobRepository.GetByIdAsync(BlogPost.Id);
83+
if (similarBlogPostIds is not null)
84+
{
85+
similarBlogPosts = await BlogPostRepository.GetAllAsync(
86+
b => similarBlogPostIds.SimilarBlogPostIds.Contains(b.Id));
87+
}
88+
}
5089
}

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@
2323
object-fit: cover;
2424
}
2525

26-
.read-time:before {
27-
font-family: 'icons';
28-
font-weight: 900;
29-
content: "\e94f";
30-
}
31-
3226
@media only screen and (max-width: 700px) {
3327
.blog-outer-box .blog-container {
3428
width: 90%;

‎src/LinkDotNet.Blog.Web/wwwroot/css/basic.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@ code {
111111
content: "\e9d5";
112112
}
113113

114+
.read-time:before {
115+
font-family: 'icons';
116+
font-weight: 900;
117+
content: "\e94f";
118+
}
119+
114120
.copy-btn {
115121
border-color: whitesmoke !important;
116122
}

0 commit comments

Comments
 (0)