blog filters

blocks/blog-teaser/blog-teaser.css

@@ -32,14 +32,18 @@
   transition: transform .5s ease-in-out;
   width: 100%;
   height: auto;
-  max-height: 575px;
+  max-height: 290px;
   object-fit: cover;
 }
 
 .blog-teaser-item .blog-teaser-thumb:hover img {
   transform: scale(1.1);
 }
 
+.blog-teaser.featured .blog-teaser-item .blog-teaser-thumb img{
+  max-height: 575px;
+}
+
 .blog-teaser-item .blog-teaser-caption {
   padding: 40px 30px;
   text-align: center;

blocks/blog-teaser/blog-teaser.js

@@ -7,7 +7,7 @@ import {
   getMetadata,
 } from '../../scripts/lib-franklin.js';
 import { fetchFragment, formatDate } from '../../scripts/scripts.js';
-import ffetch from '../../scripts/ffetch.js';
+import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js';
 
 function renderBlockTeaser(blogData) {
   /* eslint-disable indent */
@@ -63,12 +63,9 @@ export default async function decorate(block) {
     const link = a({ href: (new URL(featuredPostUrl)).pathname });
     blogPostLinks.push(link);
   } else {
-    const recentPostLinks = await ffetch('/query-index.json')
-      .sheet('blog')
-      .filter((post) => featuredPostUrl.indexOf(post.path) === -1)
-      .chunks(5)
-      .limit(3)
-      .all();
+    const recentPostLinks = await getBlogsAndPublications();
+    recentPostLinks.splice(3);
+
     recentPostLinks.forEach((post) => {
       const link = a({ href: post.path });
       blogPostLinks.push(link);

blocks/card-list-filter/card-list-filter.js

@@ -43,9 +43,7 @@ function scrollBlockIntoView(block) {
             left: 0,
             behavior: 'smooth',
           });
-        },
-        1000,
-        );
+        }, 1000);
       }
     });
   });

blocks/card-list/card-list.css

@@ -1,9 +1,4 @@
 /* stylelint-disable no-descending-specificity */
