hugo-theme-relearn/layouts/partials/_relearn/themeVariants.gotmpl
Sören Weber 0505b36141
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;
2024-12-06 07:38:05 +01:00

257 lines
No EOL
10 KiB
Go Template

{{- $page := . }}
{{- $nonautothemevariants := slice }}
{{- $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
- remember default variants for auto mode
*/}}
{{- $tempthemevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
{{- $themevariants := slice }}
{{- range $tempthemevariant := $tempthemevariants }}
{{- $themevariant := $tempthemevariant }}
{{- if not (reflect.IsMap $themevariant) }}
{{- $themevariant = dict "identifier" $tempthemevariant }}
{{- end }}
{{- if not $themevariant.name }}
{{- $themevariant = collections.Merge $themevariant (dict "name" ($themevariant.identifier | humanize | strings.Title)) }}
{{- end }}
{{- if eq $themevariant.identifier "auto" }}
{{- $themevariant = collections.Merge $themevariant (dict "auto" ($themevariant.auto | default slice)) }}
{{- end }}
{{- if not (isset $themevariant "auto") }}
{{- $nonautothemevariants = $nonautothemevariants | append $themevariant.identifier }}
{{- end }}
{{- $themevariants = $themevariants | append $themevariant }}
{{- end }}
{{- /*
Generator run:
- fill up auto property with defaults
- 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") }}
{{- $defaultautothemevariants = $defaultautothemevariants | append (index .Site.Params.themeVariantAuto 1 | default (index $nonautothemevariants 1) | default "relearn-dark") }}
{{- $tempthemevariants = $themevariants }}
{{- $themevariants = slice }}
{{- range $tempthemevariant := $tempthemevariants }}
{{- $themevariant := $tempthemevariant }}
{{- if collections.IsSet $themevariant "auto" }}
{{- $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)) }}
{{- $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)}}
{{- $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 }}
{{- /*
- Read default stuff
*/}}
{{- $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 }}
{{- /*
- Read variables.css and add custom box styles
*/}}
{{- $variablescontent := "" }}
{{- with resources.Get "css/variables.css" }}
{{- $boxcontent := "" }}
{{- range $page.Site.Params.boxStyle }}
{{- $identifier := upper .identifier }}
{{- $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
":root {"
"\n" .Content
$boxcontent
"\n}"
}}
{{- end }}
{{- /*
- Write theme.css
*/}}
{{- with resources.Get "css/theme.css" }}
{{- $boxcontent := "" }}
{{- range $page.Site.Params.boxStyle }}
{{- $identifier := upper .identifier }}
{{- $identifierl := lower .identifier }}
{{- $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 }}
{{- $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 */}}<!-- {{ $cssres.RelPermalink }} -->
{{- end }}
{{- /*
- Write swagger.css
*/}}
{{- 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 */}}<!-- {{ $cssres.RelPermalink }} -->
{{- 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 */}}<!-- {{ $cssres.RelPermalink }} -->
{{- /*
- 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 */}}<!-- {{ $cssres.RelPermalink }} -->
{{- return $themevariants }}
{{- define "partials/get-theme-details.html" }}
{{- $themevariant := .themevariant }}
{{- $identifier := .identifier }}
{{- $themecontent := "" }}
{{- with resources.Get (printf "css/theme-%s.css" $identifier) }}
{{- $themecontent = .Content }}
{{- else }}
{{- 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) }}
{{- $themevariant = collections.Merge $themevariant (dict "chromacontent" $chromacontent) }}
{{- return $themevariant }}
{{- end }}