Update single.html

Author: mich-elle-luna

layouts/operate/single.html

@@ -14,41 +14,43 @@ <h1>
           {{ end }}
           {{ .Title }}</h1>
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}
-    {{ if .Params.categories }}
+   {{ if .Params.categories }}
 <div class="post-categories" style="display: table;">
   <table style="border-collapse: separate; border-spacing: 0; background-color: #ffffff;">
     <thead>
       <tr>
-        {{ $total := len .Params.categories }} <!-- Store the total number of categories -->
-        {{ range $index, $element := .Params.categories }}
-        {{ if not (in (slice "docs" "operate" "integrate" "develop") .) }} <!-- Exclude specific categories -->
-          {{ $displayName := $element }} <!-- Set default display name -->
-          {{ $color := "#000000" }} <!-- Default color (black) -->
+        {{ $visibleCategories := slice }}
+        {{ range .Params.categories }}
+        {{ if not (in (slice "docs" "operate" "integrate" "develop") .) }}
+          {{ $visibleCategories = append $visibleCategories . }}
+        {{ end }}
+        {{ end }}
+        {{ range $index, $element := $visibleCategories }}
+          {{ $displayName := $element }}
+          {{ $color := "#ffffff" }} <!-- Default background color (white) -->
           {{ if eq $element "rs" }}
             {{ $displayName = "Redis Enterprise Software" }}
-            {{ $color = "#DCFF1E" }} <!-- Yellow bullet point for Redis Enterprise Software -->
+            {{ $color = "#DCFF1E" }} <!-- Yellow background for Redis Enterprise Software -->
           {{ else if eq $element "rc" }}
             {{ $displayName = "Redis Cloud" }}
-            {{ $color = "#80DBFF" }} <!-- Blue bullet point for Redis Cloud -->
+            {{ $color = "#80DBFF" }} <!-- Blue background for Redis Cloud -->
           {{ else if eq $element "kubernetes" }}
             {{ $displayName = "Redis Enterprise for Kubernetes" }}
-            {{ $color = "#8A99A0" }} <!-- Light grey bullet point for Kubernetes -->
+            {{ $color = "#8A99A0" }} <!-- Light grey background for Kubernetes -->
           {{ else if eq $element "oss" }}
             {{ $displayName = "Redis Source Available" }}
-            {{ $color = "#C795E3" }} <!-- Purple bullet point for Redis Source Available -->
+            {{ $color = "#C795E3" }} <!-- Purple background for Redis Source Available -->
           {{ else if eq $element "stack" }}
             {{ $displayName = "Redis Stack" }}
-            {{ $color = "#49859C" }} <!-- Medium blue bullet point for Redis Stack -->
+            {{ $color = "#49859C" }} <!-- Medium blue background for Redis Stack -->
           {{ else if eq $element "redisinsight" }}
             {{ $displayName = "Redis Insight" }}
-            {{ $color = "#FD4439" }} <!-- Red bullet point for Redis Insight -->
+            {{ $color = "#FD4439" }} <!-- Red background for Redis Insight -->
           {{ end }}
-          <th style="border: 1px solid #ccc; padding: 8px; text-align: left; font-weight: normal; {{ if eq $index 0 }}border-top-left-radius: 10px; border-bottom-left-radius: 10px;{{ else if eq $index (sub $total 1) }}border-top-right-radius: 10px; border-bottom-right-radius: 10px;{{ end }}">
-            <span style="color: {{ $color }}; font-size: 30px;">&#8226;</span> <!-- Even larger colored bullet point -->
+          <th style="border: 1px solid #ccc; padding: 8px; text-align: left; font-weight: normal; background-color: {{ $color }}; {{ if eq $index 0 }}border-top-left-radius: 10px; border-bottom-left-radius: 10px;{{ end }}{{ if eq $index (sub (len $visibleCategories) 1) }}border-top-right-radius: 10px; border-bottom-right-radius: 10px;{{ end }}">
             {{ $displayName }}
           </th>
         {{ end }}
-        {{ end }}
       </tr>
     </thead>
     <tbody>
@@ -61,6 +63,7 @@ <h1>
 
 
 
+
         <!-- In-page banner -->
         {{ if .Params.bannerText }}
           <!-- Banner params are in the current page's front matter -->