⚡ 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

Author: servedsmart

data/colorsRepos.json data/repoColors.jsondata/colorsRepos.json renamed to data/repoColors.json

@@ -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) }}

layouts/partials/get-repo-languages.html

@@ -46,29 +46,15 @@
   {{ $assets.Add "css" (slice $cssCustom) }}
   {{ end }}
 
-  {{ $repoShortcodeExists := false }}
-  {{ range .Site.Pages }}
-    {{ if or (.Page.HasShortcode "codeberg") (.Page.HasShortcode "forgejo") (.Page.HasShortcode "gitea") (.Page.HasShortcode "github") }}
-      {{ $repoShortcodeExists = true }}
-    {{ end }}
+  {{ $repoLanguages := partial "get-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 }}
-  {{ 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) }}
-{{ end }}
 
   {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint
   (.Site.Params.fingerprintAlgorithm | default "sha512") }}

layouts/partials/head.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">

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">

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">

layouts/shortcodes/gitea.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>