81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
{{ define "main" }}
|
|
<div class="hx:mx-auto hx:flex hextra-max-page-width">
|
|
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true
|
|
"displayPlaceholder" true) }}
|
|
<main
|
|
id="content"
|
|
class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:px-6 hx:pt-4 hx:md:px-12"
|
|
>
|
|
<div class="hx:flex hx:flex-col hx:items-center hx:text-center">
|
|
{{ .Content }}
|
|
</div>
|
|
|
|
{{- $pages := where .Site.RegularPages "Section" "blog" }} {{- $pages =
|
|
$pages.ByDate.Reverse }} {{- $batch := 6 }}
|
|
|
|
<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="{{ $p.RelPermalink }}"
|
|
>{{ $p.Title }}</a
|
|
>
|
|
</h3>
|
|
<p class="hx:opacity-50 hx:text-sm hx:mt-1 hx:leading-7">
|
|
{{ partial "utils/format-date" $p.Date }}
|
|
</p>
|
|
<a
|
|
href="{{ $p.RelPermalink }}"
|
|
style="color: inherit; text-decoration: none"
|
|
>
|
|
<p class="hx:opacity-80 hx:mt-2 hx:leading-7">
|
|
{{- partial "utils/page-description" $p -}}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
{{- 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>
|
|
|
|
{{- 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 }}
|