Hugo-theme-stack/layouts/partials/article/components/photoswipe.html
Jimmy Cai 8a597a5c9c
Merge branch 'canary' into master (#711)
* refactor(i18n): simplify the structure of the translation file

* chore: prepare repository for v4.0.0-alpha

* chore: modify go.mod to v4

* refactor: migrate theme configuration to TOML

* fix: exampleSite not using correct theme

* feat: add favicon from assets folder

* refactor: drop linear grandient background feature

remove node-vibrant from dependencies

* feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support

* refactor: delete color.ts

* refactor: delete Emoji support post from example site

* refactor: drop support for `hidden` field in front matter

* feat: upgrade to PhotoSwipe v5

* chore: bump the required hugo version to 0.100.0

* refactor: remove PhotoSwipe from external.yaml

* fix: extra margin in search result

* fix: incorrect markdown heading level in example site

* refactor: remove some usages of `default` in template

No longer needed thanks to Hugo's configuration merge

* fix: one line codeblock style in firefox

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/564

* feat: add style to new codeblock

* feat: i18n support for codeblock copy text

* fix(menu): jitter when closing menu

It's caused by flexbox gap property, which can't animate

* fix(search): long text overflows under the Search icon

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/515
2022-10-29 17:02:24 +02:00

20 lines
903 B
HTML

{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
{{- $galleryScript := resources.Get "ts/gallery.ts" | js.Build $opts -}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe.css"
integrity="sha256-olf9rfn3AG8zR6lkPXkN3PZq63z8tElx7Ela6T4eklo=" crossorigin="anonymous">
<script type="module">
import StackGallery from '{{ $galleryScript.RelPermalink }}';
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe-lightbox.esm.min.js';
console.log(StackGallery)
StackGallery(document.querySelector('.article-content'));
const lightbox = new PhotoSwipeLightbox({
gallery: '.article-content',
children: '.gallery-image a',
pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe.esm.min.js')
});
lightbox.init();
</script>