From 8c96d179a494348e022a85dfca0db756b926fad1 Mon Sep 17 00:00:00 2001
From: GerkinDev <alexandre.j.p.germain@gmail.com>
Date: Sun, 16 Jan 2022 17:28:42 +0100
Subject: [PATCH] perf: optimize avatar from assets

---
 layouts/partials/body/whoami.html      | 23 ++++------------
 layouts/partials/sidebar/site-bio.html | 30 ++++++--------------
 layouts/partials/whoami/img-url.html   | 38 ++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 layouts/partials/whoami/img-url.html

diff --git a/layouts/partials/body/whoami.html b/layouts/partials/body/whoami.html
index 2428dcd..83df0aa 100644
--- a/layouts/partials/body/whoami.html
+++ b/layouts/partials/body/whoami.html
@@ -3,23 +3,12 @@
 <hr class="hr-slash whoami-hr"/>
 <section class="whoami">
   <div class="whoami__image-wrapper">
-    {{ $src := "" }}
-    {{ if site.Params.useGravatar }}
-      {{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 ($.Param "email")) }}
-      <img src="{{ $src }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="whoami__image"/>
-    {{ else }}
-      {{ if $.Param "authorImageUrl" }}
-        <img data-src="{{ $.Param "authorImageUrl" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
-      {{ else if $.Param "authorImage" }}
-        <img data-src="{{ $.Param "authorImage" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
-      {{ else if (fileExists "static/images/whoami/avatar.png") }}
-        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
-      {{ else if (fileExists "static/images/whoami/avatar.svg") }}
-        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
-      {{ else }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
-      {{ end }}
-    {{ end }}
+    {{ $url := partial "partials/whoami/img-url" (dict
+      "urlSource" ($.Param "authorImageUrl")
+      "fileSource" ($.Param "authorImage")
+      "size" 150
+    )}}
+    <img data-src="{{ $url }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
   </div>
   <div class="whoami__contents">
     <div class="whoami__written-by">
diff --git a/layouts/partials/sidebar/site-bio.html b/layouts/partials/sidebar/site-bio.html
index 57fc4b5..19db697 100644
--- a/layouts/partials/sidebar/site-bio.html
+++ b/layouts/partials/sidebar/site-bio.html
@@ -3,23 +3,11 @@
   {{ if ($.Param "enableBioImage" | default true) }}
   <hr class="hr-slash bio-hr"/>
   <div class="bio__photo-wrapper">
-    {{ $src := "" }}
-    {{ if site.Params.useGravatar }}
-      {{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 ($.Param "email")) }}
-      <img src="{{ $src }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-    {{ else }}
-      {{ if $.Param "bioImageUrl" }}
-        <img data-src="{{ $.Param "bioImageUrl" }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-      {{ else if (fileExists "static/images/whoami/avatar.png") }}
-        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-      {{ else if (fileExists "static/images/whoami/avatar.jpg") }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-      {{ else if (fileExists "static/images/whoami/avatar.svg") }}
-        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-      {{ else }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
-      {{ end }}     
-    {{ end }}
+    {{ $url := partial "partials/whoami/img-url" (dict
+      "urlSource" ($.Param "bioImageUrl")
+      "size" 250
+    )}}
+    <img data-src="{{ $url }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="lazyload whoami__image"/>
   </div>
   {{ end }}
   <hr class="hr-slash bio-hr"/>
@@ -29,7 +17,7 @@
   <div class="bio__desc">
     {{ $.Param "whoami" }}
   </div>
-  
+
   {{ if $.Param "organization" }}
   <div class="bio__info">
     <div class="bio__info--icon">
@@ -50,10 +38,10 @@
 
   {{ if $.Param "email" }}
   <div class="bio__info">
-    <div class="bio__info--icon">      
+    <div class="bio__info--icon">
       {{ partial "svgs/social/email.svg" (dict "width" 20 "height" 20) }}
     </div>
-    <a href="mailto:{{ $.Param "email" }}">{{ $.Param "email" }}</a>    
+    <a href="mailto:{{ $.Param "email" }}">{{ $.Param "email" }}</a>
   </div>
   {{ end }}
 
@@ -62,7 +50,7 @@
     <div class="bio__info--icon">
       {{ partial "svgs/etc/link.svg" (dict "width" 20 "height" 20) }}
     </div>
-    <a href="{{ $.Param "link" }}" target="_blank" rel="noreferrer">{{ $.Param "link" }}</a>    
+    <a href="{{ $.Param "link" }}" target="_blank" rel="noreferrer">{{ $.Param "link" }}</a>
   </div>
   {{ end }}
 
diff --git a/layouts/partials/whoami/img-url.html b/layouts/partials/whoami/img-url.html
new file mode 100644
index 0000000..1540c65
--- /dev/null
+++ b/layouts/partials/whoami/img-url.html
@@ -0,0 +1,38 @@
+
+{{- if site.Params.useGravatar -}}
+  {{- printf "https://s.gravatar.com/avatar/%s?s=%d" (md5 .email) .size -}}
+{{- else if .urlSoure -}} {{/* If an url source is set, use it directly. */}}
+  {{- .urlSoure -}}
+{{- else -}}
+  {{- $imageResource := "" -}}
+
+  {{- if .fileSource -}}
+    {{- if (hasPrefix .fileSource "assets/") -}} {{/* If the explicit file source is within assets, get its resource */}}
+      {{- $imageResource = resources.Get (strings.TrimPrefix "assets/" .fileSource) -}}
+    {{- end -}}
+  {{- else -}} {{/* If file source is not explicitly set, try to find an avatar */}}
+    {{- if (fileExists "assets/images/whoami/avatar.png") -}}
+      {{- $imageResource = resources.Get "images/whoami/avatar.png" -}}
+    {{- else if (fileExists "assets/images/whoami/avatar.jpg") -}}
+      {{- $imageResource = resources.Get "images/whoami/avatar.jpg" -}}
+    {{- else if (fileExists "assets/images/whoami/avatar.svg") -}}
+      {{- $imageResource = resources.Get "images/whoami/avatar.svg" -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- if $imageResource -}} {{/* If we have an asset image, resize it & get its url */}}
+    {{- ($imageResource.Resize (printf "%dx" .size)).RelPermalink  -}}
+  {{- else if .fileSource -}} {{/* If a file source was specified but it did not resulted in an asset, it's a static file */}}
+    {{- .fileSource -}}
+  {{- else -}} {{/* Otherwise, lookup in static files */}}
+    {{- if (fileExists "static/images/whoami/avatar.png") -}}
+      {{- "images/whoami/avatar.png" | relURL -}}
+    {{- else if (fileExists "static/images/whoami/avatar.jpg") -}}
+      {{- "images/whoami/avatar.jpg" | relURL -}}
+    {{- else if (fileExists "static/images/whoami/avatar.svg") -}}
+      {{- "images/whoami/avatar.svg" | relURL -}}
+    {{- else -}}
+      {{- "images/whoami/avatar.jpg" | relURL -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
\ No newline at end of file