Revert "perf(repo-card): only generate used CSS class"

This reverts commit af221fbf3b.

fix language dot colors in repo-card not displaying

This occurs because head.html is rendered before the page content,
making .Page.Store unavailable at that point in the template
execution order.

This issue doesn't appear in local development because page refreshes
trigger full re-renders, allowing the Store values to be properly
populated from shortcodes.

Alternative solutions considered:

1. templates.Defer: too complex and unreliable
2. Moving CSS to footer: confusing and delayed load
3. Inline styles: incurs CSP issue

Final I choose pre-generate CSS for all languages. After zstd
compression, the CSS file is only 8KB and benefits from browser
caching across all pages.
This commit is contained in:
ZhenShuo Leo
2025-10-17 14:27:53 +08:00
parent a0d04df2b3
commit 884d84363e
6 changed files with 16 additions and 51 deletions

View File

@@ -131,27 +131,17 @@
{{ $repoColors := site.Data.repoColors }}
{{ $cssRules := slice }}
{{ $usedLanguages := $.Page.Store.Get "repoCardLanguages" }}
{{ if not $usedLanguages }}
{{ $usedLanguages = slice "default" }}
{{ else }}
{{ $usedLanguages = $usedLanguages | append "default" }}
{{/* default color */}}
{{ $cssRules = $cssRules | append ".language-dot[data-language=\"default\"] { background-color: #0077b6; }" }}
{{/* Hugging Face model color */}}
{{ $cssRules = $cssRules | append ".language-dot[data-language=\"model\"] { background-color: #ff6b35; }" }}
{{ range $lang, $color := $repoColors }}
{{ $cssRules = $cssRules | append (printf ".language-dot[data-language=\"%s\"] { background-color: %s; }" $lang $color) }}
{{ end }}
{{ range $usedLanguages }}
{{ if eq . "default" }}
{{ $cssRules = $cssRules | append ".language-dot[data-language=\"default\"] { background-color: #0077b6; }" }}
{{ else if eq . "model" }}
{{ $cssRules = $cssRules | append ".language-dot[data-language=\"model\"] { background-color: #ff6b35; }" }}
{{ else if index $repoColors . }}
{{ $color := index $repoColors . }}
{{ $cssRules = $cssRules | append (printf ".language-dot[data-language=\"%s\"] { background-color: %s; }" . $color) }}
{{ end }}
{{ end }}
{{ $cssContent := delimit $cssRules "\n" }}
{{ $outputPath := path.Join .Page.RelPermalink "repo-cards.css" }}
{{ $repoCardCSS := resources.FromString $outputPath $cssContent | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
{{ $repoCardCSS := resources.FromString "css/repo-cards.css" (delimit $cssRules "\n")
| minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
}}
<link rel="stylesheet" href="{{ $repoCardCSS.RelPermalink }}" integrity="{{ $repoCardCSS.Data.Integrity }}">
{{ end }}

View File

@@ -33,12 +33,7 @@
</p>
<div class="m-0 mt-2 flex items-center">
{{ $language := cond .language .language "default" }}
{{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
{{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
<span
class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
data-language="{{ $language }}"></span>
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
{{ if .language }}{{ .language }}{{ else }}null{{ end }}
</div>

View File

@@ -33,12 +33,7 @@
</p>
<div class="m-0 mt-2 flex items-center">
{{ $language := cond .language .language "default" }}
{{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
{{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
<span
class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
data-language="{{ $language }}"></span>
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
{{ if .language }}{{ .language }}{{ else }}null{{ end }}
</div>

View File

@@ -33,12 +33,7 @@
</p>
<div class="m-0 mt-2 flex items-center">
{{ $language := cond .language .language "default" }}
{{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
{{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
<span
class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
data-language="{{ $language }}"></span>
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
{{ if .language }}{{ .language }}{{ else }}null{{ end }}
</div>

View File

@@ -46,12 +46,7 @@
</p>
<div class="m-0 mt-2 flex items-center">
{{ $language := cond .language .language "default" }}
{{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
{{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
<span
class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
data-language="{{ $language }}"></span>
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
{{ if .language }}{{ .language }}{{ else }}null{{ end }}
</div>

View File

@@ -53,12 +53,7 @@
<div class="m-0 mt-2 flex items-center">
{{ $language := cond (eq $type "model") "model" "default" }}
{{ $currentLangs := $.Page.Store.Get "repoCardLanguages" | default slice }}
{{ $.Page.Store.Set "repoCardLanguages" ($currentLangs | append $language) }}
<span
class="mr-1 inline-block h-3 w-3 rounded-full language-dot"
data-language="{{ $language }}"></span>
<span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ cond (eq $type "model") "model" "default" }}"></span>
<div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
{{ if eq $type "model" }}
{{ if .pipeline_tag }}{{ .pipeline_tag }}{{ else }}model{{ end }}