From deee4ae6b7ee908a43a3a5d784714540769024ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 8 Dec 2024 00:06:40 +0100 Subject: [PATCH] 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 + assets/css/theme-green.css | 1 + assets/css/theme-learn.css | 1 + assets/css/theme-neon.css | 1 + assets/css/theme-red.css | 1 + assets/css/theme-relearn-bright.css | 1 + assets/css/theme-relearn-dark.css | 1 + assets/css/theme-relearn-light.css | 1 + assets/css/theme-zen-dark.css | 1 + assets/css/theme-zen-light.css | 1 + exampleSite/config/_default/hugo.toml | 7 + exampleSite/config/_default/params.toml | 2 +- .../branding/generator/_index.en.md | 13 +- .../branding/generator/_index.pir.md | 1 - .../introduction/releasenotes/7/2.en.md | 6 + .../dependencies/variantgenerator.html | 8 + .../layouts/shortcodes/variantgenerator.html | 45 ++ .../partials/_relearn/themeVariants.gotmpl | 7 +- layouts/partials/menu.html | 2 +- layouts/partials/stylesheet.html | 40 +- layouts/partials/version.txt | 2 +- static/js/variant.js | 544 ++++++++---------- 22 files changed, 336 insertions(+), 351 deletions(-) create mode 100644 exampleSite/layouts/partials/dependencies/variantgenerator.html create mode 100644 exampleSite/layouts/shortcodes/variantgenerator.html diff --git a/assets/css/theme-blue.css b/assets/css/theme-blue.css index c71ed55918..0bfdc7c632 100644 --- a/assets/css/theme-blue.css +++ b/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 */ diff --git a/assets/css/theme-green.css b/assets/css/theme-green.css index 6f91b796a3..9763d64419 100644 --- a/assets/css/theme-green.css +++ b/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 */ diff --git a/assets/css/theme-learn.css b/assets/css/theme-learn.css index ace689bdb7..892220953b 100644 --- a/assets/css/theme-learn.css +++ b/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 */ diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css index 1b175b2d3e..1593df9629 100644 --- a/assets/css/theme-neon.css +++ b/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 */ diff --git a/assets/css/theme-red.css b/assets/css/theme-red.css index 05256cff1b..abb4734a64 100644 --- a/assets/css/theme-red.css +++ b/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 */ diff --git a/assets/css/theme-relearn-bright.css b/assets/css/theme-relearn-bright.css index 2e7b33314c..4447bd50c5 100644 --- a/assets/css/theme-relearn-bright.css +++ b/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 */ diff --git a/assets/css/theme-relearn-dark.css b/assets/css/theme-relearn-dark.css index 847d8f6fcc..ade832fbd4 100644 --- a/assets/css/theme-relearn-dark.css +++ b/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 */ diff --git a/assets/css/theme-relearn-light.css b/assets/css/theme-relearn-light.css index 01f7181fab..4b83eddef2 100644 --- a/assets/css/theme-relearn-light.css +++ b/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 */ diff --git a/assets/css/theme-zen-dark.css b/assets/css/theme-zen-dark.css index 655775e4de..a597cb80eb 100644 --- a/assets/css/theme-zen-dark.css +++ b/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 */ diff --git a/assets/css/theme-zen-light.css b/assets/css/theme-zen-light.css index e1e510ddfb..d4556fe4ac 100644 --- a/assets/css/theme-zen-light.css +++ b/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 */ diff --git a/exampleSite/config/_default/hugo.toml b/exampleSite/config/_default/hugo.toml index 0888baf13d..460c74a550 100644 --- a/exampleSite/config/_default/hugo.toml +++ b/exampleSite/config/_default/hugo.toml @@ -246,3 +246,10 @@ summaryLength = 10 siteparam.test.text = 'A **nested** option with 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' diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 0fa5ae442a..58e14fd163 100644 --- a/exampleSite/config/_default/params.toml +++ b/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 diff --git a/exampleSite/content/configuration/branding/generator/_index.en.md b/exampleSite/content/configuration/branding/generator/_index.en.md index b878a92a9d..134be600fc 100644 --- a/exampleSite/content/configuration/branding/generator/_index.en.md +++ b/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 %}} - -
Graph
- -{{% 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 %}} - - +{{% variantgenerator %}} diff --git a/exampleSite/content/configuration/branding/generator/_index.pir.md b/exampleSite/content/configuration/branding/generator/_index.pir.md index c538e49736..a6d771117d 100644 --- a/exampleSite/content/configuration/branding/generator/_index.pir.md +++ b/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 diff --git a/exampleSite/content/introduction/releasenotes/7/2.en.md b/exampleSite/content/introduction/releasenotes/7/2.en.md index 45582e315e..9382170e71 100644 --- a/exampleSite/content/introduction/releasenotes/7/2.en.md +++ b/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. diff --git a/exampleSite/layouts/partials/dependencies/variantgenerator.html b/exampleSite/layouts/partials/dependencies/variantgenerator.html new file mode 100644 index 0000000000..8178b121c9 --- /dev/null +++ b/exampleSite/layouts/partials/dependencies/variantgenerator.html @@ -0,0 +1,8 @@ +{{- $page := .page }} +{{- $location := .location }} +{{- if eq $location "header" }} + {{- with $page }} + {{- $assetBusting := partialCached "assetbusting.gotmpl" . }} + + {{- end }} +{{- end }} \ No newline at end of file diff --git a/exampleSite/layouts/shortcodes/variantgenerator.html b/exampleSite/layouts/shortcodes/variantgenerator.html new file mode 100644 index 0000000000..74a31451e2 --- /dev/null +++ b/exampleSite/layouts/shortcodes/variantgenerator.html @@ -0,0 +1,45 @@ +{{ partial "shortcodes/notice.html" (dict + "page" .Page + "style" "note" + "content" "The CODE-theme 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" +)}} +
+ Graph +
+{{ 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" +)}} + +{{- /* 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 }} \ No newline at end of file diff --git a/layouts/partials/_relearn/themeVariants.gotmpl b/layouts/partials/_relearn/themeVariants.gotmpl index 4106ec2a33..93669a3588 100644 --- a/layouts/partials/_relearn/themeVariants.gotmpl +++ b/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 }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index ec216065e4..6a40722c71 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -79,7 +79,7 @@
- +
  • diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index 61332c752c..215531a4de 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -11,12 +11,12 @@ {{- $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" "" }} - +