Skip to content

Commit

Permalink
assetbuster: use asset buster for all resources #875
Browse files Browse the repository at this point in the history
  • Loading branch information
McShelby committed Jul 4, 2024
1 parent c90d41e commit 1b2e139
Show file tree
Hide file tree
Showing 22 changed files with 180 additions and 153 deletions.
5 changes: 3 additions & 2 deletions assets/css/auto.css
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import "{{ printf "%s-%s.css" .prefix .light }}" screen and (prefers-color-scheme: light);
@import "{{ printf "%s-%s.css" .prefix .dark }}" screen and (prefers-color-scheme: dark);
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
@import "{{ printf "%s-%s.css%s" .prefix .light $assetBusting }}" screen and (prefers-color-scheme: light);
@import "{{ printf "%s-%s.css%s" .prefix .dark $assetBusting }}" screen and (prefers-color-scheme: dark);
5 changes: 3 additions & 2 deletions assets/css/format-print.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "{{ printf "theme-%s.css" .themevariant.identifier }}";
@import "{{ printf "chroma-%s.css" .themevariant.chroma }}";
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
@import "{{ printf "theme-%s.css%s" .themevariant.identifier $assetBusting }}";
@import "{{ printf "chroma-%s.css%s" .themevariant.chroma $assetBusting }}";

#R-sidebar {
display: none;
Expand Down
2 changes: 2 additions & 0 deletions assets/css/print.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
@import "{{ printf "format-print.css%s" $assetBusting }}";
5 changes: 3 additions & 2 deletions static/css/swagger.css → assets/css/swagger.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
/* Styles to make Swagger-UI fit into our theme */

@import "fonts.css";
@import "variant-internal.css";
@import "{{ printf "fonts.css%s" $assetBusting }}";
@import "{{ printf "variables.css%s" $assetBusting }}";

