Fix blog landing bugs & add case study category

blog/index.page.tsx

@@ -11,13 +11,12 @@ export const frontmatter = {
   },
 };
 
-const target = { prefix: "" }; // TODO: fixme
-
 const categories = {
   general: "General",
   release_notes: "Release Notes",
   advisories: "Advisories",
   amendments: "Amendments",
+  case_study: "Case Study",
   development: "Development",
   developer_reflections: "Developer Reflections",
   features: "Features",
@@ -89,7 +88,7 @@ export default function Index() {
             <div className="col">
               <div className="text-bg">
                 <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
-                  <span className="post-date pb-2">
+                  <span className="hero-post-date pb-2">
                     {moment(heroPost.date).format(translate("blog.banner.date.part1","MMM"))}
                   </span>
                   {translate("blog.banner.date.part2", " ")}
@@ -135,14 +134,14 @@ export default function Index() {
                         className={`blog-filter input_${item}`}
                         type="checkbox"
                         name="categories"
-                        id={`input_${item}`}
+                        id={`input_desktop_${item}`}
                         defaultValue={`${item}`}
                         onChange={() => toggleCategory(item)}
                         defaultChecked
                       />
                       <label
                         className="font-weight-bold"
-                        htmlFor={`input_${item}`}
+                        htmlFor={`input_desktop_${item}`}
                       >
                         {translate(categories[item])}
                       </label>
@@ -173,14 +172,14 @@ export default function Index() {
                             className={`blog-filter input_${item}`}
                             type="checkbox"
                             name="categories"
-                            id={`input_${item}`}
+                            id={`input_mobile_${item}`}
                             defaultValue={`${item}`}
                             onChange={() => toggleCategory(item)}
                             defaultChecked
                           />
                           <label
                             className="font-weight-bold"
-                            htmlFor={`input_${item}`}
+                            htmlFor={`input_mobile_${item}`}
                           >
                             {translate(categories[item])}
                           </label>
@@ -200,10 +199,9 @@ export default function Index() {
                   className={`${card.category_id} pb-5 px-lg-4`}
                   id={card.title + i}
                 >
-                  <div className="mb-4" id="category-list">
+                  <div className="mb-4 category-list">
                     <img
-                      alt="card block"
-                      id={`${card.category_id}`}
+                      alt=""
                       className="mb-4"
                     />
                     <div
@@ -213,7 +211,7 @@ export default function Index() {
                     </div>
                   </div>
                   <div>
-                    <p id="card-date" className="mb-0">
+                    <p className="mb-0 card-date">
                       {moment(card.date).format(translate("blog.card.date","MMM DD, YYYY"))}
                       { card.author ? ` by ${card.author}` : ""}
                     </p>

blog/sidebars.yaml

@@ -1,3 +1,7 @@
+## Blog sidebar file. Reminder: blogs must use one of the hard-coded categories
+## in their labels frontmatter, or they won't show up in the list below the
+## latest post, and they won't have an image.
+
 - group: Blog
   groupTranslationKey: sidebar.blog
   page: index.page.tsx

styles/_blog.scss

@@ -36,33 +36,32 @@
     left: 0px;
   }
 
-  #card-date {
+  .card-date {
     color: $gray-400;
   }
 
-  .post-date {
+  .hero-post-date {
     text-decoration: overline solid #32E685 10%;
   }
 
-  #category-list {
-    @each $category in "general", "developer_reflections", "amendments",
-    "advisories", "release_notes", "development", "gateway_bulletins", "features", "security"
-
-      {
-      ##{$category} {
+  @each $category in "general", "developer_reflections", "amendments", 
+      "case_study", "advisories", "release_notes", "development", 
+      "gateway_bulletins", "features", "security" {
+    .#{$category} .category-list {
+       img {
         content: url("../img/blog/#{$category}.png");
         max-width: 100%;
         width: 100%;
       }
-    }
-    .label{
-      width: fit-content;
+      .label{
+        width: fit-content;
+      }
     }
   }
 
   // Add styles to ensure proper wrapping on tablet sizes
   @media (min-width: 768px) and (max-width: 991px) {
-    #category-list {
+    .category-list {
       display: block;
       
       img {

styles/_status-labels.scss

@@ -385,6 +385,7 @@
   &.label-use-developer_tooling,
   &.label-use-payments,
   &.blog-category-developer_reflections,
+  &.blog-category-case_study,
   &.chip-blue {
     @include chip-blue;
   }