added tags but no filtering yet

Dan G · Dan G · commit 6ac1f5d7e671 · 2024-10-21T14:54:06.000-04:00
diff --git a/site/content/guides/end-to-end-monitoring.md b/site/content/guides/end-to-end-monitoring.md
@@ -5,7 +5,8 @@ description: >-
   Learn end-to-end monitoring with playwright to test key website flows. Follow our guide that gets you up and running in 10 minutes.
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: FAQ
+tags:
+  - FAQ
 ---
 ## An overview of end-to-end monitoring
 
diff --git a/site/content/guides/monitoring-an-openapi-spec.md b/site/content/guides/monitoring-an-openapi-spec.md
@@ -4,7 +4,8 @@ description: >-
   OpenAPI and Swagger help users design and document APIs in a way that is readable from both humans and machines. As a consequence, they can also be used to generate the code that will run the specified API - both on the provider and consumer side. Can we leverage this same principle to simplify API monitoring? After a brief first look at OpenAPI and Swagger, this article will show how we can quickly use them to monitor a new or existing API.
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: API
+tags: 
+  - API
 ---
 
 ## What is the OpenAPI Specification?
diff --git a/site/content/guides/monitoring-as-code.md b/site/content/guides/monitoring-as-code.md
@@ -4,7 +4,8 @@ description: >-
   Monitoring as code is the practice of managing monitoring configurations and alerts through code. This approach offers several benefits for engineering teams at scale, including codified, version-controlled, and reusable monitoring configurations.
 author: Daniel Giordano
 avatar: 'images/avatars/daniel-giordano.png'
-tag: FAQ
+tags:
+  - FAQ
 ---
 
 ## An overview of monitoring as code
diff --git a/site/content/guides/monitoring-ecommerce-apps-using-playwright.md b/site/content/guides/monitoring-ecommerce-apps-using-playwright.md
@@ -6,7 +6,8 @@ displayDescription: >-
   The as code movement has been picking up steam over the last few years, offering a way for DevOps teams to transparently manage and scale cloud infrastructure, security and other resources. Why should the way we manage monitoring be any different? In this article, we address this point and illustrate it with a practical example of monitoring as code (MaC) via our Checkly CLI.
 author: Hannes Lenke
 avatar: 'images/avatars/hannes-lenke.png'
-tag: Playwright
+tags:
+  - Playwright
 ---
 
 ## Inspired by Infrastructure-as-Code and E2E-Testing
diff --git a/site/content/guides/monitoring-ecommerce-apps-using-terraform.md b/site/content/guides/monitoring-ecommerce-apps-using-terraform.md
@@ -4,7 +4,8 @@ description: >-
   The trend of declaring infrastructure as code has been picking up steam over the last few years, offering a way for DevOps teams to transparently manage and scale cloud infrastructure. Why should the way we manage monitoring be any different? In this article, we address this point and illustrate it with a practical example of Monitoring-as-Code on Checkly.
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: Terraform
+tags:
+  - Terraform
 ---
 The trend of declaring infrastructure as code has been picking up steam over the last few years, offering a way for DevOps teams to transparently manage, monitor and scale cloud infrastructure. Why should the way we manage monitoring be any different? In this article, we address this point and illustrate it with a practical example of Monitoring-as-Code on Checkly.
 
diff --git a/site/content/guides/monitoring-the-stripe-api.md b/site/content/guides/monitoring-the-stripe-api.md
@@ -5,7 +5,8 @@ description: >-
   Application Programming Interfaces (APIs) are used throughout software to define interactions between different software applications. In this article we focus on web APIs specifically, taking a look at how they fit in the Jamstack architecture and how we can set up API monitoring in order to make sure they don't break and respond fast.
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: API
+tags:
+  - API
 ---
 
 {{< figure src="/guides/images/guides-checkly-jamstack-header.png" alt="jamstack architecture diagram" title="Jamstack applications heavily rely on APIs" >}}
diff --git a/site/content/guides/moving-from-puppeteer-to-playwright.md b/site/content/guides/moving-from-puppeteer-to-playwright.md
@@ -4,7 +4,8 @@ description: >-
   The switch from Puppeteer to Playwright is easy. But is it worth it? And how exactly does one migrate existing scripts from one tool to another? What are the required code-level changes, and what new features and approaches does the switch enable?
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: Playwright
+tags:
+  - Playwright
 ---
 
 > **UPDATE**: _you can use our {{< newtabref  href="https://github.com/checkly/puppeteer-to-playwright" title="puppeteer-to-playwright" >}} conversion script to quickly migrate your Puppeteer codebase to Playwright._
diff --git a/site/content/guides/setup-scripts-for-apis.md b/site/content/guides/setup-scripts-for-apis.md
@@ -5,7 +5,8 @@ description: >-
   Setup scripts are a fundamental tool to tailor API checks to your own target endpoints. Their power and flexibility can intimidate beginners, who might struggle to understand how the different parts fit together. This guide will present and break down different real-world examples to help you master this game-changing tool.
 author: Giovanni Rago
 avatar: 'images/avatars/giovanni-rago.png'
