mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
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:
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user