2023-04-10 19:44:23 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>{{ config.title }}</title>
|
|
|
|
|
<link as="font" crossorigin="" href="/fonts/forkawesome.woff2" rel="preload" type="font/woff2">
|
|
|
|
|
<link as="font" crossorigin="" href="/fonts/Montserrat-Regular.woff2" rel="preload" type="font/woff2">
|
|
|
|
|
<link as="font" crossorigin="" href="/fonts/Montserrat-Bold.woff2" rel="preload" type="font/woff2">
|
|
|
|
|
<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
|
|
|
|
|
<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
|
|
|
|
|
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
|
2023-06-05 23:45:34 -04:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css">
|
|
|
|
|
<script type="module">
|
|
|
|
|
import PhotoSwipeLightbox from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.js";
|
|
|
|
|
import PhotoSwipe from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.esm.js";
|
|
|
|
|
const lightbox = new PhotoSwipeLightbox({
|
|
|
|
|
gallery: '.instant a',
|
|
|
|
|
pswpModule: PhotoSwipe
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// use <picture> instead of <img>
|
|
|
|
|
lightbox.on('contentLoad', (e) => {
|
|
|
|
|
const { content, isLazy } = e;
|
|
|
|
|
|
|
|
|
|
const avifSrc = content.data.element.dataset.pswpAvif;
|
|
|
|
|
const webpSrc = content.data.element.dataset.pswpWebp;
|
|
|
|
|
if (avifSrc || webpSrc) {
|
|
|
|
|
// prevent to stop the default behavior
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
content.pictureElement = document.createElement('picture');
|
|
|
|
|
|
|
|
|
|
if (avifSrc) {
|
|
|
|
|
const sourceAvif = document.createElement('source');
|
|
|
|
|
sourceAvif.srcset =avifSrc;
|
|
|
|
|
sourceAvif.type = 'image/avif';
|
|
|
|
|
content.pictureElement.appendChild(sourceAvif);
|
|
|
|
|
}
|
|
|
|
|
if (webpSrc) {
|
|
|
|
|
const sourceWebp = document.createElement('source');
|
|
|
|
|
sourceWebp.srcset = webpSrc;
|
|
|
|
|
sourceWebp.type = 'image/webp';
|
|
|
|
|
content.pictureElement.appendChild(sourceWebp);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const source = document.createElement('source');
|
|
|
|
|
source.srcset = content.data.src;
|
|
|
|
|
if (/.png$/.test(content.data.src)) {
|
|
|
|
|
source.type = 'image/png';
|
|
|
|
|
} else {
|
|
|
|
|
source.type = 'image/jpeg';
|
|
|
|
|
}
|
|
|
|
|
content.pictureElement.appendChild(source);
|
|
|
|
|
|
|
|
|
|
content.element = document.createElement('img');
|
|
|
|
|
content.element.src = content.data.src;
|
|
|
|
|
content.element.setAttribute('alt', '');
|
|
|
|
|
content.element.className = 'pswp__img';
|
|
|
|
|
content.pictureElement.appendChild(content.element);
|
|
|
|
|
|
|
|
|
|
content.state = 'loading';
|
|
|
|
|
|
|
|
|
|
if (content.element.complete) {
|
|
|
|
|
content.onLoaded();
|
|
|
|
|
} else {
|
|
|
|
|
content.element.onload = () => {
|
|
|
|
|
content.onLoaded();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
content.element.onerror = () => {
|
|
|
|
|
content.onError();
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// by default PhotoSwipe appends <img>,
|
|
|
|
|
// but we want to append <picture>
|
|
|
|
|
lightbox.on('contentAppend', (e) => {
|
|
|
|
|
const { content } = e;
|
|
|
|
|
if (content.pictureElement && !content.pictureElement.parentNode) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
content.slide.container.appendChild(content.pictureElement);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// for next/prev navigation with <picture>
|
|
|
|
|
// by default PhotoSwipe removes <img>,
|
|
|
|
|
// but we want to remove <picture>
|
|
|
|
|
lightbox.on('contentRemove', (e) => {
|
|
|
|
|
const { content } = e;
|
|
|
|
|
if (content.pictureElement && content.pictureElement.parentNode) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
content.pictureElement.remove();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
lightbox.init();
|
|
|
|
|
</script>
|
2023-04-10 19:44:23 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>{{ page.title | safe }}</h1>
|
|
|
|
|
<span class="meta">
|
|
|
|
|
<span class="fa fa-calendar"></span>
|
|
|
|
|
{{ trans(key="published",lang=lang) }} {{ page.date }}
|
|
|
|
|
{% if page.updated -%}
|
|
|
|
|
({{ trans(key="updated",lang=lang) }} {{ page.updated }})
|
|
|
|
|
{%- endif -%}
|
|
|
|
|
</span>
|
|
|
|
|
</header>
|
|
|
|
|
<main class="article">
|
|
|
|
|
{{ page.content | safe }}
|
|
|
|
|
</main>
|
|
|
|
|
{%- if config.extra.links -%}
|
|
|
|
|
<footer>
|
|
|
|
|
<div class="links">
|
|
|
|
|
{%- for link in config.extra.links -%}
|
|
|
|
|
<a rel="me" href="{{ link.url }}" title="{{ link.title }}">
|
|
|
|
|
<span class="fa {{ 'fa-' ~ link.icon }}"></span>
|
|
|
|
|
</a>
|
|
|
|
|
{%- endfor -%}
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
{%- endif -%}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
