https://sanpedrodeuraba-antioquia.gov.co/Style%20Library/NewDesing/components/home/NoticiasHome/main.js

1document.addEventListener('DOMContentLoaded', async () => {
2	try {
3		const items = await getSliderNoticias();
4
5		items.forEach((noticia) => {
6			const elemento = sliderNoticiasComponent(noticia);
7			const container = document.querySelector('#contenedorNoticias');
8
9			container.insertAdjacentElement('beforeend', elemento);
10		});
11	} catch (error) {
12		console.error('Error fetching or displaying items:', error);
13	}
14});
15
16const sliderNoticiasComponent = (item) => {
17	const article = document.createElement('article');
18
19	article.className = 'card';
20	article.innerHTML = `
21				<section class="card__header">
22					<span>${formatDate(item.ArticleStartDate) || 'Fecha no disponible'}</span>
23					<img src="${item.PublishingPageImage?.ImageUrl || '/SiteAssets/v1/assets/components/slider-noticias/news-blank.svg'}" alt="Slider Image" class="w-full object-cover absolute blur-sm">
24					<img src="${item.PublishingPageImage?.ImageUrl || '/SiteAssets/v1/assets/components/slider-noticias/news-blank.svg'}" alt="Slider Image" class="w-full h-full object-contain relative">
25				</section>
26				<section class="card__info">
27					<h1 class="line-clamp-3">${item.Title || 'Título no disponible'}</h1>
28					
29					<p class="line-clamp-4">${item.Comments || 'Descripción no disponible'}</p>
30					<a href="${item.FileRef || '#'}">Leer noticia <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
31				</section>`;
32
33	return article;
34};
35
36const getSliderNoticias = async () => {
37	const url = '/sp_api.aspx?ref=get-list-items';
38	const body = {
39		fields: ['Title', 'FileRef', 'Comments', 'PublishingPageImage', 'ArticleStartDate', 'Categoria'],
40		site: '/NuestraAlcaldia/SaladePrensa',
41		list: 'Páginas',
42	};
43
44	const response = await fetch(url, {
45		method: 'POST',
46		headers: {
47			'Content-Type': 'application/json',
48		},
49		body: JSON.stringify(body),
50	});
51
52	if (!response.ok) {
53		throw new Error('Network response was not ok');
54	}
55
56	const data = await response.json();
57	if (data.status !== 'ok') {
58		throw new Error('Error fetching data: ' + data.message);
59	}
60
61	return data.data
62		.filter((item) => item.Title !== 'inicio')
63		.sort((a, b) => new Date(b.ArticleStartDate) - new Date(a.ArticleStartDate))
64		.slice(0, 4);
65};
66
67const formatDate = (dateString) => {
68	const date = new Date(dateString);
69	const options = {
70		weekday: 'long',
71		year: 'numeric',
72		month: 'long',
73		day: 'numeric',
74	};
75	return date.toLocaleDateString('es-ES', options);
76};