Use categories to identify products on each content page

layouts/_default/single.html

@@ -8,4 +8,4 @@ <h1>{{ .Title }}</h1>
     </section>
 
   </main>
-{{ end }}
+{{ end }}

layouts/operate/list.html

@@ -16,7 +16,52 @@ <h1>
         </h1>
 
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}
-
+        {{ if .Params.categories }}
+<div class="post-categories" style="display: table;">
+  <table style="border-collapse: separate; border-spacing: 0; background-color: #ffffff;">
+    <thead>
+      <tr>
+        {{ $visibleCategories := slice }}
+        {{ range .Params.categories }}
+        {{ if not (in (slice "docs" "operate" "integrate" "develop") .) }}
+          {{ $visibleCategories = $visibleCategories | append (slice .) }} <!-- Corrected Append -->
+        {{ end }}
+        {{ end }}
+        {{ range $index, $element := $visibleCategories }}
+          {{ $displayName := $element }}
+          {{ $color := "#ffffff" }} <!-- Default background color (white) -->
+          {{ if eq $element "rs" }}
+            {{ $displayName = "Redis Enterprise Software" }}
+            {{ $color = "#DCFF1E" }}
+          {{ else if eq $element "rc" }}
+            {{ $displayName = "Redis Cloud" }}
+            {{ $color = "#80DBFF" }}
+          {{ else if eq $element "kubernetes" }}
+            {{ $displayName = "Redis Enterprise for Kubernetes" }}
+            {{ $color = "#8A99A0" }}
+          {{ else if eq $element "oss" }}
+            {{ $displayName = "Redis Source Available" }}
+            {{ $color = "#C795E3" }}
+          {{ else if eq $element "stack" }}
+            {{ $displayName = "Redis Stack" }}
+            {{ $color = "#49859C" }}
+          {{ else if eq $element "redisinsight" }}
+            {{ $displayName = "Redis Insight" }}
+            {{ $color = "#FD4439" }}
+          {{ end }}
+          <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 }}
+      </tr>
+    </thead>
+    <tbody>
+      <!-- The tbody is intentionally left empty as all content is in the header -->
+    </tbody>
+  </table>
+</div>
+{{ end }}
+
         <!-- In-page banner -->
         {{ if .Params.bannerText }}
           <!-- Banner params are in the current page's front matter -->

layouts/operate/single.html

@@ -14,7 +14,57 @@ <h1>
           {{ end }}
           {{ .Title }}</h1>
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}
-
+  {{ if .Params.categories }}
+<div class="post-categories" style="display: table;">
+  <table style="border-collapse: separate; border-spacing: 0; background-color: #ffffff;">
+    <thead>
+      <tr>
+        {{ $visibleCategories := slice }}
+        {{ range .Params.categories }}
+        {{ if not (in (slice "docs" "operate" "integrate" "develop") .) }}
+          {{ $visibleCategories = $visibleCategories | append (slice .) }} <!-- Corrected Append -->
+        {{ end }}
+        {{ end }}
+        {{ range $index, $element := $visibleCategories }}
+          {{ $displayName := $element }}
+          {{ $color := "#ffffff" }} <!-- Default background color (white) -->
+          {{ if eq $element "rs" }}
+            {{ $displayName = "Redis Enterprise Software" }}
+            {{ $color = "#DCFF1E" }}
+          {{ else if eq $element "rc" }}
+            {{ $displayName = "Redis Cloud" }}
+            {{ $color = "#80DBFF" }}
+          {{ else if eq $element "kubernetes" }}
+            {{ $displayName = "Redis Enterprise for Kubernetes" }}
+            {{ $color = "#8A99A0" }}
+          {{ else if eq $element "oss" }}
+            {{ $displayName = "Redis Source Available" }}
+            {{ $color = "#C795E3" }}
+          {{ else if eq $element "stack" }}
+            {{ $displayName = "Redis Stack" }}
+            {{ $color = "#49859C" }}
+          {{ else if eq $element "redisinsight" }}
+            {{ $displayName = "Redis Insight" }}
+            {{ $color = "#FD4439" }}
+          {{ end }}
+          <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 }}
+      </tr>
+    </thead>
+    <tbody>
+      <!-- The tbody is intentionally left empty as all content is in the header -->
+    </tbody>
+  </table>
+</div>
+{{ end }}
+
+
+
+
+
+
         <!-- In-page banner -->
         {{ if .Params.bannerText }}
           <!-- Banner params are in the current page's front matter -->