hlxsites · mhaack · Nov 26, 2023 · Nov 28, 2023 · Nov 28, 2023 · Nov 30, 2023
diff --git a/.github/workflows/deploy-converter.yaml b/.github/workflows/deploy-converter.yaml
@@ -46,6 +46,7 @@ jobs:
           ${{ runner.os }}-build-
           ${{ runner.os }}-
     - run: npm ci
+    - run: npm run converter:test
     - run: npm run converter:build:prod
     - run: npm run converter:deploy -- convert/${ACTION_NAME}
       env:

diff --git a/404.html b/404.html
@@ -1,67 +1,61 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <title>Page not found</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta property="og:title" content="Page not found">
+        <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
+        <script type="text/javascript">
+            window.isErrorPage = true;
+            window.errorCode = '404';
+        </script>
+        <script type="module">
+            import { sampleRUM } from '/scripts/lib-franklin.js';
+            window.addEventListener('load', () => sampleRUM('404', { source: document.referrer, target: window.location.href }));
+        </script>
+        <style>
+            main.error {
+                min-height: calc(100vh - var(--nav-height));
+                display: flex;
+                align-items: center;
+            }
 
-<head>
-  <title>Page not found</title>
-  <script type="text/javascript">
-    window.isErrorPage = true;
-    window.errorCode = '404';
-  </script>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta property="og:title" content="Page not found">
-  <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
-  <script type="module">
-    import { sampleRUM } from '/scripts/lib-franklin.js';
-
-    window.addEventListener('load', () => {
-      if (document.referrer) {
-        const { origin, pathname } = new URL(document.referrer);
-        if (origin === window.location.origin) {
-          const backBtn = document.createElement('a');
-          backBtn.classList.add('button', 'error-button-back');
-          backBtn.href = pathname;
-          backBtn.textContent = 'Go back';
-          backBtn.title = 'Go back';
-          const btnContainer = document.querySelector('.button-container');
-          btnContainer.append(backBtn);
-        }
-      }
-      sampleRUM('404', { source: document.referrer, target: window.location.href });
-    });
-  </script>
-  <link rel="stylesheet" href="/styles/styles.css">
-  <style>
-    main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
-      align-items: center;
-    }
-
-    main.error .error-number {
-      width: 100%;
-    }
-
-    main.error .error-number text {
-      font-family: var(--fixed-font-family);
-    }
-  </style>
-  <link rel="stylesheet" href="/styles/lazy-styles.css">
-</head>
-
-<body>
-  <header></header>
-  <main class="error">
-    <div class="section">
-      <svg viewBox="1 0 38 18" class="error-number">
-        <text x="0" y="17">404</text>
-      </svg>
-      <h2 class="error-message">Page Not Found</h2>
-      <p class="button-container">
-        <a href="/" class="button secondary error-button-home">Go home</a>
-      </p>
-    </div>
-  </main>
-  <footer></footer>
-</body>
-
+            main.error .section {
+                padding: 0;
+            }
+        </style>
+        <link rel="stylesheet" href="/styles/styles.css">
+        <link rel="stylesheet" href="/styles/lazy-styles.css">
+    </head>
+    <body>
+        <header></header>
+        <main class="error">
+            <div class="max-w-7xl mx-auto w-full">
+                <div class="errors relative bg-white grid lg:grid-cols-7" data-request-status="404">
+                    <div class="lg:col-span-3 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+                        <div class="relative sm:pt-8 lg:pt-14 pt-12 md:pb-24 lg:pb-80 xl:col-start-1">
+                            <h2 class="text-sm font-semibold text-indigo-300 tracking-wide uppercase"></h2>
+                            <p class="text-sm font-semibold text-danaherblue-600 uppercase tracking-wide">404 error</p>
+                            <h1 class="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Page not found</h1>
+                            <p class="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
+                            <div class="mt-6">
+                                <a href="https://lifesciences.danaher.com" title="Go back" class="group inline-flex items-center font-medium text-danaherblue-600 hover:text-danaherblue-500">Go back home
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-2 group-hover:translate-x-1 group-hover:tracking-wide group-hover:font-semibold transition" fill="currentColor" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
+                                    </svg>
+                                </a>
+                            </div>
+                            <div class="mt-12 grid grid-cols-1 gap-y-12 gap-x-6 sm:grid-cols-2"></div>
+                        </div>
+                    </div>
+                    <img 
+                        class="h-full w-full object-cover lg:col-span-4"
+                        src="https://lifesciences.danaher.com/content/dam/danaher/backgrounds/group-gathered-large.jpg" 
+                        alt="Danaher Background"
+                    />
+                </div>
+            </div>
+        </main>
+        <footer></footer>
+    </body>
 </html>
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Danaher Life Sciences AEM site
 
+Live Website:  https://lifesciences.danaher.com/
+
 ## Environments
 - Preview: https://main--danaher-ls-aem--hlxsites.hlx.page/
 - Live: https://main--danaher-ls-aem--hlxsites.hlx.live/

