app\templates\collection(3).py

<script>

    document.addEventListener("DOMContentLoaded", function() {
        const client = stream.connect(
            'Your Public Key Here',
            '{{ token }}'
        );
        const collection = client.feed('Collections', '{{ collection.id }}');

        let content_template = document.querySelector("#content-template");
        let content_scroller = document.querySelector("#content-scroller");
        let content_sentinel = document.querySelector("#content-sentinel");
        let content_loading = false;
        let last_id = null;

        function loadContent() {
            if (!content_loading) {
                content_loading = true;
                if (!last_id) {
                    request = collection.get({ limit:10 })
                } else {
                    request = collection.get({ limit:10, id_lt: last_id })
                }
                request.then((data) => {
                    if (data.results.length < 1 ) {
                        content_sentinel.innerHTML = `<p>That's All!<p>`;
                        content_loading = false;
                        return;
                    }

                    for (var i = 0; i < data.results.length; i++) {

                        let template_clone = content_template.content.cloneNode(true);

                        <!-- Author Info -->
                        template_clone.querySelector('#user-profile-img').src = data.results[i]['actor']['data']['gravatar'];
                        template_clone.querySelector('#user-profile-img').alt = 'None';
                        template_clone.querySelector('#user-profile-link').href = '/user/' + data.results[i]['actor']['data']['username'];
                        template_clone.querySelector('#user-profile-link').innerHTML = data.results[i]['actor']['data']['username'];

                        <!-- Content Info-->
                        template_clone.querySelector('#content-title').innerHTML = data.results[i]['post'];
                        template_clone.querySelector('#content-title').href = '/content/' + data.results[i]['object'].slice(8);
                        template_clone.querySelector('#content-description').innerHTML = data.results[i]['description'];
                        template_clone.querySelector('#content-read-more').innerHTML = 'Read More';
                        template_clone.querySelector('#content-read-more').href = data.results[i]['url'];

                        <!-- Content Metadata -->
                        template_clone.querySelector('#content-timestamp').innerHTML = moment(data.results[i]['time'] + 'Z').fromNow();
                        template_clone.querySelector('#content-collection-link').innerHTML = data.results[i]['collection']['name'];
                        template_clone.querySelector('#content-collection-link').href = '/collection/' + data.results[i]['collection']['id'];

                        content_scroller.appendChild(template_clone);
                    }
                    last_id = data.results[data.results.length - 1].id;
                    content_loading = false
                })
            }
        }

        var contentIntersectionObserver = new IntersectionObserver(entries => {
            if (entries[0].intersectionRatio <= 0) {
                return;
            }
            loadContent();
        });
        contentIntersectionObserver.observe(content_sentinel);
    });

</script>

{% endblock %}