announcements.html

<style>
    /* Your CSS */
    #rssWidget item > div {
        display: block; /* Stacking the elements vertically */
    }

    #rssWidget .post-image {
        max-width: 100%;
        display: block;
        margin: 10px auto; /* Center the image */
        height: auto;
    }

    #rssWidget .excerpt-content {
        max-width: 100%; /* Allow the excerpt to take full width */
    }

    #rssWidget item {
        font-family: lora;
        padding: 10px;
        margin: 0;
        background-color: rgba(255, 204, 2, 0.5);
        border: 1px rgba(50, 39, 59, 0.6);
        border-radius: 5px;
        transition: background-color 0.1s ease, box-shadow 0.2s ease;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
    }

    #rssWidget item:hover {
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
    }

    #rssWidget item h3 a {
        color: #000;
        text-decoration: none;
    }

    #rssWidget item h3 a:hover {
        text-decoration: none;
        background-color: rgba(50, 39, 59, 0.4);
        color: #fff;
    }

    #rssWidget item h3 a::before {
        content: " \1F4D6 ";
        padding-right: 10px;
    }

    #rssWidget item h3 {
        font-size: 1.7em;
        margin-top: 0;
        margin-bottom: 5px;
    }

    #rssWidget {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
        padding: 15px;
        background-color: rgba(239, 240, 241, 0.7);
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    #rssWidget .item-meta {
        font-size: 0.9em;
        margin-bottom: 5px;
        color: #000;
    }

    #rssWidget .item-meta span {
        margin-right: 3px;
        margin-left: 3px;
    }

    #rssWidget .read-more {
        display: inline-block;
        padding: 10px 15px;
        background-color: #FFCC02;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #rssWidget .articles-button {
        display: inline-block;
        padding: 10px 20px;
        color: #ffffff;
        background-color: #FFCC02;
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    #rssWidget .articles-button:hover {
        background-color: #E5B802;
        transform: scale(1.05);
    }
</style>

<div id="rssWidget">
    <script>
        function formatDate(isoDateString) {
            const months = [
                "January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"
            ];

            const date = new Date(isoDateString);
            const day = date.getDate();
            const month = months[date.getMonth()];
            const year = date.getFullYear();

            return `${month} ${day}, ${year}`;
        }

        function truncateBody(bodyContent, limit = 580) {
            if (bodyContent.length <= limit) {
                return bodyContent;
            }

            // Find the last space before the limit to avoid breaking words.
            const lastSpaceIndex = bodyContent.lastIndexOf(' ', limit);
            return `${bodyContent.substring(0, lastSpaceIndex)}...`;
        }

        const RSS_URL = 'https://olacirclerss.s3.us-east-2.amazonaws.com/announcements-rss.xml';

        fetch(`${RSS_URL}`)
            .then(response => response.text())
            .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
            .then(data => {
                const items = data.querySelectorAll('item');
                let html = '';
                let count = 0; // For limiting the items

                items.forEach(el => {
                    if (count >= 10) return;
                    const title = el.querySelector('title').textContent;
                    const link = el.querySelector('link').textContent;
                    const author = el.querySelector('author').textContent;
                    const published_date = el.querySelector('published_date').textContent;
                    const body = el.querySelector('body').textContent;
                    const cover_image_url = el.querySelector('cover_image_url').textContent;
                    const excerpt = truncateBody(body);
                    html += `
                <item>
                    <p class="item-meta"><span>${author}</span> &bull; <span>${formatDate(published_date)}</span></p>
                    <h3><a href="${link}" target="_blank">${title}</a></h3>
                    <div>
                        <img src="${cover_image_url}" alt="${title}" class="post-image">
                        <div class="excerpt-content">${excerpt}</div>
                    </div>
                    <p><a href="${link}" class="read-more" target="_blank">Read More</a></p>
                </item>
            `;
                    count++;
                });

                // Append the 'Browse All News' button outside of the loop
                html += `<div><p><a href="https://community.opusliteraryalliance.org/c/announcements/" class="articles-button">Browse All News</a></p></div>`;

                document.getElementById('rssWidget').innerHTML = html;
            })
            .catch(error => {
                console.error('There was an error!', error);
            });

    </script>
</div>