93 lines
3.4 KiB
HTML
93 lines
3.4 KiB
HTML
{{ define "main" }}
|
|
<div class="hx:mx-auto hx:flex hextra-max-page-width">
|
|
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true
|
|
"displayPlaceholder" true) }}
|
|
<article
|
|
class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]"
|
|
>
|
|
<main
|
|
id="content"
|
|
class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-0 hx:md:px-12"
|
|
>
|
|
{{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
|
|
<br class="hx:mt-1.5 hx:text-sm" />
|
|
<div class="content">{{ .Content }}</div>
|
|
|
|
{{- $pages := partial "utils/sort-pages" (dict "page" . "by"
|
|
site.Params.blog.list.sortBy "order"
|
|
site.Params.blog.list.sortOrder) -}} {{- $batch :=
|
|
site.Params.blog.list.pagerSize | default 10 }} {{- $total := len
|
|
$pages }}
|
|
|
|
<div id="post-list">
|
|
{{- range $i, $p := $pages }}
|
|
<div
|
|
class="hx:mb-10 blog-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:mt-8 hx:text-2xl"
|
|
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>
|
|
{{ if site.Params.blog.list.displayTags }}
|
|
<div class="hx:text-sm hx:leading-7">
|
|
{{ partial "tags.html" (dict "context" $p) }}
|
|
</div>
|
|
{{ end }}
|
|
<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>
|
|
|
|
{{- if gt $total $batch }}
|
|
<div id="load-more-trigger" class="hx:h-4"></div>
|
|
{{- end }}
|
|
</main>
|
|
</article>
|
|
<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('.blog-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 }}
|