g suite services customizations

g-suite-news.js

document.querySelector('.about-us-image-wrapper .about-us-image').src = '/media/images/GSuite_service.width-404.jpg'

document.addEventListener('DOMContentLoaded', main)

function main() {
    var url = '/services/instructional-services-technology/g-suite-service/g-suite-news-updates/'
    fetch(url).then((resp) => resp.text())
        .then((text) => {
            // parse text of page to HTML we can navigate
            var parser = new DOMParser()
            var doc = parser.parseFromString(text, "text/html")

            // all the subheadings on the page are news items
            var news_items = Array.from(doc.querySelectorAll('.about-us-text .block-subheading'))

            // header, prefix "latest news:" onto first news item's heading
            var first_item_heading = doc.querySelector('.about-us-text .block-subheading')
            first_item_heading.querySelector('h2').prepend(doc.createTextNode('Latest News: '))
            var html = first_item_heading.outerHTML

            // add the entirety of the first news item's HTML by adding each sibling
            // until we see the next subheading
            var next_element = first_item_heading.nextElementSibling
            while (next_element && !next_element.classList.contains('block-subheading')) {
                html += next_element.outerHTML
                next_element = next_element.nextElementSibling
            }

            // make a list of links to the older news items
            html += `<div class="block-paragraph"><section class="blog-post__paragraph"><div class="rich-text">
            <p><b>Older news items</b>: ${news_items.slice(1, 4).reduce( (text, item) => {
                text += `<a href="${url}#${item.querySelector('h2').id}">${item.querySelector('h2').textContent}</a>`
                return text += ' | '
            }, '')} <a href="${url}">All older news...</a></p>
            </div></section></div>`

            $('.about-us-text').prepend(html)
        })
}