app\templates\index(2).html

{% extends "base.html" %}

{% block title %}Offbrand{% endblock %}

{% block page_content %}
    <div class="page-header">
        <h1>Welcome to Offbrand!</h1>
    </div>
    {% if current_user.can(Permission.FOLLOW) %}
    <div class="collection-content">
        <div id="content-scroller">
            {% include "_content.html" %}
        </div>
    </div>
    <div id="content-sentinel"></div>

    <script>
         document.addEventListener("DOMContentLoaded", function() {
            const client = stream.connect(
                '7yuqbuncncwa',
                '{{ token }}'
            );
            const timeline = client.feed('Timeline', '{{ user.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;
            let last_page = false;

            function loadContent() {
                if (!content_loading) {
                    content_loading = true;
                    if (!last_id) {
                        request = timeline.get({ limit:10 })
                    } else {
                        request = timeline.get({ limit:10, id_lt: last_id })
                    }
                    if (!last_page) {
                        request.then((data) => {
                            for (var i = 0; i < data.results.length; i++) {
                                for (var j = 0; j < data.results[i].activities.length; j++) {

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

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

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

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

                                    content_scroller.appendChild(template_clone);
                                }
                            }
                            last_id = data.results[data.results.length - 1].activities[data.results[data.results.length - 1].activities.length - 1].id;
                            if (data.next === "") {
                                content_sentinel.innerHTML = `<p>That's All!<p>`;
                                content_loading = false;
                                last_page = true;
                                return;
                            }
                            content_loading = false
                        })
                    }
                }
            }

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

    </script>
    {% endif %}
{% endblock %}