Liebling infinite scrolling

README.md

Clone the Liebling repository and follow these steps first: https://github.com/eddiesigner/liebling/wiki/Theme-development-with-Docker

When everything is done, open your default.hbs and before </head> put this code:

<script>
  var maxPages = parseInt('{{pagination.pages}}');
</script>

Now create an archive named infinitescroll.js in your src/js folder. Open it and put this code:

  import $ from 'jquery';
  import lozad from 'lozad';
  
  var page = 2;

  $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {

      var nextPage = ghostHost + 'page/' + page;

      $.get((nextPage),
        function (content) {
          if (page <= maxPages) {
            $('.l-content .l-wrapper .l-grid').append($(content).find('.m-article-card.post').fadeIn());
            
            page = page + 1;

            var observer = lozad('.lozad', {
              loaded: function(el) {
                el.classList.add('loaded');
              }
            })
            observer.observe();
          }
        });
    }
  });

Open the default.hbs again and import the file infinitescroll.js before </body>

<script type="text/javascript" src="{{asset "js/infinitescroll.js"}}"></script>

Build the theme for production as described here: https://github.com/eddiesigner/liebling/wiki/Theme-development-with-Docker#production-mode

Thanks for putting this together. I might be missing something here, but by putting infintescroll.js in the /src/js folder, I get a console error saying mysite.com/assets/js/infinitescroll.js can't be found. When I put the file into /assts/js/ then it says line 1 exception (load $ from jquery).

What am I doing wrong?