Add image processing

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/common.scss

@@ -16,16 +16,6 @@ a:hover {
   color: var(--text-800);
 }
 
-sup,
-sub {
-  color: var(--text-600);
-}
-
-sup:hover,
-sub:hover {
-  color: var(--text-800);
-}
-
 h1,
 h2,
 h3,
@@ -64,3 +54,11 @@ body {
     flex: 1;
   }
 }
+
+p {
+  margin: 1.5rem 0 1.5rem 0;
+}
+
+li:not(:last-child) {
+  margin-bottom: 0.5rem;
+}

assets/sass/hero.scss

@@ -1,7 +1,7 @@
 .hero {
   max-width: $width-content;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 2rem 2rem 0 2rem;
 
   .title {
     margin: 0;

layouts/_default/_markup/render-image.html

@@ -1,7 +1,7 @@
-{{ partial "components/image/index.html" (dict
+{{ partial "components/image/index.html" (dict "page" .Page "image" (dict
   "src" .Destination
   "caption" .Text
   "alt" .Title
-  )
+  ))
 }}
 {{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sub.html

@@ -0,0 +1,2 @@
+<sub>{{ .Get 0 | markdownify }}</sub>
+{{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sup.html

@@ -0,0 +1,2 @@
+<sup>{{ .Get 0 | markdownify }}</sup>
+{{- /* chomp trailing newline */ -}}

layouts/partials/components/hero/index.html

@@ -5,5 +5,5 @@
     ·
     <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
   </div>
-  {{ partial "components/image/index.html" .Params.hero }}
+  {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
 </section>

layouts/partials/components/image/index.html

@@ -1,5 +1,39 @@
-{{ $imageData := partial "components/image/reflect.html" . }}
-{{- with $imageData.image -}}
+{{- $page := .page -}}
+{{- $image := .image -}}
+
+{{- $src := $image -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $image -}}
+  {{- $src = $image.src | default "" -}}
+  {{- $caption = $image.caption | default "" -}}
+  {{- $title = $image.title | default $caption | default "" -}}
+  {{- $alt = $image.alt | default $title | default "" -}}
+{{- end -}}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+
+  {{- if $isRemote -}}
+    {{- $remote := resources.GetRemote $src -}}
+    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+  {{- else -}}
+    {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $image -}}
+  {{ $full := . | images.Filter (images.Process "webp q90") }}
+
+  {{ $thumb := . }}
+  {{- if gt .Width 2000 -}}
+    {{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
+  {{- else -}}
+    {{- $thumb = $full | images.Filter (images.Process "webp q75") -}}
+  {{- end -}}
+
   <figure class="captioned-image lightbox">
     <a
       href="{{- .RelPermalink -}}"
@@ -9,16 +43,16 @@
       class="pswp-image"
     >
       <img
-        src="{{- .RelPermalink -}}"
+        src="{{- $thumb.RelPermalink -}}"
         width="{{- .Width -}}"
         height="{{- .Height -}}"
         loading="lazy"
-        {{ with $imageData.title }}title="{{- . -}}"{{ end }}
-        {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+        {{ with $title }}title="{{- . -}}"{{ end }}
+        {{ with $alt }}alt="{{- . -}}"{{ end }}
       />
     </a>
-    {{ with $imageData.caption }}
-      <figcaption>{{ . }}</figcaption>
+    {{ with $caption }}
+      <figcaption>{{ . | safeHTML }}</figcaption>
     {{ end }}
   </figure>
 {{- end -}}

layouts/partials/components/image/reflect.html

@@ -1,31 +0,0 @@
-{{- $input := . -}}
-
-{{- $src := $input -}}
-{{- $caption := "" -}}
-{{- $title := "" -}}
-{{- $alt := "" -}}
-
-{{- if reflect.IsMap $input -}}
-  {{- $src = $input.src | default "" -}}
-  {{- $caption = $input.caption | default "" -}}
-  {{- $title = $input.title | default $caption | default "" -}}
-  {{- $alt = $input.alt | default $title | default "" -}}
-{{- end -}}
-
-{{ $result := dict "image" nil "caption" $caption "title" $title "alt" $alt }}
-
-{{- if $src -}}
-  {{- $isRemote := strings.HasPrefix $src "http" -}}
-  {{- $image := "" -}}
-
-  {{- if $isRemote -}}
-    {{- $remote := resources.GetRemote $src -}}
-    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
-  {{- else -}}
-    {{- $image = resources.Get $src -}}
-  {{- end -}}
-
-  {{- $result = (dict "image" $image "caption" $caption "title" $title "alt" $alt) -}}
-{{- end -}}
-
-{{- return $result -}}