Ejemplo posts relacionados y cambio a mayúscula del nombre

src/components/PostsRelacionados.astro

@@ -1,28 +1,69 @@
 ---
 const { currentPost } = Astro.props;
 
-// Aquí deberías implementar la lógica para obtener posts relacionados
+const posts = await Astro.glob('../pages/posts/*.mdx');
-// Por ejemplo, basándote en categorías, tags, o algún otro criterio
+
-const relatedPosts = [{ title: "Prueba", excerpt: "Prueba", url: "Prueba" }];
+const relatedPosts = posts.filter(post => 
+    currentPost.relacionados?.includes(post.file.split('/').pop().replace('.mdx', ''))
+).map(post => ({
+    title: post.frontmatter.titulo,
+    excerpt: post.frontmatter.descripcion,
+    url: post.url,
+    imagen: post.frontmatter.imagen
+}));
 ---
 
-<section class="related-posts mt-5">
+<section class="related-posts mt-5 col-lg-8">
-    <h2>Posts Relacionados</h2>
+    <h4 class="mb-3">Posts Relacionados</h4>
-    <div class="row">
+    <ul class="list-group">
         {
             relatedPosts.map((post) => (
-                <div class="col-md-4 mb-4">
+                <li class="list-group-item list-group-item-action">
-                    <div class="card">
+                    <a href={post.url} class="text-decoration-none">
-                        <div class="card-body">
+                        <div class="d-flex align-items-center">
-                            <h5 class="card-title">{post.title}</h5>
+                            <div class="flex-shrink-0">
-                            <p class="card-text">{post.excerpt}</p>
+                                <img 
-                            <a href={post.url} class="btn btn-primary">
+                                    src={post.imagen} 
-                                Leer más
+                                    alt={post.title}
-                            </a>
+                                    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>
-                    </div>
+                    </a>
-                </div>
+                </li>
             ))
         }
-    </div>
+    </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>

src/layouts/PostStyle.astro

@@ -255,13 +255,13 @@ const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${
                                     <i class="fas fa-user"></i>
                                     {frontmatter.autor}
                                     {
-                                        frontmatter.lastModified && (
+                                        frontmatter.fecha && (
                                             <>
                                                 &nbsp;|&nbsp;
                                                 <i class="fas fa-edit" /> Última
                                                 actualización:{" "}
                                                 {new Date(
-                                                    frontmatter.lastModified,
+                                                    frontmatter.fecha,
                                                 ).toLocaleDateString("es-ES", {
                                                     year: "numeric",
                                                     month: "long",

src/pages/posts/ods1.mdx

@@ -6,6 +6,7 @@ fecha: '10/29/24'
 descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 1 en el siguiente post:'
 imagen: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Sustainable_Development_Goal-es-17.jpg'
 hashtags: ['ODS1', 'Erradicación de la Pobreza', 'Desarrollo Sostenible', 'Igualdad de Derechos', 'Protección Social']
+relacionados: ['ODS2', 'ODS10', 'ODS8', 'ODS3']
 ---
 import ImagenMD from "../../components/ImagenMD.astro"
 

src/pages/posts/ods2.mdx

@@ -6,6 +6,7 @@ fecha: '10/29/24'
 descripcion: 'Este objetivo busca erradicar la pobreza extrema garantizando acceso a recursos básicos, oportunidades económicas y una vida digna para todos. Descubre en detalle el ODS 2 en el siguiente post:'
 imagen: 'https://upload.wikimedia.org/wikipedia/commons/8/80/Sustainable_Development_Goal-es-16.jpg'
 hashtags: ['Hambre Cero', 'Seguridad Alimentaria', 'Nutricion', 'Agricultura Sostenible']
+relacionados: []
 ---
 import ImagenMD from "../../components/ImagenMD.astro"
 

src/pages/posts/ods3.mdx

@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
 fecha: '10/29/24'
 descripcion: 'Este objetivo busca mejorar la salud y la calidad de vida general de todos los seres humanos, involucrando una serie de políticas y de acciones tanto gubernamentales y civiles para lograr dicho objetivo. Descubre qué implica exactamente en este artículo:'
 imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Sustainable_Development_Goal-es-15.jpg/1024px-Sustainable_Development_Goal-es-15.jpg'
+relacionados: []
 ---
 import ImagenMD from "../../components/ImagenMD.astro"
 

src/pages/posts/ods4.mdx

@@ -5,6 +5,7 @@ autor: 'José Antonio Marín'
 fecha: '10/29/24'
 descripcion: 'Este objetivo busca garantizar una educación inclusiva, equitativa y de calidad para todos los los ciudadanos del mundo a lo largo de sus vidas. Descubre qué es lo que implica en este post:'
 imagen: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sustainable_Development_Goal-es-14.jpg/480px-Sustainable_Development_Goal-es-14.jpg'
+relacionados: []
 ---
 import ImagenMD from "../../components/ImagenMD.astro"