variant: introduce option for filename modifier #679 #734

This commit is contained in:
Sören Weber 2023-12-03 15:22:32 +01:00
parent 2eadb31269
commit 8cca74e3e6
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
7 changed files with 32 additions and 15 deletions

View file

@ -1,2 +1,2 @@
@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);
@import "{{ printf "%s-%s%s.css" .prefix .light .suffix }}" screen and (prefers-color-scheme: light);
@import "{{ printf "%s-%s%s.css" .prefix .dark .suffix }}" screen and (prefers-color-scheme: dark);

View file

@ -1,5 +1,5 @@
@import "{{ printf "chroma-%s.css" .chroma }}";
@import "{{ printf "theme-%s.css" .identifier }}";
@import "{{ printf "theme-%s%s.css" .themevariant.identifier .mod }}";
@import "{{ printf "chroma-%s.css" .themevariant.chroma }}";
#R-sidebar {
display: none;

View file

@ -75,6 +75,16 @@ themeVariant = [
{ identifier = "red" }
]
# Filename suffix for variant files
# Default: not set
# The theme modifies the variant stylesheets during build and tries to store
# them with the same file name. In certain installations it was observed, that
# Hugo could not overwrite these files due to permission issues. If you
# experience this, you can set this option to eg. ".gen". This will be used
# as a suffix for these generated files, causing them be newly created instead
# of overwriting existing ones.
themeVariantModifier = ""
#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# General
# These options are defining general, non visual behavior.

View file

