From 2ff90348e76ede981212c2fa38da798c5217e637 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 7 Sep 2025 06:46:55 +0800
Subject: [PATCH 1/3] feat(repo-card): fix inline style CSP issue

---
 layouts/shortcodes/codeberg.html    | 15 +++++++--------
 layouts/shortcodes/forgejo.html     | 15 +++++++--------
 layouts/shortcodes/gitea.html       | 15 +++++++--------
 layouts/shortcodes/github.html      | 15 +++++++--------
 layouts/shortcodes/huggingface.html | 13 ++++++-------
 5 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 38a4ff7f..3b6b04aa 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "codeberg" (partial "functions/uid.html" .)) "-" }}
 {{- $codebergURL := print "https://codeberg.org/api/v1/repos/" (.Get "repo") -}}
-{{- $codebergColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $codebergData := dict -}}
 {{- with try (resources.GetRemote $codebergURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $codebergColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
+          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
+            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+          }}
+          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index b67659d4..f4fa8e7b 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "forgejo" (partial "functions/uid.html" .)) "-" }}
 {{- $forgejoURL := print (.Get "server" | default .Site.Params.forgejoDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
-{{- $forgejoColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $forgejoData := dict -}}
 {{- with try (resources.GetRemote $forgejoURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $forgejoColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
+          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
+            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+          }}
+          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index 27cbbeea..c91e9a02 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -1,6 +1,6 @@
 {{ $id := delimit (slice "gitea" (partial "functions/uid.html" .)) "-" }}
 {{- $giteaURL := print (.Get "server" | default .Site.Params.giteaDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
-{{- $giteaColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $giteaData := dict -}}
 {{- with try (resources.GetRemote $giteaURL) -}}
   {{- with .Err -}}
@@ -33,13 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $giteaColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></span>
+          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
+          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
+            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+          }}
+          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index b9b465ea..e5a1df7f 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -2,7 +2,7 @@
 {{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
 {{- $githubThumbnailURL := print "https://opengraph.githubassets.com/0/" (.Get "repo") -}}
 {{- $showThumbnail := .Get "showThumbnail" | default true -}}
-{{- $githubColors := .Site.Data.repoColors -}}
+{{- $repoColors := .Site.Data.repoColors -}}
 {{- $githubData := dict -}}
 {{- with try (resources.GetRemote $githubURL) -}}
   {{- with .Err -}}
@@ -46,13 +46,12 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
-            <span
-              class="mr-1 inline-block h-3 w-3 rounded-full"
-              style="background-color: {{ if .language }}
-                {{- index $githubColors .language -}}
-              {{ else }}
-                #0077b6
-              {{ end }}"></span>
+            {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
+            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
+              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+            }}
+            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if .language }}{{ .language }}{{ else }}null{{ end }}
             </div>
diff --git a/layouts/shortcodes/huggingface.html b/layouts/shortcodes/huggingface.html
index 8001ead5..fe883c29 100644
--- a/layouts/shortcodes/huggingface.html
+++ b/layouts/shortcodes/huggingface.html
@@ -53,13 +53,12 @@
 
 
           <div class="m-0 mt-2 flex items-center">
-            <span
-              class="mr-1 inline-block h-3 w-3 rounded-full"
-              style="background-color: {{ if eq $type "model" }}
-                #ff6b35
-              {{ else }}
-                #0077b6
-              {{ end }}"></span>
+            {{ $languageDotColor := cond (eq $type "model") "#ff6b35" "#0077b6" }}
+            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
+              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
+            }}
+            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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 }}

From f94f60aef65497638624f3cdb17f74e687146fca Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Fri, 12 Sep 2025 10:31:28 +0800
Subject: [PATCH 2/3] perf(repo-card): load CSS once globally instead of per
 card

---
 layouts/partials/vendor.html        | 29 +++++++++++++++++++++++++++++
 layouts/shortcodes/codeberg.html    |  7 +------
 layouts/shortcodes/forgejo.html     |  7 +------
 layouts/shortcodes/gitea.html       |  7 +------
 layouts/shortcodes/github.html      |  7 +------
 layouts/shortcodes/huggingface.html |  7 +------
 6 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index 9210cc57..cb074675 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -117,3 +117,32 @@
     src="{{ $youtubeLiteLib.RelPermalink }}"
     integrity="{{ $youtubeLiteLib.Data.Integrity }}"></script>
 {{ end }}
