Casper theme is buggy and possibly broken?

Developer help
1
  1. When I use the following code on the home.hbs, Casper should filter the homepage post blocks to just featured only, but it doesn’t. On scroll it will proceed to load everything…
<main id="site-main" class="site-main outer">
    <div class="inner posts">
        <div class="post-feed">
        {{#get "posts" limit="all" filter="featured:true" include="tags,author"}}
            {{#foreach posts}}
                {{> "post-card"}}
            {{/foreach}}
        {{/get}}
        </div>     
    </div>
</main>
  1. Why is the top navigation tied to .post-feed class? Without it, the sticky version of it will not display on scroll…this is very strange. If you remove any class “post-feed” from the homepage, it will glitch out the sticky navigation from displaying any text links.
2

Hey @Abvex,

  1. I’ve just tried your custom query in a new home.hbs which was duplicated from index.hbs and it worked fine. Could you please show us your whole home.hbs file?
  2. .post-feed class was used here for calculating the distance to toggle the nav. Would you mind sharing why you want to remove the class?
3

@minimaluminium Hello, sorry for the delayed reply but here you go.

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

<header class="site-home-header">
    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        <div class="inner">
            {{> "site-nav"}}
            <div class="site-header-content">
                <h1 class="site-title">
                    {{#if @site.logo}}
                        <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
                    {{else}}
                        {{@site.title}}
                    {{/if}}
                </h1>
                {{> "header-nav"}}
                <h2 class="site-description">{{@site.description}}</h2>
            </div>
        </div>
    </div>
</header>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <div class="inner posts">

        <div class="post-feed">
        {{#get "posts" limit="all" filter="featured:true" include="tags,author"}}
            {{#foreach posts}}
                {{> "post-card"}}
            {{/foreach}}
        {{/get}}
        </div>     

    </div>
</main>

{{> site-header}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>

    // NOTE: Scroll performance is poor in Safari
    // - this appears to be due to the events firing much more slowly in Safari.
    //   Dropping the scroll event and using only a raf loop results in smoother
    //   scrolling but continuous processing even when not scrolling
    $(document).ready(function () {
        
        var nav = document.querySelector('.site-nav-main .site-nav');
        var feed = document.querySelector('.post-feed');

        var lastScrollY = window.scrollY;
        var lastWindowHeight = window.innerHeight;
        var lastDocumentHeight = $(document).height();
        var ticking = false;

        function onScroll() {
            lastScrollY = window.scrollY;
            requestTick();
        }

        function onResize() {
            lastWindowHeight = window.innerHeight;
            lastDocumentHeight = $(document).height();
            requestTick();
        }

        function requestTick() {
            if (!ticking) {
                requestAnimationFrame(update);
            }
            ticking = true;
        }

        function update() {
            var trigger = feed.getBoundingClientRect().top + window.scrollY;
            var progressMax = lastDocumentHeight - lastWindowHeight;

            // show/hide nav
            if (lastScrollY >= trigger - 20) {
                nav.classList.add('fixed-nav-active');
            } else {
                nav.classList.remove('fixed-nav-active');
            }

            ticking = false;
        }

        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onResize, false);

        update();

    });
</script>
{{/contentFor}}
  1. I sort of solved the first problem by tweaking the route file to point collection instead of index, so ghost wouldn’t dump all the post on index, that was the only way I was able to make the theme work. Otherwise infinite scrolling feature on casper would trigger and load every post on the homepage.
routes:

collections:
  /:
    permalink: /{slug}/
    template: collection

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  1. On certain scenarios I want a static homepage so I don’t need to use the “post-feed” div. I am still not sure how to solve this problem.