functional filter buttons!!!!!!

Author: forstisabella

src/_data/release-notes.yml

@@ -2,9 +2,8 @@
 
 notes: 
   - title: Segment Extensions General Availability
-    slug: segment-extensions-ga
     description: "Segment Extensions, including dbt and Git Sync, is generally available. <br><br> Extensions provides third-party integrations that add an automated experience with your existing tools, like dbt labs for syncing models or Git repositories for managing versioning for Segment Workspace changes. dbt Extension is available to all tiers, while Git Sync is available for Team and Business plans. <br><br> For more information, see Segment's [Extensions documentation](/docs/segment-app/extensions/)."
-    date: 08-16-2024
+    date: August 16, 2024
     product-area: 
       - segment app 
     release-stage: ga
@@ -14,13 +13,25 @@ notes:
         - business
     read-more: "/docs/segment-app/extensions/"
   - title: Linked Audiences and Data Graph General Availability
-    slug: segment-linked-and-data-graph-ga
     description: "Segment's Linked Audiences and Data Graph are now Generally Available for Snowflake & Databricks. Linked Audiences empowers marketers to effortlessly create targeted audiences by combining behavioral data from the Segment Profile and warehouse entity data within a self-serve, no-code interface. This tool accelerates audience creation, enabling precise targeting, enhanced customer personalization, and optimized marketing spend without the need for constant data team support. The Data Graph acts as a semantic layer that allows businesses to define relationships between entity datasets in the warehouse — such as accounts, subscriptions, households, and products — with the Segment Profile. The Data Graph makes these relational datasets easily accessible to business teams for targeted and personalized customer engagements."
-    date: 08-23-2024
+    date: August 23, 2024
     product-area: 
       - twilio engage 
     release-stage: ga
     plan: 
         - unify
         - team
-        - business
+        - business
+    read-more: "/docs/engage/audiences/linked-audiences/"
+  - title: Delivery Overview for Storage Destinations is in Public Beta
+    description: "End-to-end observability is coming to Warehouse Destinations.  For the first time, Delivery Overview gives you a comprehensive breakdown of how streaming source events convert to warehouse rows. For more information, see the Delivery Overview documentation."
+    date: August 12, 2024
+    product-area: 
+      - segment app
+      - storage 
+    release-stage: beta
+    plan: 
+        - free
+        - team
+        - business
+    read-more: "/docs/connections/delivery-overview/#storage-destinations"

src/_sass/components/_release-note-card.scss

@@ -5,7 +5,7 @@
     $this: &;
 
     position: relative;
-    padding: 20px;
+    padding: 10px;
     background-color: color(white);
     border: 1px solid color(gray-400);
     margin-top: 20px;
@@ -33,7 +33,7 @@
   }
 
   &--badges {
-    padding-top: 10px;
+    padding: 2px;
   }
 
   &--content {
@@ -51,6 +51,20 @@
     display: inline-block;
     font-size: 12px;
     font-weight: 500;
-    color: color(gray-900);
+    color: color(gray-700);
+  }
+
+  &--read-more {
+    position: absolute;
+    bottom: 20;
+    right: 20;
+    padding: 5px;
+  }
+  &--hidden {
+    visibility: hidden;
+    left: -999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
   }
 }

src/release-notes/test.md

@@ -3,28 +3,55 @@ title: Release Notes Test
 hide_toc: true
 ---
 
+<button class="button button-fill filter-button" onclick="javascript:hideCards(ga)">GA</button>
+<button class="button button-fill filter-button" onclick="javascript:hideCards(beta)">Beta</button>
+<button class="button button-fill filter-button" onclick="javascript:showCards()">Reset filter</button>
+
 {% assign notes = site.data.release-notes.notes %}
-{% for note in notes reversed %}
-<article class="release-note-card">
+{% for note in notes %}
+<section class="release-note-card {{ note.release-stage | slugify }}">
 <div class="release-note-card--box">
-  <span class="release-note-card--note-header">{{ note.title }}</span><br>
+  <span class="release-note-card--note-header" id="{{ note.title | slugify }}">{{ note.title }}</span><br>
   <div class="release-note-card--badges">
-    <span class="badge badge--purple">{{ note.release-stage }}</span>
+    <span class="badge badge--purple {{ note.release-stage | slugify }}">{{ note.release-stage }}</span>
     {% assign plans = note.plan %}
       {% for plan in plans %}
-      <span class="badge badge">{{ plan }}</span>
+      <span class="badge badge {{ plan | slugify }}">{{ plan }}</span>
       {% endfor %}
     {% assign product-area = note.product-area %}
       {% for item in product-area %}
-      <span class="badge badge--success">{{ item }}</span>
+      <span class="badge badge--success {{ item | slugify }}">{{ item }}</span>
       {% endfor %}
   </div>
 <div class="release-note-card--content">
   <main>
     <p>{{ note.description | markdownify }}</p>
-    <p class="release-note-card--date">Released {{ note.date }}</p>
+    <p class="release-note-card--date">Released {{ note.date }}</p> <a class="button button-fill release-note-card--read-more" href="{{ note.read-more }}">Read more</a>
   </main>
 </div>
 </div>
-</article>
-{% endfor %}
+</section>
+{% endfor %}
+
+<script type="text/javascript">
+var ga = "ga"
+var beta = "beta"
+var pilot = "pilot"
+ function hideCards(className) {
+  const sections = document.querySelectorAll("section");
+  sections.forEach((section) => {
+    if (!section.classList.contains(className)) {
+      section.classList.add("release-note-card--hidden");
+      }
+    });
+  }
+
+  function showCards() {
+  var sections = document.querySelectorAll("section");
+  sections.forEach((section) => {
+    if (section.classList.contains('release-note-card--hidden')) {
+      section.classList.remove('release-note-card--hidden');
+      }
+    });
+  }
+</script>