Add infinite-scroll pagination to home page and publish new blog posts

layouts/hextra-home.html

@@ -11,44 +11,70 @@
         </div>
 
         {{- $pages := where .Site.RegularPages "Section" "blog" }} {{- $pages =
-        $pages.ByDate.Reverse }} {{- $recent := first 6 $pages }} {{- $readMore
-        := (T "readMore") | default "Read more →" }}
+        $pages.ByDate.Reverse }} {{- $batch := 6 }}
 
-        <div class="hx:mt-16">
-            {{- range $recent }}
-            <div class="hx:mb-8">
+        <div class="hx:mt-16" id="post-list">
+            {{- range $i, $p := $pages }}
+            <div
+                class="hx:mb-8 home-post-item{{ if ge $i $batch }} hx:hidden{{ end }}"
+                data-index="{{ $i }}"
+            >
                 <h3>
                     <a
                         style="color: inherit; text-decoration: none"
                         class="hx:block hx:font-semibold hx:text-xl"
-                        href="{{ .RelPermalink }}"
-                        >{{ .Title }}</a
+                        href="{{ $p.RelPermalink }}"
+                        >{{ $p.Title }}</a
                     >
                 </h3>
                 <p class="hx:opacity-50 hx:text-sm hx:mt-1 hx:leading-7">
-                    {{ partial "utils/format-date" .Date }}
+                    {{ partial "utils/format-date" $p.Date }}
                 </p>
                 <a
-                    href="{{ .RelPermalink }}"
+                    href="{{ $p.RelPermalink }}"
                     style="color: inherit; text-decoration: none"
                 >
                     <p class="hx:opacity-80 hx:mt-2 hx:leading-7">
-                        {{- partial "utils/page-description" . -}}
+                        {{- partial "utils/page-description" $p -}}
                     </p>
                 </a>
             </div>
-            {{- end }} {{- if gt (len $pages) 6 }}
-            <p class="hx:mt-6">
-                <a
-                    href="/blog"
-                    class="hx:font-medium hx:text-primary-600 hx:hover:text-primary-700 hx:dark:text-primary-400"
-                >
-                    {{ $readMore }}
-                </a>
-            </p>
             {{- end }}
         </div>
+
+        {{- $total := len $pages }} {{- if gt $total $batch }}
+        <div id="load-more-trigger" class="hx:h-4"></div>
+        {{- end }}
     </main>
     <div class="hx:max-xl:hidden hx:h-0 hx:w-64 hx:shrink-0"></div>
 </div>
-{{ end }}
+
+{{- if gt $total $batch }}
+<script>
+    (function () {
+      var batch = {{ $batch }};
+      var total = {{ $total }};
+      var visible = batch;
+      var items = document.querySelectorAll('.home-post-item');
+      var trigger = document.getElementById('load-more-trigger');
+      if (!trigger) return;
+
+      function showNext() {
+        var next = Math.min(visible + batch, total);
+        for (var i = visible; i < next; i++) {
+          items[i].classList.remove('hx:hidden');
+        }
+        visible = next;
+        if (visible >= total) {
+          trigger.remove();
+        }
+      }
+
+      var observer = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) showNext();
+      }, { rootMargin: '200px' });
+
+      observer.observe(trigger);
+    })();
+</script>
+{{- end }} {{ end }}