body{
line-height: 1.574;
Expand Down
3 changes: 2 additions & 1 deletion assets/css/theme-relearn.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
/* this file is here for compatiblity with older installations
use theme-relearn-light instead */
@import "theme-relearn-light.css";
@import "{{ printf "theme-relearn-light.css%s" $assetBusting }}";
3 changes: 2 additions & 1 deletion static/css/variant.css → assets/css/variant.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "variant-internal.css";
{{- $assetBusting := partialCached "assetbusting.hugo" . -}}
@import "{{ printf "variables.css%s" $assetBusting }}";

html {
color-scheme: only var(--INTERNAL-BROWSER-theme);
Expand Down
2 changes: 2 additions & 0 deletions exampleSite/content/basics/migration/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ This document shows you what's new in the latest release and flags it with one o

- {{% badge style="note" title=" " %}}Change{{% /badge %}} The [`include` shortcode](shortcodes/include) is now able to resolve links to pages as well as resources or files in the file system (the old behavior).

- {{% badge style="note" title=" " %}}Change{{% /badge %}} To make the asset buster mechanism more robust, some internally used stylesheets where restructured. This generally should not affect your page in any negative way.

- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`openapi` shortcode](shortcodes/openapi) is now able to resolve links to resources as well as to files in the file system (the old behavior). You can configure to generate warnings or errors during build by setting `openapi.errorlevel` to either `warning` or `error` in your `hugo.toml` if a path can not be resolved.

---
Expand Down
80 changes: 40 additions & 40 deletions exampleSite/layouts/partials/menu-footer.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@

<span class="github-buttons"></span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
// Luma, https://en.wikipedia.org/wiki/Luma_%28video%29, SMPTE C, Rec. 709 weightings
scheme = 'dark';
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
<span class="github-buttons"></span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
{{- /* Luma, https://en.wikipedia.org/wiki/Luma_%28video%29, SMPTE C, Rec. 709 weightings */}}
scheme = 'dark';
}
return scheme;
}
return scheme;
}
function githubButtonsInit(){
if( !window.githubButtons ){
// wait for the script to load
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
function githubButtonsInit(){
if( !window.githubButtons ){
{{- /* wait for the script to load */}}
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
{{- /* we have to wait until the CSS class .default-animation has settled and the buttons have loaded to recalculate the scheme again */}}
setTimeout( githubButtonsInit, 400 );
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
// we have to wait until the CSS class .default-animation has settled and the buttons have loaded to recalculate the scheme again
setTimeout( githubButtonsInit, 400 );
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
</script>
<script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
</script>
<script async src="{{"js/github-buttons.js" | relURL}}{{ $assetBusting }}"></script>
6 changes: 6 additions & 0 deletions layouts/partials/assetbusting.hugo
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{{- $assetsBuster := "" }}
{{- $assetBusting := not site.Params.disableAssetsBusting }}
{{- if $assetBusting }}
{{- $assetsBuster = printf "?%d" now.Unix }}
{{- end }}
{{- return $assetsBuster }}
3 changes: 2 additions & 1 deletion layouts/partials/dependencies/mathjax.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
{{- $location := .location }}
{{- if eq $location "footer" }}
{{- with $page }}
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
{{- $init := "{}" }}
{{- if isset .Params "mathjaxinitialize" }}
{{- $init = .Params.mathJaxInitialize }}
Expand All @@ -27,7 +28,7 @@
{{- else if and (isset .Site.Params "custommathjaxurl") .Site.Params.customMathJaxURL }}
<script id="MathJax-script" async src="{{ .Site.Params.customMathJaxURL }}"></script>
{{- else }}
<script id="MathJax-script" async src="{{"js/mathjax/tex-mml-chtml.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script id="MathJax-script" async src="{{"js/mathjax/tex-mml-chtml.js" | relURL}}{{ $assetBusting }}"></script>
{{- end }}
{{- end }}
{{- end }}
23 changes: 12 additions & 11 deletions layouts/partials/dependencies/mermaid.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,23 @@
{{- $location := .location }}
{{- if eq $location "footer" }}
{{- with $page }}
<script src="{{"js/d3/d3-color.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-dispatch.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-drag.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-ease.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-interpolate.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-selection.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/js-yaml.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
<script src="{{"js/d3/d3-color.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-dispatch.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-drag.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-ease.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-interpolate.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-selection.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-timer.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-transition.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/d3/d3-zoom.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/js-yaml.min.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- if and (isset .Params "custommermaidurl") .Params.customMermaidURL }}
<script src="{{ .Params.customMermaidURL }}" defer></script>
{{- else if and (isset .Site.Params "custommermaidurl") .Site.Params.customMermaidURL }}
<script src="{{ .Site.Params.customMermaidURL }}" defer></script>
{{- else }}
<script src="{{"js/mermaid.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/mermaid.min.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- end }}
{{- $init := "{}" }}
{{- if isset .Params "mermaidinitialize" }}
Expand Down
9 changes: 5 additions & 4 deletions layouts/partials/dependencies/openapi.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
{{- $location := .location }}
{{- if eq $location "footer" }}
{{- with $page }}
<script src="{{"js/js-yaml.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
<script src="{{"js/js-yaml.min.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- $urlOpenapi := "" }}
{{- $relOpenapi := "" }}
{{- $cssInProject := false }}
Expand All @@ -13,8 +14,8 @@
{{- $urlOpenapi = .Site.Params.customOpenapiURL }}
{{- $relOpenapi = .Site.Params.customOpenapiURL }}
{{- else }}
{{- $urlOpenapi = printf "%s%s" ("js/swagger-ui/swagger-ui-bundle.js" | relURL) (cond .Site.Params.disableAssetsBusting "" (printf "?%d" now.Unix)) }}
{{- $relOpenapi = printf "%s%s" ("/js/swagger-ui/swagger-ui-bundle.js") (cond .Site.Params.disableAssetsBusting "" (printf "?%d" now.Unix)) }}
{{- $urlOpenapi = printf "%s%s" ("js/swagger-ui/swagger-ui-bundle.js" | relURL) $assetBusting }}
{{- $relOpenapi = printf "%s%s" ("/js/swagger-ui/swagger-ui-bundle.js") $assetBusting }}
{{- $cssInProject = true }}
{{- end }}
<script>window.noZensmooth = true;</script>
Expand All @@ -24,7 +25,7 @@
{{- $relOpenapi := replace $relOpenapi "swagger-ui-bundle" "swagger-ui" }}
{{- $relOpenapi := replace $relOpenapi ".js" ".css" }}
<script>
window.themeUseOpenapi = { css: {{ $relOpenapi }}, cssInProject: {{ $cssInProject | safeJS }}, assetsBuster: {{ cond (not .Site.Params.disableAssetsBusting) now.Unix 0 }} };
window.themeUseOpenapi = { css: {{ $relOpenapi }}, cssInProject: {{ $cssInProject | safeJS }}, assetsBuster: "{{ $assetBusting }}" };
</script>
{{- end }}
{{- end }}
8 changes: 4 additions & 4 deletions layouts/partials/favicon.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
{{- $faviconMatch := false }}
{{- $svg := dict "ext" "svg" "type" "type=\"image/svg+xml\"" }}
{{- $png := dict "ext" "png" "type" "type=\"image/png\"" }}
Expand All @@ -10,15 +10,15 @@
{{- range $faviconTypes }}
{{- if fileExists (printf "/static/images/%s.%s" $faviconName .ext) }}
{{- $faviconMatch = true }}
<link href="{{ printf "images/%s.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }}>
<link href="{{ printf "images/%s.%s" $faviconName .ext | relURL }}{{ $assetBusting }}" rel="icon" {{ .type | safeHTMLAttr }}>
{{- end }}
{{- if (fileExists (printf "/static/images/%s-light.%s" $faviconName .ext)) }}
{{- $faviconMatch = true }}
<link href="{{ printf "images/%s-light.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: light)">
<link href="{{ printf "images/%s-light.%s" $faviconName .ext | relURL }}{{ $assetBusting }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: light)">
{{- end }}
{{- if (fileExists (printf "/static/images/%s-dark.%s" $faviconName .ext)) }}
{{- $faviconMatch = true }}
<link href="{{ printf "images/%s-dark.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: dark)">
<link href="{{ printf "images/%s-dark.%s" $faviconName .ext | relURL }}{{ $assetBusting }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: dark)">
{{- end }}
{{- end }}
{{- if $faviconMatch }}
Expand Down
7 changes: 4 additions & 3 deletions layouts/partials/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
</div><!-- #R-body -->
{{- $outputFormat := partial "output-format.hugo" .Page }}
{{- partial "output-partial.hugo" (dict "base" "menu" "page" . "parameter" . "outputFormat" $outputFormat) }}
<script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- $assetBusting := partialCached "assetbusting.hugo" . }}
<script src="{{"js/clipboard.min.js" | relURL}}{{ $assetBusting }}" defer></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- partial "dependencies.html" (dict "page" . "location" "footer" "outputFormat" $outputFormat) }}
<script src="{{"js/theme.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/theme.js" | relURL}}{{ $assetBusting }}" defer></script>
{{- partial "custom-footer.html" . }}
</body>
</html>
16 changes: 14 additions & 2 deletions layouts/partials/get-theme-variants.hugo
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{{- $page := . }}
{{- $autores := resources.Get "css/auto.css" }}
{{- $printres := resources.Get "css/format-print.css" }}
{{- $nonautothemevariants := slice }}
{{- /* we need relearn-light in every case for the print styles */}}
{{- $refthemevariants := slice | append "relearn-light" }}
Expand Down Expand Up @@ -108,7 +107,20 @@ Chroma auto run:
{{- end }}
{{- end }}

{{- $cssres := $printres | resources.ExecuteAsTemplate "css/format-print.css" (dict "themevariant" (index (collections.Where $themevariants "identifier" "relearn-light") 0)) }}
{{- $swaggerres := resources.Get "css/swagger.css" }}
{{- $cssres := $swaggerres | resources.ExecuteAsTemplate "css/swagger.css" (dict) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->

{{- $variantres := resources.Get "css/variant.css" }}
{{- $cssres := $variantres | resources.ExecuteAsTemplate "css/variant.css" (dict) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->

{{- $printres := resources.Get "css/print.css" }}
{{- $cssres := $printres | resources.ExecuteAsTemplate "css/print.css" (dict) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->

{{- $formatprintres := resources.Get "css/format-print.css" }}
{{- $cssres := $formatprintres | resources.ExecuteAsTemplate "css/format-print.css" (dict "themevariant" (index (collections.Where $themevariants "identifier" "relearn-light") 0)) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->

{{- return collections.Where $themevariants "config" true }}
Expand Down
Loading

0 comments on commit 1b2e139

Please sign in to comment.