variant: introduce option for filename modifier #679 #734

assets/css/auto.css

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

assets/css/format-print.css

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

exampleSite/config/_default/params.toml

@@ -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.

layouts/partials/get-theme-variants.hugo

@@ -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 }}

layouts/partials/stylesheet.html

@@ -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) }}

static/js/theme.js

@@ -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' );
 

static/js/variant.js

@@ -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;
 	},