From 0505b36141f2a69dc36be8589c0678783cad98a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Wed, 4 Dec 2024 21:37:37 +0100 Subject: [PATCH] theme: fix flash of non-default variant, part I #757 implements the first part, working for configured variants; for that, loading of stylesheets was overhauled by now merging all configured variants into one big stylesheet for each output format and loading this instead of one stylesheet per configured variant; previously @media print styles were applied on top of @media screen styles; this is now strictly isolated, which doesn't require styles like neon to revert styles for print anymore; this change was also used to implement the minify parameter, to shrink those generated stylesheets, making them shrink to 66% of their unminified size for the exampleSite; the theme switcher functionality is now completely independend of variant.js; the switch is now handled by in-page javascript which avoids waiting for external scripts to load, so switching can happen as early as possible; switching of themes is now implemented by just setting a data attribute to the html element, were previously a complex mechanism of dynamically loading of variant CSS files was implemented; the call for variant.js was removed in this changeset, making the generator broken and useless; this will be fixed with the next patch; --- assets/css/auto.css | 4 - assets/css/chroma-neon.css | 2 - {static => assets}/css/fonts.css | 0 assets/css/format-print.css | 20 +- {static => assets}/css/nucleus.css | 0 assets/css/print.css | 2 - assets/css/swagger.css | 6 - assets/css/theme-neon.css | 50 ---- assets/css/theme-relearn.css | 4 +- assets/css/theme.css | 30 +-- exampleSite/config/_default/params.toml | 7 + exampleSite/config/testing/hugo.toml | 1 + .../sitemanagement/stableoutput/_index.en.md | 11 +- .../sitemanagement/stableoutput/_index.pir.md | 2 +- .../introduction/releasenotes/7/2.en.md | 6 + exampleSite/content/shortcodes/mermaid.en.md | 3 + layouts/404.html | 6 +- layouts/_default/baseof.html | 2 +- .../partials/_relearn/themeVariants.gotmpl | 230 +++++++++++------- layouts/partials/menu.html | 4 +- layouts/partials/stylesheet.html | 44 +++- layouts/partials/version.txt | 2 +- static/js/search.js | 8 + static/js/theme.js | 78 +++--- 24 files changed, 293 insertions(+), 229 deletions(-) delete mode 100644 assets/css/auto.css rename {static => assets}/css/fonts.css (100%) rename {static => assets}/css/nucleus.css (100%) delete mode 100644 assets/css/print.css diff --git a/assets/css/auto.css b/assets/css/auto.css deleted file mode 100644 index fe2da7eb42..0000000000 --- a/assets/css/auto.css +++ /dev/null @@ -1,4 +0,0 @@ -/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */ -@import '{{ printf "%s-%s.css%s" .prefix .light $assetBusting }}' screen and (prefers-color-scheme: light); -/* prettier-ignore */ -@import '{{ printf "%s-%s.css%s" .prefix .dark $assetBusting }}' screen and (prefers-color-scheme: dark); diff --git a/assets/css/chroma-neon.css b/assets/css/chroma-neon.css index 7ef838a1a8..f55087a158 100644 --- a/assets/css/chroma-neon.css +++ b/assets/css/chroma-neon.css @@ -85,5 +85,3 @@ /* GenericTraceback */ .chroma .gt { } /* GenericUnderline */ .chroma .gl { } /* TextWhitespace */ .chroma .w { } - -} diff --git a/static/css/fonts.css b/assets/css/fonts.css similarity index 100% rename from static/css/fonts.css rename to assets/css/fonts.css diff --git a/assets/css/format-print.css b/assets/css/format-print.css index 4370399f7b..9d97b54d66 100644 --- a/assets/css/format-print.css +++ b/assets/css/format-print.css @@ -1,8 +1,3 @@ -/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */ -@import '{{ printf "theme-%s.css%s" .themevariant.identifier $assetBusting }}'; -/* prettier-ignore */ -@import '{{ printf "chroma-%s.css%s" .themevariant.chroma $assetBusting }}'; - #R-sidebar { display: none; } @@ -101,6 +96,7 @@ hr { #R-body #R-body-inner h1 { border-bottom: 1px solid rgba(221, 221, 221, 1); + font-size: 3.25rem; margin-bottom: 2rem; padding-bottom: 0.75rem; } @@ -187,3 +183,17 @@ article { #R-body-inner article:first-of-type { break-before: avoid; } + +#R-body #R-body-inner .flex-block-wrapper { + max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem); + width: 100%; +} + +#R-body #R-body-inner > .flex-block-wrapper article.narrow p { + font-size: 1.015625rem; + text-align: start; +} + +#R-body #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: 0; +} diff --git a/static/css/nucleus.css b/assets/css/nucleus.css similarity index 100% rename from static/css/nucleus.css rename to assets/css/nucleus.css diff --git a/assets/css/print.css b/assets/css/print.css deleted file mode 100644 index 3294d6f413..0000000000 --- a/assets/css/print.css +++ /dev/null @@ -1,2 +0,0 @@ -/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */ -@import '{{ printf "format-print.css%s" $assetBusting }}'; diff --git a/assets/css/swagger.css b/assets/css/swagger.css index 490a362d15..914e4c4d1a 100644 --- a/assets/css/swagger.css +++ b/assets/css/swagger.css @@ -1,9 +1,3 @@ -/* styles to make Swagger-UI fit into our theme */ -/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */ -@import '{{ printf "fonts.css%s" $assetBusting }}'; -/* prettier-ignore */ -@import '{{ printf "variables.css%s" $assetBusting }}'; - body { line-height: 1.574; font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css index 846e0dce82..1b175b2d3e 100644 --- a/assets/css/theme-neon.css +++ b/assets/css/theme-neon.css @@ -252,56 +252,6 @@ body .box.cstyle.transparent { box-shadow: none; } -@media print { - #R-body h1, - #R-body h2, - #R-body h3, - #R-body .article-subheading, - #R-body h4, - #R-body h5, - #R-body h6 { - text-shadow: none; - } - #R-body .badge, - #R-body .badge > .badge-content, - #R-body .btn, - #R-body .btn > *, - #R-body .box, - #R-body .box > .box-label { - box-shadow: none; - text-shadow: none; - } - #R-body .badge.cstyle:not(.transparent), - #R-body .btn.cstyle { - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); - } -} - -/* if we are in print chapter preview our @media statement from -above will not apply, so we have to repeat it here */ -.print #R-body h1, -.print #R-body h2, -.print #R-body h3, -.print #R-body .article-subheading, -.print #R-body h4, -.print #R-body h5, -.print #R-body h6 { - text-shadow: none; -} -.print #R-body .badge, -.print #R-body .badge > .badge-content, -.print #R-body .btn, -.print #R-body .btn > *, -.print #R-body .box, -.print #R-body .box > .box-label { - box-shadow: none; - text-shadow: none; -} -.print #R-body .badge.cstyle:not(.transparent), -.print #R-body .btn.cstyle { - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); -} - #R-content-wrapper { --ps-thumb-color: rgba(208, 208, 208, 1); --ps-thumb-hover-color: rgba(204, 204, 204, 1); diff --git a/assets/css/theme-relearn.css b/assets/css/theme-relearn.css index dd645a9fbc..018a15f9d8 100644 --- a/assets/css/theme-relearn.css +++ b/assets/css/theme-relearn.css @@ -1,3 +1 @@ -/* this file is here for compatiblity with older installations; use theme-relearn-light instead */ -/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */ -@import '{{ printf "theme-relearn-light.css%s" $assetBusting }}'; +@import 'theme-relearn-light.css'; diff --git a/assets/css/theme.css b/assets/css/theme.css index baf462c7d4..752f1c3ff3 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -1,5 +1,3 @@ -@charset "UTF-8"; - /* until browsers don't let us set length values based on dppx, we need a way to calculate them ourself */ :root { @@ -580,33 +578,31 @@ article a:focus > img:only-child:empty { max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem); width: 100%; } - -body:not(.print) #R-body .flex-block-wrapper:has(article.narrow) { +#R-body .flex-block-wrapper:has(article.narrow) { max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem); } -/* we limit width if we have large screens */ -body.main-width-max #R-body .flex-block-wrapper { +.main-width-max #R-body .flex-block-wrapper { width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem); } -body.main-width-max:not(.print) #R-body .flex-block-wrapper:has(article.narrow) { +.main-width-max #R-body .flex-block-wrapper:has(article.narrow) { width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem); } -body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { +#R-body-inner:has(> .flex-block-wrapper article.narrow) { padding: 0 9.75rem 2rem 9.75rem; } @media screen and (max-width: 59.999rem) { - body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { + #R-body-inner:has(> .flex-block-wrapper article.narrow) { padding: 0 6.5rem 1rem 6.5rem; } } @media screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) { + #R-body-inner:has(> .flex-block-wrapper article.narrow) { padding: 0 3.25rem 0.375rem 3.25rem; } } -body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p { +#R-body-inner > .flex-block-wrapper article.narrow p { font-size: 1.2rem; text-align: justify; } @@ -658,17 +654,17 @@ h1 { text-transform: uppercase; } -body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { +#R-body-inner > .flex-block-wrapper article.narrow h1 { border-bottom: 4px solid rgba(134, 134, 134, 0.125); font-size: 3.5rem; } @media only screen and (min-width: 48rem) and (max-width: 59.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { + #R-body-inner > .flex-block-wrapper article.narrow h1 { font-size: 2.8rem; } } @media only screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { + #R-body-inner > .flex-block-wrapper article.narrow h1 { font-size: 2.5rem; } } @@ -685,16 +681,16 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { #R-body-inner > .flex-block-wrapper article > .article-subheading { margin-top: 0; } -body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { +#R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { margin-top: 2rem; } @media screen and (max-width: 59.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { margin-top: 1rem; } } @media screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { margin-top: 0.375rem; } } diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 25c5a0f132..0fa5ae442a 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -75,6 +75,13 @@ themeVariant = [ { identifier = 'red' } ] +# Minify theme assets. +# Default: not set +# 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 + #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # General # These options are defining general, non visual behavior. diff --git a/exampleSite/config/testing/hugo.toml b/exampleSite/config/testing/hugo.toml index 3a2045e423..4e234b2b19 100644 --- a/exampleSite/config/testing/hugo.toml +++ b/exampleSite/config/testing/hugo.toml @@ -19,3 +19,4 @@ disableHugoGeneratorInject = true disableGeneratorVersion = true disableAssetsBusting = true disableRandomIds = true + minify = false diff --git a/exampleSite/content/configuration/sitemanagement/stableoutput/_index.en.md b/exampleSite/content/configuration/sitemanagement/stableoutput/_index.en.md index 0022a29d69..857bd7ad2d 100644 --- a/exampleSite/content/configuration/sitemanagement/stableoutput/_index.en.md +++ b/exampleSite/content/configuration/sitemanagement/stableoutput/_index.en.md @@ -1,7 +1,7 @@ +++ categories = ["howto"] description = "How to make your generated HTML output stable" -options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds"] +options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds", "minify"] title = "Stable Output" weight = 6 +++ @@ -46,3 +46,12 @@ To turn this off, set `disableRandomIds=true`. Note, that this will result in a [params] disableRandomIds = true {{< /multiconfig >}} + +## Disabling Assets Minification + +{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} If `minify=true`, further theme assets 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. + +{{< multiconfig file=hugo >}} +[params] + minify = false +{{< /multiconfig >}} diff --git a/exampleSite/content/configuration/sitemanagement/stableoutput/_index.pir.md b/exampleSite/content/configuration/sitemanagement/stableoutput/_index.pir.md index 312d4f778f..62d97a19bf 100644 --- a/exampleSite/content/configuration/sitemanagement/stableoutput/_index.pir.md +++ b/exampleSite/content/configuration/sitemanagement/stableoutput/_index.pir.md @@ -1,7 +1,7 @@ +++ categories = ["howto"] description = "How to make your generated HTML output stable" -options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds"] +options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds", "minify"] title = "Stable Output" weight = 6 +++ diff --git a/exampleSite/content/introduction/releasenotes/7/2.en.md b/exampleSite/content/introduction/releasenotes/7/2.en.md index 12ad1843e0..45582e315e 100644 --- a/exampleSite/content/introduction/releasenotes/7/2.en.md +++ b/exampleSite/content/introduction/releasenotes/7/2.en.md @@ -18,6 +18,12 @@ weight = -2 ### 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. + + Fixing this resulted in major changes how stylesheets are bundled during built and ultimately leads to different stylesheets been loaded in the browser. If you haven't done any undocumented stuff with the stylesheets, this change should not have any negative effects to your site. + +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} As a fallout of fixing the flashing issue, you can now minify the bundled stylesheets by setting the [`minify` parameter](configuration/sitemanagement/stableoutput/#disabling-assets-minification) in your `hugo.toml`. Without configuring this parameter, the theme will minify the stylesheets for production (`hugo`) but not for development (`hugo server`). + - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for Hugo’s built-in [`details` shortcode](https://gohugo.io/content-management/shortcodes/#details). - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 11.4.1. This adds support for [Kanban](shortcodes/mermaid#kanban) diagrams. diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 818730b5d7..11ec6d298e 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -84,6 +84,9 @@ mermaidZoom = true You can overwrite the settings by providing a JSON object in `mermaidInitialize`. See [Mermaid's documentation](https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults) for all allowed settings. +> [!NOTE] +> Using the `theme` setting in the initialization options is unsupported. To set the theme globally edit the `--MERMAID-theme` variable of your [color variant](configuration/branding/colors/#modifying-variants). + Keep in mind that initialization settings of your pages front matter overwrite all settings of your configuration options. In addition, you can merge settings for each individual graph through [diagram directives](https://mermaid-js.github.io/mermaid/#/directives?id=directives) on top of the settings of your page's front matter or configuration options. diff --git a/layouts/404.html b/layouts/404.html index e4fc3b4188..f2f6121144 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,6 +1,6 @@ -{{- .Store.Set "relearnOutputFormat" "notfound" }} - +{{- .Store.Set "relearnOutputFormat" "html" }} + {{- partial "meta.html" . }} {{- $title := partial "title.gotmpl" (dict "page" . "fullyQualified" true "reverse" true) }} @@ -13,7 +13,7 @@ {{- partial "stylesheet.html" . }} {{- partial "custom-header.html" . }} - +
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index de03d8838b..60a00dbf35 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,7 +9,7 @@ {{- if .Site.Params.description }} {{- warnf "UNSUPPORTED usage of 'params.description' config parameter found, move it to the front matter of your home page; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/6/#6-0-0" }} {{- end }} - + {{- partial "meta.html" . }} {{- $title := partial "title.gotmpl" (dict "page" . "fullyQualified" true "reverse" true) }} diff --git a/layouts/partials/_relearn/themeVariants.gotmpl b/layouts/partials/_relearn/themeVariants.gotmpl index 219d5fefc8..4106ec2a33 100644 --- a/layouts/partials/_relearn/themeVariants.gotmpl +++ b/layouts/partials/_relearn/themeVariants.gotmpl @@ -1,16 +1,18 @@ {{- $page := . }} -{{- $autores := resources.Get "css/auto.css" }} {{- $nonautothemevariants := slice }} -{{- /* we need relearn-light in every case for the print styles */}} -{{- $refthemevariants := slice | append "relearn-light" }} +{{- $formathtmlpre := ":root:not([data-r-output-format='print'])" }} +{{- $formathtml := "" }} +{{- $minify := not hugo.IsServer }} +{{- if isset site.Params "minify" }} + {{- $minify = site.Params.minify }} +{{- end }} {{- /* Unification run: - convert from old forms to slice of dicts - add default name property - convert auto property to slice -- save non auto variants to later assign them as default for missing auto variants -- mark variants configured by the user +- remember default variants for auto mode */}} {{- $tempthemevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }} {{- $themevariants := slice }} @@ -28,16 +30,13 @@ Unification run: {{- if not (isset $themevariant "auto") }} {{- $nonautothemevariants = $nonautothemevariants | append $themevariant.identifier }} {{- end }} - {{- $themevariant = collections.Merge $themevariant (dict "config" true) }} {{- $themevariants = $themevariants | append $themevariant }} {{- end }} {{- /* -Auto run: +Generator run: - fill up auto property with defaults -- save variants referenced by auto configuration -- write variant CSS file based on auto template -- add chroma property +- write variant & chroma CSS string of normal variants and for light and dark of auto variants */}} {{- $defaultautothemevariants := slice }} {{- $defaultautothemevariants = $defaultautothemevariants | append (index .Site.Params.themeVariantAuto 0 | default (index $nonautothemevariants 0) | default "relearn-light") }} @@ -50,117 +49,165 @@ Auto run: {{- $light := index $themevariant.auto 0 | default (index $defaultautothemevariants 0) }} {{- $dark := index $themevariant.auto 1 | default (index $defaultautothemevariants 1) }} {{- $themevariant = collections.Merge $themevariant (dict "auto" (slice | append $light | append $dark)) }} - {{- $refthemevariants = $refthemevariants | append $themevariant.auto }} - {{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/theme-%s.css" $themevariant.identifier) (dict "prefix" "theme" "light" $light "dark" $dark) }} - {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} - {{- $themevariant = collections.Merge $themevariant (dict "chroma" $themevariant.identifier) }} - {{- end }} - {{- $themevariants = $themevariants | append $themevariant }} -{{- end }} - -{{- /* -Ref run: -- add variants referenced by auto properties -- add default name property -*/}} -{{- range $refthemevariant := $refthemevariants }} - {{- if not (index (collections.Where $themevariants "identifier" $refthemevariant) 0) }} - {{- $themevariant := (dict "identifier" $refthemevariant "name" ($refthemevariant | humanize | strings.Title) "config" false) }} - {{- $themevariants = $themevariants | append $themevariant }} - {{- end }} -{{- end }} - -{{- /* -Non-auto run: -- write variant CSS file and all imported variant CSS files -- add chroma property from deepest imported variant -- write chroma CSS file (just the root one because they are not allowed to be nested and the deepest one wins) -*/}} -{{- $tempthemevariants = $themevariants }} -{{- $themevariants = slice }} -{{- range $tempthemevariant := $tempthemevariants }} - {{- $themevariant := $tempthemevariant }} - {{- if not (collections.IsSet $themevariant "auto") }} + {{- $lightthemevariant := partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $light) }} + {{- $darkthemevariant := partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $dark) }} + {{- $formathtmlpre = print $formathtmlpre + ":not([data-r-theme-variant='" $themevariant.identifier "'])" + }} + {{- $formathtml = print $formathtml + "\n:root:not([data-r-output-format='print'])[data-r-theme-variant='" $themevariant.identifier "'] {" + "\n@media screen and (prefers-color-scheme: light) {" + "\n&" $lightthemevariant.themecontent + "\n" $lightthemevariant.chromacontent + "\n}" + "\n@media screen and (prefers-color-scheme: dark) {" + "\n&" $darkthemevariant.themecontent + "\n" $darkthemevariant.chromacontent + "\n}" + "\n}" + }} + {{- else }} {{- $themevariant = partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $themevariant.identifier)}} - {{- $cssres := resources.Get (printf "css/chroma-%s.css" $themevariant.chroma) }} - {{- if not $cssres }} - {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $themevariant.chroma }} - {{- end }} - {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- $formathtmlpre = print $formathtmlpre + ":not([data-r-theme-variant='" $themevariant.identifier "'])" + }} + {{- $formathtml = print $formathtml + "\n:root:not([data-r-output-format='print'])[data-r-theme-variant='" $themevariant.identifier "'] {" + "\n&" $themevariant.themecontent + "\n" $themevariant.chromacontent + "\n}" +}} {{- end }} {{- $themevariants = $themevariants | append $themevariant }} {{- end }} {{- /* -Chroma auto run: -- write chroma CSS file based on auto template +- Read default stuff */}} -{{- range $tempthemevariant := $themevariants }} - {{- $themevariant := $tempthemevariant }} - {{- if collections.IsSet $themevariant "auto" }} - {{- $lighttheme := index $themevariant.auto 0 | default (index $defaultautothemevariants 0) }} - {{- $darktheme := index $themevariant.auto 1 | default (index $defaultautothemevariants 1) }} - {{- $light := (index (collections.Where $themevariants "identifier" $lighttheme) 0).chroma }} - {{- $dark := (index (collections.Where $themevariants "identifier" $darktheme) 0).chroma }} - {{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/chroma-%s.css" $themevariant.chroma) (dict "prefix" "chroma" "light" $light "dark" $dark) }} - {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} - {{- end }} +{{- $defaultthemevariant := partial "get-theme-details.html" (dict "themevariant" (dict) "identifier" "relearn-light") }} +{{- $nucleuscontent := "" }} +{{- with resources.Get "css/nucleus.css" }} + {{- $nucleuscontent = .Content }} +{{- end }} +{{- $fontscontent := "" }} +{{- with resources.Get "css/fonts.css" }} + {{- $fontscontent = .Content }} +{{- end }} +{{- $htmlcontent := "" }} +{{- with resources.Get "css/format-html.css" }} + {{- $htmlcontent = .Content }} +{{- end }} +{{- $printcontent := "" }} +{{- with resources.Get "css/format-print.css" }} + {{- $printcontent = .Content }} {{- end }} {{- /* -- Add box styles to variables and theme +- Read variables.css and add custom box styles */}} +{{- $variablescontent := "" }} {{- with resources.Get "css/variables.css" }} - {{- $variablescontent := print ":root {\n" .Content }} + {{- $boxcontent := "" }} {{- range $page.Site.Params.boxStyle }} {{- $identifier := upper .identifier }} - {{- $variablescontent = print $variablescontent "\n" + {{- $boxcontent = print $boxcontent "\n --INTERNAL-BOX-" $identifier "-color: var(--BOX-" $identifier "-color, " .color ");" "\n --INTERNAL-BOX-" $identifier "-TEXT-color: var(--BOX-" $identifier "-TEXT-color, var(--INTERNAL-BOX-TEXT-color));" }} {{- end }} - {{- $variablescontent = print $variablescontent "\n}" }} - {{- $cssres := $variablescontent | resources.FromString "css/variables.css" }} - {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- $variablescontent = print + ":root {" + "\n" .Content + $boxcontent + "\n}" + }} {{- end }} +{{- /* +- Write theme.css +*/}} {{- with resources.Get "css/theme.css" }} - {{- $themecontent := print - `{{- $assetBusting := partialCached "assetbusting.gotmpl" . -}}` "\n" - `@import "{{ printf "variables.css%s" $assetBusting }}";` "\n\n" - .Content - }} + {{- $boxcontent := "" }} {{- range $page.Site.Params.boxStyle }} {{- $identifier := upper .identifier }} {{- $identifierl := lower .identifier }} - {{- $themecontent = print $themecontent + {{- $boxcontent = print $boxcontent "\n.cstyle." $identifierl " {" "\n --VARIABLE-BOX-color: var(--INTERNAL-BOX-" $identifier "-color);" "\n --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-" $identifier "-TEXT-color);" "\n}\n" }} {{- end }} - {{- $themeres := $themecontent | resources.FromString (printf "%s.txt" ($themecontent | md5)) }} - {{- $cssres := $themeres | resources.ExecuteAsTemplate "css/theme.css" (dict) }} + {{- $themecontent := print + $variablescontent + "\n\n" $nucleuscontent + "\n" .Content + $boxcontent + "\n" $fontscontent + }} + {{- $cssres := $themecontent | resources.FromString "css/theme.css" }} + {{- if $minify }} + {{- $cssres = $cssres | minify }} + {{- end }} {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} {{- end }} {{- /* -- The ugly rest +- Write swagger.css */}} -{{- $printres := resources.Get "css/print.css" }} -{{- $cssres := $printres | resources.ExecuteAsTemplate "css/print.css" (dict) }} +{{- with resources.Get "css/swagger.css" }} + {{- $swaggercontent := print + $variablescontent "\n" + .Content "\n" + $fontscontent "\n" + }} + {{- $cssres := $swaggercontent | resources.FromString "css/swagger.css" }} + {{- if $minify }} + {{- $cssres = $cssres | minify }} + {{- end }} + {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} +{{- end }} + +{{- /* +- Write format-html.css +*/}} +{{- $htmlcontent = print + "@media screen {" + "\n" $formathtmlpre "," + $formathtml + "\n}" + "\n@media print {" + "\n&" $defaultthemevariant.themecontent + "\n" $defaultthemevariant.chromacontent + "\n}" + "\n@media print {" + "\n" $printcontent + "\n}" + "\n" $htmlcontent +}} +{{- $cssres := $htmlcontent | resources.FromString "css/format-html.css" }} +{{- if $minify }} + {{- $cssres = $cssres | minify }} +{{- end }} {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} -{{- $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)) }} +{{- /* +- Write format-print.css +*/}} +{{- $printcontent = print + ":root[data-r-output-format='print'] {" + "\n&" $defaultthemevariant.themecontent + "\n" $defaultthemevariant.chromacontent + "\n}" + "\n" $printcontent +}} +{{- $cssres := $printcontent | resources.FromString "css/format-print.css" }} +{{- if $minify }} + {{- $cssres = $cssres | minify }} +{{- end }} {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} -{{- $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 */}} - -{{- return collections.Where $themevariants "config" true }} +{{- return $themevariants }} {{- define "partials/get-theme-details.html" }} {{- $themevariant := .themevariant }} @@ -172,24 +219,39 @@ Chroma auto run: {{- errorf "\"theme-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $identifier }} {{- end }} {{- $chroma := "" }} + {{- $chromacontent := "" }} {{- range findRESubmatch `[ \t]*@import\s+[^$]*?chroma-([^.]*?)\.css` $themecontent }} {{- $chroma = index . 1 }} {{- errorf "\"theme-%s.css\": UNSUPPORTED use of @import for chroma stylesheet, instead use '--CODE-theme: %s;'; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/6/#6-0-0" $identifier $chroma }} {{- end }} + {{- $tempthemecontent := $themecontent }} {{- range findRESubmatch `[ \t]*@import\s+[^$]*?theme-([^.]*?)\.css` $themecontent }} {{- $subidentifier := index . 1 }} {{- $themevariant = partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $subidentifier) }} + {{- $tempthemecontent = replaceRE (printf `[ \t]*@import\s+[^$]*?theme-%s\.css` $subidentifier) $themevariant.themecontent $tempthemecontent 1 }} {{- $chroma = $themevariant.chroma }} + {{- $chromacontent = $themevariant.chromacontent }} {{- end }} + {{- $themecontent = $tempthemecontent}} {{- range findRESubmatch `[ \t]*--CODE-theme\s*:\s*([^;]*?)\s*;` $themecontent }} {{- $chroma = index . 1 }} + {{- $cssres := resources.Get (printf "css/chroma-%s.css" $chroma) }} + {{- if not $cssres }} + {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $chroma }} + {{- end }} + {{- $chromacontent = $cssres.Content }} {{- end }} {{- if not $chroma }} {{- $chroma = "relearn-light" }} + {{- $cssres := resources.Get (printf "css/chroma-%s.css" $chroma) }} + {{- if not $cssres }} + {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $chroma }} + {{- end }} + {{- $chromacontent = $cssres.Content }} {{- $themecontent = replaceRE `(:root\s*\{[ \t]*)(\s*)` (printf "${1}${2}--CODE-theme: %s;${2}" $chroma) $themecontent }} {{- end }} + {{- $themevariant = collections.Merge $themevariant (dict "themecontent" $themecontent) }} {{- $themevariant = collections.Merge $themevariant (dict "chroma" $chroma) }} - {{- $cssres := $themecontent | resources.FromString (printf "css/theme-%s.css" $identifier) }} - {{- /* the following code causes Hugo to generate our css file - although it is in comments */}} + {{- $themevariant = collections.Merge $themevariant (dict "chromacontent" $chromacontent) }} {{- return $themevariant }} {{- end }} \ No newline at end of file diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 6b8fcaf6ac..ec216065e4 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -68,7 +68,7 @@  
- {{- $firstvariant := true }} {{- range $themevariants }} {{- $themevariant := . }} @@ -79,7 +79,7 @@
- +
  • diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index 35d7c7e2e7..61332c752c 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -7,27 +7,22 @@ {{- $assetBusting := partialCached "assetbusting.gotmpl" . }} {{- /* https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use */}} - - {{- $themevariants := partialCached "_relearn/themeVariants.gotmpl" . }} - - {{- with index $themevariants 0 }} - - + {{- $minify := not hugo.IsServer }} + {{- if isset site.Params "minify" }} + {{- $minify = site.Params.minify }} {{- end }} - - {{- $f := printf "/static/css/format-%s.css" $outputFormat }} - {{- if or (partialCached "_relearn/fileExists.gotmpl" $f $f) (resources.Get (printf "/css/format-%s.css" $outputFormat)) }} - - {{- end }} - + {{- $min := cond $minify ".min" "" }} + + ' + '' + ''; + oi.srcdoc = '' + '' + '' + '' + '' + '' + '' + '' + '' + 'Collapse all' + 'Expand all' + '
    ' + '' + '' + ''; oi.height = '100%'; oi.width = '100%'; oi.onload = function () { @@ -732,14 +729,6 @@ function initCodeClipboard() { }); } -function initChroma(update) { - var chroma = variants.getColorValue('CODE-theme'); - var link = document.querySelector('#R-variant-chroma-style'); - var old_path = link.getAttribute('href'); - var new_path = old_path.replace(/^(.*\/chroma-).*?(\.css.*)$/, '$1' + chroma + '$2'); - link.setAttribute('href', new_path); -} - function initArrowVerticalNav() { var topMain = 0; if (!isPrint) { @@ -1635,38 +1624,32 @@ function initSearch() { window.relearn.runInitialSearch && window.relearn.runInitialSearch(); } -function updateTheme(detail) { - if (window.relearn.lastVariant == detail.variant) { +document.addEventListener('themeVariantLoaded', function (ev) { + updateTheme(ev); +}); + +function updateTheme(ev) { + if (window.relearn.lastVariant == ev.detail.variant) { return; } - window.relearn.lastVariant = detail.variant; + window.relearn.lastVariant = ev.detail.variant; - initChroma(true); initMermaid(true); initOpenapi(true); - document.dispatchEvent( - new CustomEvent('themeVariantLoaded', { - detail: detail, - }) - ); } (function () { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { - initChroma(true); initMermaid(true); initOpenapi(true); }); })(); function useMermaid(config) { + delete config.theme; window.relearn.mermaidConfig = config; if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') { mermaid.initialize(Object.assign({ securityLevel: 'antiscript', startOnLoad: false }, config)); - if (config.theme && variants) { - var write_style = variants.findLoadedStylesheet('R-variant-style'); - write_style.setProperty('--CONFIG-MERMAID-theme', config.theme); - } } } if (window.themeUseMermaid) { @@ -1682,6 +1665,14 @@ if (window.themeUseOpenapi) { useOpenapi(window.themeUseOpenapi); } +function ready(fn) { + if (document.readyState == 'complete') { + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } +} + ready(function () { initArrowVerticalNav(); initArrowHorizontalNav(); @@ -1854,8 +1845,25 @@ ready(function () { function onWidthChange(setWidth, e) { setWidth(e); } - var width = variants.getColorValue('MAIN-WIDTH-MAX'); + var width = getColorValue('MAIN-WIDTH-MAX'); var mqm = window.matchMedia('screen and ( min-width: ' + width + ')'); mqm.addEventListener('change', onWidthChange.bind(null, setWidth)); setWidth(mqm); })(); + +function getColorValue(c) { + return this.normalizeColor(getComputedStyle(document.documentElement).getPropertyValue('--INTERNAL-' + c)); +} + +function normalizeColor(c) { + if (!c || !c.trim) { + return c; + } + c = c.trim(); + c = c.replace(/\s*\(\s*/g, '( '); + c = c.replace(/\s*\)\s*/g, ' )'); + c = c.replace(/\s*,\s*/g, ', '); + c = c.replace(/0*\./g, '.'); + c = c.replace(/ +/g, ' '); + return c; +}