Added progressive loading of background images with crossfade and blur.

assets/css/custom.css

@@ -45,6 +45,16 @@
   height: 100%;
   object-fit: cover;
   z-index: 0;
+  filter: blur(10px) saturate(0.65);
+}
+
+.background-full {
+  opacity: 0;
+  transition: opacity 2s ease, filter 2s ease;
+}
+
+.background-full.loaded {
+  opacity: 1;
   filter: blur(4px) saturate(0.65);
 }
 

content/_index.md

@@ -2,7 +2,7 @@
 description: "KarstTech LLC is a company which provides Technical and Scientific Consulting and Data Science services."
 ---
 
-{{< figure src="img/karsttech_logo_vert.png" >}}
+![KarstTech Logo](img/karsttech_logo_vert.png)
 
 
 {{< lead >}}

content/personal-blog/matrix-synapse-docker-compose/index.md

@@ -13,7 +13,7 @@ showFeature = false
 <!--more-->
 
 <div style="width:100%; max-width:640px; aspect-ratio:16/9; position:relative; overflow:hidden;">
-  <iframe src="/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html" style="border:none; width:200%; height:200%; transform:scale(0.5); transform-origin:0 0;"></iframe>
+  <iframe src="/articles-special-content/matrix-synapse-docker-compose/matrix-synapse-thumbnail.html" style="border:none; width:200%; height:200%; transform:scale(0.5); transform-origin:0 0;"></iframe>
 </div>
 
 Synapse is a great implementation of the [matrix] federated chat platform, but the [official documentation](https://matrix-org.github.io/synapse/latest/setup/installation.html) expects you to run several manual initialization steps before your server is ready to use. This gets tedious when you're just want to use a docker compose file to plug in your info and get going, especially if you are using tools like Portainer to administrate your containers.

layouts/_default/_markup/render-image.html

@@ -0,0 +1,32 @@
+{{ $url := urls.Parse .Destination }}
+{{ $altText := .Text }}
+{{ $caption := .Title }}
+{{ $class := "mx-auto my-0 rounded-md" }}
+
+{{ $file := $url.Path }}
+{{ $img := .Page.Resources.GetMatch $file }}
+{{- if and (not $img) .Page.File }}
+  {{ $path := path.Join .Page.File.Dir $file }}
+  {{ $img = resources.Get $path }}
+{{ end -}}
+
+{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
+{{- $params := $url.Query -}}
+{{- $x2Param := $params.Get "2x" -}}
+{{- $x2 := false -}}
+{{- if eq $x2Param "true" -}}
+  {{- $x2 = true -}}
+{{- end -}}
+
+<figure>
+  {{- with $img -}}
+    {{ $lazy := $.Page.Site.Params.enableImageLazyLoading | default true }}
+    {{ $webp := $.Page.Site.Params.enableImageWebp | default true }}
+    {{ $lqip := true }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2 "lazy" $lazy "webp" $webp "lqip" $lqip) }}
+  {{- else -}}
+    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}" />
+  {{- end -}}
+  {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+</figure>
+

layouts/partials/background-images.html

@@ -1,15 +1,35 @@
 {{ $images := slice }}
 {{ range readDir "static/backgrounds" }}
-  {{ if in .Name ".webp" }}
+  {{ if or (in .Name ".webp") (in .Name ".jpg") }}
     {{ $images = $images | append .Name }}
   {{ end }}
 {{ end }}
 
 <div class="background-container">
-  <img id="background-image" alt="Background" class="background-image">
+  <img id="background-thumb" alt="Background" class="background-image">
+  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
   <script>
     const images = {{ $images }};
     const randomImage = images[Math.floor(Math.random() * images.length)];
-    document.getElementById('background-image').src = `/backgrounds/${randomImage}`;
+    const thumbImg = document.getElementById('background-thumb');
+    const fullImg = document.getElementById('background-full');
+    const thumbPath = `/backgrounds/thumbs/${randomImage}`;
+    const fullPath = `/backgrounds/${randomImage}`;
+    
+    thumbImg.src = thumbPath;
+    
+    setTimeout(() => {
+      const preloadImg = new Image();
+      preloadImg.onload = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+        setTimeout(() => thumbImg.remove(), 2000);
+      };
+      preloadImg.onerror = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+      };
+      preloadImg.src = fullPath;
+    }, 800);
   </script>
 </div> 

layouts/partials/home/page.html

@@ -1,5 +1,29 @@
 <div class="background-container">
-  <img src="/backgrounds/Apophysis_071008-64.webp" alt="Background" class="background-image">
+  <img id="background-thumb" alt="Background" class="background-image">
+  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
+  <script>
+    const thumbImg = document.getElementById('background-thumb');
+    const fullImg = document.getElementById('background-full');
+    const imageName = 'Apophysis_071008-64.webp';
+    const thumbPath = `/backgrounds/thumbs/${imageName}`;
+    const fullPath = `/backgrounds/${imageName}`;
+    
+    thumbImg.src = thumbPath;
+    
+    setTimeout(() => {
+      const preloadImg = new Image();
+      preloadImg.onload = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+        setTimeout(() => thumbImg.remove(), 2000);
+      };
+      preloadImg.onerror = () => {
+        fullImg.src = fullPath;
+        fullImg.classList.add('loaded');
+      };
+      preloadImg.src = fullPath;
+    }, 800);
+  </script>
 </div>
 <article class="prose max-w-full dark:prose-invert glass">
   {{ with .Title }}

layouts/partials/logo.html

@@ -0,0 +1,40 @@
+{{- if .Site.Params.header.logo }}
+  {{- $logo := resources.Get .Site.Params.header.logo }}
+  {{- $logo_dark := resources.Get .Site.Params.header.logoDark }}
+  {{- if $logo }}
+    {{- $logoResized := $logo.Resize (printf "%dx" (div $logo.Width 2)) }}
+    {{- $logoDarkResized := "" }}
+    {{- if $logo_dark }}
+      {{- $logoDarkResized = $logo_dark.Resize (printf "%dx" (div $logo_dark.Width 2)) }}
+    {{- end }}
+    <a href="{{ "" | relLangURL }}" class="mr-2">
+      <!-- prettier-ignore-attribute -->
+      <img
+        src="{{ $logoResized.RelPermalink }}"
+        width="{{ $logoResized.Width }}"
+        height="{{ $logoResized.Height }}"
+        class="max-h-[10rem] max-w-[10rem] object-scale-down object-left
+        {{ if $logo_dark }}hidden dark:flex{{ end }}"
+        alt="{{ .Site.Title }}"
+      />
+      {{- if $logo_dark }}
+        <img
+          src="{{ $logoDarkResized.RelPermalink }}"
+          width="{{ $logoDarkResized.Width }}"
+          height="{{ $logoDarkResized.Height }}"
+          class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
+          alt="{{ .Site.Title }}"
+        />
+      {{- end }}
+    </a>
+  {{- end }}
+{{- end }}
+{{- if .Site.Params.header.showTitle | default true }}
+  <a
+    class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
+    rel="me"
+    href="{{ "" | relLangURL }}"
+    >{{ .Site.Title | markdownify | emojify }}</a
+  >
+{{- end }}
+