added News RSS

This commit is contained in:
Jannik Menzel 2025-05-20 18:20:07 +02:00
parent 00b10cde25
commit 1530d9dd57
5 changed files with 128 additions and 6 deletions

View file

@ -258,7 +258,7 @@ li .dropdown-item-mobile {
.hero-card.left-1 a:hover,
.hero-card.left-1 a:active {
color: var(--color-accent);
color: var(--color-link);
}
.hero-card.left-1 svg {
@ -271,7 +271,7 @@ li .dropdown-item-mobile {
.hero-card.right-1 svg:hover,
.hero-card.right-1 svg:active{
color: var(--color-accent);
color: var(--color-link);
}
.left-1 {
@ -399,6 +399,7 @@ li .dropdown-item-mobile {
}
.btn-secondary:hover, .btn-secondary:active {
text-decoration: none !important;
color: var(--color-primary-button-dark) !important;
background-color: transparent !important;
border-color: var(--color-primary-button-dark);
@ -460,6 +461,90 @@ footer {
outline: none;
}
/* ========================
News
======================== */
.feed-section #feed {
margin: 2rem auto;
padding: 1rem;
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.page {
max-width: 80%;
margin: 0 auto;
}
.feed-heading {
font-size: 2.5rem;
margin-top: 0;
display: block;
width: max-content;
margin-left: auto;
margin-right: auto;
color: var(--color-text);
background-color: var(--color-accent);
border-radius: 8px;
padding: 5px 10px;
box-shadow: 0 4px 0 0 var(--color-text);
}
.dark .feed-heading {
color: var(--color-text-dark);
box-shadow: 0 4px 0 0 var(--color-off);
}
.feed-entry {
flex: 0 1 calc(50% - 2rem);
box-sizing: border-box;
background-color: var(--color-off);
border: 1px solid var(--color-text);
border-radius: 20px;
box-shadow: 0 4px 0 0 var(--color-text);
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.page .feed-entry {
margin-bottom: 2rem;
}
.feed-content {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0.75rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.page .feed-content {
overflow: visible !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
text-overflow: unset !important;
white-space: normal !important;
}
.feed-content a {
color: var(--color-link);
text-decoration: none;
transition: color 0.3s;
}
.feed-content a:hover {
color: var(--color-link);
text-decoration: underline;
}
/* ========================
404 Error Page
======================== */
@ -529,7 +614,7 @@ footer {
padding: 0 !important;
}
.ese-section .card-body {
.ese-section .card-body .page {
max-width: 100%;
}
}
@ -557,4 +642,10 @@ footer {
.hero-section p {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.feed-entry {
flex: 0 1 100%;
}
}

View file

@ -35,7 +35,7 @@ document.addEventListener("DOMContentLoaded", () => {
// update on change
const observer = new MutationObserver(updateBodyThemeAttr);
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
observer.observe(document.documentElement, {attributes: true, attributeFilter: ["class"]});
prefersDarkScheme.addEventListener("change", () => {
updateBodyThemeAttr();
@ -45,7 +45,7 @@ document.addEventListener("DOMContentLoaded", () => {
/* ========================
Details Toggle
======================== */
window.toggleDetails = function(element) {
window.toggleDetails = function (element) {
element.classList.toggle('expanded');
const plusIcon = element.querySelector('.icon-plus');
@ -55,4 +55,20 @@ window.toggleDetails = function(element) {
plusIcon.style.display = isExpanded ? 'none' : 'inline';
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');
data.items.slice(0, 5).forEach(item => {
const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
const entry = document.createElement('article');
entry.classList.add('feed-entry');
entry.innerHTML = `
<div class="feed-content">${cleanedContent}</div>
<a href="${item.link}" class="btn btn-secondary" target="_blank">Zum Beitrag</a>
`;
container.appendChild(entry);
});
});

View file

@ -74,4 +74,10 @@
</div>
</div>
</section>
<section class="feed-section">
<div class="container">
<h2 class="feed-heading text-center">Neuigkeiten</h2>
<div id="feed"></div>
</div>
</section>
{{ end }}

View file

@ -2,6 +2,7 @@
<meta name="viewport" content="width=device-width">
<meta name="description" content="Offizielle Website des iFSR Informationen, Veranstaltungen und Ressourcen für Studierende der Informatik an der TU Dresden.">
<link rel="icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
<!-- SVG Preload -->
<link rel="preload" href="/images/logo.svg" as="image" type="image/svg+xml">
<link rel="preload" href="/icons/dark.svg" as="image" type="image/svg+xml">
<link rel="preload" href="/icons/light.svg" as="image" type="image/svg+xml">

View file

@ -0,0 +1,8 @@
{{ define "main" }}
<div class="container">
<div id="markdown">
{{ .Content }}
</div>
<div id="feed" class="page"></div>
</div>
{{ end }}