@ -1,4 +1,5 @@
{{- $page := . }}
{{- $mod := $page.Site.Params.themeVariantModifier | default "" }}
{{- $autores := resources.Get "css/auto.css" }}
{{- $printres := resources.Get "css/format-print.css" }}
@ -48,7 +49,7 @@ Non-auto run
{{- range $tempthemevariant := $tempthemevariants }}
{{- $themevariant := $tempthemevariant }}
{{- if not (collections.IsSet $themevariant "auto") }}
{{- $chroma := partial "get-theme-chroma.html" $themevariant.identifier }}
{{- $chroma := partial "get-theme-chroma.html" (dict "identifier" $themevariant.identifier "mod" $mod)}}
{{- $themevariant = collections.Merge $themevariant (dict "chroma" $chroma) }}
{{- end }}
{{- $themevariants = $themevariants | append $themevariant }}
@ -93,24 +94,25 @@ Auto run
{{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | first 2)) }}
{{- $light := index $themevariant.auto 0 }};
{{- $dark := index $themevariant.auto 1 }};
{{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/theme-%s.css" $themevariant.identifier) (dict "prefix" "theme" "light" $light "dark" $dark) }}
{{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/theme-%s%s.css" $themevariant.identifier $mod) (dict "prefix" "theme" "suffix" $mod "light" $light "dark" $dark) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- $themevariant = collections.Merge $themevariant (dict "chroma" $themevariant.identifier) }}
{{- $light = (index (collections.Where $tempthemevariants "identifier" $light) 0).chroma }}
{{- $dark = (index (collections.Where $tempthemevariants "identifier" $dark) 0).chroma }}
{{- $cssres = $autores | resources.ExecuteAsTemplate (printf "css/chroma-%s.css" $themevariant.chroma) (dict "prefix" "chroma" "light" $light "dark" $dark) }}
{{- $cssres = $autores | resources.ExecuteAsTemplate (printf "css/chroma-%s.css" $themevariant.chroma) (dict "prefix" "chroma" "suffix" "" "light" $light "dark" $dark) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- end }}
{{- $themevariants = $themevariants | append $themevariant }}
{{- end }}
{{- $cssres := $printres | resources.ExecuteAsTemplate "css/format-print.css" (index (collections.Where $themevariants "identifier" "relearn-light") 0) }}
{{- $cssres := $printres | resources.ExecuteAsTemplate "css/format-print.css" (dict "themevariant" (index (collections.Where $themevariants "identifier" "relearn-light") 0) "mod" $mod) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- return collections.Where $themevariants "config" true }}
{{ define "partials/get-theme-chroma.html" }}
{{- $identifier := . }}
{{- $identifier := .identifier }}
{{- $mod := .mod }}
{{- $themecontent := "" }}
{{- with resources.Get (printf "css/theme-%s.css" $identifier) }}
{{- $themecontent = .Content}}
@ -121,6 +123,7 @@ Auto run
{{- errorf "\"theme-%s.css\": file not found neither in \"static/css\" and \"assets/css\"" $identifier }}
{{- end }}
{{- end }}
{{- replaceRE (printf `([ \t]*@import\s+[^$]*?theme-[^.]*?)(?:%s)?(\.css)` (replace $mod "." "\\.")) (printf "${1}%s${2}" $mod) $themecontent }}
{{- $chroma := "" }}
{{- range findRESubmatch `[ \t]*--CODE-theme\s*:\s*([^;]*?)\s*;` $themecontent }}
{{- $chroma = index . 1 }}
@ -130,16 +133,16 @@ Auto run
{{- warnf "\"theme-%s.css\": DEPRECATED use of @import for chroma stylesheet, instead use '--CODE-theme: %s;'" $identifier $chroma }}
{{- $themecontent = replaceRE `[ \t]*@import\s+[^$]*?chroma-[^.]*?\.css.*?\n` "" $themecontent }}
{{- else }}
{{- range findRESubmatch `[ \t]*@import\s+[^$]*?theme-([^.]*?)\.css` $themecontent }}
{{- range findRESubmatch (printf `[ \t]*@import\s+[^$]*?theme-([^.]*?)%s\.css` (replace $mod "." "\\.")) $themecontent }}
{{- $subidentifier := index . 1 }}
{{- $chroma = partial "get-theme-chroma.html" $subidentifier }}
{{- $chroma = partial "get-theme-chroma.html" (dict "identifier" $subidentifier "mod" $mod) }}
{{- else }}
{{- $chroma = "relearn-light" }}
{{- end }}
{{- end }}
{{- $themecontent = replaceRE `(:root\s*\{[ \t]*)(\s*)` (printf "${1}${2}--CODE-theme: %s;${2}" $chroma) $themecontent }}
{{- end }}
{{- $cssres := $themecontent | resources.FromString (printf "css/theme-%s.css" $identifier) }}
{{- $cssres := $themecontent | resources.FromString (printf "css/theme-%s%s.css" $identifier $mod) }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- return $chroma }}
{{- end }}

View file

@ -14,8 +14,9 @@
<link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"></noscript>
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- $themevariants := partialCached "get-theme-variants.hugo" . }}
{{- $themevariantmodifier := .Site.Params.themeVariantModifier | default "" }}
{{- with index $themevariants 0 }}
<link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-style">
<link href="{{(printf "css/theme-%s%s.css" .identifier $themevariantmodifier) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-style">
<link href="{{(printf "css/chroma-%s.css" .chroma) | safeHTML | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="R-variant-chroma-style">
{{- end }}
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
@ -42,6 +43,7 @@
window.relearn = window.relearn || {};
window.relearn.baseUriFull='{{ trim .Site.BaseURL "/" | safeJS }}/';
{{ "// variant stuff" | safeJS }}
window.relearn.themeVariantModifier='{{ $themevariantmodifier }}';
{{- $quotedthemevariants := slice }}
{{- range $themevariants }}
{{- $quotedthemevariants = $quotedthemevariants | append (printf "'%s'" .identifier) }}

View file

@ -395,9 +395,10 @@ function initOpenapi( update, attrs ){
}
function renderOpenAPI(oc) {
var mod = window.relearn.themeVariantModifier;
var buster = window.themeUseOpenapi.assetsBuster ? '?' + window.themeUseOpenapi.assetsBuster : '';
var print = isPrint || attrs.isPrintPreview ? "PRINT-" : "";
var theme = print ? `${baseUri}/css/theme-relearn-light.css` : document.querySelector( '#R-variant-style' ).attributes.href.value
var theme = print ? `${baseUri}/css/theme-relearn-light${mod}.css${buster}` : document.querySelector( '#R-variant-style' ).attributes.href.value
var swagger_theme = variants.getColorValue( print + 'OPENAPI-theme' );
var swagger_code_theme = variants.getColorValue( print + 'OPENAPI-CODE-theme' );

View file

@ -89,7 +89,8 @@ var variants = {
},
generateVariantPath: function( variant, old_path ){
var new_path = old_path.replace( /^(.*\/theme-).*?(\.css.*)$/, '$1' + variant + '$2' );
var mod = window.relearn.themeVariantModifier.replace( '.', '\\.' );
var new_path = old_path.replace( new RegExp(`^(.*\/theme-).*?(${mod}\.css.*)$`), '$1' + variant + '$2' );
return new_path;
},