diff --git a/blocks/articles-list/articles-list.js b/blocks/articles-list/articles-list.js
@@ -0,0 +1,33 @@
+import ffetch from '../../scripts/ffetch.js';
+import { getMetadata } from '../../scripts/lib-franklin.js';
+import {
+  ul, div, a,
+} from '../../scripts/dom-builder.js';
+import createCard from '../card-list/articleCard.js';
+
+export default async function decorate(block) {
+  const brand = getMetadata('brand');
+  let articles = await ffetch('/us/en/article-index.json')
+    .filter((article) => brand === article.brand)
+    .all();
+
+  articles = articles.sort((item1, item2) => item2.publishDate - item1.publishDate).slice(0, 3);
+  const cardList = ul({
+    class:
+          'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 px-3 sm:px-0 justify-items-center',
+  });
+  articles.forEach((article, index) => {
+    cardList.appendChild(createCard(article, index === 0));
+  });
+  block.textContent = '';
+  block.classList.add('space-y-6');
+  let divEl;
+  if (articles.length > 0) {
+    divEl = div(
+      { class: 'flex items-center justify-between' },
+      div({ class: 'text-lg font-semibold' }, `${brand} in the news`),
+      a({ class: 'text-sm font-bold text-danaherpurple-500', href: '/us/en/news' }, 'See all →'),
+    );
+  }
+  block.append(divEl, cardList);
+}
diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js
@@ -69,7 +69,7 @@ const createPagination = (entries, page, limit) => {
 
 const createFilters = (articles, activeTag) => {
   // collect tag filters
-  const allKeywords = articles.map((item) => item.keywords.replace(/,\s*/g, ',').split(','));
+  const allKeywords = articles.map((item) => item.topics.replace(/,\s*/g, ',').split(','));
   const keywords = new Set([].concat(...allKeywords));
   keywords.delete('');
   keywords.delete('Blog'); // filter out generic blog tag
@@ -125,7 +125,7 @@ export default async function decorate(block) {
   const activeTagFilter = getSelectionFromUrl('tag');
   if (activeTagFilter) {
     filteredArticles = articles.filter(
-      (item) => toClassName(item.keywords).toLowerCase().indexOf(activeTagFilter) > -1,
+      (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1,
     );
   }
 
@@ -161,7 +161,7 @@ export default async function decorate(block) {
       block.append(divLetter, cardList);
     });
   // render cards application style
-  } else if (articleType === 'application') {
+  } else if (articleType === 'application' || articleType === 'info') {
     filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title));
 
     const cardList = ul({

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -13,3 +13,37 @@
 .cards-card-body > p {
   @apply text-sm text-gray-500 pt-0 pb-4 line-clamp-4 h-20 break-words;
 }
+
+/* Opco cards */
+
+.cards.opco ul {
+  @apply gap-x-8 gap-y-16;
+}
+
+.cards.opco li {
+  @apply pl-8 pr-2 border-l-[0.5px] border-gray-300;
+}
+
+.cards.opco .card-wrapper {
+  @apply transform transition duration-500 hover:scale-105;
+}
+
+.cards.opco .cards-card-body {
+  @apply px-0 py-2;
+}
+
+.cards.opco .cards-card-body > h3 {
+  @apply mt-4 h-16 text-2xl font-normal;
+}
+
+.cards.opco .cards-card-body > p {
+  @apply h-[120px] line-clamp-6 pb-0 mb-4 text-danahergray-900 font-extralight;
+}
+
+.cards.opco .cards-card-body > a {
+  @apply text-danaherpurple-500;
+}
+
+.cards.opco .cards-card-image img {
+  @apply object-contain;
+}
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -11,19 +11,30 @@ export default function decorate(block) {
   else ulElement.classList.add('lg:grid-cols-3');
 
   [...block.children].forEach((row) => {
+    let type = '';
     const heading = row.querySelector('h2');
     if (heading) heading.className = 'card-title text-gray-900 my-2 font-extrabold text-3xl py-2';
+    const h3Heading = row.querySelector('h3');
+    const typeP = h3Heading?.previousElementSibling;
+    if (typeP) {
+      type = typeP.textContent;
+      typeP.remove();
+      block.classList.add(type.toLowerCase());
+    }
     let readMoreLink = row.querySelector('a');
-    const cardWrapper = readMoreLink
+    const cardWrapper = (readMoreLink && !type)
       ? a({ href: makePublicUrl(readMoreLink.href), title: readMoreLink.title })
       : div();
-    cardWrapper.className = 'card-wrapper flex flex-col col-span-1 mx-auto justify-center max-w-xl cursor-pointer relative transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden';
+    cardWrapper.className = 'card-wrapper flex flex-col col-span-1 mx-auto justify-center max-w-xl overflow-hidden';
+    if (!type) {
+      cardWrapper.classList.add('cursor-pointer relative transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg'.split(' '));
+    }
     const card = li((heading) || '', cardWrapper);
     cardWrapper.innerHTML = row.innerHTML;
 
-    [...cardWrapper.children].forEach((e) => {
-      if (e.querySelector('picture, img')) e.className = 'cards-card-image leading-5';
-      else e.className = 'cards-card-body p-4 bg-white rounded-b';
+    [...cardWrapper.children].forEach((elem) => {
+      if (elem.querySelector('picture, img')) elem.className = 'cards-card-image leading-5';
+      else elem.className = 'cards-card-body p-4 bg-white rounded-b';
     });
 
     readMoreLink = cardWrapper.querySelector('a');