new feed layout
All checks were successful
publish / publish (push) Successful in 26s

This commit is contained in:
Jannik Menzel 2025-06-06 20:40:09 +02:00
parent 874441bb84
commit 050d664e0c
2 changed files with 56 additions and 55 deletions

View file

@ -59,45 +59,60 @@ window.toggleDetails = function (element) {
minusIcon.style.display = isExpanded ? 'inline' : 'none';
};
fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss')
.then(res => res.json())
.then(data => {
const container = document.getElementById('feed');
const isInFeedSection = container.closest('.feed-section') !== null;
const maxItems = isInFeedSection ? 4 : data.items.length;
function renderFeedEntries(data) {
const container = document.getElementById('feed');
container.innerHTML = '';
const isInFeedSection = container.closest('.feed-section') !== null;
let maxItems;
if (isInFeedSection) {
const computedStyle = window.getComputedStyle(container);
const columnCount = computedStyle.getPropertyValue('grid-template-columns').split(' ').length;
maxItems = columnCount === 3 ? 3 : 4;
} else {
maxItems = data.items.length;
}
data.items.slice(0, maxItems).forEach(item => {
const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
data.items.slice(0, maxItems).forEach(item => {
const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
let imageUrl;
let imageUrl;
if (item.thumbnail) {
imageUrl = item.thumbnail;
} else if (item.enclosure && item.enclosure.link) {
imageUrl = item.enclosure.link;
if (item.thumbnail) {
imageUrl = item.thumbnail;
} else if (item.enclosure && item.enclosure.link) {
imageUrl = item.enclosure.link;
} else {
const imgMatch = item.content.match(/<img.*?src="(.*?)"/);
if (imgMatch && imgMatch[1]) {
imageUrl = imgMatch[1];
} else {
const imgMatch = item.content.match(/<img.*?src="(.*?)"/);
if (imgMatch && imgMatch[1]) {
imageUrl = imgMatch[1];
} else {
imageUrl = '/images/thumbnail.jpg';
}
imageUrl = '/images/thumbnail.jpg';
}
}
const entry = document.createElement('article');
entry.classList.add('feed-entry');
const entry = document.createElement('article');
entry.classList.add('feed-entry');
const imageHtml = `
const imageHtml = `
<div class="feed-thumbnail-wrapper">
<img src="${imageUrl}" alt="Beitragsbild" class="feed-thumbnail" />
</div>
`;
entry.innerHTML = `
entry.innerHTML = `
${imageHtml}
<div class="feed-content">${cleanedContent}</div>
<a href="${item.link}" class="btn btn-secondary" target="_blank">Zum Beitrag</a>
`;
container.appendChild(entry);
container.appendChild(entry);
});
}
fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss')
.then(res => res.json())
.then(data => {
renderFeedEntries(data);
window.addEventListener('resize', () => {
renderFeedEntries(data);
});
});