diff options
Diffstat (limited to 'themes/hugo-theme-stack/layouts/partials/article')
10 files changed, 262 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/layouts/partials/article/article.html b/themes/hugo-theme-stack/layouts/partials/article/article.html new file mode 100644 index 0000000..f3f7e90 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/article.html @@ -0,0 +1,11 @@ +<article class="{{ if .Params.image }}has-image {{ end }}main-article"> + {{ partial "article/components/header" . }} + + {{ partial "article/components/content" . }} + + {{ partial "article/components/footer" . }} + + {{ if or .Params.math .Site.Params.article.math }} + {{ partialCached "article/components/math.html" . }} + {{ end }} +</article>
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/content.html b/themes/hugo-theme-stack/layouts/partials/article/components/content.html new file mode 100644 index 0000000..61e536c --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/content.html @@ -0,0 +1,5 @@ +<section class="article-content"> + <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 --> + {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }} + {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }} +</section> diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/details.html b/themes/hugo-theme-stack/layouts/partials/article/components/details.html new file mode 100644 index 0000000..7c27302 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/details.html @@ -0,0 +1,61 @@ +<div class="article-details"> + {{ if .Params.categories }} + <header class="article-category"> + {{ range (.GetTerms "categories") }} + <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}> + {{ .LinkTitle }} + </a> + {{ end }} + </header> + {{ end }} + + <div class="article-title-wrapper"> + <h2 class="article-title"> + <a href="{{ .RelPermalink }}"> + {{- .Title -}} + </a> + </h2> + + {{ with .Params.description }} + <h3 class="article-subtitle"> + {{ . }} + </h3> + {{ end }} + </div> + + {{ $showReadingTime := .Params.readingTime | default (.Site.Params.article.readingTime) }} + {{ $showDate := not .Date.IsZero }} + {{ $showFooter := or $showDate $showReadingTime }} + {{ if $showFooter }} + <footer class="article-time"> + {{ if $showDate }} + <div> + {{ partial "helper/icon" "date" }} + <time class="article-time--published"> + {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}} + </time> + </div> + {{ end }} + + {{ if $showReadingTime }} + <div> + {{ partial "helper/icon" "clock" }} + <time class="article-time--reading"> + {{ T "article.readingTime" .ReadingTime }} + </time> + </div> + {{ end }} + </footer> + {{ end }} + + {{ if .IsTranslated }} + <footer class="article-translations"> + {{ partial "helper/icon" "language" }} + <div> + {{ range .Translations }} + <a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a> + {{ end }} + </div> + </footer> + {{ end }} +</div> diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/footer.html b/themes/hugo-theme-stack/layouts/partials/article/components/footer.html new file mode 100644 index 0000000..9795880 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/footer.html @@ -0,0 +1,19 @@ +<footer class="article-footer"> + {{ partial "article/components/tags" . }} + + {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }} + <section class="article-copyright"> + {{ partial "helper/icon" "copyright" }} + <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span> + </section> + {{ end }} + + {{- if ne .Lastmod .Date -}} + <section class="article-lastmod"> + {{ partial "helper/icon" "clock" }} + <span> + {{ T "article.lastUpdatedOn" }} {{ .Lastmod | time.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }} + </span> + </section> + {{- end -}} +</footer> diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/header.html b/themes/hugo-theme-stack/layouts/partials/article/components/header.html new file mode 100644 index 0000000..7582ec2 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/header.html @@ -0,0 +1,35 @@ +<header class="article-header"> + {{- $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" -}} + {{ if $image.exists }} + <div class="article-image"> + <a href="{{ .RelPermalink }}"> + {{ if $image.resource }} + {{- $Permalink := $image.resource.RelPermalink -}} + {{- $Width := $image.resource.Width -}} + {{- $Height := $image.resource.Height -}} + {{- $Srcset := "" -}} + + {{- if (default true .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 -}} + {{- $Permalink = $thumbnail.RelPermalink -}} + {{- $Width = $thumbnail.Width -}} + {{- $Height = $thumbnail.Height -}} + {{- end -}} + + <img src="{{ $Permalink }}" + {{ with $Srcset }}srcset="{{ . }}"{{ end }} + width="{{ $Width }}" + height="{{ $Height }}" + loading="lazy" + alt="Featured image of post {{ .Title }}" /> + {{ else }} + <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" /> + {{ end }} + </a> + </div> + {{ end }} + + {{ partialCached "article/components/details" . .RelPermalink }} +</header>
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/links.html b/themes/hugo-theme-stack/layouts/partials/article/components/links.html new file mode 100644 index 0000000..a2ac26c --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/links.html @@ -0,0 +1,30 @@ +<div class="article-list--compact links"> + {{ range $i, $link := .Params.links }} + <article> + <a href="{{ $link.website }}" target="_blank" rel="noopener"> + <div class="article-details"> + <h2 class="article-title"> + {{- $link.title -}} + </h2> + <footer class="article-time"> + {{ with $link.description }} + {{ . }} + {{ else }} + {{ $link.website }} + {{ end }} + </footer> + </div> + + {{ with $link.image }} + {{ $permalink := . }} + {{ with ($.Resources.GetMatch (printf "%s" (. | safeURL))) }} + {{ $permalink = .RelPermalink }} + {{ end }} + <div class="article-image"> + <img src="{{ $permalink }}" loading="lazy"> + </div> + {{ end }} + </a> + </article> + {{ end }} +</div>
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/math.html b/themes/hugo-theme-stack/layouts/partials/article/components/math.html new file mode 100644 index 0000000..bd1a7f8 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/math.html @@ -0,0 +1,13 @@ +{{- partial "helper/external" (dict "Context" . "Namespace" "KaTeX") -}} +<script> + window.addEventListener("DOMContentLoaded", () => { + renderMathInElement(document.body, { + delimiters: [ + { left: "$$", right: "$$", display: true }, + { left: "$", right: "$", display: false }, + { left: "\\(", right: "\\)", display: false }, + { left: "\\[", right: "\\]", display: true } + ], + ignoredClasses: ["gist"] + });}) +</script>
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/photoswipe.html b/themes/hugo-theme-stack/layouts/partials/article/components/photoswipe.html new file mode 100644 index 0000000..c33ff49 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/photoswipe.html @@ -0,0 +1,68 @@ +<!-- Root element of PhotoSwipe. Must have class pswp. --> +<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> + + <!-- Background of PhotoSwipe. + It's a separate element as animating opacity is faster than rgba(). --> + <div class="pswp__bg"></div> + + <!-- Slides wrapper with overflow:hidden. --> + <div class="pswp__scroll-wrap"> + + <!-- 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") -}}
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/related-content.html b/themes/hugo-theme-stack/layouts/partials/article/components/related-content.html new file mode 100644 index 0000000..aba88e3 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/related-content.html @@ -0,0 +1,13 @@ +{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }} +{{ with $related }} +<aside class="related-content--wrapper"> + <h2 class="section-title">{{ T "article.relatedContent" }}</h2> + <div class="related-content"> + <div class="flex article-list--tile"> + {{ range . }} + {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }} + {{ end }} + </div> + </div> +</aside> +{{ end }}
\ No newline at end of file diff --git a/themes/hugo-theme-stack/layouts/partials/article/components/tags.html b/themes/hugo-theme-stack/layouts/partials/article/components/tags.html new file mode 100644 index 0000000..aae38b4 --- /dev/null +++ b/themes/hugo-theme-stack/layouts/partials/article/components/tags.html @@ -0,0 +1,7 @@ +{{ if .Params.Tags }} + <section class="article-tags"> + {{ range (.GetTerms "tags") }} + <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> + {{ end }} + </section> +{{ end }}
\ No newline at end of file |