From 3f80dc449abff3bad688fa01dc46114c3f2bc348 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Fri, 8 Mar 2024 18:01:44 +0200
Subject: [PATCH] WIP Preload page thumbnail

---
 site/content/docs/5.3/getting-started/parcel.md  | 2 +-
 site/content/docs/5.3/getting-started/vite.md    | 2 +-
 site/content/docs/5.3/getting-started/webpack.md | 2 +-
 site/layouts/partials/header.html                | 8 ++++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/getting-started/parcel.md b/site/content/docs/5.3/getting-started/parcel.md
index a987b4587be1..c781fef4ee10 100644
--- a/site/content/docs/5.3/getting-started/parcel.md
+++ b/site/content/docs/5.3/getting-started/parcel.md
@@ -4,7 +4,7 @@ title: Bootstrap and Parcel
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
 group: getting-started
 toc: true
-thumbnail: guides/bootstrap-parcel@2x.png
+thumbnail: guides/bootstrap-parcel.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
diff --git a/site/content/docs/5.3/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index 653d7a9c5a3b..bd5dd637c2ea 100644
--- a/site/content/docs/5.3/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -4,7 +4,7 @@ title: Bootstrap and Vite
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
 group: getting-started
 toc: true
-thumbnail: guides/bootstrap-vite@2x.png
+thumbnail: guides/bootstrap-vite.png
 added:
   show_badge: false
   version: "5.2"
diff --git a/site/content/docs/5.3/getting-started/webpack.md b/site/content/docs/5.3/getting-started/webpack.md
index 39adaf61a255..a4eeedc3f3a9 100644
--- a/site/content/docs/5.3/getting-started/webpack.md
+++ b/site/content/docs/5.3/getting-started/webpack.md
@@ -4,7 +4,7 @@ title: Bootstrap and Webpack
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
 group: getting-started
 toc: true
-thumbnail: guides/bootstrap-webpack@2x.png
+thumbnail: guides/bootstrap-webpack.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index 266c03027df9..231994d9bebf 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -11,6 +11,14 @@
 <link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
 {{- end }}
 
+{{ with .Page.Params.thumbnail -}}
+{{- $imgExt := path.Ext $.Page.Params.thumbnail -}}
+{{- $imgFilename := printf "%s%s" (path.BaseName $.Page.Params.thumbnail) $imgExt -}}
+{{- $imgFilename2x := printf "%s@2x%s" (path.BaseName $.Page.Params.thumbnail) $imgExt -}}
+{{- $imgUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/guides" -}}
+<link rel="preload" href="{{ urls.JoinPath $imgUrl $imgFilename }}" imagesrcset="{{ urls.JoinPath $imgUrl $imgFilename }}, {{ urls.JoinPath $imgUrl $imgFilename2x }} 2x" as="image">
+{{- end }}
+
 <title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
 
 <link rel="canonical" href="{{ .Permalink }}">