js/css: use fingerprinting to avoid using stale cached copies

When the JavaScript or CSS files are updated, caching rules often
prevent the new versions from being picked up, whether due to
browser-side caching or server-side caching.

Let's avoid this by fingerprinting the files as described in
https://gohugo.io/functions/resources/fingerprint/. We are technically
not even interested in the cryptographic aspect of this, the only
benefit we are looking for is that the file _names_ change in a
predictable manner based on the file _contents_ (similar to how Git
objects work...).

While we are technically not interested in the cryptographic aspect, we
can just as well benefit from it by adding the corresponding `integrity`
attribute. However, we only do that if the base URL indicates that this
will be accessed via HTTPS; Otherwise loading the pages locally via
`file:///` would no longer work for those resources (see
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
for more information about this issue).

Inspired-by: Toon Claes <[email protected]>
Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

layouts/_default/baseof.html

@@ -64,8 +64,8 @@ <h1>Redirecting&hellip;</h1>
 
   <link href="{{ relURL "favicon.ico" }}" rel='shortcut icon' type='image/x-icon'>
 
-  {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify }}
-  <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+  {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify | fingerprint }}
+  <link rel="stylesheet" href="{{ $style.RelPermalink }}"{{ if (hasPrefix .Site.BaseURL "https://") }} integrity="{{ $style.Data.Integrity }}"{{ end }}>
   <!--[if (gte IE 6)&(lte IE 8)]>
   <script src="{{ relURL "js/selectivizr-min.js" }}"></script>
   <![endif]-->

layouts/partials/footer.html

@@ -18,5 +18,5 @@
 <script src="{{ relURL "js/modernizr.js" }}"></script>
 <script src="{{ relURL "js/modernize.js" }}"></script>
 {{ if eq (.Scratch.Get "section") "search" }}<script src="{{ relURL "pagefind/pagefind-ui.js" }}"></script>{{ end }}
-{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
-<script src="{{ $js.RelPermalink }}"></script>
+{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify | fingerprint }}
+<script src="{{ $js.RelPermalink }}"{{ if (hasPrefix .Site.BaseURL "https://") }} integrity="{{ $js.Data.Integrity }}"{{ end }}></script>

tests/git-scm.spec.js

@@ -254,7 +254,7 @@ test('404', async ({ page }) => {
   await expect(page.locator('.inner h1')).toHaveText(`That page doesn't exist.`)
 
   // the 404 page should be styled
-  await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute('href', /application(\.min)?\.css$/)
+  await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute('href', /application(\.min)?(\.[0-9a-f]+)?\.css$/)
 
   // the search box is shown
   await expect(page.locator('#search-text')).toBeVisible()