feat(news): add filter dropdown and mobile scroll for tags
This commit is contained in:
parent
0564010a7f
commit
64a45e4770
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
locale: es
|
||||
title: 'Liberación en Israel: una jornada de fe, gratitud y llamado global por la libertad'
|
||||
date: 2025-01-19
|
||||
slug: 2025-01-19-liberacion-en-israel-una-jornada-de-fe-gratitud-y-llamado-global-por-la-libertad
|
||||
place: ''
|
||||
thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/comunicado-1.webp'
|
||||
tags: [Puerto Rico, Venezuela]
|
||||
gallery: [
|
||||
{
|
||||
image: 'https://ik.imagekit.io/crpy/tr:w-1280,h-900,cm-pad_resize,bg-blurred/comunicado-1.webp',
|
||||
},
|
||||
]
|
||||
---
|
||||
# Liberación en Israel: una jornada de fe, gratitud y llamado global por la libertad
|
||||
*Cayey, Puerto Rico – 19 de enero de 2025*
|
||||
|
||||
En una jornada marcada por la esperanza, la liberación de las primeras tres mujeres rehenes en Israel generó un impacto que trascendió el plano geopolítico, despertando una profunda respuesta emocional y espiritual en comunidades que han seguido de cerca el desarrollo del conflicto.
|
||||
|
||||
La confirmación de que la Cruz Roja asumió la custodia de las primeras liberadas fue recibida con alivio y gratitud. En este contexto, el Dr. José Benjamín Pérez Matos expresó el sentir de quienes han acompañado estos acontecimientos a través de la oración y el seguimiento constante:
|
||||
|
||||
**«Sentimos esa alegría de los familiares, y lo sentimos como si fuera de nuestra familia».**
|
||||
|
||||
Más allá de los aspectos diplomáticos y operativos, el mensaje puso el acento en la dimensión espiritual del proceso. Según lo expresado, este avance es interpretado como una respuesta a un clamor sostenido en el tiempo:
|
||||
|
||||
**«El Dios de Israel, que es también nuestro Dios, ha respondido a nuestras peticiones en favor de los secuestrados. Hoy comienza esa etapa de liberación pactada y agradecemos al Eterno por escuchar nuestro clamor».**
|
||||
|
||||
El Dr. Pérez Matos reafirmó además el compromiso de acompañamiento continuo hacia el pueblo de Israel, destacando la cercanía emocional con las familias afectadas y la esperanza de que el resto de los cautivos pueda regresar en condiciones similares:
|
||||
|
||||
**«Sentimos esa alegría de los familiares, y también nos gozamos de que estas mujeres estén libres y vivas. Esperamos que los demás [que aún permanecen en cautiverio] estén también vivos».**
|
||||
|
||||
En el desarrollo de la jornada, también se evocaron expresiones previas que reflejan la persistencia del pedido por la liberación de los rehenes. En tal sentido, el Dr. Pérez Matos recordó sus palabras dichas a una senadora: **«¡Que sean libertados!».**
|
||||
|
||||
El mensaje no se limitó al escenario del Medio Oriente. En un giro hacia América Latina, el Dr. Pérez Matos conectó su llamado hacia la situación en Venezuela, incorporando una dimensión regional al pronunciamiento:
|
||||
|
||||
**«Estén orando también por Venezuela, por ese pueblo a quien amamos y deseamos que sea libre también. ¡Declaramos la libertad para Venezuela!».**
|
||||
|
||||
Finalmente, se reforzó la necesidad de una respuesta concreta por parte de la comunidad internacional:
|
||||
|
||||
**«Que Dios obre y los Gobiernos se muevan; que no sea solo una fachada, sino que actúen: ¡que se muevan en favor de Venezuela, y sea libertado ese pueblo venezolano!».**
|
||||
|
||||
La jornada concluyó con una visión de unidad que integra fe, solidaridad y acción, vinculando en un mismo horizonte la paz en Israel y la aspiración de libertad en otras regiones del mundo. El mensaje reafirma una línea de acompañamiento constante, donde la dimensión espiritual y la lectura de los acontecimientos internacionales convergen en una misma narrativa.
|
||||
|
|
@ -184,6 +184,7 @@
|
|||
"news.buttonLable": "See More News",
|
||||
"news.seemore": "See More",
|
||||
"news.all": "All",
|
||||
"news.allYears": "All years",
|
||||
|
||||
|
||||
"participate.title": "Participate | Collaborate",
|
||||
|
|
|
|||
|
|
@ -190,6 +190,7 @@
|
|||
"news.buttonLable": "Ver Más Noticias",
|
||||
"news.seemore": "Ver Más",
|
||||
"news.all": "Todas",
|
||||
"news.allYears": "Todos los años",
|
||||
|
||||
"participate.title": "Participa | Colabora",
|
||||
"participate.text": "Sumarse es asumir un compromiso con propósito",
|
||||
|
|
|
|||
|
|
@ -190,6 +190,7 @@
|
|||
"news.buttonLable": "Ver Más Noticias",
|
||||
"news.seemore": "Ver Más",
|
||||
"news.all": "Todas",
|
||||
"news.allYears": "Amaezi yose",
|
||||
|
||||
"participate.title": "Uruhare rwawe | Imikoranire",
|
||||
"participate.text": "Kwinjira ni ukwiyemeza inshingano ifite intego.",
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const allTags = [...new Set(
|
|||
.flatMap(p => p.data.tags)
|
||||
.filter((tag): tag is string => tag !== undefined)
|
||||
)].sort();
|
||||
|
||||
const allYears = [...new Set(
|
||||
sortedPosts.map(p => new Date(p.data.date).getFullYear())
|
||||
)].sort((a, b) => b - a);
|
||||
---
|
||||
|
||||
<MainLayout >
|
||||
|
|
@ -39,9 +43,10 @@ const allTags = [...new Set(
|
|||
<h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">{tl("news.text")}</h2>
|
||||
</div>
|
||||
|
||||
|
||||
{allTags.length > 0 && (
|
||||
<div class="container mx-auto mb-8">
|
||||
<div class="flex flex-nowrap md:flex-wrap gap-2 justify-center overflow-x-auto md:overflow-visible pb-2 md:pb-0">
|
||||
<div class="container mx-auto mb-8 px-4 md:px-0">
|
||||
<div class="flex flex-nowrap md:flex-wrap gap-2 md:justify-center overflow-x-auto md:overflow-visible pb-2 md:pb-0">
|
||||
<button class="filter-btn px-4 py-2 font-primary text-sm cursor-pointer transition-colors whitespace-nowrap" data-tag="all">
|
||||
{tl("news.all")}
|
||||
</button>
|
||||
|
|
@ -55,9 +60,21 @@ const allTags = [...new Set(
|
|||
)}
|
||||
|
||||
<div class="flex flex-col md:gap-0 gap-2 lg:max-w-4xl mx-auto bg-white p-4 md:p-8">
|
||||
{allYears.length > 0 && (
|
||||
<div class="container mb-4">
|
||||
<div class="flex justify-start md:justify-end">
|
||||
<select id="year-filter" class="bg-[#003421] text-[#EBE5D0] px-4 py-2 font-primary text-sm cursor-pointer border-none outline-none">
|
||||
<option value="all">{tl("news.allYears")}</option>
|
||||
{allYears.map((year) => (
|
||||
<option value={year}>{year}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
sortedPosts.map((item) => (
|
||||
<div class="news-item" data-tags={JSON.stringify(item.data.tags || [])}>
|
||||
<div class="news-item" data-tags={JSON.stringify(item.data.tags || [])} data-year={new Date(item.data.date).getFullYear()}>
|
||||
<NewsList data={item} content={{ body: item.body }} />
|
||||
</div>
|
||||
))
|
||||
|
|
@ -72,7 +89,27 @@ const allTags = [...new Set(
|
|||
const activeClasses = "bg-[#003421] text-[#EBE5D0]";
|
||||
const inactiveClasses = "bg-[#003421]/20 text-[#EBE5D0] hover:bg-[#003421]/30";
|
||||
|
||||
let currentTag: string | null = 'all';
|
||||
let currentYear: string = 'all';
|
||||
|
||||
function filterItems() {
|
||||
document.querySelectorAll('.news-item').forEach(item => {
|
||||
const itemTags = JSON.parse(item.getAttribute('data-tags') || '[]');
|
||||
const itemYear = item.getAttribute('data-year');
|
||||
|
||||
const tagMatch = currentTag === 'all' || currentTag === null || itemTags.includes(currentTag);
|
||||
const yearMatch = currentYear === 'all' || itemYear === currentYear;
|
||||
|
||||
if (tagMatch && yearMatch) {
|
||||
(item as HTMLElement).style.display = 'block';
|
||||
} else {
|
||||
(item as HTMLElement).style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function activateTag(tag: string | null) {
|
||||
currentTag = tag;
|
||||
document.querySelectorAll('.filter-btn').forEach(b => {
|
||||
if (b.getAttribute('data-tag') === tag) {
|
||||
b.classList.remove(...inactiveClasses.split(" "));
|
||||
|
|
@ -82,15 +119,7 @@ const allTags = [...new Set(
|
|||
b.classList.add(...inactiveClasses.split(" "));
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.news-item').forEach(item => {
|
||||
const itemTags = JSON.parse(item.getAttribute('data-tags') || '[]');
|
||||
if (tag === 'all' || tag === null || itemTags.includes(tag)) {
|
||||
(item as HTMLElement).style.display = 'block';
|
||||
} else {
|
||||
(item as HTMLElement).style.display = 'none';
|
||||
}
|
||||
});
|
||||
filterItems();
|
||||
}
|
||||
|
||||
function updateUrl(tag: string | null) {
|
||||
|
|
@ -127,8 +156,22 @@ const allTags = [...new Set(
|
|||
});
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', initTags);
|
||||
function initYearFilter() {
|
||||
const yearSelect = document.querySelector('#year-filter') as HTMLSelectElement;
|
||||
if (yearSelect) {
|
||||
yearSelect.addEventListener('change', () => {
|
||||
currentYear = yearSelect.value;
|
||||
filterItems();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initTags();
|
||||
initYearFilter();
|
||||
});
|
||||
if (document.readyState === 'complete') {
|
||||
initTags();
|
||||
initYearFilter();
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue