fix: inline stack theme
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
<article class="{{ if .Params.image }}has-image {{ end }}main-article">
|
||||
{{ partial "article/components/header" (dict "Page" . "IsList" false) }}
|
||||
|
||||
{{ if .Scratch.Get "TOCEnabled" }}
|
||||
<aside class="article-toc">
|
||||
<details>
|
||||
<summary>
|
||||
<div class="article-toc-title">
|
||||
{{ partial "helper/icon" "chevron-right" }}
|
||||
<span>{{ T "article.tableOfContents" }}</span>
|
||||
</div>
|
||||
</summary>
|
||||
<nav class="toc-nav">
|
||||
{{ partial "article/components/toc" . | safeHTML }}
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "article/components/content" . }}
|
||||
|
||||
{{ partial "article/components/footer" . }}
|
||||
|
||||
{{ if or .Params.math .Site.Params.article.math }}
|
||||
{{ partialCached "article/components/math.html" . }}
|
||||
{{ end }}
|
||||
</article>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,76 @@
|
||||
{{- $IsList := .IsList -}}
|
||||
{{- $Page := .Page -}}
|
||||
<div class="article-details">
|
||||
{{ if $Page.Params.categories }}
|
||||
<header class="article-category">
|
||||
{{ range ($Page.GetTerms "categories") }}
|
||||
{{ $color := partial "helper/color-from-str" .LinkTitle }}
|
||||
{{ $BackgroundColor := default $color.BackgroundColor .Params.style.background }}
|
||||
{{ $TextColor := default $color.TextColor .Params.style.color }}
|
||||
<a href="{{ .RelPermalink }}" style="background-color: {{ $BackgroundColor | safeCSS }}; color: {{ $TextColor | safeCSS }};">
|
||||
{{ .LinkTitle }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
<div class="article-title-wrapper">
|
||||
<h2 class="article-title">
|
||||
<a href="{{ $Page.RelPermalink }}">
|
||||
{{- $Page.Title -}}
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
{{ with $Page.Params.description }}
|
||||
<h3 class="article-subtitle">
|
||||
{{ . }}
|
||||
</h3>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ $showReadingTime := $Page.Params.readingTime | default ($Page.Site.Params.article.readingTime) }}
|
||||
{{ $showDate := not $Page.Date.IsZero }}
|
||||
{{ $showTime := or $showDate $showReadingTime }}
|
||||
{{ $showTranslations := $Page.IsTranslated }}
|
||||
{{ $showTags := and $Page.Site.Params.Article.List.ShowTags ($Page.GetTerms "tags") $IsList }}
|
||||
|
||||
{{ if or $showTime $showTranslations $showTags }}
|
||||
<footer class="article-meta">
|
||||
{{ if $showTime }}
|
||||
<div class="inline-meta">
|
||||
{{ if $showDate }}
|
||||
{{ partial "helper/icon" "date" }}
|
||||
<time class="article-time--published" datetime='{{ $Page.Date.Format "2006-01-02T15:04:05Z07:00" }}'>
|
||||
{{- $Page.Date | time.Format $Page.Site.Params.dateFormat.published -}}
|
||||
</time>
|
||||
{{ end }}
|
||||
|
||||
{{ if $showReadingTime }}
|
||||
{{ partial "helper/icon" "clock" }}
|
||||
<time class="article-time--reading">
|
||||
{{ T "article.readingTime" $Page.ReadingTime }}
|
||||
</time>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if $showTranslations }}
|
||||
<div class="inline-meta">
|
||||
{{ partial "helper/icon" "language" }}
|
||||
{{ range $Page.Translations }}
|
||||
<a href="{{ .RelPermalink }}" class="link">{{ .Lang }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if $showTags }}
|
||||
<div class="article-tags inline-meta">
|
||||
{{ partial "helper/icon" "tag" }}
|
||||
{{ range ($Page.GetTerms "tags") }}
|
||||
<a href="{{ .RelPermalink }}" class="link">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<footer class="article-meta article-footer">
|
||||
{{ partial "article/components/tags" . }}
|
||||
|
||||
{{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
|
||||
<section class="article-copyright inline-meta">
|
||||
{{ 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 inline-meta">
|
||||
{{ partial "helper/icon" "clock" }}
|
||||
<span>
|
||||
{{ T "article.lastUpdatedOn" }} {{ .Lastmod | time.Format .Site.Params.dateFormat.lastUpdated }}
|
||||
</span>
|
||||
</section>
|
||||
{{- end -}}
|
||||
</footer>
|
||||
@@ -0,0 +1,25 @@
|
||||
{{- $IsList := .IsList -}}
|
||||
{{- $Page := .Page -}}
|
||||
<header class="article-header">
|
||||
{{- $image := partial "helper/image" (dict "Image" $Page.Params.image "Resources" $Page.Resources "Context" $Page) -}}
|
||||
{{ if $image }}
|
||||
<div class="article-image">
|
||||
<a href="{{ $Page.RelPermalink }}">
|
||||
{{ partial "helper/responsive-image" (dict
|
||||
"Resource" $image.Resource
|
||||
"Widths" (cond $Page.Site.Params.ImageProcessing.Content.Enabled $Page.Site.Params.ImageProcessing.Content.Widths nil)
|
||||
"Attributes" (dict
|
||||
"src" $image.Permalink
|
||||
"width" $image.Width
|
||||
"height" $image.Height
|
||||
"alt" (printf "Featured image of post %s" $Page.Title)
|
||||
"loading" "lazy"
|
||||
"sizes" "(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"
|
||||
)
|
||||
) }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "article/components/details" (dict "Page" $Page "IsList" $IsList) }}
|
||||
</header>
|
||||
@@ -0,0 +1,39 @@
|
||||
<div class="article-list--compact links">
|
||||
{{ range $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-meta">
|
||||
{{ with $link.description }}
|
||||
{{ . }}
|
||||
{{ else }}
|
||||
{{ $link.website }}
|
||||
{{ end }}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{{- $image := partial "helper/image" (dict "Image" $link.image "Resources" $.Resources "Context" .) -}}
|
||||
{{- with $image -}}
|
||||
<div class="article-image">
|
||||
{{ partial "helper/thumbnail-image" (dict
|
||||
"Resource" .Resource
|
||||
"Width" 60
|
||||
"Height" 60
|
||||
"Resize" $.Site.Params.ImageProcessing.Thumbnail.Enabled
|
||||
"Attributes" (dict
|
||||
"src" $image.Permalink
|
||||
"alt" $link.title
|
||||
"loading" "lazy"
|
||||
"width" .Width
|
||||
"height" .Height
|
||||
)
|
||||
) }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
{{- partial "helper/external" (dict "Context" . "Namespace" "KaTeX") -}}
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const elementsToRender = [".main-article", ".widget--toc"];
|
||||
|
||||
elementsToRender.forEach(selector => {
|
||||
const element = document.querySelector(selector);
|
||||
if (element) {
|
||||
renderMathInElement(element, {
|
||||
delimiters: [
|
||||
{ left: "$$", right: "$$", display: true },
|
||||
{ left: "$", right: "$", display: false },
|
||||
{ left: "\\(", right: "\\)", display: false },
|
||||
{ left: "\\[", right: "\\]", display: true }
|
||||
],
|
||||
ignoredClasses: ["gist"]
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
{{- if .Store.Get "hasMermaid" -}}
|
||||
{{- $cfg := site.Params.article.mermaid | default dict -}}
|
||||
|
||||
<div class="mermaid-modal" id="mermaid-modal">
|
||||
<div class="mermaid-modal-header">
|
||||
<div class="mermaid-modal-controls">
|
||||
<button data-zoom="-1">− Zoom Out</button>
|
||||
<button data-zoom="0">Reset (100%)</button>
|
||||
<button data-zoom="1">+ Zoom In</button>
|
||||
<button data-zoom="fit">Fit to Screen</button>
|
||||
</div>
|
||||
<button class="mermaid-modal-close" id="mermaid-modal-close">✕ Close (Esc)</button>
|
||||
</div>
|
||||
<div class="mermaid-modal-body" id="mermaid-modal-body">
|
||||
<div class="mermaid-modal-content" id="mermaid-modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||||
{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
|
||||
{{- $script := resources.Get "ts/mermaid.ts" | js.Build $opts -}}
|
||||
{{- $jsConfig := dict
|
||||
"transparentBackground" ($cfg.transparentBackground | default false)
|
||||
"lightTheme" ($cfg.lightTheme | default "default")
|
||||
"darkTheme" ($cfg.darkTheme | default "dark")
|
||||
"lightThemeVariables" ($cfg.lightThemeVariables | default dict)
|
||||
"darkThemeVariables" ($cfg.darkThemeVariables | default dict)
|
||||
"securityLevel" ($cfg.securityLevel | default "strict")
|
||||
"look" ($cfg.look | default "classic")
|
||||
"htmlLabels" (not (eq ($cfg.htmlLabels | default true) false))
|
||||
-}}
|
||||
{{- with $cfg.maxTextSize }}{{ $jsConfig = merge $jsConfig (dict "maxTextSize" .) }}{{ end -}}
|
||||
{{- with $cfg.maxEdges }}{{ $jsConfig = merge $jsConfig (dict "maxEdges" .) }}{{ end -}}
|
||||
{{- with $cfg.fontSize }}{{ $jsConfig = merge $jsConfig (dict "fontSize" .) }}{{ end -}}
|
||||
{{- with $cfg.fontFamily }}{{ $jsConfig = merge $jsConfig (dict "fontFamily" .) }}{{ end -}}
|
||||
{{- with $cfg.curve }}{{ $jsConfig = merge $jsConfig (dict "curve" .) }}{{ end -}}
|
||||
{{- with $cfg.logLevel }}{{ $jsConfig = merge $jsConfig (dict "logLevel" .) }}{{ end -}}
|
||||
<script type="module">
|
||||
import { initMermaidPage } from '{{ $script.RelPermalink }}';
|
||||
initMermaidPage({{ $jsConfig | jsonify | safeJS }});
|
||||
</script>
|
||||
{{- end -}}
|
||||
@@ -0,0 +1,32 @@
|
||||
{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
|
||||
{{- $galleryScript := resources.Get "ts/gallery.ts" | js.Build $opts -}}
|
||||
|
||||
{{ $style := hugo.Data.external.PhotoSwipe.Style }}
|
||||
{{ $core := hugo.Data.external.PhotoSwipe.Core }}
|
||||
{{ $lightbox := hugo.Data.external.PhotoSwipe.Lightbox }}
|
||||
|
||||
<script type="module">
|
||||
import gallery from '{{ $galleryScript.RelPermalink }}';
|
||||
|
||||
const articleContent = document.querySelector('.article-content');
|
||||
const shouldLoad = articleContent && (articleContent.querySelectorAll('figure').length > 0 || articleContent.querySelectorAll('img.gallery-image').length > 0);
|
||||
|
||||
if (shouldLoad) {
|
||||
gallery(articleContent);
|
||||
|
||||
const PhotoSwipeLightbox = (await import("{{ $lightbox | safeJS }}")).default;
|
||||
const styleHref = "{{ $style | safeJS }}";
|
||||
|
||||
const styleTag = document.createElement('link');
|
||||
styleTag.rel = 'stylesheet';
|
||||
styleTag.href = styleHref;
|
||||
document.head.appendChild(styleTag);
|
||||
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallerySelector: '.article-content',
|
||||
childSelector: 'figure a.image-link',
|
||||
pswpModule: () => import("{{ $core | safeJS }}")
|
||||
});
|
||||
lightbox.init();
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
{{ $related := (.Site.RegularPages.Related .) | first 5 }}
|
||||
{{ with $related }}
|
||||
<aside>
|
||||
<h2 class="section-title">{{ T "article.relatedContent" }}</h2>
|
||||
<div class="subsection-list">
|
||||
<div class="article-list--tile">
|
||||
{{ range . }}
|
||||
{{ partial "article-list/tile" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,7 @@
|
||||
{{ if .Params.Tags }}
|
||||
<section class="article-tags">
|
||||
{{ range (.GetTerms "tags") }}
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,6 @@
|
||||
{{/* Remove <nav id="TableOfContents"> and </nav> from .TableOfContents */}}
|
||||
{{ $toc := .TableOfContents }}
|
||||
{{ $toc = replace $toc "<nav id=\"TableOfContents\">" "" }}
|
||||
{{ $toc = replace $toc "</nav>" "" }}
|
||||
|
||||
{{ return $toc }}
|
||||
Reference in New Issue
Block a user