Omphaloskepsis-2/layouts/blog/section.html

{{ define "title" }}
  {{ .Page.Title | plainify }} | {{ .Site.Title }}
{{ end }}

{{ define "main-class" }}--section{{ end }}

{{ define "main-type" }}{{ .Params.mainType }}{{ end }}

{{ define "footer-scripts" }}
<script>
  // Source: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
  document.addEventListener("DOMContentLoaded", function() {
    var lazyloadImages;    

    if ("IntersectionObserver" in window) {
      lazyloadImages = document.querySelectorAll(".lazy");
      var imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            console.log("Ding");
            var image = entry.target;
            image.classList.remove("lazy");
            imageObserver.unobserve(image);
          }
        });
      });

      lazyloadImages.forEach(function(image) {
        imageObserver.observe(image);
      });
    } else {  
      var lazyloadThrottleTimeout;
      lazyloadImages = document.querySelectorAll(".lazy");
      
      function lazyload () {
        if(lazyloadThrottleTimeout) {
          clearTimeout(lazyloadThrottleTimeout);
        }    

        lazyloadThrottleTimeout = setTimeout(function() {
          var scrollTop = window.pageYOffset;
          lazyloadImages.forEach(function(img) {
              if(img.offsetTop < (window.innerHeight + scrollTop)) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
          });
          if(lazyloadImages.length == 0) { 
            document.removeEventListener("scroll", lazyload);
            window.removeEventListener("resize", lazyload);
            window.removeEventListener("orientationChange", lazyload);
          }
        }, 20);
      }

      document.addEventListener("scroll", lazyload);
      window.addEventListener("resize", lazyload);
      window.addEventListener("orientationChange", lazyload);
    }
  });
</script>
{{ end }}

{{ define "main-header" }}
  <header class="site-content__header">
    <h2 class="page-title">{{ .Title | safeHTML }}
    {{ if eq .Type "blog" }}
       {{ with .GetPage "blog/posts" }}
          {{ range .AlternativeOutputFormats -}}
            <a href="{{ .RelPermalink }}" aria-label="{{ $.Title }} RSS feed">
               <img class="feed-icon" alt="RSS icon" src="{{ $.Site.Params.feedIcon }}">
            </a>
          {{ end }}
       {{ end }}
    {{ else }}
      {{ range .AlternativeOutputFormats -}}
        <a href="{{ .RelPermalink }}" aria-label="{{ $.Title }} RSS feed">
          <img class="feed-icon" alt="RSS icon" src="{{ $.Site.Params.feedIcon }}">
        </a>
      {{ end }}
    {{ end }}
    </h2>
    {{ .Content }}
    
    <nav class="page-header__minor-links">
      <ul class="minor-links__categories">
          <li><a href="/series"><h3>Series’</h3></a> <p>({{ len .Site.Taxonomies.series }})</p></li>
          {{ range .Site.Taxonomies.categories }}
          <li><a href="{{ .Page.RelPermalink }}"><h3>{{ .Page.Title | safeHTML }}</h3></a> <p>({{ len . }})</p></li>  
          {{ end }}
      </ul>
      {{ if eq .Type "blog" }}
        {{ with .GetPage "blog/posts" }}
          {{ partial "years-list.html" . }}
        {{ end }}
      {{ else }}
          {{ partial "years-list.html" . }}
      {{ end }}
    </nav>
  </header>
{{ end }}

{{ define "main-body" }}
  {{ if eq .Type "blog" }}
     {{ with .GetPage "blog/posts" }}
        {{ partial "items-grid.html" . }}
     {{ end }}
  {{ else }}
      {{ partial "items-grid.html" . }}
  {{ end }}
{{ end }}