-tag: API
+tags:
+  - API
 ---
 
 ## The importance of self-contained checks
diff --git a/site/content/guides/the-programmable-monitoring-platform.md b/site/content/guides/the-programmable-monitoring-platform.md
@@ -4,7 +4,8 @@ description: >-
   The monitoring as code workflow enables developers to code, test and deploy your entire monitoring infrastructure. This guide explains how to leverage TypeScript/JavaScript to configure your monitoring setup dynamically.
 author: Stefan Judis
 avatar: 'images/avatars/stefan-judis.jpg'
-tag: FAQ
+tags:
+  - FAQ
 ---
 
 With the release of [the Checkly CLI](https://www.checklyhq.com/docs/cli/), monitoring as code (Mac) enables you to **code, test, and deploy** your entire monitoring setup. Use the CLI to programmatically create monitoring resources, test these in CI/CD development workflows and then deploy them to the Checkly cloud to monitor your sites and APIs.
diff --git a/site/layouts/_default/terms.html b/site/layouts/_default/terms.html
@@ -0,0 +1,15 @@
+<!-- layouts/_default/terms.html -->
+{{ define "main" }}
+  <div class="main py-5">
+    <div class="container">
+      <h1 class="display-3">{{ .Title }}</h1>
+      <ul class="taxonomy-list">
+        {{ range .Data.Terms }}
+          <li>
+            <a href="{{ .Permalink }}">{{ .Title }} ({{ .Count }})</a>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+{{ end }}
diff --git a/site/layouts/guides/list.html b/site/layouts/guides/list.html
@@ -4,29 +4,27 @@
       <h1 class="display-3">{{ .Title }}</h1>
       <p class="lead-text">{{ .Params.description }}</p>
 
-   
-
       <!-- Guides List -->
       <div class="guides__list">
         {{ range where .Site.RegularPages.ByLastmod.Reverse "Section" "guides" }}
-          <div class="guide-card" data-tags="{{ with .Params.tag }}{{ delimit . ", " }}{{ end }}">
+          <div class="guide-card" data-tags="{{ delimit .Params.tags ", " }}">
             <div>
               <div class="guide-info">
-                <div class="guide-tag"> 
-            
-                  {{ with .Params.tag }}
-                    {{ if (in (printf "%T" .) "string") }}
-                      {{ $tags := split . "," }}
-                      {{ range $tags }}
-                        <a href="/tags/{{ . | urlize }}">{{ . }}</a>{{ if not (eq . (index $tags (sub (len $tags) 1))) }}, {{ end }}
+                <div class="guide-tag">
+                  {{ with .Params.tags }}
+                    {{ if (in (printf "%T" .) "[]string") }}
+                      {{ range $index, $tag := . }}
+                        {{ $tag }}
                       {{ end }}
                     {{ else }}
-                      {{ range . }}
-                        <a href="/tags/{{ . | urlize }}">{{ . }}</a>{{ if not (eq . (index . (sub (len .) 1))) }}, {{ end }}
-                      {{ end }}
+                      <!-- Optional: Handle the case where tags is not an array -->
+                      <span>No tags available or invalid format</span>
                     {{ end }}
+                  {{ else }}
+                    <span>No tags available.</span>
                   {{ end }}
                 </div>
+
                 <h2>
                   <a href="{{ .RelPermalink }}">
                     {{ if .Params.displayTitle }}
@@ -36,15 +34,16 @@ <h2>
                     {{ end }}
                   </a>
                 </h2>
+
                 <p>
                   {{ if .Params.displayDescription }}
                     {{ .Params.displayDescription }}
                   {{ else }}
                     {{ .Description }}
                   {{ end }}
                 </p>
-               
               </div>
+
               <div class="write-info">
                 <img src="{{ .Params.avatar | relURL }}" alt="{{ .Params.author }}" width="24" height="24" />
                 <span>{{ .Params.author }}</span>
@@ -56,40 +55,4 @@ <h2>
       </div>
     </div>
   </div>
-
-  <ul>
-    {{ range where .Site.RegularPages.ByLastmod.Reverse ".Param.tags" "intersect" (slice "API") }}
-    <li>
-      <span>{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}</span>
-      <a href="{{ .URL }}">{{ .Title }}</a>
-    </li>
-    {{ end }}
-  </ul>
-  <!-- JavaScript for Filtering -->
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const tagButtons = document.querySelectorAll(".tag-btn");
-      const guides = document.querySelectorAll(".guide-card");
-
-      tagButtons.forEach(button => {
-        button.addEventListener("click", function () {
-          const tag = this.getAttribute("data-tag");
-
-          // Toggle active state
-          tagButtons.forEach(btn => btn.classList.remove("active"));
-          this.classList.add("active");
-
-          // Filter guides
-          guides.forEach(guide => {
-            const guideTags = guide.getAttribute("data-tags").split(", ");
-            if (guideTags.includes(tag)) {
-              guide.style.display = "block";
-            } else {
-              guide.style.display = "none";
-            }
-          });
-        });
-      });
-    });
-  </script>
 {{ end }}
