neue Section: Aktuelle Posts in #Fedikirche

src/components/postwall.js

@@ -0,0 +1,141 @@
+export async function loadPostwall() {
+    const container = document.getElementById('postswall-container');
+
+    // Mastodon API-URL für Hashtag-Suche
+    const apiUrl = 'https://libori.social/api/v1/timelines/tag/fedikirche?limit=20';
+
+    // Posts laden
+    async function fetchPosts() {
+        try {
+            const response = await fetch(apiUrl);
+            if (!response.ok) {
+                throw new Error('Fehler beim Laden der Posts');
+            }
+    
+            const posts = await response.json();
+            renderPosts(posts);
+    
+            // Button hinzufügen
+            addReadMoreButton();
+        } catch (error) {
+            console.error('Fehler:', error);
+            container.innerHTML = '<p>Fehler beim Laden der Posts.</p>';
+        }
+    }
+
+    // Posts rendern
+    function renderPosts(posts) {
+        container.innerHTML = ''; // Vorherige Inhalte leeren
+        posts.forEach(post => {
+            const postElement = document.createElement('a');
+            postElement.classList.add('post');
+            postElement.href = post.url; // Link zum Originalpost
+            postElement.target = '_blank'; // Link in neuem Tab öffnen
+            postElement.rel = 'noopener noreferrer'; // Sicherheit für externe Links
+            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon'); // Accessibility
+        
+            // Zeitstempel berechnen
+            const postDate = new Date(post.created_at); // Datum des Posts
+            const timeAgo = getTimeAgo(postDate); // Funktion zur Berechnung der Zeitspanne
+    
+            let content = post.content || 'Kein Inhalt verfügbar.';
+            const author = post.account.display_name || post.account.username;
+            const username = `@${post.account.acct}`; // Adresse hinzufügen (@nutzer@instanz)
+            const avatar = post.account.avatar || 'src/assets/default-avatar.png'; // Fallback-Bild
+        
+            // Alle anderen Links deaktivieren
+            const tempContainer = document.createElement('div');
+            tempContainer.innerHTML = content;
+    
+            // Links deaktivieren
+            const links = tempContainer.querySelectorAll('a');
+            links.forEach(link => {
+                link.removeAttribute('href'); // Entfernt den Link
+                link.style.pointerEvents = 'none'; // Deaktiviert Klickbarkeit
+                link.style.color = 'blue'; // Behält Linkfarbe bei
+                link.style.textDecoration = 'underline'; // Behält Unterstreichung bei
+            });
+    
+            // Bilder bearbeiten
+            const images = tempContainer.querySelectorAll('img');
+            images.forEach(img => {
+                img.style.maxHeight = '200px'; // Maximale Höhe festlegen
+                img.style.width = 'auto'; // Automatische Breite für Proportionen
+                img.style.display = 'block'; // Sicherstellen, dass Bilder Blöcke sind
+                img.style.margin = '10px 0'; // Abstand zu Text einfügen
+            });
+    
+            content = tempContainer.innerHTML;
+    
+            // Medien-Anhänge (Bilder, Videos, etc.) hinzufügen
+            const mediaAttachments = post.media_attachments || [];
+            let mediaHTML = '';
+            mediaAttachments.forEach(media => {
+                if (media.type === 'image') {
+                    mediaHTML += `
+                        <img src="${media.url}" alt="Medienanhang" style="max-height: 200px; width: auto; display: block; margin: 10px 0;">
+                    `;
+                }
+            });
+    
+            // Post zusammenbauen
+            postElement.innerHTML = `
+                <div class="post-header">
+                    <img src="${avatar}" alt="${author}" class="avatar">
+                    <div class="post-author">
+                        <strong>${author}</strong><br>
+                        <span class="post-username">${username}</span>
+                    </div>
+                    <span class="post-timestamp">${timeAgo}</span>
+                </div>
+                <div class="post-content">${content}</div>
+                <div class="post-media">${mediaHTML}</div>
+                <div class="post-footer">…</div>
+            `;
+            container.appendChild(postElement);
+        });
+    }
+    
+    
+    
+    // Lade die Posts
+    fetchPosts();
+}
+
+function getTimeAgo(date) {
+    const now = new Date();
+    const secondsAgo = Math.floor((now - date) / 1000);
+
+    if (secondsAgo < 60) {
+        // Weniger als 60 Sekunden
+        return `${secondsAgo} Sek.`;
+    } else if (secondsAgo < 3600) {
+        // Weniger als 60 Minuten
+        const minutes = Math.floor(secondsAgo / 60);
+        return `${minutes} Min.`;
+    } else if (secondsAgo < 86400) {
+        // Weniger als 24 Stunden
+        const hours = Math.floor(secondsAgo / 3600);
+        return `${hours} Std.`;
+    } else {
+        // Mehr als 24 Stunden (Tage zählen)
+        const days = Math.floor(secondsAgo / 86400);
+        return `${days} T.`;
+    }
+}
+
+// Funktion zum Erstellen des "Lese weiter"-Buttons
+function addReadMoreButton() {
+    const container = document.getElementById('postswall-container');
+    
+    // Button erstellen
+    const readMoreButton = document.createElement('a');
+    readMoreButton.href = 'https://libori.social/tags/fedikirche'; // Link zur Mastodon-Instanz mit Hashtag
+    readMoreButton.target = '_blank'; // Öffnet in neuem Tab
+    readMoreButton.rel = 'noopener noreferrer';
+    readMoreButton.classList.add('read-more-button'); // Klasse für CSS-Styling
+    readMoreButton.innerText = 'weiterlesen';
+
+    // Button zum Container hinzufügen
+    container.appendChild(readMoreButton);
+}