From 65a50ff643524f6a82e3002dc7c13e3eaadb9dc4 Mon Sep 17 00:00:00 2001
From: Served Smart <195884188+servedsmart@users.noreply.github.com>
Date: Sun, 22 Jun 2025 22:20:49 +0200
Subject: [PATCH] :zap: Only generate css classes for used repo colors

This in most cases will reduce the size of main.bundle.css dramatically. Before I had around ~+32kB, now it is ~+228B
---
 data/{colorsRepos.json => repoColors.json} |  0
 layouts/partials/get-repo-languages.html   | 20 +++++++++++++++
 layouts/partials/head.html                 | 30 ++++++----------------
 layouts/shortcodes/codeberg.html           |  6 ++---
 layouts/shortcodes/forgejo.html            |  6 ++---
 layouts/shortcodes/gitea.html              |  6 ++---
 layouts/shortcodes/github.html             |  7 ++---
 7 files changed, 36 insertions(+), 39 deletions(-)
 rename data/{colorsRepos.json => repoColors.json} (100%)
 create mode 100644 layouts/partials/get-repo-languages.html

diff --git a/data/colorsRepos.json b/data/repoColors.json
similarity index 100%
rename from data/colorsRepos.json
rename to data/repoColors.json
diff --git a/layouts/partials/get-repo-languages.html b/layouts/partials/get-repo-languages.html
new file mode 100644
index 00000000..5832025f
--- /dev/null
+++ b/layouts/partials/get-repo-languages.html
@@ -0,0 +1,20 @@
+{{ $repoColors := site.Data.repoColors }}
+{{ $classNameMap := dict }}
+{{ range $language, $unused := $repoColors }}
+  {{ $className := printf "background-color-%s" (md5 $language) }}
+  {{ $classNameMap = merge $classNameMap (dict $className $language) }}
+{{ end }}
+
+{{ $classNames := slice }}
+{{ range site.Pages }}
+  {{ $matchedClasses := findRE `background-color-[a-f0-9]{32}` .Content }}
+  {{ range $matchedClasses }}
+    {{ with index $classNameMap . }}
+      {{ $classNames = $classNames | append . }}
+    {{ else }}
+      {{ $classNames = $classNames | append "fallback" }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ return (uniq $classNames) }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e68dc932..1a9c2098 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -85,28 +85,14 @@
     {{ end }}
   {{ end }}
 
-  {{ $repoShortcodeExists := false }}
-  {{ range .Site.Pages }}
-    {{ if or (.Page.HasShortcode "codeberg") (.Page.HasShortcode "forgejo") (.Page.HasShortcode "gitea") (.Page.HasShortcode "github") }}
-      {{ $repoShortcodeExists = true }}
-    {{ end }}
-  {{ end }}
-  {{ if $repoShortcodeExists }}
-    {{ $colorsRepos := .Site.Data.colorsRepos }}
-    {{ range $language, $color := $colorsRepos }}
-      {{ if not $color }}
-        {{ $color = "" }}
-      {{ end }}
-      {{ $className := printf "color-repo-%s" (md5 $language) }}
-      {{ $cssColorRepos := printf ".%s { background-color: %s; }" $className $color }}
-      {{ $cssColorRepos = $cssColorRepos | resources.FromString "css/color-repo.css" }}
-      {{ $assets.Add "css" (slice $cssColorRepos) }}
-    {{ end }}
-    {{ $color := "#0077b6" }}
-    {{ $className := "color-repo-fallback" }}
-    {{ $cssColorRepos := printf ".%s { background-color: %s; }" $className $color }}
-    {{ $cssColorRepos = $cssColorRepos | resources.FromString "css/color-repo.css" }}
-    {{ $assets.Add "css" (slice $cssColorRepos) }}
+  {{ $repoLanguages := partial "functions/repo-languages.html" }}
+  {{ $repoColors := .Site.Data.repoColors }}
+  {{ range $repoLanguages }}
+    {{ $color := index $repoColors . | default "#0077b6" }}
+    {{ $className := printf "background-color-%s" (md5 .) }}
+    {{ $cssRepoColor := printf ".%s { background-color: %s; }" $className $color }}
+    {{ $cssRepoColor = $cssRepoColor | resources.FromString (printf "css/background-color.css") }}
+    {{ $assets.Add "css" (slice $cssRepoColor) }}
   {{ end }}
 
   {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index efcd66d3..45a8275c 100644
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -22,10 +22,8 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $className := "color-repo-fallback" }}
-          {{ if .language }}
-            {{ $className = printf "color-repo-%s" (md5 .language) }}
-          {{ end }}
+          {{ $language := .language | default "fallback" }}
+          {{ $className := printf "background-color-%s" (md5 $language) }}
           <span
             class="mr-1 inline-block h-3 w-3 rounded-full {{ $className }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index 30cd00a4..9131d4cc 100644
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -22,10 +22,8 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $className := "color-repo-fallback" }}
-          {{ if .language }}
-            {{ $className = printf "color-repo-%s" (md5 .language) }}
-          {{ end }}
+          {{ $language := .language | default "fallback" }}
+          {{ $className := printf "background-color-%s" (md5 $language) }}
           <span
             class="mr-1 inline-block h-3 w-3 rounded-full {{ $className }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index e83b0700..9f3f1e25 100644
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -22,10 +22,8 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
-          {{ $className := "color-repo-fallback" }}
-          {{ if .language }}
-            {{ $className = printf "color-repo-%s" (md5 .language) }}
-          {{ end }}
+          {{ $language := .language | default "fallback" }}
+          {{ $className := printf "background-color-%s" (md5 $language) }}
           <span
             class="mr-1 inline-block h-3 w-3 rounded-full {{ $className }}"></span>
           <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index 66b0c151..4c4c2124 100644
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -37,10 +37,8 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
-            {{ $className := "color-repo-fallback" }}
-            {{ if .language }}
-              {{ $className = printf "color-repo-%s" (md5 .language) }}
-            {{ end }}
+            {{ $language := .language | default "fallback" }}
+            {{ $className := printf "background-color-%s" (md5 $language) }}
             <span
               class="mr-1 inline-block h-3 w-3 rounded-full {{ $className }}"></span>
             <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
@@ -73,5 +71,4 @@
         data-repo-id="{{ $id }}"></script>
     </a>
   {{- end -}}
-
 </div>