Publications Grid Component - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <script src="{{ url_for('static', filename='js/publicaciones.js') }}"></script> <title>Publicaciones</title> </head> <body class="bg gray 100"> <div class="container mx auto py 10"> <h1 class="text 3xl font bold text center text gray 800 mb 6">Publicaciones</h1> <div id="publicaciones" class="grid grid cols 1 sm:grid cols 2 md:grid cols 3 lg:grid cols 4 gap 6"> <! Las tarjetas de publicaciones se agregarán aquí > </div> </div> <script> const meses = { 'January': 'Enero', 'February': 'Febrero', 'March': 'Marzo', 'April': 'Abril', 'May': 'Mayo', 'June': 'Junio', 'July': 'Julio', 'August': 'Agosto', 'September': 'Septiembre', 'October': 'Octubre', 'November': 'Noviembre', 'December': 'Diciembre' }; // Llamada a la API para obtener las publicaciones con autores fetch('/publicaciones') .then(response => response.json()) .then(data => { const publicacionesContainer = document.getElementById('publicaciones'); // Iterar sobre cada publicación y agregarla como tarjeta data.forEach(pub => { const card = document.createElement('div'); card.classList.add('bg white', 'rounded lg', 'shadow lg', 'p 6', 'hover:shadow xl', 'transition', 'duration 300', 'ease in out'); const fechaPub = pub.fecha_publicacion.split(' '); const mesEnEspanol = meses[fechaPub[0]]; const fechaFinal = `${mesEnEspanol} ${fechaPub[1]}`; card.innerHTML = ` <div class="card content"> <p class="text xl font semibold text gray 800 mb 2">${pub.title}</p> <p class="text gray 600"><strong>Autor:</strong> ${pub.autor}</p> <p class="text gray 600 mb 4"><strong>Fecha de Publicación:</strong> ${fechaFinal}</p> <a href="${pub.doi}" target="_blank" class="inline flex items center text blue 500 hover:text blue 700 font semibold"> 👁️ <span class="ml 1">Ver Documento</span> </a> </div> `; publicacionesContainer.appendChild(card); }); }) .catch(error => console.error('Error al cargar las publicaciones:', error)); </script> </body> </html>
