ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar

layouts/partials/components/icon.html

@@ -3,4 +3,7 @@ type: string - default: link
 text: string (optional)
 url: string
 -->
-<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>
+<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

@@ -3,8 +3,25 @@ type: string - default
 url: string
 alt: string
 -->
-
 {{ $avatar := "avatar"}}
-<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
+
+<picture>
+  <source 
+    type="image/avif"
+    src="{{ .url }}.avif"
+  />
+  <source 
+    type="image/webp"
+    src="{{ .url }}.webp"
+  />
+  <img 
+    class="{{if eq .type $avatar}} avatar {{end}}" 
+    alt="{{ .alt }}" 
+    src="{{ .url }}"
+    loading="lazy"
+    decoding="async"
+  >
+</picture>
+
 
 {{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}

layouts/partials/footer.html

@@ -20,4 +20,5 @@
       </p>
     {{ end }}
   </footer>
-{{ end }}
+{{ end }}
+<a class="totop hide" id="totop" href="#"><i class="icon-angle-up"></i></a>

layouts/partials/head.html

@@ -27,11 +27,17 @@
       <meta property="og:description" content="{{ .Site.Params.Description }}" />
     {{ end }}
   {{ end }}
-  {{- $favIcon := .Site.Params.favIcon }}
-  <link rel="icon" type="image/png" sizes="16x16"
-    href="{{ if $favIcon.small }}{{ $favIcon.small }}{{ else }}/favIcon16x16.png{{ end }}">
-  <link rel="icon" type="image/png" sizes="32x32"
-    href="{{ if $favIcon.big }}{{ $favIcon.big }}{{ else }}/favIcon32x32.png{{ end }}">
+  {{ with .Site.Params.favIcon }}
+    {{ if .ico }}
+      <link rel="icon" type="image/x-icon" href="{{ .ico }}">
+    {{ end }}
+    {{ if .small }}
+      <link rel="icon" type="image/png" sizes="16x16" href="{{ .small }}">
+    {{ end }}
+    {{ if .big }}
+      <link rel="icon" type="image/png" sizes="32x32" href="{{ .big }}">
+    {{ end }}
+  {{ end }}
   {{ with .Site.Params.tracking }}
     <script src="{{ . }}"></script>
   {{ end }}
@@ -42,4 +48,5 @@
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
   <script src="/js/theme.js"></script>
+  <script src="/js/scroll.js"></script>
 </head>

layouts/partials/header.html

@@ -12,4 +12,5 @@
       <a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
     </div>
   </header>
-{{ end }}
+{{ end }}
+<span id="progress" class="progress"></span>