CHANGE image handling, ADD partials to reuse structure, REFACTOR

layouts/partials/components/button.html

@@ -1,7 +1,6 @@
-{{ $outlined := "outlined"}}
-<a class="{{if eq .type $outlined}} button-outlined {{else}} button-filled {{end}}" href="{{ .url }}">
+<a id="{{ .id }}" class='button {{ .type | default "filled" }}' href="{{ .url }}">
   {{ with .icon }}
     <i class="icon-{{ . }}"></i>
   {{ end }}
   {{ .text }}
-</a>
+</a>

layouts/partials/components/icon.html

@@ -0,0 +1,9 @@
+<!--
+type: string - default: link
+text: string (optional)
+url: string
+-->
+<a href="{{ .url }}" rel="{{ .rel }}">
+  <i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>
+  {{ if .text }} {{ .text }}{{ end }}
+</a>

layouts/partials/components/image.html

@@ -0,0 +1,90 @@
+<!--
+id: string
+style: string - default empty
+url: string
+alt: string
+caption: string
+width: int
+height: int
+-->
+{{ $sizes := slice "320" "640" "960" "1280" }}
+{{ $mediaWidthControl := "(max-width: 360px) 320px, (max-width: 680px) 640px, (max-width: 1100px) 960px, 1280px" }}
+
+{{ $id := .id }}
+{{ $style := .style }}
+{{ $alt := .alt }}
+{{ $caption := .caption }}
+{{ $width := .width }}
+{{ $height := .height }}
+
+{{ $img := .Page.Resources.GetMatch .url }}
+{{ if not $img }}
+  {{ $img = resources.Get .url }}
+  {{ if not $img }}
+    {{ $img := resources.GetRemote .url | resources.Copy (path.Join "images" (path.Base .url )) }}
+  {{ end }}
+{{ end }}
+
+{{ with $img }}
+  {{ $url := .RelPermalink }}
+  {{ $type := .MediaType.SubType }}
+  {{ $ext := path.Ext $url }}
+  {{ $name := path.Base (replace $url $ext "") }}
+  {{ $dir := path.Dir $url }}
+
+  {{ if eq $type "svg" }}
+    <img 
+      id="{{ $id }}"
+      class="{{ $style }}" 
+      src="{{ $url }}"
+      alt="{{ $alt }}" 
+      loading="lazy"
+      decoding="async"
+    >
+  {{ else }}
+  <picture>
+    <source 
+      type="image/avif"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
+        {{ end }}
+        {{ $url }}.avif {{ $width | default .Width }}w
+      "
+      sizes="{{ $mediaWidthControl }}"
+    />
+    <source 
+      type="image/webp"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
+        {{ end }}
+        {{ $url }}.webp {{ $width | default .Width }}w
+      "
+      sizes="{{ $mediaWidthControl }}"
+    />
+    <img 
+      id="{{ $id }}"
+      class="{{ $style }}" 
+      width="{{ $width | default .Width }}" 
+      height="{{ $height | default .Height }}"
+      srcset="
+        {{ range $i, $size := $sizes }}
+          {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w, 
+        {{ end }}
+        {{ $url }} {{ $width | default .Width }}w
+      "
+      src="{{ $url }}"
+      alt="{{ $alt }}" 
+      loading="lazy"
+      decoding="async"
+    >
+  </picture>
+  {{ end }}
+  {{ if $caption }}
+    <p class="caption">{{ $caption }}</p>
+  {{ end }}
+{{ end }}
+
+
+{{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}

layouts/partials/components/title.html

@@ -0,0 +1,4 @@
+<div class="title">
+  <h1 class="content-title">{{ . }}</h1>
+  <div class="divider"></div>
+</div>