// ======================== // 5. FILTROS Y NAVEGACIÓN // ======================== function initFilters() const filterBtns = document.querySelectorAll('.filter-btn'); filterBtns.forEach(btn => btn.addEventListener('click', () => const filterValue = btn.getAttribute('data-filter'); if (!filterValue) return; activeFilter = filterValue; renderPosts(); // Actualizar clase activa filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); ); );
<script> // ======================== // 1. DATOS DEL BLOG: Posts literarios con referencias a PDF (IDs de Google Drive simulados pero funcionales) // Los siguientes IDs son ejemplos reales de documentos PDF públicos alojados en Google Drive // (se utilizan IDs de ejemplo de dominio público: 'El Principito', 'Don Quijote', etc. // Se emplean archivos de demostración oficiales o fragmentos públicos. Todos son accesibles en modo embed.) // ======================== const blogPosts = [ id: 1, title: "El principito: lecciones eternas", category: "clásicos", categoryLabel: "Clásicos modernos", date: "15 Abril, 2026", excerpt: "Una mirada nostálgica al clásico de Saint-Exupéry que nos recuerda la importancia de la amistad y la imaginación. Disponible en nuestro Drive.", imageIcon: "🪐", pdfDriveId: "1rLJkHyYBqUSRz0hJmbkqXRx76ORwKcU7", // ID público de muestra (El principito - PDF muestra) pdfFileName: "El_Principito_Saint_Exupery.pdf" , id: 2, title: "Cien años de soledad - realismo mágico", category: "ficción", categoryLabel: "Ficción", date: "2 Mayo, 2026", excerpt: "Análisis de la obra maestra de Gabriel García Márquez, los Buendía y Macondo. Un viaje literario imprescindible.", imageIcon: "📖✨", pdfDriveId: "1HkP7hJYz9LxgBvq3SfkN5R2dQv6eW9oX", // ID simbólico (realista pero con enlace funcional genérico, usado para demostración) pdfFileName: "Cien_Anios_de_Soledad_Muestra.pdf" , id: 3, title: "Sapiens: de animales a dioses", category: "no-ficción", categoryLabel: "No ficción", date: "20 Mayo, 2026", excerpt: "Reseña del bestseller de Yuval Noah Harari, reflexiones sobre la evolución humana. Descarga el PDF desde nuestra colección.", imageIcon: "🧠🌍", pdfDriveId: "1k6wPk6gUw_X-6Zp7dr5BXjWmQ2FafE8I", // ID ilustrativo (drive sample) pdfFileName: "Sapiens_Harari_Extracto.pdf" , id: 4, title: "Orgullo y prejuicio - Jane Austen", category: "clásicos", categoryLabel: "Clásicos", date: "5 Junio, 2026", excerpt: "El romance e ironía de Austen nunca pasa de moda. Exploramos a Elizabeth Bennet y Mr. Darcy, con el PDF completo en el Drive.", imageIcon: "💐📜", pdfDriveId: "1VkS1b7cG9qL4xT2dJ0mF5rH6nB8vC3wX", pdfFileName: "Pride_and_Prejudice_Jane_Austen.pdf" , id: 5, title: "El arte de la guerra aplicado hoy", category: "no-ficción", categoryLabel: "Filosofía / Estrategia", date: "18 Junio, 2026", excerpt: "Estrategia milenaria de Sun Tzu para el mundo moderno. El PDF está disponible en nuestra biblioteca digital.", imageIcon: "⚔️🎯", pdfDriveId: "1G4mT9pLxQ2sK7rVnY6hJ8bN0cW3fA5dE", pdfFileName: "El_Arte_de_la_Guerra_Sun_Tzu.pdf" ]; Blog De Libros Pdf Google Drive
postsContainer.innerHTML = filteredPosts.map(post => const drivePreviewUrl = `https://drive.google.com/file/d/$post.pdfDriveId/preview`; return ` <article class="post-card"> <div class="post-img"> $post.imageIcon </div> <div class="post-content"> <div class="post-category">$post.categoryLabel</div> <h2 class="post-title">$post.title</h2> <div class="post-meta"> <span><i class="far fa-calendar-alt"></i> $post.date</span> <span><i class="fas fa-tag"></i> $post.categoryLabel</span> </div> <p class="post-excerpt">$post.excerpt</p> <button class="btn-pdf open-pdf-btn" data-pdf-url="$drivePreviewUrl" data-pdf-name="$post.pdfFileName"> <i class="fas fa-eye"></i> Leer PDF desde Google Drive </button> </div> </article> `; ).join(''); // ======================== // 5
.close-modal background: none; border: none; font-size: 1.8rem; cursor: pointer; color: white; transition: 0.1s; // Se emplean archivos de demostración oficiales o
function renderPosts() if (!postsContainer) return; const filteredPosts = activeFilter === 'all' ? blogPosts : blogPosts.filter(post => post.category === activeFilter); if (filteredPosts.length === 0) postsContainer.innerHTML = `<div style="text-align:center; padding: 3rem; background:#f7f2ea; border-radius: 2rem;">No hay entradas de esta categoría, pero puedes explorar los PDFs en el sidebar. 📚</div>`; return;
/* Modal para vista previa / lector PDF embebido */ .pdf-modal display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center;
footer background: #1e2a22; color: #cfd8cd; text-align: center; padding: 2rem; margin-top: 2rem; font-size: 0.85rem;
