♻️ Refactor Use universal json and move styles out of line

Author: servedsmart

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

@@ -45,6 +45,31 @@
   {{ if $cssCustom }}
   {{ $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 }}
+  {{ 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") }}
   <link type="text/css" rel="stylesheet" href="{{ $bundleCSS.RelPermalink }}"

data/forgejoColors.json

@@ -1,7 +1,6 @@
 {{ $id := delimit (slice "codeberg" (partial "functions/uid.html" .)) "-" }}
 {{- $codebergURL := print "https://codeberg.org/api/v1/repos/" (.Get "repo") -}}
 {{- $codebergData := resources.GetRemote $codebergURL | transform.Unmarshal -}}
-{{- $codebergColors := .Site.Data.codebergColors -}}
 {{- with $codebergData -}}
   <div class="codeberg-card-wrapper">
     <a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
@@ -23,13 +22,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $className := "color-repo-fallback" }}
+          {{ if .language }}
+            {{ $className = printf "color-repo-%s" (md5 .language) }}
+          {{ end }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $codebergColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></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">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>

data/giteaColors.json

@@ -1,7 +1,6 @@
 {{ $id := delimit (slice "forgejo" (partial "functions/uid.html" .)) "-" }}
 {{- $forgejoURL := print (.Get "server" | default .Site.Params.forgejoDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
 {{- $forgejoData := resources.GetRemote $forgejoURL | transform.Unmarshal -}}
-{{- $forgejoColors := .Site.Data.forgejoColors -}}
 {{- with $forgejoData -}}
   <div class="forgejo-card-wrapper">
     <a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
@@ -23,13 +22,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $className := "color-repo-fallback" }}
+          {{ if .language }}
+            {{ $className = printf "color-repo-%s" (md5 .language) }}
+          {{ end }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $forgejoColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></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">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>

data/githubColors.json

@@ -1,7 +1,6 @@
 {{ $id := delimit (slice "gitea" (partial "functions/uid.html" .)) "-" }}
 {{- $giteaURL := print (.Get "server" | default .Site.Params.giteaDefaultServer) "/api/v1/repos/" (.Get "repo") -}}
 {{- $giteaData := resources.GetRemote $giteaURL | transform.Unmarshal -}}
-{{- $giteaColors := .Site.Data.giteaColors -}}
 {{- with $giteaData -}}
   <div class="gitea-card-wrapper">
     <a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
@@ -23,13 +22,12 @@
         </p>
 
         <div class="m-0 mt-2 flex items-center">
+          {{ $className := "color-repo-fallback" }}
+          {{ if .language }}
+            {{ $className = printf "color-repo-%s" (md5 .language) }}
+          {{ end }}
           <span
-            class="mr-1 inline-block h-3 w-3 rounded-full"
-            style="background-color: {{ if .language }}
-              {{- index $giteaColors .language -}}
-            {{ else }}
-              #0077b6
-            {{ end }}"></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">
             {{ if .language }}{{ .language }}{{ else }}null{{ end }}
           </div>

layouts/partials/head.html

@@ -1,7 +1,6 @@
 {{ $id := delimit (slice "github" (partial "functions/uid.html" .)) "-" }}
 {{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
 {{- $githubData := resources.GetRemote $githubURL | transform.Unmarshal -}}
-{{- $githubColors := .Site.Data.githubColors -}}
 {{- $githubThumbnailURL := print "https://opengraph.githubassets.com/0/" (.Get "repo") -}}
 {{- $showThumbnail := .Get "showThumbnail" | default true -}}
 
@@ -38,13 +37,12 @@
           </p>
 
           <div class="m-0 mt-2 flex items-center">
+            {{ $className := "color-repo-fallback" }}
+            {{ if .language }}
+              {{ $className = printf "color-repo-%s" (md5 .language) }}
+            {{ end }}
             <span
-              class="mr-1 inline-block h-3 w-3 rounded-full"
-              style="background-color: {{ if .language }}
-                {{- index $githubColors .language -}}
-              {{ else }}
-                #0077b6
-              {{ end }}"></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">
               {{ if .language }}{{ .language }}{{ else }}null{{ end }}
             </div>