guides: use icons for languages

dvdksn · dvdksn · commit 4b3c6b636cfa · 2024-10-25T11:42:47.000+02:00
Signed-off-by: David Karlsson &lt;35727626+dvdksn@users.noreply.github.com&gt;
diff --git a/content/languages/c-sharp/_index.md b/content/languages/c-sharp/_index.md
@@ -1,3 +1,5 @@
 ---
 title: C#
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/csharp/csharp-original.svg
 ---
diff --git a/content/languages/cpp/_index.md b/content/languages/cpp/_index.md
@@ -1,3 +1,5 @@
 ---
 title: C++
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg
 ---
diff --git a/content/languages/go/_index.md b/content/languages/go/_index.md
@@ -1,3 +1,5 @@
 ---
 title: Go
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/go/go-original.svg
 ---
diff --git a/content/languages/java/_index.md b/content/languages/java/_index.md
@@ -1,3 +1,5 @@
 ---
 title: Java
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg
 ---
diff --git a/content/languages/js/_index.md b/content/languages/js/_index.md
@@ -1,3 +1,5 @@
 ---
 title: JavaScript
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg
 ---
diff --git a/content/languages/php/_index.md b/content/languages/php/_index.md
@@ -1,3 +1,5 @@
 ---
 title: PHP
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg
 ---
diff --git a/content/languages/python/_index.md b/content/languages/python/_index.md
@@ -1,3 +1,5 @@
 ---
 title: Python
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg
 ---
diff --git a/content/languages/r/_index.md b/content/languages/r/_index.md
@@ -1,3 +1,5 @@
 ---
 title: R
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/r/r-original.svg
 ---
diff --git a/content/languages/ruby/_index.md b/content/languages/ruby/_index.md
@@ -1,3 +1,5 @@
 ---
 title: Ruby
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/ruby/ruby-original.svg
 ---
diff --git a/content/languages/rust/_index.md b/content/languages/rust/_index.md
@@ -1,3 +1,5 @@
 ---
 title: Rust
+params:
+  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/rust/rust-original.svg
 ---
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -154,7 +154,6 @@
       "bg-gradient-to-t",
       "bg-gray-light-100",
       "bg-gray-light-200",
-      "bg-gray-light-300",
       "bg-gray-light-400",
       "bg-gray-light-700",
       "bg-green-light",
@@ -446,6 +445,7 @@
       "right-0",
       "right-3",
       "right-8",
+      "ring-2",
       "ring-[1.5px]",
       "ring-gray-light-200",
       "rotate-45",
diff --git a/layouts/guides/landing.html b/layouts/guides/landing.html
@@ -52,11 +52,10 @@
       {{- range $name, $taxonomy := where site.Taxonomies.languages ".Page.Type" "guides" }}
         {{- $id := anchorize (fmt.Printf "lang-%s" $name) }}
         <button
-          class="px-2 rounded bg-gray-light-200 dark:bg-gray-dark-300
-                 text-gray-light-800 dark:text-gray-dark-800"
-          :class="{ 'text-black dark:text-white bg-gray-light-300 dark:bg-gray-dark-400': selected['languages'].includes('{{ $name }}') }"
+          class="p-2 rounded"
+          :class="{ 'ring-2': selected['languages'].includes('{{ $name }}') }"
           @click="toggleFilter('languages', '{{ $name }}')">
-          {{ .Page.LinkTitle }}
+          <img height="24" title="{{ .Page.LinkTitle }}" width="24" src="{{ .Page.Params.icon }}">
         </button>
       {{ end }}
     </fieldset>
@@ -150,7 +149,7 @@ <h2 x-show="noFilters()" class="scroll-mt-36">All guides</h2>
   <div class="flex flex-wrap md:flex-nowrap gap-2">
     {{- $langs := .GetTerms "languages" }}
     {{- range $langs }}
-      {{ template "termchip" .Page.LinkTitle }}
+      <img height="24" width="24" src="{{ .Page.Params.icon }}">
     {{- end }}
     {{- $tags := .GetTerms "tags" }}
     {{- range $tags }}
@@ -170,6 +169,9 @@ <h2 x-show="noFilters()" class="scroll-mt-36">All guides</h2>
   <span class="text-sm inline-flex items-center rounded bg-gray-light-200 px-2
               text-gray-light-800 dark:bg-gray-dark-300
               dark:text-gray-dark-800 select-none">
+    <span class="icon-svg icon-sm pb-0.5">
+      {{ partialCached "icon" "tag" "tag" }}
+    </span>
     {{ . }}
   </span>
 {{- end }}

-Original file line number
+Diff line change
@@ @@ -1,3 +1,5 @@ @@
 ---
 title: C#
 +params:
 +  icon: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/csharp/csharp-original.svg
 ---