-
-/* COMMONS */
-
-/* Desktop - Style like a list */
-
 main .section.card-list-container .default-content-wrapper h2 {
   text-align: center;
   margin-top: 20px;
@@ -146,7 +141,7 @@ main .card-list.blog {
 }
 
 .card-list.blog .card-caption {
-  padding: 15px;
+  padding: 15px 15px 20px;
   color: #34393d;
 }
 
@@ -214,10 +209,7 @@ main .section div.card-list-wrapper.assay-kits {
   padding: 0;
 }
 
-main .card-list.accessories-and-consumables {
-  justify-content: center;
-}
-
+main .card-list.accessories-and-consumables,
 main .card-list.card-list.accessories-and-consumables .card {
   justify-content: center;
 }
@@ -230,7 +222,6 @@ main .card-list.assay-kits .card {
 .card-list.accessories-and-consumables .card-caption,
 .card-list.assay-kits .card-caption {
   padding: 15px;
-  color: #34393d;
 }
 
 .card-list.accessories-and-consumables .card-caption h3,
@@ -240,6 +231,8 @@ main .card-list.assay-kits .card {
   margin-bottom: 8px;
 }
 
+.card-list.accessories-and-consumables .card-caption,
+.card-list.assay-kits .card-caption,
 .card-list.accessories-and-consumables .card-caption h3 a,
 .card-list.assay-kits .card-caption h3 a {
   color: #34393d;
@@ -254,10 +247,10 @@ main .card-list.assay-kits .card {
 .card-list.accessories-and-consumables .button-container,
 .card-list.assay-kits .button-container {
   text-align: left;
-} 
+}
 
 .card-list.assay-kits .card .badge {
-  background: #6db43e;
+  background: ;
   color: #fff;
   text-align: center;
   padding: 5px 0;

blocks/card-list/card-list.js

@@ -2,6 +2,7 @@ import ffetch from '../../scripts/ffetch.js';
 import { createCarousel } from '../carousel/carousel.js';
 import { createCard } from '../card/card.js';
 import { div, h2 } from '../../scripts/dom-helpers.js';
+import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js';
 
 const viewAllCategory = 'viewall';
 
@@ -25,6 +26,7 @@ const thumbnailAndLinkCardRender = await createCard({
 });
 
 const blogCardRender = await createCard({
+  showType: true,
   descriptionLength: 85,
 });
 
@@ -239,17 +241,20 @@ const VARIANTS = {
     cardRenderer: blogCardRender,
 
     async getData() {
-      return ffetch('/query-index.json')
-        .sheet('blog')
-        .all();
+      const data = await getBlogsAndPublications();
+      return data;
     },
 
     getCategories(item) {
-      const category = item.path
+      let category = item.path
         .split('/')[2];
 
       if (!category || category === 'blog') return null;
 
+      if (category === 'in-the-news' && item.category !== '0') {
+        category = item.category.split(' ').join('-');
+      }
+
       const filterableCategory = category.split('-')
         .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
         .join('-');
@@ -317,8 +322,8 @@ const VARIANTS = {
 
       products = products.filter(
         (product) => product.subCategory === 'Accessories and Consumables'
-            && product.locale !== 'ZH'
-            && product.path !== '/products/accessories-consumables',
+          && product.locale !== 'ZH'
+          && product.path !== '/products/accessories-consumables',
       );
 
       products.sort((product1, product2) => product1.h1.localeCompare(product2.h1));

blocks/card/card.css

@@ -57,6 +57,16 @@ main .card .card-category {
   z-index: 1;
 }
 
+main .card .card-type,
+main .card .card-display-type {
+  display: block;
+  text-align: left;
+  text-transform: uppercase;
+  color: #6eb43f;
+  font-size: 14px;
+  margin: 5px 0;
+}
+
 main .card-caption {
   display: flex;
   flex-direction: column;
@@ -132,10 +142,6 @@ main .card-caption .c2a .compare-checkbox.selected {
   border-color: var(--background-color-green);
 }
 
-main .card-type {
-  display: none;
-}
-
 main .card-date {
   font-size: var(--body-font-size-xs);
   font-family: var(--ff-proxima-light);

blocks/card/card.js

@@ -65,6 +65,8 @@ class Card {
     this.c2aLinkIconFull = false;
     this.showDate = false;
     this.showCategory = false;
+    this.showType = false;
+    this.showDisplayType = false;
 
     // Apply overwrites
     Object.assign(this, config);
@@ -155,7 +157,8 @@ class Card {
         item.badgeText ? div({ class: 'badge' }, item.badgeText) : '',
         this.showCategory ? span({ class: 'card-category' }, item.subCategory && item.subCategory !== '0' ? item.subCategory : item.category) : '',
         div({ class: 'card-caption' },
-          item.displayType ? div({ class: 'card-type' }, item.displayType) : '',
+          this.showDisplayType ? div({ class: 'card-display-type' }, item.displayType) : '',
+          this.showType ? div({ class: 'card-type' }, item.type) : '',
           this.showDate ? div({ class: 'card-date' }, formatDateUTCSeconds(item.date)) : '',
           h3(
             this.titleLink ? a({ href: cardLink }, cardTitle) : cardTitle,

blocks/latest-resources/latest-resources.css

@@ -29,15 +29,6 @@ main .latest-resources .carousel-item {
   margin: 0;
 }
 
-main .latest-resources .card .card-type {
-  display: block;
-  text-align: left;
-  text-transform: uppercase;
-  color: #6eb43f;
-  font-size: 14px;
-  margin: 5px 0;
-}
-
 main .latest-resources .card .card-thumb {
   height: 190px;
   min-height: 190px;

blocks/latest-resources/latest-resources.js

@@ -70,6 +70,7 @@ export default async function decorate(block) {
   const placeholders = await fetchPlaceholders();
   const resourceCard = await createCard({
     showDate: true,
+    showDisplayType: true,
     defaultButtonText: placeholders.learnMore || 'Learn more',
     descriptionLength: block.classList.contains('list') ? 180 : 75,
   });

blocks/recent-blogs-carousel/recent-blogs-carousel.js

@@ -1,9 +1,12 @@
-import ffetch from '../../scripts/ffetch.js';
+/* eslint-disable import/no-cycle */
 import { createCarousel } from '../carousel/carousel.js';
 import { createCard } from '../card/card.js';
+import { getBlogsAndPublications } from '../recent-news-carousel/recent-news-carousel.js';
 
 export async function createRecentResourceCarousel(block, data) {
-  const cardRenderer = await createCard();
+  const cardRenderer = await createCard({
+    showType: true,
+  });
   const resources = data
     .filter((resource) => resource.path !== window.location.pathname)
     .slice(0, 6);
@@ -31,29 +34,7 @@ export async function createRecentResourceCarousel(block, data) {
 }
 
 export default async function decorate(block) {
-  let data = [];
-  const publications = await ffetch('/query-index.json')
-    .sheet('resources')
-    .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article')
-    .limit(7)
-    .all();
-
-  const blogs = await ffetch('/query-index.json')
-    .sheet('blog')
-    .limit(7)
-    .all();
-
-  data = [...publications, ...blogs];
-
-  data.sort((x, y) => {
-    if (x.date > y.date) {
-      return -1;
-    }
-    if (x.date < y.date) {
-      return 1;
-    }
-    return 0;
-  });
+  let data = await getBlogsAndPublications();
   data = data.slice(0, 7);
 
   await createRecentResourceCarousel(block, data);

blocks/recent-news-carousel/recent-news-carousel.js

@@ -1,17 +1,16 @@
+/* eslint-disable import/no-cycle */
 import ffetch from '../../scripts/ffetch.js';
 import { createRecentResourceCarousel } from '../recent-blogs-carousel/recent-blogs-carousel.js';
 
-export default async function decorate(block) {
+export async function getBlogsAndPublications() {
   let data = [];
   const publications = await ffetch('/query-index.json')
     .sheet('resources')
     .filter((resource) => resource.type === 'Publication' && resource.publicationType === 'Full Article')
-    .limit(7)
     .all();
 
   const blogs = await ffetch('/query-index.json')
     .sheet('blog')
-    .limit(7)
     .all();
 
   data = [...publications, ...blogs];
@@ -25,6 +24,11 @@ export default async function decorate(block) {
     }
     return 0;
   });
+  return data;
+}
+
+export default async function decorate(block) {
+  let data = await getBlogsAndPublications();
   data = data.slice(0, 7);
 
   await createRecentResourceCarousel(block, data);

templates/blog/blog.css

@@ -83,7 +83,10 @@
 
 .blog main .card-caption h3 {
   line-height: 1.1;
-  margin-top: 0;
+}
+
+.blog main .card-caption p.button-container {
+  margin-bottom: 0;
 }
 
 .blog main .section > div:not(.hero-wrapper, .card-list-filter-wrapper, .blog-teaser-wrapper) {