From 817bc33631dcaaeee061278bbd3d850834a1ddbb Mon Sep 17 00:00:00 2001
From: loongma <mailshell@pm.me>
Date: Mon, 13 May 2024 17:23:27 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20add=20image=20shortcode=20to=20show?=
 =?UTF-8?q?=20images=20in=20/docs/*?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/images/loading.svg          |  5 ++++
 layouts/partials/plugin/image.html | 40 ++++++++++++++++++++++++++++++
 layouts/shortcodes/image.html      | 15 +++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 assets/images/loading.svg
 create mode 100644 layouts/partials/plugin/image.html
 create mode 100644 layouts/shortcodes/image.html

diff --git a/assets/images/loading.svg b/assets/images/loading.svg
new file mode 100644
index 00000000..02a0eee4
--- /dev/null
+++ b/assets/images/loading.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="margin:auto;background:0 0" width="60" height="60" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" display="block">
+    <circle cx="50" cy="50" r="20" stroke-width="4" stroke="#a5a5a5" stroke-dasharray="31.416 31.416" fill="none" stroke-linecap="round" transform="rotate(67.21 50 50)">
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"/>
+    </circle>
+</svg>
diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html
new file mode 100644
index 00000000..3d6ae5a7
--- /dev/null
+++ b/layouts/partials/plugin/image.html
@@ -0,0 +1,40 @@
+{{- $params := page.Scratch.Get "params" -}}
+{{- $class := .Class | default "" -}}
+{{- $style := "" -}}
+{{- $loading := .Loading | default "lazy" -}}
+{{- $onload := "" -}}
+{{- $onerror := "" -}}
+{{- $cacheRemoteImages := $params.cacheRemoteImages -}}
+{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}}
+
+{{- /* handle for image size */ -}}
+{{- $src := .Src -}}
+{{- $srcSmall := .SrcSmall | default $src -}}
+{{- $srcMedium := $src -}}
+{{- $srcLarge := .SrcLarge | default $src -}}
+
+
+{{- /* set image alt */ -}}
+{{- $alt := .Alt | default $src -}}
+
+{{- /* set image lazy loading */ -}}
+{{- if eq $loading "lazy" -}}
+  {{- $commonScript := "this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}" -}}
+  {{- $onload = printf " onload=\"%vthis.dataset.lazyloaded='';\"" $commonScript | safeHTMLAttr -}}
+  {{- $onerror = printf " onerror=\"%v\"" $commonScript | safeHTMLAttr -}}
+  {{- $style = printf " style=\"%vbackground: url(%v) no-repeat center;\"" $style (resources.Get "/images/loading.svg" | minify).RelPermalink | safeHTMLAttr -}}
+{{- end -}}
+
+<img loading="{{ $loading }}" src="{{ $src | safeURL }}" alt="{{ $alt }}"
+  {{- if .Responsive }} srcset="{{ $srcSmall | safeURL }}, {{ $srcMedium | safeURL }} 1.5x, {{ $srcLarge | safeURL }} 2x" {{- end -}}
+  {{- if eq $loading "lazy" }} data-title="{{ .Title | default $alt }}"
+  {{- else }} title="{{ .Title | default $alt }}"{{- end -}}
+  {{- with .Width }} width="{{ . }}"{{- end -}}
+  {{- with .Height }} height="{{ . }}"{{- end -}}
+  {{- with $class }} class="{{ trim . " " }}"{{- end -}}
+  {{- with .Decoding }} decoding="{{ . }}"{{- end -}}
+  {{- with .Referrerpolicy }} referrerpolicy="{{ . }}"{{- end -}}
+  {{- with $style -}}{{ . }}{{- end -}}
+  {{- with $onload -}}{{ . }}{{- end -}}
+  {{- with $onerror -}}{{ . }}{{- end -}}
+/>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
new file mode 100644
index 00000000..2d45484b
--- /dev/null
+++ b/layouts/shortcodes/image.html
@@ -0,0 +1,15 @@
+{{- $options := cond .IsNamedParams (.Get "src") (.Get 0) | dict "Src" -}}
+{{- $options = cond .IsNamedParams (.Get "alt") (.Get 1) | .Page.RenderString | dict "Alt" | merge $options -}}
+
+{{- if .IsNamedParams -}}
+  {{- $options = dict "Title" (.Get "title") | merge $options -}}
+  {{- $options = dict "SrcSmall" (.Get "src_s") | merge $options -}}
+  {{- $options = dict "SrcLarge" (.Get "src_l") | merge $options -}}
+  {{- $options = dict "Height" (.Get "height") | merge $options -}}
+  {{- $options = dict "Width" (.Get "width") | merge $options -}}
+  {{- $options = .Get "linked" | ne false | dict "Linked" | merge $options -}}
+  {{- $options = dict "Rel" (.Get "rel") | merge $options -}}
+  {{- $options = dict "Loading" (.Get "loading") | merge $options -}}
+  {{- $options = dict "Responsive" true | merge $options -}}
+  {{- partial "plugin/image.html" $options -}}
+{{- end -}}
\ No newline at end of file