<div
id="spiegel-literatur-feed"
style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;"
data-name="spiegelliteraturfeed"
data-src="/extern/spiegelliteraturfeed"
>
<h3 style="text-align: center; color: #333; margin-bottom: 20px;">Aktuelle Artikel aus Spiegel Kultur (Literatur)</h3>
<div id="feed-items" style="display: flex; flex-direction: column; gap: 15px;"></div>
<div id="feed-loading" style="text-align: center; color: #666; margin-top: 10px;">RSS-Feed wird geladen...</div>
</div>
<script>
// Funktion zum Laden und Anzeigen des RSS-Feeds
async function loadRssFeed() {
const feedContainer = document.getElementById("feed-items");
const loadingElement = document.getElementById("feed-loading");
const feedElement = document.querySelector('[data-name="spiegelliteraturfeed"]');
if (!feedElement) {
loadingElement.innerHTML = "<p style='text-align: center; color: #ff4444;'>Fehler: Datenquelle nicht gefunden.</p>";
return;
}
try {
const response = await fetch(feedElement.dataset.src);
const data = await response.json();
if (!data || !data.items || data.items.length === 0) {
throw new Error("Keine Artikel im RSS-Feed gefunden.");
}
// Maximal 5 Artikel anzeigen
data.items.slice(0, 5).forEach(item => {
const title = item.title;
const link = item.link;
const description = item.description;
const pubDate = item.pubDate;
const itemElement = document.createElement("div");
itemElement.style.backgroundColor = "#f9f9f9";
itemElement.style.padding = "15px";
itemElement.style.borderRadius = "5px";
itemElement.style.boxShadow = "0 2px 4px rgba(0,0,0,0.1)";
itemElement.innerHTML = `
<h4 style="margin: 0 0 10px 0;"><a href="${link}" target="_blank" style="color: #0066cc; text-decoration: none;">${title}</a></h4>
<p style="margin: 0 0 10px 0; color: #333; font-size: 14px;">${description}</p>
<small style="color: #999; font-size: 12px;">${new Date(pubDate).toLocaleDateString("de-DE")}</small>
`;
feedContainer.appendChild(itemElement);
});
loadingElement.style.display = "none";
} catch (error) {
console.error("Fehler:", error);
loadingElement.innerHTML =
"<p style='text-align: center; color: #ff4444;'>Fehler beim Laden des RSS-Feeds. Bitte später erneut versuchen.</p>";
}
}
// Feed beim Laden der Seite abrufen
document.addEventListener("DOMContentLoaded", loadRssFeed);
</script>
Technik · 
