<div id="wp-rss-blog"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
fetch("https://gaertnerei-hueskes.de/feed/")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
const items = data.querySelectorAll("item");
let html = "<div class='wp-blog-grid'>";
items.forEach((el, i) => {
if (i >= 3) return;
const title = el.querySelector("title")?.textContent ?? "";
const link = el.querySelector("link")?.textContent ?? "#";
const desc = el.querySelector("description")?.textContent ?? "";
html += `
<article class="wp-blog-item">
<a href="${link}" target="_blank" rel="noopener noreferrer">
${desc}
<h3>${title}</h3>
<span class="wp-read-more">Artikel lesen →</span>
</a>
</article>
`;
});
html += "</div>";
document.getElementById("wp-rss-blog").innerHTML = html;
})
.catch(err => {
console.error("RSS Fehler:", err);
});
});
</script>
<style>
.wp-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
margin: 40px 0;
}
.wp-blog-item {
background: #ffffff;
border-radius: 8px;
padding: 16px;
transition: transform 0.2s ease;
}
.wp-blog-item:hover {
transform: translateY(-3px);
}
.wp-blog-item img {
width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 10px;
}
.wp-blog-item h3 {
font-size: 1.2rem;
margin: 10px 0 6px;
color: #1f3d1a;
}
.wp-read-more {
display: inline-block;
margin-top: 6px;
font-weight: 600;
color: #94a147;
}
</style>
