WIP Preload page thumbnail

twbs · Mar 8, 2024 · 3f80dc4 · 3f80dc4
1 parent 4b0c373
commit 3f80dc4
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git 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/[email protected] 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
@@ -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
@@ -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/[email protected] 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
@@ -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 }}">