diff --git a/site/layouts/guides/single.html b/site/layouts/guides/single.html
@@ -1,26 +1,24 @@
 {{ define "main" }}
   <div class="d-flex container-fluid guides">
     <div class="guides-page">
-      <div class="col-sm-12 col-lg-11">
+      <div class="">
         <div class="guides-header">
           <a href="/guides/">Back to guides</a>
         </div>
       	<div class="guides__label">
-      		<span class="guide-tag"> 
-            
-            {{ with .Params.tag }}
-              {{ if (in (printf "%T" .) "string") }}
-                {{ $tags := split . "," }}
-                {{ range $tags }}
-                  <a href="/tags/{{ . | urlize }}">{{ . }}</a>{{ if not (eq . (index $tags (sub (len $tags) 1))) }}, {{ end }}
-                {{ end }}
-              {{ else }}
-                {{ range . }}
-                  <a href="/tags/{{ . | urlize }}">{{ . }}</a>{{ if not (eq . (index . (sub (len .) 1))) }}, {{ end }}
-                {{ end }}
-              {{ end }}
+          {{ with .Params.tags }}
+          {{ if (in (printf "%T" .) "[]string") }}
+            {{ range $index, $tag := . }}
+              {{ $tag }}
             {{ end }}
-      </span>
+          {{ else }}
+            <!-- Optional: Handle the case where tags is not an array -->
+            <span>No tags available or invalid format</span>
+          {{ end }}
+        {{ else }}
+          <span>No tags available.</span>
+        {{ end }}
+        </div>
       
       	</div>
       	<h1 class="guides__title">
diff --git a/site/layouts/guides/tags.html b/site/layouts/guides/tags.html
@@ -0,0 +1,28 @@
+<!-- layouts/_default/terms.html -->
+{{ define "main" }}
+  <div class="main py-5">
+    <div class="container">
+      <h1 class="display-3">{{ .Title }}</h1>
+      <ul class="taxonomy-list">
+        {{ range .Params.tags }}
+          <li>
+            <div class="guide-tag">
+                {{ with .Params.tags }}
+                  {{ if (in (printf "%T" .) "[]string") }}
+                    {{ range $index, $tag := . }}
+                      <a href="/guides/tags/{{ $tag | urlize }}">{{ $tag }}</a>{{ if lt (add $index 1) (len .) }} {{ end }}
+                    {{ end }}
+                  {{ else }}
+                    <!-- Optional: Handle the case where tags is not an array -->
+                    <span>No tags available or invalid format</span>
+                  {{ end }}
+                {{ else }}
+                  <span>No tags available.</span>
+                {{ end }}
+              </div>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+{{ end }}
diff --git a/site/layouts/guides/terms.html b/site/layouts/guides/terms.html
@@ -0,0 +1,28 @@
+<!-- layouts/_default/terms.html -->
+{{ define "main" }}
+  <div class="main py-5">
+    <div class="container">
+      <h1 class="display-3">{{ .Title }}</h1>
+      <ul class="taxonomy-list">
+        {{ range .Params.tags }}
+          <li>
+            <div class="guide-tag">
+                {{ with .Params.tags }}
+                  {{ if (in (printf "%T" .) "[]string") }}
+                    {{ range $index, $tag := . }}
+                      <a href="/guides/tags/{{ $tag | urlize }}">{{ $tag }}</a>{{ if lt (add $index 1) (len .) }} {{ end }}
+                    {{ end }}
+                  {{ else }}
+                    <!-- Optional: Handle the case where tags is not an array -->
+                    <span>No tags available or invalid format</span>
+                  {{ end }}
+                {{ else }}
+                  <span>No tags available.</span>
+                {{ end }}
+              </div>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+{{ end }}
diff --git a/src/scss/_guides.scss b/src/scss/_guides.scss
@@ -5,17 +5,7 @@
     flex-direction: row ;
 	flex-wrap: wrap;
     gap: 2rem;
-	.guide-tag {
-		border: 1px solid #0075ff;
-		padding:5px 10px;
-		border-radius:4px;
-		margin-bottom:16px;
-		width: fit-content;
-		a {
-			color: #0075ff;
-			font-size: 14px;
-		}
-	}
+	
 	.display-3 {
 	  text-align: center;
 	  margin-bottom: 10px;
@@ -116,7 +106,20 @@
 	margin-bottom: 2rem;
 }
 
-
+.guide-tag {
+	border: 1px solid #0075ff;
+	background-color: #0075ff;
+	padding:5px 10px;
+	border-radius:4px;
+	margin-bottom:16px;
+	width: fit-content;
+	color: #fff;
+	font-size: 14px;
+	a {
+		color: #fff;
+		font-size: 14px;
+	}
+}
 
 .guides {
 	$toc-width: 14rem;
@@ -130,10 +133,11 @@
 	  font-size: 16px;
 	  font-weight: 600;
 	  line-height: 20px;
-	  color: #fff;;
+	  background-color: #0075ff;
+	  color: #fff;
 	  text-align: center;
 	  text-transform: uppercase;
-		background: $blue-dark;
+		background: #0075ff;
 		border-radius: 3px;
 		a {
 			color: #fff;
