Use a responsive image for bootstrap-logo-shadow.png (#351)

* Use a responsive image for bootstrap-logo-shadow.png

* Ignore `imagesrcset` is not recognized in `link rel=preload` vnu-jar error for now; should be removed later when fixed in vnu-jar

build/vnu-jar.js

@@ -2,8 +2,7 @@
 
 /*!
  * Script to run vnu-jar if Java is available.
- * Copyright 2017-2022 The Bootstrap Authors
- * Copyright 2017-2022 Twitter, Inc.
+ * Copyright 2017-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
@@ -26,7 +25,9 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     // TODO report the issue upstream in Hugo
     'Duplicate ID.*',
     'The first occurrence of ID.*',
-    'Self-closing tag syntax in text/html documents is widely discouraged.*'
+    'Self-closing tag syntax in text/html documents is widely discouraged.*',
+    // TODO remove this when fixed in vnu-jar
+    'Attribute “imagesrcset” not allowed on element “link” at this point.*'
   ].join('|')
 
   const args = [

src/layouts/partials/head.html

@@ -3,7 +3,7 @@
 
 <link rel="preconnect" href="https://github.com">
 <link rel="preconnect" href="https://avatars.githubusercontent.com">
-<link rel="preload" href="/assets/brand/bootstrap-logo-shadow.png" as="image">
+<link rel="preload" href="/assets/brand/bootstrap-logo-shadow.png" imagesrcset="/assets/brand/bootstrap-logo-shadow.png, /assets/brand/[email protected] 2x" as="image">
 
 <link rel="profile" href="https://gmpg.org/xfn/11">
 <link rel="canonical" href="{{ .Permalink }}">

src/layouts/partials/hero.html

@@ -1,7 +1,10 @@
 <div class="masthead py-5">
   <div class="mb-4 text-center text-lg-start">
     <a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
-      <img src="/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="bd-booticon d-block mx-auto mb-3 mx-lg-0">
+      <img srcset="/assets/brand/bootstrap-logo-shadow.png, /assets/brand/[email protected] 2x"
+           src="/assets/brand/bootstrap-logo-shadow.png"
+           width="200" height="165" alt="Bootstrap"
+           class="bd-booticon d-block mx-auto mb-3 mx-lg-0">
     </a>
     <div class="ms-3 ms-lg-0">
       <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1>