add haystack version tag (#207)

themes/haystack/assets/sass/pages/_grid-page.scss

@@ -30,7 +30,6 @@
 
   // Integrations grid
   .grid-page-grid.integrations-grid {
-
     @include sm {
       grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
     }
@@ -79,7 +78,7 @@
     position: relative;
     background-color: var(--color-bg-dark-blue);
 
-     h3 {
+    h3 {
       font-size: 1.5rem;
       text-align: center;
       color: var(--color-white);
@@ -114,19 +113,22 @@
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
-      gap: 0.25rem;
+      gap: 0.5rem;
 
       > div {
         font-size: 0.8rem;
         padding: 0.5rem 0.8rem;
         background-color: var(--color-light-grey);
         color: var(--color-dark-blue);
         text-transform: capitalize;
-        border-radius:999px;
+        border-radius: 999px;
         display: flex;
         align-items: center;
         gap: 0.25rem;
 
+        &.version {
+          background-color: var(--color-yellow);
+        }
 
         .icon {
           flex-shrink: 0;
@@ -147,7 +149,7 @@
       gap: 0.5rem;
       align-items: flex-end;
       z-index: 999;
-     
+
       .maintainer-icon {
         background-color: var(--color-blue);
         padding: 0.6rem;
@@ -179,9 +181,6 @@
         }
       }
     }
-
-
-
   }
 
   // Tutorial footer

themes/haystack/layouts/partials/integration-card.html

@@ -28,7 +28,30 @@ <h3>{{ .Params.name }}</h3>
   <p>{{ .Params.description }}</p>
 
 
+  {{/*  Tags  */}}
   <div class="integration-card-tags">
+    {{/*  Version  */}}
+    {{ with .Params.version }}
+      <div class="version">
+        <span class="icon">
+          <svg
+            width="12"
+            height="13"
+            viewBox="0 0 10 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.64185 4.13731L6.66646 3.70489L5.33638 1.0084C5.30005 0.934575 5.24029 0.874809 5.16646 0.838481C4.9813 0.747075 4.7563 0.823247 4.66372 1.0084L3.33365 3.70489L0.358256 4.13731C0.276224 4.14903 0.201224 4.1877 0.143802 4.24629C0.0743826 4.31764 0.0361291 4.41364 0.0374475 4.51318C0.038766 4.61272 0.0795484 4.70767 0.150834 4.77715L2.30357 6.87598L1.79497 9.83965C1.78305 9.90859 1.79068 9.9795 1.817 10.0443C1.84332 10.1092 1.88727 10.1653 1.94388 10.2064C2.00049 10.2475 2.06749 10.272 2.13728 10.2769C2.20707 10.2819 2.27685 10.2672 2.33872 10.2346L5.00005 8.83536L7.66138 10.2346C7.73404 10.2732 7.81841 10.2861 7.89927 10.2721C8.10318 10.2369 8.24029 10.0436 8.20513 9.83965L7.69654 6.87598L9.84927 4.77715C9.90787 4.71973 9.94654 4.64473 9.95826 4.5627C9.9899 4.35762 9.84693 4.16778 9.64185 4.13731ZM6.79068 6.58067L7.21373 9.04512L5.00005 7.88262L2.78638 9.04629L3.20943 6.58184L1.4188 4.83575L3.8938 4.47598L5.00005 2.23418L6.1063 4.47598L8.5813 4.83575L6.79068 6.58067Z"
+              fill="#2B2F55"
+            />
+          </svg>
+        </span>
+        <span>{{ . }}</span>
+      </div>
+    {{ end }}
+
+    {{/*  Type  */}}
     <div>
       <span class="icon">
         <svg