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
This commit is contained in:
Jimmy Cai
@@ -9,7 +9,7 @@
|
||||
{{- $Height := $image.resource.Height -}}
|
||||
{{- $Srcset := "" -}}
|
||||
|
||||
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
|
||||
{{- if .Page.Site.Params.imageProcessing.cover.enabled -}}
|
||||
{{- $thumbnail := $image.resource.Resize "800x" -}}
|
||||
{{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
|
||||
{{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
|
||||
|
||||
@@ -1,68 +1,20 @@
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
|
||||
{{- $galleryScript := resources.Get "ts/gallery.ts" | js.Build $opts -}}
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe.css"
|
||||
integrity="sha256-olf9rfn3AG8zR6lkPXkN3PZq63z8tElx7Ela6T4eklo=" crossorigin="anonymous">
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<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'));
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{- partial "helper/external" (dict "Context" . "Namespace" "PhotoSwipe") -}}
|
||||
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>
|
||||
@@ -1,4 +1,4 @@
|
||||
{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
|
||||
{{ $related := .Site.RegularPages.Related . | first 5 }}
|
||||
{{ with $related }}
|
||||
<aside class="related-content--wrapper">
|
||||
<h2 class="section-title">{{ T "article.relatedContent" }}</h2>
|
||||
|
||||
Reference in New Issue
Block a user