+
+{{/* Repo cards */}}
+{{ $repoCards := slice "github" "gitea" "hugging-face" "codeberg" "forgejo" }}
+{{ $hasRepoCards := false }}
+{{ range $repoCards }}
+  {{ if $.Page.HasShortcode . }}
+    {{ $hasRepoCards = true }}
+  {{ end }}
+{{ end }}
+
+{{ if $hasRepoCards }}
+  {{ $repoColors := site.Data.repoColors }}
+  {{ $cssRules := slice }}
+
+  {{/* 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 }}
+
+  {{ $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 }}
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 3b6b04aa..50db132c 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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>
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index f4fa8e7b..a6395a3c 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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>
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index c91e9a02..3175fa99 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -33,12 +33,7 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-          {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-            | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-          }}
-          <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index e5a1df7f..c3a5dcec 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -46,12 +46,7 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
-            {{ $languageDotColor := cond .language (index $repoColors .language) "#0077b6" }}
-            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-            }}
-            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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>
diff --git a/layouts/shortcodes/huggingface.html b/layouts/shortcodes/huggingface.html
index fe883c29..03e6bf04 100644
--- a/layouts/shortcodes/huggingface.html
+++ b/layouts/shortcodes/huggingface.html
@@ -53,12 +53,7 @@
 
 
           <div class="m-0 mt-2 flex items-center">
-            {{ $languageDotColor := cond (eq $type "model") "#ff6b35" "#0077b6" }}
-            {{ $css := resources.FromString (printf "css/%s.css" $id) (printf ".language-dot-%s{background-color:%s}" $id $languageDotColor)
-              | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512")
-            }}
-            <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot-{{ $id }}"></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 }}

From af221fbf3b60774079285d7dba103f3a849ec699 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Fri, 12 Sep 2025 11:11:52 +0800
Subject: [PATCH 3/3] perf(repo-card): only generate used CSS class

---
 layouts/partials/vendor.html        | 30 ++++++++++++++++++-----------
 layouts/shortcodes/codeberg.html    |  7 ++++++-
 layouts/shortcodes/forgejo.html     |  7 ++++++-
 layouts/shortcodes/gitea.html       |  7 ++++++-
 layouts/shortcodes/github.html      |  7 ++++++-
 layouts/shortcodes/huggingface.html |  7 ++++++-
 6 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index cb074675..d2edcdff 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -119,7 +119,7 @@
 {{ end }}
 
 {{/* Repo cards */}}
-{{ $repoCards := slice "github" "gitea" "hugging-face" "codeberg" "forgejo" }}
+{{ $repoCards := slice "codeberg" "forgejo" "gitea" "github" "hugging-face" }}
 {{ $hasRepoCards := false }}
 {{ range $repoCards }}
   {{ if $.Page.HasShortcode . }}
@@ -131,18 +131,26 @@
   {{ $repoColors := site.Data.repoColors }}
   {{ $cssRules := slice }}
 
-  {{/* 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) }}
+  {{ $usedLanguages := $.Page.Store.Get "repoCardLanguages" }}
+  {{ if not $usedLanguages }}
+    {{ $usedLanguages = slice "default" }}
+  {{ else }}
+    {{ $usedLanguages = $usedLanguages | append "default" }}
   {{ end }}
 
-  {{ $repoCardCss := resources.FromString "css/repo-cards.css" (delimit $cssRules "\n")
+  {{ 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 }}
+
+  {{ $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 }}">
+  <link rel="stylesheet" href="{{ $repoCardCSS.RelPermalink }}" integrity="{{ $repoCardCSS.Data.Integrity }}">
 {{ end }}
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 50db132c..30ff1b39 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -33,7 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
+          {{ $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>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index a6395a3c..5e4f49ba 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -33,7 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
+          {{ $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>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index 3175fa99..3bb81bcf 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -33,7 +33,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
+          {{ $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>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index c3a5dcec..a42d8808 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -46,7 +46,12 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ .language | default "default" }}"></span>
+            {{ $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>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
               {{ if .language }}{{ .language }}{{ else }}null{{ end }}
             </div>
diff --git a/layouts/shortcodes/huggingface.html b/layouts/shortcodes/huggingface.html
index 03e6bf04..8aa55a95 100644
--- a/layouts/shortcodes/huggingface.html
+++ b/layouts/shortcodes/huggingface.html
@@ -53,7 +53,12 @@
 
 
           <div class="m-0 mt-2 flex items-center">
-            <span class="mr-1 inline-block h-3 w-3 rounded-full language-dot" data-language="{{ cond (eq $type "model") "model" "default" }}"></span>
+            {{ $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>
             <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 }}