Omphaloskepsis-2/layouts/blog/section.html

112 lines
3.4 KiB
HTML
Raw Normal View History

2022-11-11 05:48:02 +00:00
{{ 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">
<h1 class="page-title">{{ .Title | safeHTML }}
{{ if eq .Type "blog" }}
{{ with .GetPage "blog/posts" }}
{{ range .AlternativeOutputFormats -}}
<a href="{{ .RelPermalink }}">
<img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
</a>
{{ end }}
{{ end }}
{{ else }}
{{ range .AlternativeOutputFormats -}}
<a href="{{ .RelPermalink }}">
<img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
</a>
{{ end }}
{{ end }}
</h1>
{{ .Content }}
<nav class="page-header__minor-links">
<ul class="minor-links__categories">
<li><a href="/series"><h2>Series</h2></a> <p>({{ len .Site.Taxonomies.series }})</p></li>
{{ range .Site.Taxonomies.categories }}
<li><a href="{{ .Page.RelPermalink }}"><h2>{{ .Page.Title | safeHTML }}</h2></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 }}