kirche-im-netz.Startodon-Hub/src/components/postwall.js

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);
}