From dbb86fdb9b545aae302d3f7c762c7d4bce578a35 Mon Sep 17 00:00:00 2001
From: h4ckx0r <natanagoor@gmail.com>
Date: Wed, 23 Oct 2024 22:29:33 +0200
Subject: [PATCH] Update con apartado de post y post de ejemplo

---
 package.json                                |   2 +-
 src/components/ListadoPostsHorizontal.astro |   2 +-
 src/components/Navbar.astro                 |   2 +-
 src/layouts/ListadoPosts.astro              | 213 ++++++++++++++++++++
 src/pages/posts.astro                       |  23 +++
 src/pages/posts/prueba.md                   |   9 -
 src/pages/posts/prueba.mdx                  | 173 ++++++++++++++++
 7 files changed, 412 insertions(+), 12 deletions(-)
 create mode 100644 src/layouts/ListadoPosts.astro
 create mode 100644 src/pages/posts.astro
 delete mode 100644 src/pages/posts/prueba.md
 create mode 100644 src/pages/posts/prueba.mdx

diff --git a/package.json b/package.json
index f7b9e8a..4c51b54 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "websostenible",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "scripts": {
     "dev": "astro dev",
     "devhost": "astro dev --host",
diff --git a/src/components/ListadoPostsHorizontal.astro b/src/components/ListadoPostsHorizontal.astro
index 7aa0c3d..b4f2325 100644
--- a/src/components/ListadoPostsHorizontal.astro
+++ b/src/components/ListadoPostsHorizontal.astro
@@ -1,5 +1,5 @@
 ---
-const posts = await Astro.glob("../pages/posts/*.md");
+const posts = await Astro.glob("../pages/posts/*.mdx");
 ---
 
 <div class="row">
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 663d3a7..fed36ff 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -29,7 +29,7 @@ const { home, posts, proyectos } = Astro.props;
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item">
-          <a type="button" class="nav-link btn btn-light" href={posts ? posts : "#posts"}>Posts</a>
+          <a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
         </li>
         <li class="nav-item">
           <a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "#proyectos"}
