theme: fix flash of non-default variant, part II #757

adapt the variant generator to previous changes;
interestingly, the new mechanism caused the variant generator
to be greatly simplified; something, I didn't expect beforehand

assets/css/theme-blue.css

@@ -1,4 +1,5 @@
 :root {
+  /* blue */
   --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */
   --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */
   --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */

assets/css/theme-green.css

@@ -1,4 +1,5 @@
 :root {
+  /* green */
   --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */
   --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */
   --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */

assets/css/theme-learn.css

@@ -1,4 +1,5 @@
 :root {
+  /* learn */
   --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */
   --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */
   --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */

assets/css/theme-neon.css

@@ -1,4 +1,5 @@
 :root {
+  /* neon */
   --PRIMARY-color: rgba(243, 0, 178, 1); /* brand primary color */
   --SECONDARY-color: rgb(50, 189, 243, 1); /* brand secondary color */
   --ACCENT-color: rgba(255, 255, 0, 1); /* brand accent color, used for search highlights */

assets/css/theme-red.css

@@ -1,4 +1,5 @@
 :root {
+  /* red */
   --MAIN-TEXT-color: rgba(50, 50, 50, 1); /* Color of text by default */
   --MAIN-TITLES-TEXT-color: rgba(94, 94, 94, 1); /* Color of titles h2-h3-h4-h5-h6 */
   --MAIN-TITLES-H1-TEXT-color: rgba(34, 34, 34, 1); /* text color of h1 titles */

assets/css/theme-relearn-bright.css

@@ -1,4 +1,5 @@
 :root {
+  /* relearn-bright */
   --PRIMARY-color: rgba(131, 201, 50, 1); /* brand primary color */
   --SECONDARY-color: rgba(99, 128, 208, 1); /* brand secondary color */
   --ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */

assets/css/theme-relearn-dark.css

@@ -1,4 +1,5 @@
 :root {
+  /* relearn-dark */
   --PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */
   --SECONDARY-color: rgba(108, 140, 227, 1); /* brand secondary color */
   --ACCENT-color: rgb(255, 102, 78, 1); /* brand accent color, used for search highlights */

assets/css/theme-relearn-light.css

@@ -1,4 +1,5 @@
 :root {
+  /* relearn-light */
   --PRIMARY-color: rgba(125, 201, 3, 1); /* brand primary color */
   --SECONDARY-color: rgba(72, 106, 201, 1); /* brand secondary color */
   --ACCENT-color: rgb(255, 102, 78); /* brand accent color, used for search highlights */

assets/css/theme-zen-dark.css

@@ -1,4 +1,5 @@
 :root {
+  /* zen-dark */
   --PRIMARY-color: rgba(47, 129, 235, 1); /* brand primary color */
   --SECONDARY-color: rgba(47, 129, 235, 1); /* brand secondary color */
 

assets/css/theme-zen-light.css

@@ -1,4 +1,5 @@
 :root {
+  /* zen-light */
   --PRIMARY-color: rgba(26, 115, 232, 1); /* brand primary color */
   --SECONDARY-color: rgba(26, 115, 232, 1); /* brand secondary color */
 

exampleSite/config/_default/hugo.toml

@@ -246,3 +246,10 @@ summaryLength = 10
   siteparam.test.text = 'A **nested** option <b>with</b> formatting'
   # Extension to the image effects only for the docs.
   imageEffects.bg-white = true
+  # This is for support of the variantgenerator in the exampleSite, you don't need this!
+  variantgenerator.force = true
+
+[params.relearn.dependencies]
+  # This is for support of the variantgenerator in the exampleSite, you don't need this!
+  [params.relearn.dependencies.variantgenerator]
+    name = 'VariantGenerator'

exampleSite/config/_default/params.toml

@@ -80,7 +80,7 @@ themeVariant = [
 # If set to `true`, further theme asset files besides the generated HTML files
 # will be minified during build. If no value is set, the theme will avoid
 # minification if you have started with `hugo server` and otherwise will minify.
-minify = true
+minify = ""
 
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # General

exampleSite/content/configuration/branding/generator/_index.en.md

@@ -1,7 +1,6 @@
 +++
 categories = ["tutorial"]
 description = "An interactive tool to generate color variant stylesheets"
-mermaid.force = true
 options = ["themeVariant"]
 title = "Stylesheet Generator"
 weight = 4
@@ -27,14 +26,4 @@ Once you are satisfied, you can download the new variants file and copy it into
 See the docs for [further configuration options](configuration/branding/colors).
 {{% /expand %}}
 
-{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}
-{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}}
-
-<div id="R-vargenerator" class="mermaid zoomable" style="background-color: var(--INTERNAL-MAIN-TEXT-color);">Graph</div>
-
-{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}
-{{% button style="warning" icon="trash" href="javascript:window.variants&&variants.resetVariant();this.blur();" %}}Reset variant{{% /button %}}
-
-<script>
-window.variants && variants.generator( '#R-vargenerator' );
-</script>
+{{% variantgenerator %}}

exampleSite/content/configuration/branding/generator/_index.pir.md

@@ -1,7 +1,6 @@
 +++
 categories = ["tutorial"]
 description = "An interactive tool to generate color variant stylesheets"
-mermaid.force = true
 options = ["themeVariant"]
 title = "Stylesheet Generrrat'r"
 weight = 4

exampleSite/content/introduction/releasenotes/7/2.en.md

@@ -16,6 +16,12 @@ weight = -2
 
   Due to these changes, `expand` and `notice` with `style=transparent` will now generate slightly different margins.
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} This release fixes a bug, where the selection of a non-default variant may caused the page to flicker on load.
+
+  To achieve this, generation and handling of the theme variant stylesheets and the variant generator were completely rewritten. There are no changes required by you.
+
+  Anyways, please note that now the [variant generator](configuration/branding/generator) is not included in the theme release anymore but is only available in the exampleSite docs. As a sideeffect, less JavaScript will be loaded on your site.
+
 ### New
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} This release fixes a long standing issue, where loading a page with a non-default variant may caused screen flashing.

exampleSite/layouts/partials/dependencies/variantgenerator.html

@@ -0,0 +1,8 @@
+{{- $page := .page }}
+{{- $location := .location }}
+{{- if eq $location "header" }}
+  {{- with $page }}
+    {{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
+    <script src="{{"js/variant.js" | relURL}}{{ $assetBusting }}"></script>
+  {{- end }}
+{{- end }}

exampleSite/layouts/shortcodes/variantgenerator.html

@@ -0,0 +1,45 @@
+{{ partial "shortcodes/notice.html" (dict
+  "page"  .Page
+  "style" "note"
+  "content" "The <code>CODE-theme</code> parameter can be changed in the generator but the change will not be reflected dynamically in the page preview."
+)}}
+{{ partial "shortcodes/button.html" (dict
+  "page" .Page
+  "href" "javascript:window.variants&&variants.getStylesheet();this.blur();"
+  "style" "secondary"
+  "icon" "download"
+  "content" "Download variant"
+)}}
+{{ partial "shortcodes/button.html" (dict
+  "page" .Page
+  "href" "javascript:window.variants&&variants.resetVariant();this.blur();"
+  "style" "warning"
+  "icon" "trash"
+  "content" "Reset variant"
+)}}
+<div id="R-vargenerator" class="mermaid zoomable" style="background-color: var(--INTERNAL-MAIN-TEXT-color);">
+	Graph
+</div>
+{{ partial "shortcodes/button.html" (dict
+  "page" .Page
+  "href" "javascript:window.variants&&variants.getStylesheet();this.blur();"
+  "style" "secondary"
+  "icon" "download"
+  "content" "Download variant"
+)}}
+{{ partial "shortcodes/button.html" (dict
+  "page" .Page
+  "href" "javascript:window.variants&&variants.resetVariant();this.blur();"
+  "style" "warning"
+  "icon" "trash"
+  "content" "Reset variant"
+)}}
+<script>
+	window.variants && variants.generator( '#R-vargenerator' );
+</script>
+{{- /* the variant generator also requires Mermaid; so as there is no Mermaid
+       shortcode involved here to create the graph, we have to take care
+	   to load it our self; the quickest way to do this is, to set the
+	   Mermaid dependency as well */}}
+{{- .Page.Store.Set "hasMermaid" true }}
+{{- .Page.Store.Set "hasVariantGenerator" true }}

layouts/partials/_relearn/themeVariants.gotmpl

@@ -1,9 +1,9 @@
 {{- $page := . }}
 {{- $nonautothemevariants := slice }}
-{{- $formathtmlpre := ":root:not([data-r-output-format='print'])" }}
+{{- $formathtmlpre := ":root:not([data-r-output-format='print']):not([data-r-theme-variant='my-custom-variant'])" }}
 {{- $formathtml := "" }}
 {{- $minify := not hugo.IsServer }}
-{{- if isset site.Params "minify" }}
+{{- if and (isset site.Params "minify") (ne site.Params.minify "") }}
   {{- $minify = site.Params.minify }}
 {{- end }}
 
@@ -30,6 +30,9 @@ Unification run:
   {{- if not (isset $themevariant "auto") }}
     {{- $nonautothemevariants = $nonautothemevariants | append $themevariant.identifier }}
   {{- end }}
+  {{- if eq $themevariant.identifier "my-custom-variant" }}
+    {{- errorf "\"theme-%s.css\": the variant identifier '%s' is reserved for the theme's variant generator, instead rename it to something different" "my-custom-variant" "my-custom-variant" }}
+  {{- end }}
   {{- $themevariants = $themevariants | append $themevariant }}
 {{- end }}
 

layouts/partials/menu.html

@@ -79,7 +79,7 @@
                   </div>
                   <div class="clear"></div>
                 </div>
-                <script>window.relearn.initVariant();</script>
+                <script>window.relearn.markVariant();</script>
               </li>
               <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
                 <div class="padding menu-control">

layouts/partials/stylesheet.html

@@ -11,12 +11,12 @@
     <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
     {{- $themevariants := partialCached "_relearn/themeVariants.gotmpl" . }}
     {{- $minify := not hugo.IsServer }}
-    {{- if isset site.Params "minify" }}
+    {{- if and (isset site.Params "minify") (ne site.Params.minify "") }}
       {{- $minify = site.Params.minify }}
     {{- end }}
     {{- $min := cond $minify ".min" "" }}
     <link href="{{(printf "css/theme%s.css" $min) | relURL}}{{ $assetBusting }}" rel="stylesheet">
-    <link href="{{(printf "css/format-%s%s.css" $outputFormat $min) | relURL}}{{ $assetBusting }}" rel="stylesheet">
+    <link href="{{(printf "css/format-%s%s.css" $outputFormat $min) | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-format-style">
     <script>
       window.relearn = window.relearn || {};
       window.relearn.relBasePath='{{ partial "_relearn/relBasePath.gotmpl" . | safeJS }}';
@@ -30,32 +30,34 @@
       {{- range $themevariants }}
         {{- $quotedthemevariants = $quotedthemevariants | append (printf "'%s'" .identifier) }}
       {{- end }}
-      window.variants && variants.init( [ {{ delimit $quotedthemevariants ", " | safeJS }} ] );
+      window.relearn.themevariants = [ {{ delimit $quotedthemevariants ", " | safeJS }} ];
+      window.relearn.customvariantname = "my-custom-variant";
       window.relearn.changeVariant = function(variant) {
+        var oldVariant = document.documentElement.dataset.rThemeVariant;
+        window.localStorage.setItem(window.relearn.absBaseUri + "/variant", variant);
         document.documentElement.dataset.rThemeVariant = variant;
-        var old_variant = window.localStorage.getItem("R-theme-variant");
-        if (old_variant != variant) {
-          window.localStorage.setItem("R-theme-variant", variant);
-          document.dispatchEvent( new CustomEvent('themeVariantLoaded', { detail: { variant: variant } }) );
+        if (oldVariant != variant) {
+          document.dispatchEvent( new CustomEvent('themeVariantLoaded', { detail: { variant, oldVariant } }) );
+        }
+      }
+      window.relearn.markVariant = function() {
+        var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant");
+        var select = document.querySelector("#R-select-variant");
+        if (select) {
+          select.value = variant;
         }
       }
       window.relearn.initVariant = function() {
-        var variant = window.localStorage.getItem("R-theme-variant") ?? "";
-        var el = document.querySelector("#R-select-variant");
-        if (variant && el) {
-          var options = Array.from(el.options);
-          if( options.some(option => option.value == variant) ){
-            el.value = variant;
-          }
-          else {
-            variant = options[0]?.value ?? "";
-            el.value = variant;
-            window.localStorage.setItem("R-theme-variant", variant);
-          }
+        var variant = window.localStorage.getItem(window.relearn.absBaseUri + "/variant") ?? "";
+        if( variant == window.relearn.customvariantname ){
+        }else if( !variant || !window.relearn.themevariants.includes(variant) ){
+          variant = window.relearn.themevariants[0];
+          window.localStorage.setItem(window.relearn.absBaseUri + "/variant", variant);
         }
         document.documentElement.dataset.rThemeVariant = variant;
       }
       window.relearn.initVariant();
+      window.relearn.markVariant();
       {{ "// translations" | safeJS }}
       {{ printf "window.T_Copy_to_clipboard = `%s`;" (T `Copy-to-clipboard`) | safeJS }}
       {{ printf "window.T_Copied_to_clipboard = `%s`;" (T `Copied-to-clipboard`) | safeJS }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.1.1+2c5ac2b60022b3ec8e9e275bfeb2d5ebc77d9bc0
+7.1.1+0505b36141f2a69dc36be8589c0678783cad98a9