79 lines
2.4 KiB
Plaintext
79 lines
2.4 KiB
Plaintext
---
|
|
const { currentPost } = Astro.props;
|
|
|
|
const posts = await Astro.glob('../pages/posts/*.mdx');
|
|
|
|
const processedPosts = await Promise.all(posts.map(async (post) => {
|
|
const { frontmatter, url, file } = await post;
|
|
const fileName = file.split('/').pop().replace('.mdx', '').toLowerCase();
|
|
return { fileName, frontmatter, url };
|
|
}));
|
|
|
|
const relatedPosts = processedPosts
|
|
.filter((post) =>
|
|
currentPost.relacionados?.map(rel => rel.toLowerCase()).includes(post.fileName)
|
|
)
|
|
.map((post) => ({
|
|
title: post.frontmatter?.titulo || 'Sin título',
|
|
excerpt: post.frontmatter?.descripcion || '',
|
|
url: post.url || '#',
|
|
imagen: post.frontmatter?.imagen || '/default-image.jpg',
|
|
}));
|
|
---
|
|
|
|
|
|
<section class="related-posts mt-5 col-lg-8">
|
|
<h4 class="mb-3">Posts Relacionados</h4>
|
|
<ul class="list-group">
|
|
{
|
|
relatedPosts.map((post) => (
|
|
<li class="list-group-item list-group-item-action">
|
|
<a href={post.url} class="text-decoration-none">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
src={post.imagen}
|
|
alt={post.title}
|
|
class="related-post-img"
|
|
/>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="mb-1">{post.title}</h6>
|
|
<small class="text-muted excerpt-text">{post.excerpt}</small>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<i class="fas fa-chevron-right text-muted"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</section>
|
|
|
|
<style>
|
|
.related-post-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.list-group-item {
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.excerpt-text {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.3;
|
|
}
|
|
</style>
|