diff --git a/src/layouts/ListadoPosts.astro b/src/layouts/ListadoPosts.astro
new file mode 100644
index 0000000..806a977
--- /dev/null
+++ b/src/layouts/ListadoPosts.astro
@@ -0,0 +1,213 @@
+---
+// ListadoPosts.astro
+const posts = await Astro.glob("../pages/posts/*.mdx");
+
+// Función para ordenar posts
+const orderPosts = (posts, orderBy = "fecha", ascending = false) => {
+    return [...posts].sort((a, b) => {
+        if (orderBy === "fecha") {
+            const comparison = new Date(b.frontmatter.fecha).getTime() - 
+                             new Date(a.frontmatter.fecha).getTime();
+            return ascending ? -comparison : comparison;
+        } else if (orderBy === "titulo") {
+            const comparison = a.frontmatter.titulo.localeCompare(b.frontmatter.titulo);
+            return ascending ? comparison : -comparison;
+        }
+        return 0;
+    });
+};
+
+// Ordenar posts por defecto (más reciente primero)
+const initialPosts = orderPosts(posts, "fecha", false);
+---
+
+<div class="container py-5">
+    <div class="text-center mb-5 mt-3">
+        <h1 class="display-4">Blog Ecobjetivos</h1>
+        <p class="lead text-muted">Explora nuestros artículos sobre sostenibilidad y desarrollo</p>
+    </div>
+    
+    <!-- Controles de búsqueda y ordenamiento -->
+    <div class="row justify-content-center mb-5">
+        <div class="col-md-8">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <div class="row g-3">
+                        <div class="col-md-7">
+                            <div class="input-group">
+                                <span class="input-group-text bg-white">
+                                    <i class="fas fa-search text-muted"></i>
+                                </span>
+                                <input 
+                                    type="text" 
+                                    id="searchInput" 
+                                    class="form-control border-start-0" 
+                                    placeholder="Buscar artículos..."
+                                >
+                            </div>
+                        </div>
+                        <div class="col-md-5">
+                            <select id="orderSelect" class="form-select">
+                                <option value="fecha-desc">Más recientes primero</option>
+                                <option value="fecha-asc">Más antiguos primero</option>
+                                <option value="titulo-asc">Título A-Z</option>
+                                <option value="titulo-desc">Título Z-A</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Grid de posts -->
+    <div class="row justify-content-center" id="postsContainer">
+        {
+            initialPosts.map((post) => (
+                <div class="col-md-8 mb-4 post-item">
+                    <article class="card shadow-sm h-100 border-0">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                {post.frontmatter.imagen ? (
+                                    <img 
+                                        src={post.frontmatter.imagen} 
+                                        class="post-image rounded-start" 
+                                        alt={post.frontmatter.titulo}
+                                    />
+                                ) : (
+                                    <div class="default-image rounded-start">
+                                        <i class="fas fa-leaf fa-3x text-success"></i>
+                                    </div>
+                                )}
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body d-flex flex-column h-100">
+                                    <div class="mb-3">
+                                        <h2 class="card-title h4">
+                                            {post.frontmatter.titulo}
+                                        </h2>
+                                        <p class="card-text text-muted">
+                                            {post.frontmatter.descripcion}
+                                        </p>
+                                    </div>
+                                    <div class="mt-auto">
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div class="author-info">
+                                                <small class="text-muted d-block">
+                                                    <i class="fas fa-user-edit me-2"></i>
+                                                    {post.frontmatter.autor}
+                                                </small>
+                                                <small class="text-muted d-block">
+                                                    <i class="far fa-calendar-alt me-2"></i>
+                                                    {new Date(post.frontmatter.fecha).toLocaleDateString('es-ES', {
+                                                        year: 'numeric',
+                                                        month: 'long',
+                                                        day: 'numeric'
+                                                    })}
+                                                </small>
+                                            </div>
+                                            <a href={post.url} class="btn btn-outline-success">
+                                                Leer más 
+                                                <i class="fas fa-arrow-right ms-2"></i>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+            ))
+        }
+    </div>
+</div>
+
+<style>
+    .card {
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        background: #ffffff;
+    }
+    .card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+    }
+    .post-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .default-image {
+        width: 100%;
+        height: 100%;
+        min-height: 200px;
+        background-color: #f8f9fa;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .card-title {
+        color: #2c3e50;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+    .input-group-text {
+        border-right: 0;
+    }
+    .form-control:focus {
+        box-shadow: none;
+        border-color: #ced4da;
+    }
+    .form-select:focus {
+        box-shadow: none;
+        border-color: #ced4da;
+    }
+    .btn-outline-success:hover {
+        transform: translateX(5px);
+        transition: transform 0.3s ease;
+    }
+</style>
+
+<script>
+    // El mismo script que antes...
+    const posts = {
+        frontmatter: JSON.stringify(Array.from(document.querySelectorAll('.post-item')).map(post => ({
+            titulo: post.querySelector('.card-title').textContent.trim(),
+            fecha: post.querySelector('.fa-calendar-alt').nextSibling.textContent.trim(),
+            element: post.outerHTML
+        })))
+    };
+
+    const searchInput = document.getElementById('searchInput');
+    const orderSelect = document.getElementById('orderSelect');
+    const postsContainer = document.getElementById('postsContainer');
+
+    function updatePosts() {
+        const searchTerm = searchInput.value.toLowerCase();
+        const [orderBy, direction] = orderSelect.value.split('-');
+        
+        let filteredPosts = JSON.parse(posts.frontmatter)
+            .filter(post => 
+                post.titulo.toLowerCase().includes(searchTerm)
+            );
+
+        // Ordenar posts
+        filteredPosts.sort((a, b) => {
+            if (orderBy === 'fecha') {
+                const dateA = new Date(a.fecha);
+                const dateB = new Date(b.fecha);
+                return direction === 'asc' ? dateA - dateB : dateB - dateA;
+            } else {
+                const comparison = a.titulo.localeCompare(b.titulo);
+                return direction === 'asc' ? comparison : -comparison;
+            }
+        });
+
+        // Actualizar DOM
+        postsContainer.innerHTML = filteredPosts
+            .map(post => post.element)
+            .join('');
+    }
+
+    searchInput.addEventListener('input', updatePosts);
+    orderSelect.addEventListener('change', updatePosts);
+</script>
\ No newline at end of file
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
new file mode 100644
index 0000000..66ad0e5
--- /dev/null
+++ b/src/pages/posts.astro
@@ -0,0 +1,23 @@
+---
+import Navbar from "../components/Navbar.astro";
+import ListadoPosts from "../layouts/ListadoPosts.astro";
+---
+
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="generator" content={Astro.generator} />
+        <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
+        <title>Ecobjetivos | Posts</title>
+    </head>
+    <body>
+        <main>
+            <Navbar/>
+            <ListadoPosts/>
+        </main>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/pages/posts/prueba.md b/src/pages/posts/prueba.md
deleted file mode 100644
index b5a0de1..0000000
--- a/src/pages/posts/prueba.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-titulo: 'Título to chulo'
-layout: '../../layouts/PostStyle.astro'
-autor: 'Ben'
-fecha: '08/10/24'
-descripcion: 'Descripcion de prueba'
----
-
-Here is my _great_ post!
\ No newline at end of file
diff --git a/src/pages/posts/prueba.mdx b/src/pages/posts/prueba.mdx
new file mode 100644
index 0000000..a656bf6
--- /dev/null
+++ b/src/pages/posts/prueba.mdx
@@ -0,0 +1,173 @@
+---
+titulo: 'Objetivos de Desarrollo Sostenible (ODS)'
+layout: '../../layouts/PostStyle.astro'
+autor: 'Lucas Curiel'
+fecha: '08/10/24'
+descripcion: 'Descripcion de prueba. Esto es un post de ejemplo con muchas de las cosas que se pueden poner en los posts'
+imagen: 'https://upload.wikimedia.org/wikipedia/commons/0/04/Forest_nature_reserve_Grady_nad_Moszczenica3%2C_Poland%2C_6_May_2006.JPG'
+---
+import ImagenMD from "../../components/ImagenMD.astro"
+
+## Introducción
+
+Los Objetivos de Desarrollo Sostenible (ODS) son un conjunto de 17 objetivos globales establecidos por las Naciones Unidas en 2015 como parte de la Agenda 2030 para el Desarrollo Sostenible. Estos objetivos buscan erradicar la pobreza, proteger el planeta y asegurar la prosperidad para todos.
+
+<ImagenMD alt="Bosque" src="https://upload.wikimedia.org/wikipedia/commons/0/04/Forest_nature_reserve_Grady_nad_Moszczenica3%2C_Poland%2C_6_May_2006.JPG"/>
+## Los 17 Objetivos
+
+### 1. Fin de la Pobreza
+- Erradicar la pobreza extrema
+- Implementar sistemas de protección social
+- Garantizar acceso a recursos económicos
+- Crear marcos normativos sólidos
+
+
+### 2. Hambre Cero
+- Acabar con todas las formas de malnutrición
+- Duplicar la productividad agrícola
+- Asegurar sistemas de producción sostenibles
+- Mantener la diversidad genética de semillas
+
+### 3. Salud y Bienestar
+- Reducir la mortalidad materna
+- Poner fin a las epidemias
+- Garantizar acceso a servicios de salud
+- Reducir muertes por contaminación
+
+### 4. Educación de Calidad
+- Asegurar educación primaria y secundaria gratuita
+- Aumentar el número de becas
+- Mejorar instalaciones educativas
+- Aumentar la cantidad de docentes calificados
+
+### 5. Igualdad de Género
+- Eliminar discriminación contra mujeres y niñas
+- Erradicar la violencia de género
+- Asegurar participación plena de la mujer
+- Reconocer trabajo doméstico no remunerado
+
+## Implementación y Seguimiento
+
+### Indicadores de Progreso
+- Medición cuantitativa y cualitativa
+- Recopilación de datos estadísticos
+- Evaluación periódica de avances
+- Ajuste de estrategias
+
+### Alianzas Estratégicas
+- Colaboración público-privada
+- Cooperación internacional
+- Participación de la sociedad civil
+- Redes de conocimiento
+
+## Desafíos Actuales
+
+### Retos Globales
+1. Cambio climático
+2. Desigualdad económica
+3. Innovación tecnológica
+4. Urbanización sostenible
+
+### Obstáculos
+- Limitaciones presupuestarias
+- Resistencia al cambio
+- Conflictos geopolíticos
+- Brechas tecnológicas
+
+## Buenas Prácticas
+
+### Casos de Éxito
+- Programas locales exitosos
+- Iniciativas empresariales sostenibles
+- Proyectos comunitarios innovadores
+- Políticas públicas efectivas
+
+### Recomendaciones
+- Enfoque integrado
+- Participación ciudadana
+- Medición de impacto
+- Transparencia en la gestión
+
+## Financiamiento
+
+### Fuentes de Recursos
+- Presupuestos nacionales
+- Cooperación internacional
+- Inversión privada
+- Fondos climáticos
+
+### Mecanismos Innovadores
+- Bonos verdes
+- Crowdfunding social
+- Microcréditos
+- Fondos de impacto
+
+## Tecnología e Innovación
+
+### Herramientas Digitales
+- Plataformas de monitoreo
+- Apps para desarrollo sostenible
+- Big data para ODS
+- Inteligencia artificial
+
+### Soluciones Innovadoras
+- Energías renovables
+- Agricultura inteligente
+- Ciudades sostenibles
+- Economía circular
+
+## Educación y Concientización
+
+### Programas Educativos
+- Formación docente
+- Material didáctico
+- Actividades prácticas
+- Evaluación de aprendizaje
+
+### Comunicación
+- Campañas de sensibilización
+- Redes sociales
+- Eventos temáticos
+- Materiales informativos
+
+## Participación Ciudadana
+
+### Mecanismos de Participación
+- Consultas públicas
+- Presupuestos participativos
+- Voluntariado
+- Iniciativas comunitarias
+
+### Roles y Responsabilidades
+- Gobierno
+- Sector privado
+- Sociedad civil
+- Academia
+
+## Conclusiones
+
+La implementación exitosa de los ODS requiere:
+- Compromiso político
+- Participación activa de todos los sectores
+- Recursos adecuados
+- Seguimiento constante
+
+## Referencias y Recursos
+
+### Documentos Clave
+- Agenda 2030
+- Informes de progreso
+- Guías metodológicas
+- Estudios de caso
+
+### Enlaces Útiles
+- Plataforma de conocimiento ODS
+- Herramientas de monitoreo
+- Recursos educativos
+- Redes de colaboración
+
+---
+
+*Nota: Este documento es una guía general sobre los ODS y puede requerir actualizaciones periódicas según los avances y cambios en la implementación global.*
+
+*Última actualización: 2024*
\ No newline at end of file