From 3c78e37536d6e90e2b00865882bf2771cfe20f99 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 13 Nov 2023 15:28:45 +0100 Subject: [PATCH 001/106] chore: implement global styles for content headings --- styles/styles.css | 24 +++++------------------- styles/tailwind.css | 4 ++++ templates/blog/blog.css | 8 -------- templates/topic/topic.css | 2 +- 4 files changed, 10 insertions(+), 28 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index edfd8a5a2..1f33b9a34 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -105,14 +105,6 @@ margin-top: 0.5rem; margin-bottom: 1rem} -.blog main .default-content-wrapper h2{ - display: inline-flex; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity))} - .blog main p{ margin-top: 0.75rem; font-size: 1rem; @@ -143,14 +135,6 @@ padding-left: 0.5rem !important; padding-right: 0.5rem !important} -.blog main h2{ - display: inline-flex; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity))} - .blog main a{ font-weight: 600} @@ -457,9 +441,6 @@ *:has(.product-topic-takeaway) .default-content-wrapper h2{ margin-top: 0px; margin-bottom: 0px; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity))} @@ -2149,6 +2130,11 @@ h6{ line-height: 1.5rem; font-weight: 400} +main .default-content-wrapper h2{ + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 500} + *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; diff --git a/styles/tailwind.css b/styles/tailwind.css index 3b1173a49..6edb55888 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -67,6 +67,10 @@ h6 { @apply font-normal text-base; } + + main .default-content-wrapper h2 { + @apply font-medium text-3xl; + } } @layer components { diff --git a/templates/blog/blog.css b/templates/blog/blog.css index f8aec258e..14358b5e2 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -18,10 +18,6 @@ @apply mt-2 mb-4; } -.blog main .default-content-wrapper h2 { - @apply inline-flex font-semibold text-xl text-danahergray-900; -} - .blog main p { @apply mt-3 leading-7 href-text text-base text-danahergray-700; } @@ -30,10 +26,6 @@ @apply !px-2; } -.blog main h2 { - @apply inline-flex font-semibold text-xl text-danahergray-900; -} - .blog main a { @apply font-semibold; } diff --git a/templates/topic/topic.css b/templates/topic/topic.css index c9ab2b8bb..1a5790baa 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -27,7 +27,7 @@ } *:has(.product-topic-takeaway) .default-content-wrapper h2 { - @apply text-xl font-semibold text-danahergray-900 my-0; + @apply text-danahergray-900 my-0; } .topic main p { From 62e362633aefc2907ad0fe858c6d6bf79ce98c7f Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Wed, 15 Nov 2023 10:19:17 +0530 Subject: [PATCH 002/106] Added a new secction for the breadcrumb --- tools/actions/convert/test/fixtures/blog-hub-semantic.html | 1 + tools/actions/convert/test/fixtures/blog-semantic.html | 1 + tools/actions/convert/test/fixtures/blog2-semantic.html | 1 + tools/actions/convert/test/fixtures/blog3-semantic.html | 1 + tools/actions/convert/test/fixtures/blog4-semantic.html | 1 + tools/actions/convert/test/fixtures/blog5-semantic.html | 1 + tools/actions/convert/test/fixtures/blog6-semantic.html | 1 + tools/actions/convert/test/fixtures/news-semantic.html | 1 + tools/actions/convert/test/fixtures/news2-semantic.html | 1 + .../actions/convert/test/fixtures/product-category-semantic.html | 1 + .../convert/test/fixtures/product-category1-semantic.html | 1 + tools/actions/convert/test/fixtures/product-semantic.html | 1 + tools/actions/convert/test/fixtures/product-topic-semantic.html | 1 + tools/actions/convert/test/fixtures/topic-hub-semantic.html | 1 + tools/importer/transformers/breadcrumb.js | 1 + 15 files changed, 15 insertions(+) diff --git a/tools/actions/convert/test/fixtures/blog-hub-semantic.html b/tools/actions/convert/test/fixtures/blog-hub-semantic.html index f1439283a..0c0bb82f7 100644 --- a/tools/actions/convert/test/fixtures/blog-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/blog-hub-semantic.html @@ -13,6 +13,7 @@ +
+

The AI-powered pixel classifier

Fast and reproducible microscopy-image segmentation results

diff --git a/tools/actions/convert/test/fixtures/blog2-semantic.html b/tools/actions/convert/test/fixtures/blog2-semantic.html index 332e2e81d..3d31252a1 100644 --- a/tools/actions/convert/test/fixtures/blog2-semantic.html +++ b/tools/actions/convert/test/fixtures/blog2-semantic.html @@ -14,6 +14,7 @@ +

9 Essential Products for Streamlining Your mRNA Development and Manufacturing

null diff --git a/tools/actions/convert/test/fixtures/blog3-semantic.html b/tools/actions/convert/test/fixtures/blog3-semantic.html index 187c7a365..2acffb32f 100644 --- a/tools/actions/convert/test/fixtures/blog3-semantic.html +++ b/tools/actions/convert/test/fixtures/blog3-semantic.html @@ -14,6 +14,7 @@ +

Enabling Science at Scale: How Danaher Life Sciences partners deep with Biopharma

Video Player

The demand for advanced therapeutics and new drug modalities is expected to explode in the coming decade. For example, more than 2,000 gene therapies and modified cell therapies are currently under development, along with 800-plus non-genetically modified cell therapies, according to the American Society of Gene & Cell Therapy. And the development pipeline for monoclonal antibodies grew about 20% in 2022 to include 140 investigational drugs, estimates the Antibody Society.

diff --git a/tools/actions/convert/test/fixtures/blog4-semantic.html b/tools/actions/convert/test/fixtures/blog4-semantic.html index 8ac442cab..26cca6cef 100644 --- a/tools/actions/convert/test/fixtures/blog4-semantic.html +++ b/tools/actions/convert/test/fixtures/blog4-semantic.html @@ -14,6 +14,7 @@ +

How organoids can redefine pre-clinical research

Organoids, lab-grown 3D structures that mimic human organs, are redefining preclinical research through bypassing the ethical and practical limitations of animal models. Technological advancements in organoid research, including automation and improved analytical tools, promise to unlock new possibilities by streamlining the application of these 3D structures to enhance drug development and disease modelling.

diff --git a/tools/actions/convert/test/fixtures/blog5-semantic.html b/tools/actions/convert/test/fixtures/blog5-semantic.html index 3c5828ea2..e395633a1 100644 --- a/tools/actions/convert/test/fixtures/blog5-semantic.html +++ b/tools/actions/convert/test/fixtures/blog5-semantic.html @@ -14,6 +14,7 @@ +

The Transformative Power of Insights in Biopharma Development: Why a Digital Backbone Matters

Discover how a digital backbone can help to realize the full potential of data and generate meaningful insights.

Digitalization underpins the biopharma industry’s endeavors to keep up with scientific and technological innovation and to ultimately get life-changing therapeutics into the hands of patients as quickly as possible. However, many have failed to leverage the capabilities of digital and analytics tools, setting them behind on their digital maturation journey and impacting the delivery of therapeutics to market. Biopharma executives are realizing that they now need to “adopt digital technologies faster to win in the market”.1

diff --git a/tools/actions/convert/test/fixtures/blog6-semantic.html b/tools/actions/convert/test/fixtures/blog6-semantic.html index b492268f3..3e052c2c9 100644 --- a/tools/actions/convert/test/fixtures/blog6-semantic.html +++ b/tools/actions/convert/test/fixtures/blog6-semantic.html @@ -14,6 +14,7 @@ +

The Transformative Power of Insights in Biopharma Development: Why a Digital Backbone Matters

Discover how a digital backbone can help to realize the full potential of data and generate meaningful insights.

diff --git a/tools/actions/convert/test/fixtures/news-semantic.html b/tools/actions/convert/test/fixtures/news-semantic.html index 50bde82af..1f80ebb6d 100644 --- a/tools/actions/convert/test/fixtures/news-semantic.html +++ b/tools/actions/convert/test/fixtures/news-semantic.html @@ -14,6 +14,7 @@ +

Gene Editing in Organoids: Accounting for Complexity in Drug Discovery

Gene Editing in Organoids diff --git a/tools/actions/convert/test/fixtures/news2-semantic.html b/tools/actions/convert/test/fixtures/news2-semantic.html index 6ae6e6669..3e643d417 100644 --- a/tools/actions/convert/test/fixtures/news2-semantic.html +++ b/tools/actions/convert/test/fixtures/news2-semantic.html @@ -13,6 +13,7 @@ +

ValitaCell Joins Beckman Coulter Life Sciences

ValitaCell Joins Beckman Coulter Life Sciences diff --git a/tools/actions/convert/test/fixtures/product-category-semantic.html b/tools/actions/convert/test/fixtures/product-category-semantic.html index 4f3b99e40..187c057f1 100644 --- a/tools/actions/convert/test/fixtures/product-category-semantic.html +++ b/tools/actions/convert/test/fixtures/product-category-semantic.html @@ -14,6 +14,7 @@ +

+
diff --git a/tools/actions/convert/test/fixtures/product-semantic.html b/tools/actions/convert/test/fixtures/product-semantic.html index ea3080d0b..fda837b8c 100644 --- a/tools/actions/convert/test/fixtures/product-semantic.html +++ b/tools/actions/convert/test/fixtures/product-semantic.html @@ -14,6 +14,7 @@
+
Request for Quote
diff --git a/tools/actions/convert/test/fixtures/product-topic-semantic.html b/tools/actions/convert/test/fixtures/product-topic-semantic.html index 638e5ab5e..bdc339749 100644 --- a/tools/actions/convert/test/fixtures/product-topic-semantic.html +++ b/tools/actions/convert/test/fixtures/product-topic-semantic.html @@ -16,6 +16,7 @@
+

How are Assay Kits Installed

Key Takeaway Text Example:

diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index afb7d0623..3c9629616 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -15,6 +15,7 @@ +

Assay Kits

diff --git a/tools/importer/transformers/breadcrumb.js b/tools/importer/transformers/breadcrumb.js index 7d8ef1da9..d31e2b06b 100644 --- a/tools/importer/transformers/breadcrumb.js +++ b/tools/importer/transformers/breadcrumb.js @@ -24,6 +24,7 @@ const createBreadcrumb = (main, document) => { const block = WebImporter.DOMUtils.createTable(cells, document); const firstChild = main.firstElementChild?.firstChild; main.firstElementChild.insertBefore(block, firstChild); + main.firstElementChild?.firstChild?.after(document.createElement('hr')); } } } From ec48a6325b6af2048c75f6a0b2ea59357889c676 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Wed, 15 Nov 2023 13:32:27 +0530 Subject: [PATCH 003/106] code simplified --- tools/importer/transformers/breadcrumb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/importer/transformers/breadcrumb.js b/tools/importer/transformers/breadcrumb.js index d31e2b06b..39bef3251 100644 --- a/tools/importer/transformers/breadcrumb.js +++ b/tools/importer/transformers/breadcrumb.js @@ -24,7 +24,7 @@ const createBreadcrumb = (main, document) => { const block = WebImporter.DOMUtils.createTable(cells, document); const firstChild = main.firstElementChild?.firstChild; main.firstElementChild.insertBefore(block, firstChild); - main.firstElementChild?.firstChild?.after(document.createElement('hr')); + firstChild?.after(document.createElement('hr')); } } } From 12dddf063412978b79dc5ba034d6fb3391a5cb29 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Wed, 15 Nov 2023 15:19:48 +0100 Subject: [PATCH 004/106] chore: update breadcrumb logic for new structure --- blocks/breadcrumb/breadcrumb.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/blocks/breadcrumb/breadcrumb.js b/blocks/breadcrumb/breadcrumb.js index d78a392a5..9a1605287 100644 --- a/blocks/breadcrumb/breadcrumb.js +++ b/blocks/breadcrumb/breadcrumb.js @@ -1,26 +1,27 @@ export default function decorate(block) { - const clonedBlock = block.cloneNode(true); - const listsClone = clonedBlock.querySelector('div > ul').cloneNode(true); - listsClone.className = 'max-w-screen-xl w-full mx-auto px-4 flex gap-4 sm:px-6 lg:px-7 overflow-x-auto'; - listsClone.setAttribute('role', 'list'); + const entries = block.querySelector('div > ul'); + entries.className = 'max-w-screen-xl w-full mx-auto px-4 flex gap-4 sm:px-6 lg:px-7 overflow-x-auto'; + entries.setAttribute('role', 'list'); const homeIconLi = document.createElement('li'); homeIconLi.className = 'flex items-center gap-x-3 text-sm font-medium text-gray-500 whitespace-nowrap hover:text-gray-700'; homeIconLi.innerHTML = ''; - listsClone.prepend(homeIconLi); - Array.from(listsClone.children).forEach((element, index) => { + entries.prepend(homeIconLi); + Array.from(entries.children).forEach((element, index) => { element.classList.add(...'flex items-center gap-x-3 text-sm font-medium text-gray-500 whitespace-nowrap hover:text-gray-700'.split(' ')); element.setAttribute('aria-hidden', 'true'); element.setAttribute('data-acsb-hidden', 'true'); element.setAttribute('data-acsb-force-hidden', 'true'); const anchor = element.children[0]; anchor.setAttribute('tabindex', '-1'); - if ((listsClone.children.length - 1) !== index) element.innerHTML = ""; + if ((entries.children.length - 1) !== index) element.innerHTML = ""; element.prepend(anchor); }); - const breadcrumbWrapper = document.getElementsByClassName('breadcrumb-wrapper')[0]; + const breadcrumbWrapper = block.parentElement; breadcrumbWrapper.classList.add(...'flex bg-white border-b border-gray-200'.split(' ')); breadcrumbWrapper.innerHTML = ''; - breadcrumbWrapper.append(listsClone); + breadcrumbWrapper.append(entries); + const breadcrumbSection = breadcrumbWrapper.parentElement; const mainElement = document.querySelector('main'); mainElement.parentNode.insertBefore(breadcrumbWrapper, mainElement); + breadcrumbSection.remove(); } From 19b99e6b9614a4157b180a36daa27723e92b1012 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Wed, 15 Nov 2023 15:41:05 +0100 Subject: [PATCH 005/106] fix: blog template --- templates/blog/blog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/blog/blog.js b/templates/blog/blog.js index f5832433d..f9739370a 100644 --- a/templates/blog/blog.js +++ b/templates/blog/blog.js @@ -42,12 +42,12 @@ function buildJsonLd() { export default async function buildAutoBlocks() { const main = document.querySelector('main'); main.classList.add('mx-auto', 'max-w-7xl', 'flex', 'flex-row', 'gap-8', 'max-w-7xl', 'mx-auto', 'w-full', 'bg-white'); - const mainWrapper = main.querySelector(':scope > div'); + const mainWrapper = main.querySelector(':scope > div:nth-child(2)'); let blogH1 = ''; let blogHeroP1 = ''; let blogHeroP2 = ''; - const firstThreeChildren = Array.from(mainWrapper.children).slice(1, 4); + const firstThreeChildren = Array.from(mainWrapper.children).slice(0, 3); firstThreeChildren.every((child) => { if (child.tagName === 'H1' && !blogH1) { blogH1 = child; From 8efe4c286dd12d69533af2f68e2910a9a91a86bd Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Wed, 15 Nov 2023 18:17:32 +0100 Subject: [PATCH 006/106] fix: datalayer parsing issue --- .../convert/test/fixtures/blog-semantic.html | 10 +- tools/actions/convert/test/fixtures/blog.html | 127 +++--------------- tools/importer/transformers/metadata.js | 26 +++- 3 files changed, 45 insertions(+), 118 deletions(-) diff --git a/tools/actions/convert/test/fixtures/blog-semantic.html b/tools/actions/convert/test/fixtures/blog-semantic.html index a78226e93..c5de85f73 100644 --- a/tools/actions/convert/test/fixtures/blog-semantic.html +++ b/tools/actions/convert/test/fixtures/blog-semantic.html @@ -30,7 +30,7 @@

The AI-powered pixel classifier

Title
-
The AI-powered pixel classifier | Danaher Life Sciences
+
Unlocking mRNA's Potential Beyond COVID-19 | Danaher Life Sciences
canonical
@@ -42,7 +42,13 @@

The AI-powered pixel classifier

Description
-
The artificial-intelligence-powered pixel classifier provides reproducible segmentation results fast and overcomes human action.
+
Learn about 3 key steps to follow if you want to unlock the capability of mRNA's medicines are potential revolutionize the treatment myriad diseases.
+
+
+
Image
+
+ +
authorName
diff --git a/tools/actions/convert/test/fixtures/blog.html b/tools/actions/convert/test/fixtures/blog.html index e5479ae28..6194807c9 100644 --- a/tools/actions/convert/test/fixtures/blog.html +++ b/tools/actions/convert/test/fixtures/blog.html @@ -39,85 +39,24 @@ - The AI-powered pixel classifier | Danaher Life Sciences - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -180,41 +119,7 @@ - + + + + + + + + +
+
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + + +
+
+ + + +
+ + +
+ + +
+ + +
+ +
+ +
+ +
+
+
+
+
+ + + + + + + + + +
+ + +
+ + +
+


+

A

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

C

+

+
+ + + + +
+ + + + + + + + +
+ + + + +
+


+

C

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

C

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

G

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

G

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

G

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

G

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

G

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

G

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

O

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

O

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

P

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

S

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

S

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

S

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + + + +
+


+

S

+

+
+ + + + +
+ + + + + + + + +
+ + + + +
+


+

S

+

+
+ + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+ +

+

+ +
+ + + +
+
+


+

S

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+
+


+

S

+

+
+
+ + + + + +
+
+ + + + + + +
+ + + + + + + + +
+ + +
+
+ +
+ + +
+
+ +
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + +
+
+
+ +
+
+
+
+window.onload = function() { + +var anchors = document.getElementsByTagName("a"); + +for (var i = 0; i < anchors.length; i++) { + anchors[i].href = anchors[i].href.replace("/content/danaher/ls", "") + + if (anchors[i].href.includes("?") || anchors[i].href.includes("lifesciences.danaher.com") ) { + + } else { + anchors[i].href = anchors[i].href.concat("?utm_source=dhls_website") + } +} + +} + + + + .btn.orange { + background-color: #dc6016; + color: white; + } +
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ +
+ + + + \ No newline at end of file diff --git a/tools/importer/transformers/cardList.js b/tools/importer/transformers/cardList.js index 73a40188b..b50e6fc54 100644 --- a/tools/importer/transformers/cardList.js +++ b/tools/importer/transformers/cardList.js @@ -5,7 +5,6 @@ const createCardList = (main, document) => { let blockName; if (url.endsWith('/blog.html')) blockName = 'Card List (blog)'; else if (url.endsWith('/news.html')) blockName = 'Card List (news)'; - else if (url.endsWith('/library.html')) blockName = 'Card List (library)'; if (blockName) { const block = [[blockName], ['']]; diff --git a/tools/importer/transformers/index.js b/tools/importer/transformers/index.js index 522988e51..c0de53f0e 100644 --- a/tools/importer/transformers/index.js +++ b/tools/importer/transformers/index.js @@ -29,6 +29,7 @@ import workflowContainer from './workflowContainer.js'; import takeaway from './containerTakeaway.js'; import topicList from './topicList.js'; import table from './table.js'; +import libraryHub from './libraryHub.js'; // eslint-disable-next-line import/prefer-default-export export const transformers = [ @@ -59,6 +60,7 @@ export const transformers = [ productCategory, coveoCategory, topicList, + libraryHub, ]; export const xfTransformers = [ diff --git a/tools/importer/transformers/libraryHub.js b/tools/importer/transformers/libraryHub.js new file mode 100644 index 000000000..3bcf0cf1b --- /dev/null +++ b/tools/importer/transformers/libraryHub.js @@ -0,0 +1,15 @@ +/* global WebImporter */ +const libraryHub = (main, document) => { + const url = document.querySelector('[property="og:url"]')?.content; + if (url?.endsWith('/library.html')) { + main.querySelectorAll('div.container-sidebar').forEach((div) => div.remove()); + main + .querySelectorAll('div.aem-Grid.aem-Grid--12.aem-Grid--default--12 h2') + .forEach((h2) => h2.closest('div').remove()); + + const block = [['Card List (library)'], ['']]; + const table = WebImporter.DOMUtils.createTable(block, document); + main.append(table); + } +}; +export default libraryHub; From 569bc97f98ecb1e9418da2474f9364b6e5612ece Mon Sep 17 00:00:00 2001 From: davenichols-DHLS <124819426+davenichols-DHLS@users.noreply.github.com> Date: Thu, 16 Nov 2023 13:07:53 +0000 Subject: [PATCH 019/106] changing the text colour --- blocks/table/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/table/table.js b/blocks/table/table.js index aa97a54d7..d6653c2de 100644 --- a/blocks/table/table.js +++ b/blocks/table/table.js @@ -7,7 +7,7 @@ import { } from '../../scripts/dom-builder.js'; function buildCell(rowIndex) { - const cell = rowIndex ? td({ class: 'text-left text-gray-900 p-2' }) : th({ class: 'text-left text-gray-900 font-bold p-2' }); + const cell = rowIndex ? td({ class: 'text-left text-gray-700 p-2' }) : th({ class: 'text-left text-gray-700 font-bold p-2' }); if (!rowIndex) cell.setAttribute('scope', 'col'); return cell; } From 8b06e5e32c8acf089d25fe21e3c85bbd6fd413f2 Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Thu, 16 Nov 2023 13:34:47 +0000 Subject: [PATCH 020/106] Added padding to the table --- styles/styles.css | 5 +++++ templates/blog/blog.css | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index 671bafd4f..2c3ad1d35 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -270,6 +270,11 @@ } } +.blog main .table { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .topic main { margin-left: auto; margin-right: auto; diff --git a/templates/blog/blog.css b/templates/blog/blog.css index 370c27365..638e15b4f 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -64,4 +64,8 @@ .blog main .popular-articles { @apply lg:w-96 hidden lg:block flex-shrink-0 py-10 bg-danaherlightblue-50; +} + +.blog main .table { + @apply py-6 } \ No newline at end of file From 12764f7cf3c6cd38742c7f477aefa4335430bd82 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 17:31:03 +0100 Subject: [PATCH 021/106] feat: implement sidebar topic list --- blocks/side-nav/side-nav.js | 48 +++++++++++++++++++++++++++++++++ blocks/topic-list/topic-list.js | 7 +++-- styles/styles.css | 37 +++++++++---------------- templates/topic/topic.css | 14 +++++----- templates/topic/topic.js | 19 +++++-------- 5 files changed, 78 insertions(+), 47 deletions(-) create mode 100644 blocks/side-nav/side-nav.js diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js new file mode 100644 index 000000000..e1c9868ab --- /dev/null +++ b/blocks/side-nav/side-nav.js @@ -0,0 +1,48 @@ +import { div, a, strong } from '../../scripts/dom-builder.js'; +import ffetch from '../../scripts/ffetch.js'; +import { getMetadata } from '../../scripts/lib-franklin.js'; +import { makePublicUrl } from '../../scripts/scripts.js'; +import { fetchTopicsForCategory } from '../topic-list/topic-list.js'; + +function renderSideNav(sideNavItems) { + const sideNavElements = div({ class: 'flex flex-col items-start' }); + sideNavItems.forEach((sideNavItem) => { + sideNavElements.append(div( + { + class: 'w-full side-nav-item', + }, + div( + { + class: 'flex gap-3', + }, + a({ + class: 'px-6 py-2 text-base', + href: makePublicUrl(sideNavItem.path), + }, sideNavItem.title), + ), + )); + }); + return sideNavElements; +} + +export default async function decorate(block) { + let sideNavItems = []; + let sideNavTitle = 'Side Navigation'; + let selectedNavItem = null; + let sideNavElements = div(); + if (block.classList.contains('topic-content')) { + const category = getMetadata('fullcategory'); + sideNavItems = await fetchTopicsForCategory(category); + const categoryObj = await ffetch('/us/en/products-index.json') + .filter(({ path }) => path === `/us/en/products/${category}`) + .first(); + sideNavTitle = categoryObj?.title || category; + sideNavElements = renderSideNav(sideNavItems); + selectedNavItem = sideNavElements.querySelector(`.side-nav-item:has(a[href="${window.location.pathname}"])`); + } + + if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'rounded-md'); + block.append(div({ class: 'text-lg px-5 py-4' }, strong(sideNavTitle)), sideNavElements); + block.classList.add('pt-6', 'pr-2'); + return block; +} diff --git a/blocks/topic-list/topic-list.js b/blocks/topic-list/topic-list.js index 6756a0ed6..2834dcc8f 100644 --- a/blocks/topic-list/topic-list.js +++ b/blocks/topic-list/topic-list.js @@ -5,8 +5,7 @@ import ffetch from '../../scripts/ffetch.js'; import { getMetadata } from '../../scripts/lib-franklin.js'; import { makePublicUrl } from '../../scripts/scripts.js'; -async function fetchTopicsForCategory() { - const category = getMetadata('fullcategory'); +export async function fetchTopicsForCategory(category) { if (!category) return []; const topics = await ffetch('/us/en/products-index.json') .filter(({ fullCategory, type }) => fullCategory === category && type === 'Topic') @@ -15,11 +14,11 @@ async function fetchTopicsForCategory() { } export default async function decorate(block) { - const topics = await fetchTopicsForCategory(); + const category = getMetadata('fullcategory'); + const topics = await fetchTopicsForCategory(category); block.classList.add('pt-10', 'pb-10'); block.append(hr({ class: 'h-1 bg-black' })); const topicCards = div({ class: 'flex flex-col items-start' }); - topics.forEach((topic) => { topicCards.append(div( { diff --git a/styles/styles.css b/styles/styles.css index f97bcffb5..a93b6a836 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -269,22 +269,13 @@ .topic main { margin-left: auto; margin-right: auto; - display: flex; + display: grid; max-width: 80rem; - flex-direction: column; + grid-auto-columns: auto; padding-left: 1rem; padding-right: 1rem; } -.testimonial .testimonial-footer .topic main>div:nth-child(2) { - margin-top: 0px; - font-size: 1rem; - font-weight: 500; - line-height: 1.5rem; - --tw-text-opacity: 1; - color: rgb(2 105 124 / var(--tw-text-opacity)); -} - @media (min-width: 1024px) { .topic main { @@ -293,7 +284,12 @@ } } +.topic main > div:first-child { + grid-column: 1 / -1; +} + .topic main .section { + grid-column-start: 2; flex: 1 1 0%; padding: 0px; padding-left: 0px; @@ -302,8 +298,6 @@ @media (min-width: 1024px) { .topic main .section { - margin-left: auto; - width: 75%; padding-left: 1.5rem; } } @@ -337,17 +331,7 @@ line-height: 1.75rem; } -.topic main > div:first-child { - margin-bottom: 0.5rem; -} - -.topic main > div:first-child > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.topic main > div:first-child .default-content-wrapper h1 { +.topic main .default-content-wrapper h1 { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-top: 0.5rem; @@ -3334,6 +3318,11 @@ main .section { padding-right: 1rem; } +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; diff --git a/templates/topic/topic.css b/templates/topic/topic.css index 76a5b67c9..c79b667cb 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -1,20 +1,20 @@ .topic main { - @apply flex flex-col px-4 lg:px-0 max-w-7xl mx-auto; + @apply grid px-4 lg:px-0 max-w-7xl mx-auto auto-cols-auto; +} + +.topic main > div:first-child { + @apply col-span-full; } .topic main .section { - @apply lg:w-3/4 flex-1 lg:ml-auto p-0 pl-0 lg:pl-6; + @apply flex-1 p-0 pl-0 lg:pl-6 col-start-2; } .topic main .button-container a { @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; } -.topic main > div:first-child { - @apply space-y-4 mb-2; -} - -.topic main > div:first-child .default-content-wrapper h1 { +.topic main .default-content-wrapper h1 { @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; } diff --git a/templates/topic/topic.js b/templates/topic/topic.js index bf171bd04..6755d0963 100644 --- a/templates/topic/topic.js +++ b/templates/topic/topic.js @@ -1,16 +1,11 @@ +import { div } from '../../scripts/dom-builder.js'; import { buildBlock } from '../../scripts/lib-franklin.js'; -export default async function buildAutoBlocks(block) { - block.querySelectorAll('h2')?.forEach((element) => { - element.classList.add('font-semibold', 'text-xl', 'text-danahergray-900'); - }); +export default async function buildAutoBlocks() { const main = document.querySelector('main'); - const firstWrapper = main.querySelector(':scope > div'); - firstWrapper.prepend( - buildBlock('social-media', { elems: [] }), - ); - const lastWrapper = main.querySelector(':scope > div:last-of-type'); - lastWrapper.append( - buildBlock('social-media', { elems: [] }), - ); + const sideNavBlock = div(buildBlock('side-nav', { elems: [] })); + sideNavBlock.querySelector('.side-nav').classList.add('topic-content'); + main.querySelector(':scope > div:nth-child(2)')?.prepend(buildBlock('social-media', { elems: [] })); + main.firstElementChild.insertAdjacentElement('afterend', sideNavBlock); + main.lastElementChild.append(buildBlock('social-media', { elems: [] })); } From fcb3dede4ed2d331b6a0bfeb6b33aa2589aaee4e Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 17:34:25 +0100 Subject: [PATCH 022/106] chore: add null check for category --- blocks/side-nav/side-nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index e1c9868ab..aa465a2f0 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -36,7 +36,7 @@ export default async function decorate(block) { const categoryObj = await ffetch('/us/en/products-index.json') .filter(({ path }) => path === `/us/en/products/${category}`) .first(); - sideNavTitle = categoryObj?.title || category; + sideNavTitle = categoryObj?.title || category || sideNavTitle; sideNavElements = renderSideNav(sideNavItems); selectedNavItem = sideNavElements.querySelector(`.side-nav-item:has(a[href="${window.location.pathname}"])`); } From 6bcab7f564a1545db68d1d757500092a3c172835 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 17:36:53 +0100 Subject: [PATCH 023/106] chore: make query selector more robust --- blocks/side-nav/side-nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index aa465a2f0..ada9b2baf 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -38,7 +38,7 @@ export default async function decorate(block) { .first(); sideNavTitle = categoryObj?.title || category || sideNavTitle; sideNavElements = renderSideNav(sideNavItems); - selectedNavItem = sideNavElements.querySelector(`.side-nav-item:has(a[href="${window.location.pathname}"])`); + selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); } if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'rounded-md'); From ede48c8aaf27d30ef5ef38ff0309a54db62d9b27 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 17:46:16 +0100 Subject: [PATCH 024/106] chore: clean up css --- styles/styles.css | 30 ++++++++++++++++++++---------- templates/topic/topic.css | 10 +++++----- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index a93b6a836..f79fc85de 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -290,7 +290,17 @@ .topic main .section { grid-column-start: 2; + margin-bottom: 0.5rem; flex: 1 1 0%; +} + +.topic main .section > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.topic main .section { padding: 0px; padding-left: 0px; } @@ -345,6 +355,16 @@ color: rgb(17 24 39 / var(--tw-text-opacity)); } +.topic main .default-content-wrapper h2 { + margin-top: 0px; + margin-bottom: 0px; + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .product-topic-takeaway .default-content-wrapper { margin-bottom: 5rem; } @@ -379,16 +399,6 @@ } } -*:has(.product-topic-takeaway) .default-content-wrapper h2 { - margin-top: 0px; - margin-bottom: 0px; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .topic main p:not(.show-modal-btn) { margin-bottom: 1rem; font-size: 1.125rem; diff --git a/templates/topic/topic.css b/templates/topic/topic.css index c79b667cb..55fffbc7f 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -7,7 +7,7 @@ } .topic main .section { - @apply flex-1 p-0 pl-0 lg:pl-6 col-start-2; + @apply space-y-4 mb-2 flex-1 p-0 pl-0 lg:pl-6 col-start-2; } .topic main .button-container a { @@ -18,12 +18,12 @@ @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; } -.product-topic-takeaway .default-content-wrapper { - @apply mb-20 bg-danaherpurple-50 border-t-8 border-danaherpurple-500 px-6 lg:px-10 py-6 space-y-4 leading-7 text-base text-danahergray-700; +.topic main .default-content-wrapper h2 { + @apply text-xl font-semibold text-danahergray-900 my-0; } -*:has(.product-topic-takeaway) .default-content-wrapper h2 { - @apply text-xl font-semibold text-danahergray-900 my-0; +.product-topic-takeaway .default-content-wrapper { + @apply mb-20 bg-danaherpurple-50 border-t-8 border-danaherpurple-500 px-6 lg:px-10 py-6 space-y-4 leading-7 text-base text-danahergray-700; } .topic main p:not(.show-modal-btn) { From 44ae206a7775ad4be6dfbc25e03c527970bb4522 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 17:49:04 +0100 Subject: [PATCH 025/106] chore: add sidenav before social media --- templates/topic/topic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/topic/topic.js b/templates/topic/topic.js index 6755d0963..b8dc0d749 100644 --- a/templates/topic/topic.js +++ b/templates/topic/topic.js @@ -5,7 +5,7 @@ export default async function buildAutoBlocks() { const main = document.querySelector('main'); const sideNavBlock = div(buildBlock('side-nav', { elems: [] })); sideNavBlock.querySelector('.side-nav').classList.add('topic-content'); - main.querySelector(':scope > div:nth-child(2)')?.prepend(buildBlock('social-media', { elems: [] })); main.firstElementChild.insertAdjacentElement('afterend', sideNavBlock); + main.querySelector(':scope > div:nth-child(3)')?.prepend(buildBlock('social-media', { elems: [] })); main.lastElementChild.append(buildBlock('social-media', { elems: [] })); } From afa15cf274640983a9e593cc4509793c426a7d2c Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 18:05:36 +0100 Subject: [PATCH 026/106] chore: improve grid layout --- styles/styles.css | 3 ++- templates/topic/topic.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index f79fc85de..f3c864fb8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -285,7 +285,8 @@ } .topic main > div:first-child { - grid-column: 1 / -1; + grid-column-start: 1; + grid-row: 1 / -1; } .topic main .section { diff --git a/templates/topic/topic.css b/templates/topic/topic.css index 55fffbc7f..b903bdaba 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -3,7 +3,7 @@ } .topic main > div:first-child { - @apply col-span-full; + @apply col-start-1 row-span-full; } .topic main .section { From e9c344d7130c96a9562e88a3cb15ddb622b34b8f Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 16 Nov 2023 22:36:48 +0530 Subject: [PATCH 027/106] 435-add-tag-details-to-page-metadata --- tools/importer/transformers/metadata.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tools/importer/transformers/metadata.js b/tools/importer/transformers/metadata.js index 720fe4ddc..870dd9468 100644 --- a/tools/importer/transformers/metadata.js +++ b/tools/importer/transformers/metadata.js @@ -77,6 +77,11 @@ const createMetadata = (main, document, html, params, url) => { meta.keywords = keywords.content; } + const tags = document.querySelector('[name="tags"]'); + if (tags) { + meta.Tags = tags.content; + } + const desc = document.querySelector('[property="og:description"]'); if (desc) { meta.Description = desc.content; From b64faaf2c03b31ae30b45d394c442f561177b97e Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 18:07:05 +0100 Subject: [PATCH 028/106] chore: improve grid layout --- styles/styles.css | 2 +- templates/topic/topic.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index f3c864fb8..8ec94bb81 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -286,7 +286,7 @@ .topic main > div:first-child { grid-column-start: 1; - grid-row: 1 / -1; + grid-row: span 6 / span 6; } .topic main .section { diff --git a/templates/topic/topic.css b/templates/topic/topic.css index b903bdaba..912530100 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -3,7 +3,7 @@ } .topic main > div:first-child { - @apply col-start-1 row-span-full; + @apply col-start-1 row-span-6; } .topic main .section { From 05ceb1bc36a61aeaf90a8ff142af0c68a7b78391 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 16 Nov 2023 19:18:34 +0100 Subject: [PATCH 029/106] feat: implement converter for side nav block --- .../test/fixtures/topic-hub-semantic.html | 7 ++- .../convert/test/fixtures/topic-hub.html | 49 +++++++++++++++++-- tools/importer/transformers/index.js | 2 + tools/importer/transformers/sideNav.js | 11 +++++ 4 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 tools/importer/transformers/sideNav.js diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index 3c9629616..4b0fe5743 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -16,6 +16,11 @@
+
+
+
products
+
+

Assay Kits

@@ -44,7 +49,7 @@

Explore our line of Assay Kits

updateDate
-
Tue, 14 Nov 2023 13:52:03 GMT
+
Thu, 16 Nov 2023 17:26:13 GMT
diff --git a/tools/actions/convert/test/fixtures/topic-hub.html b/tools/actions/convert/test/fixtures/topic-hub.html index fd51e1a2e..8455b46a9 100644 --- a/tools/actions/convert/test/fixtures/topic-hub.html +++ b/tools/actions/convert/test/fixtures/topic-hub.html @@ -7,7 +7,9 @@ - + + + @@ -144,7 +146,7 @@ dataLayer = [{ 'user': {"customerID":"","accountType":"guest","marketCode":"","company":"","role":"","city":"","state":"","country":"","postalCode":"","lastVisit":""} },{ - 'page': {"title":"Topics","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Oct 03, 2023 10:32:18 AM","updateDate":"Nov 14, 2023 01:52:03 PM"} + 'page': {"title":"Topics","language":"en","locale":"US","level":"top","type":"webpage","keywords":"","creationDate":"Oct 03, 2023 10:32:18 AM","updateDate":"Nov 16, 2023 05:26:13 PM"} }]; @@ -241,7 +243,7 @@ - + diff --git a/tools/importer/transformers/index.js b/tools/importer/transformers/index.js index c0de53f0e..82ece1c59 100644 --- a/tools/importer/transformers/index.js +++ b/tools/importer/transformers/index.js @@ -30,6 +30,7 @@ import takeaway from './containerTakeaway.js'; import topicList from './topicList.js'; import table from './table.js'; import libraryHub from './libraryHub.js'; +import sideNav from './sideNav.js'; // eslint-disable-next-line import/prefer-default-export export const transformers = [ @@ -61,6 +62,7 @@ export const transformers = [ coveoCategory, topicList, libraryHub, + sideNav, ]; export const xfTransformers = [ diff --git a/tools/importer/transformers/sideNav.js b/tools/importer/transformers/sideNav.js new file mode 100644 index 000000000..70e287d99 --- /dev/null +++ b/tools/importer/transformers/sideNav.js @@ -0,0 +1,11 @@ +/* global WebImporter */ +const sideNav = (main, document) => { + const sideNavEl = main.querySelector('#side-nav'); + if (sideNavEl) { + const sideNavContent = sideNavEl?.textContent?.trim() || ''; + const block = [['Side Nav'], [sideNavContent]]; + const table = WebImporter.DOMUtils.createTable(block, document); + sideNavEl.replaceWith(table); + } +}; +export default sideNav; From 7b94c7643d8504332369a8025f660163308077d3 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Fri, 17 Nov 2023 12:25:09 +0530 Subject: [PATCH 030/106] additional condition to check content. --- tools/importer/transformers/metadata.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/importer/transformers/metadata.js b/tools/importer/transformers/metadata.js index 870dd9468..953b819b8 100644 --- a/tools/importer/transformers/metadata.js +++ b/tools/importer/transformers/metadata.js @@ -78,7 +78,7 @@ const createMetadata = (main, document, html, params, url) => { } const tags = document.querySelector('[name="tags"]'); - if (tags) { + if (tags && tags.content) { meta.Tags = tags.content; } From a5f1267b8803b95b316c3cca7b519d5838780bd7 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 09:12:29 +0100 Subject: [PATCH 031/106] feat: implement library hub page --- blocks/call-to-action/call-to-action.js | 4 +- blocks/card-list/card-list.js | 71 ++++++++++++++++++------- styles/styles.css | 8 +++ 3 files changed, 61 insertions(+), 22 deletions(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index c22c85e6e..5d149595b 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -3,7 +3,7 @@ import { decorateModals } from '../../scripts/scripts.js'; export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); - block.querySelector('h2').classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); - block.querySelector('p').classList.add(...'show-modal-btn btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); + block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); + block.querySelector('p')?.classList.add(...'show-modal-btn btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); decorateModals(block); } diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 562983317..709eed346 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -161,28 +161,59 @@ export default async function decorate(block) { (item) => toClassName(item.keywords).toLowerCase().indexOf(activeTagFilter) > -1, ); } - filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); - - // handle pagination - let page = parseInt(getSelectionFromUrl('page'), 10); - page = Number.isNaN(page) ? 1 : page; - const limitPerPage = 20; - const start = (page - 1) * limitPerPage; - const articlesToDisplay = filteredArticles.slice(start, start + limitPerPage); // render cards - const cardList = ul({ - class: - 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', - }); - articlesToDisplay.forEach((article, index) => { - cardList.appendChild(createCard(article, index === 0)); - }); + if (articleType === 'library') { + block.classList.add(...'container flex flex-wrap'.split(' ')); + + // sort filteredArticles by first letter of card title + filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title)); + + // map filteredArticles to a new map with first letter as key + const filteredArticlesMap = new Map(); + filteredArticles.forEach((card) => { + const firstLetter = card.title[0]?.toUpperCase(); + if (!filteredArticlesMap.has(firstLetter)) { + filteredArticlesMap.set(firstLetter, []); + } + filteredArticlesMap.get(firstLetter).push(card); + }); - // render pagination and filters - const filterTags = createFilters(articles, activeTagFilter); - const paginationElements = createPagination(filteredArticles, page, limitPerPage); + block.textContent = ''; + // iterate over map and create a new array of cards + filteredArticlesMap.forEach((cards, letter) => { + const cardList = ul({ + class: + 'container grid max-w-7xl w-3/4 mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 px-4 sm:px-0 justify-items-center mt-3 mb-3', + }); + const divLetter = div({ class: 'w-1/4', id: `letter-${letter}` }, letter); + cards.forEach((card, index) => { + cardList.appendChild(createCard(card, index === 0)); + }); + block.append(divLetter, cardList); + }); + } else { + filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); + + let page = parseInt(getSelectionFromUrl('page'), 10); + page = Number.isNaN(page) ? 1 : page; + const limitPerPage = 20; + const start = (page - 1) * limitPerPage; + const articlesToDisplay = filteredArticles.slice(start, start + limitPerPage); - block.textContent = ''; - block.append(filterTags, cardList, paginationElements); + const cardList = ul({ + class: + 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', + }); + articlesToDisplay.forEach((article, index) => { + cardList.appendChild(createCard(article, index === 0)); + }); + + // render pagination and filters + const filterTags = createFilters(articles, activeTagFilter); + const paginationElements = createPagination(filteredArticles, page, limitPerPage); + + block.textContent = ''; + block.append(filterTags, cardList, paginationElements); + } } diff --git a/styles/styles.css b/styles/styles.css index f97bcffb5..d4139718a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2645,6 +2645,10 @@ main .section { width: 50%; } +.w-1\/4 { + width: 25%; +} + .w-10 { width: 2.5rem; } @@ -2673,6 +2677,10 @@ main .section { width: 0.75rem; } +.w-3\/4 { + width: 75%; +} + .w-36 { width: 9rem; } From 1a7b5fae73a18bdbc5d36f221973a6c29fdf74de Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 09:14:55 +0100 Subject: [PATCH 032/106] chore: add description to index for library cards --- helix-query.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/helix-query.yaml b/helix-query.yaml index fe1bae5d1..f7648e2ef 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -13,6 +13,9 @@ indices: title: select: head > meta[property="og:title"] value: match(attribute(el, "content"), "(.*)\\\| Danaher Life.*|(.*)") + description: + select: head > meta[name="description"] + value: attribute(el, "content") image: select: head > meta[property="og:image"] value: match(attribute(el, "content"), "^(https?:\/\/.*?(danaher.com))+(.*)|^(.*)") From 9f023f8b31e17749d657560e44bec676b0fb2c53 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 09:55:02 +0100 Subject: [PATCH 033/106] chore: extra createCard & add library card --- blocks/card-list/articleCard.js | 49 +++++++++++++++++++ blocks/card-list/card-list.js | 54 +++------------------ blocks/card-list/libraryCard.js | 42 ++++++++++++++++ blocks/related-articles/related-articles.js | 2 +- styles/styles.css | 4 ++ 5 files changed, 104 insertions(+), 47 deletions(-) create mode 100644 blocks/card-list/articleCard.js create mode 100644 blocks/card-list/libraryCard.js diff --git a/blocks/card-list/articleCard.js b/blocks/card-list/articleCard.js new file mode 100644 index 000000000..7ee2a775e --- /dev/null +++ b/blocks/card-list/articleCard.js @@ -0,0 +1,49 @@ +import { formatDateUTCSeconds, imageHelper, makePublicUrl } from '../../scripts/scripts.js'; +import { + li, a, p, div, time, span, h2, +} from '../../scripts/dom-builder.js'; + +export default function createCard(article, firstCard = false) { + const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1 + ? article.title.split('| Danaher Life Sciences')[0] + : article.title; + + const cardWrapper = a( + { href: makePublicUrl(article.path), title: article.title }, + imageHelper(article.image, article.title, firstCard), + p( + { class: 'cards !px-6 !py-1 !pt-4 !text-sm !text-danaherpurple-500' }, + article.brand || 'Danaher Corporation', + ), + p( + { class: '!px-6 !pb-3 !text-gray-500 !text-sm' }, + time( + { datetime: formatDateUTCSeconds(article.publishDate) }, + formatDateUTCSeconds(article.publishDate, { month: 'long' }), + ), + span({ class: 'pl-2' }, `${article.readingTime} min read`), + ), + h2( + { + class: + '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words', + }, + cardTitle, + ), + div( + { + class: + 'mt-auto inline-flex w-full px-6 py-5 text-base text-danaherpurple-500 font-semibold', + }, + 'Read Article →', + ), + ); + + return li( + { + class: + 'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl', + }, + cardWrapper, + ); +} diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 709eed346..d2c349d6a 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -2,49 +2,13 @@ import ffetch from '../../scripts/ffetch.js'; import { ul, li, a, p, div, time, span, h2, } from '../../scripts/dom-builder.js'; -import { formatDateUTCSeconds, makePublicUrl, imageHelper } from '../../scripts/scripts.js'; + import { toClassName } from '../../scripts/lib-franklin.js'; +import createArticleCard from './articleCard.js'; +import createLibraryCard from './libraryCard.js'; const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; -export function createCard(article, firstCard = false) { - const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1 - ? article.title.split('| Danaher Life Sciences')[0] - : article.title; - - const cardWrapper = a( - { href: makePublicUrl(article.path), title: article.title }, - imageHelper(article.image, article.title, firstCard), - p( - { class: 'cards !px-6 !py-1 !pt-4 !text-sm !text-danaherpurple-500' }, - article.brand || 'Danaher Corporation', - ), - p( - { class: '!px-6 !pb-3 !text-gray-500 !text-sm' }, - time( - { datetime: formatDateUTCSeconds(article.publishDate) }, - formatDateUTCSeconds(article.publishDate, { month: 'long' }), - ), - span({ class: 'pl-2' }, `${article.readingTime} min read`), - ), - h2( - { - class: '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words', - }, - cardTitle, - ), - div( - { class: 'mt-auto inline-flex w-full px-6 py-5 text-base text-danaherpurple-500 font-semibold' }, - 'Read Article →', - ), - ); - - return li({ - class: - 'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl', - }, cardWrapper); -} - const createPaginationLink = (page, label, current = false) => { const newUrl = new URL(window.location); newUrl.searchParams.set('page', page); @@ -149,6 +113,8 @@ const createFilters = (articles, activeTag) => { export default async function decorate(block) { const articleType = block.classList.length > 2 ? block.classList[1] : ''; if (articleType) block.classList.remove(articleType); + block.textContent = ''; + // fetch and sort all articles const articles = await ffetch('/us/en/article-index.json') .chunks(500) @@ -165,8 +131,6 @@ export default async function decorate(block) { // render cards if (articleType === 'library') { block.classList.add(...'container flex flex-wrap'.split(' ')); - - // sort filteredArticles by first letter of card title filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title)); // map filteredArticles to a new map with first letter as key @@ -179,7 +143,6 @@ export default async function decorate(block) { filteredArticlesMap.get(firstLetter).push(card); }); - block.textContent = ''; // iterate over map and create a new array of cards filteredArticlesMap.forEach((cards, letter) => { const cardList = ul({ @@ -187,8 +150,8 @@ export default async function decorate(block) { 'container grid max-w-7xl w-3/4 mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 px-4 sm:px-0 justify-items-center mt-3 mb-3', }); const divLetter = div({ class: 'w-1/4', id: `letter-${letter}` }, letter); - cards.forEach((card, index) => { - cardList.appendChild(createCard(card, index === 0)); + cards.forEach((card) => { + cardList.appendChild(createLibraryCard(card)); }); block.append(divLetter, cardList); }); @@ -206,14 +169,13 @@ export default async function decorate(block) { 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', }); articlesToDisplay.forEach((article, index) => { - cardList.appendChild(createCard(article, index === 0)); + cardList.appendChild(createArticleCard(article, index === 0)); }); // render pagination and filters const filterTags = createFilters(articles, activeTagFilter); const paginationElements = createPagination(filteredArticles, page, limitPerPage); - block.textContent = ''; block.append(filterTags, cardList, paginationElements); } } diff --git a/blocks/card-list/libraryCard.js b/blocks/card-list/libraryCard.js new file mode 100644 index 000000000..8515f057b --- /dev/null +++ b/blocks/card-list/libraryCard.js @@ -0,0 +1,42 @@ +import { imageHelper, makePublicUrl } from '../../scripts/scripts.js'; +import { li, a, p, div, h2 } from '../../scripts/dom-builder.js'; + +export default function createCard(article) { + const cardTitle = + article.title.indexOf('| Danaher Life Sciences') > -1 + ? article.title.split('| Danaher Life Sciences')[0] + : article.title.trim(); + + const cardWrapper = a( + { href: makePublicUrl(article.path), title: article.title }, + imageHelper(article.image, article.title), + h2( + { + class: + '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words', + }, + cardTitle, + ), + p( + { + class: 'px-6 text-sm text-gray-500 pb-0 pt-0 pb-4 line-clamp-4 h-20 break-words', + }, + article.description, + ), + div( + { + class: + 'mt-auto inline-flex w-full px-6 py-5 text-base text-danaherpurple-500 font-semibold', + }, + 'Learn More →', + ), + ); + + return li( + { + class: + 'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl', + }, + cardWrapper, + ); +} diff --git a/blocks/related-articles/related-articles.js b/blocks/related-articles/related-articles.js index a44314439..1d911e8a4 100644 --- a/blocks/related-articles/related-articles.js +++ b/blocks/related-articles/related-articles.js @@ -3,7 +3,7 @@ import { getMetadata } from '../../scripts/lib-franklin.js'; import { ul, span, } from '../../scripts/dom-builder.js'; -import { createCard } from '../card-list/card-list.js'; +import createCard from '../card-list/articleCard.js'; export default async function decorate(block) { const articleType = getMetadata('template').toLowerCase(); diff --git a/styles/styles.css b/styles/styles.css index d4139718a..0de921dfb 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2572,6 +2572,10 @@ main .section { height: 0.5rem; } +.h-20 { + height: 5rem; +} + .h-24 { height: 6rem; } From 518d81e9523ff8fb4079b4b12a083fbef5b9b4dc Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Fri, 17 Nov 2023 10:16:22 +0100 Subject: [PATCH 034/106] chore: use block options instead of content for variants --- .../actions/convert/test/fixtures/topic-hub-semantic.html | 4 ++-- tools/importer/transformers/sideNav.js | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index 4b0fe5743..6006b1523 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -16,9 +16,9 @@
-
+
-
products
+

Assay Kits

diff --git a/tools/importer/transformers/sideNav.js b/tools/importer/transformers/sideNav.js index 70e287d99..f3c039afa 100644 --- a/tools/importer/transformers/sideNav.js +++ b/tools/importer/transformers/sideNav.js @@ -2,8 +2,12 @@ const sideNav = (main, document) => { const sideNavEl = main.querySelector('#side-nav'); if (sideNavEl) { - const sideNavContent = sideNavEl?.textContent?.trim() || ''; - const block = [['Side Nav'], [sideNavContent]]; + let blockName = 'Side Nav'; + const sideNavContent = sideNavEl?.textContent?.trim(); + if (sideNavContent && sideNavContent.length < 65) { + blockName += ` (${sideNavEl.textContent})`; + } + const block = [[blockName], ['']]; const table = WebImporter.DOMUtils.createTable(block, document); sideNavEl.replaceWith(table); } From 68ba89e4efe6d8da0f1211686ba2e75cbec61807 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 11:05:54 +0100 Subject: [PATCH 035/106] chore: improve images --- blocks/card-list/card-list.js | 18 ++++++++------- blocks/card-list/libraryCard.js | 22 ++++++++++-------- styles/styles.css | 41 ++++++++++++++++++++++++++------- 3 files changed, 56 insertions(+), 25 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index d2c349d6a..ef9c68f3b 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -1,6 +1,6 @@ import ffetch from '../../scripts/ffetch.js'; import { - ul, li, a, p, div, time, span, h2, + ul, a, div, span, h2, } from '../../scripts/dom-builder.js'; import { toClassName } from '../../scripts/lib-franklin.js'; @@ -128,9 +128,9 @@ export default async function decorate(block) { ); } - // render cards + // render cards library style if (articleType === 'library') { - block.classList.add(...'container flex flex-wrap'.split(' ')); + block.classList.add(...'flex flex-col md:flex-wrap md:flex-row'.split(' ')); filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title)); // map filteredArticles to a new map with first letter as key @@ -147,14 +147,16 @@ export default async function decorate(block) { filteredArticlesMap.forEach((cards, letter) => { const cardList = ul({ class: - 'container grid max-w-7xl w-3/4 mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 px-4 sm:px-0 justify-items-center mt-3 mb-3', - }); - const divLetter = div({ class: 'w-1/4', id: `letter-${letter}` }, letter); - cards.forEach((card) => { - cardList.appendChild(createLibraryCard(card)); + 'grid max-w-7xl w-full md:w-3/4 mx-auto gap-6 grid-cols-1 lg:grid-cols-3 px-4 sm:px-0 justify-items-center mb-16', }); + const divLetter = div( + { class: 'md:w-1/4 mb-8 px-4 md:px-0 md:text-right md:pr-8' }, + h2({ class: 'text-2xl font-extrabold md:border-t mt-0', id: `letter-${letter}` }, letter), + ); + cards.forEach((card) => cardList.appendChild(createLibraryCard(card))); block.append(divLetter, cardList); }); + // render cards article style } else { filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); diff --git a/blocks/card-list/libraryCard.js b/blocks/card-list/libraryCard.js index 8515f057b..2c62ba72a 100644 --- a/blocks/card-list/libraryCard.js +++ b/blocks/card-list/libraryCard.js @@ -1,15 +1,19 @@ -import { imageHelper, makePublicUrl } from '../../scripts/scripts.js'; -import { li, a, p, div, h2 } from '../../scripts/dom-builder.js'; +import { makePublicUrl } from '../../scripts/scripts.js'; +import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; +import { + li, a, p, div, h2, +} from '../../scripts/dom-builder.js'; export default function createCard(article) { - const cardTitle = - article.title.indexOf('| Danaher Life Sciences') > -1 - ? article.title.split('| Danaher Life Sciences')[0] - : article.title.trim(); + const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1 + ? article.title.split('| Danaher Life Sciences')[0] + : article.title.trim(); + const cardImage = createOptimizedPicture(article.image, article.title, false, [{ media: '(min-width: 1024px)', width: '320' }, { media: '(min-width: 640px)', width: '520' }, { width: '420' }]); + cardImage.querySelector('img').className = 'mb-2 h-48 w-full object-cover'; const cardWrapper = a( { href: makePublicUrl(article.path), title: article.title }, - imageHelper(article.image, article.title), + cardImage, h2( { class: @@ -17,12 +21,12 @@ export default function createCard(article) { }, cardTitle, ), - p( + article.description ? p( { class: 'px-6 text-sm text-gray-500 pb-0 pt-0 pb-4 line-clamp-4 h-20 break-words', }, article.description, - ), + ) : '', div( { class: diff --git a/styles/styles.css b/styles/styles.css index daa46087e..91ba88a01 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2408,6 +2408,10 @@ main .section { margin-bottom: 3rem; } +.mb-16 { + margin-bottom: 4rem; +} + .mb-2 { margin-bottom: 0.5rem; } @@ -2424,6 +2428,10 @@ main .section { margin-bottom: 1.25rem; } +.mb-8 { + margin-bottom: 2rem; +} + .mb-\[2px\] { margin-bottom: 2px; } @@ -2658,10 +2666,6 @@ main .section { width: 50%; } -.w-1\/4 { - width: 25%; -} - .w-10 { width: 2.5rem; } @@ -2690,10 +2694,6 @@ main .section { width: 0.75rem; } -.w-3\/4 { - width: 75%; -} - .w-36 { width: 9rem; } @@ -4150,10 +4150,18 @@ main .section { height: 100%; } + .md\:w-1\/4 { + width: 25%; + } + .md\:w-20 { width: 5rem; } + .md\:w-3\/4 { + width: 75%; + } + .md\:w-3\/5 { width: 60%; } @@ -4192,6 +4200,10 @@ main .section { margin-bottom: calc(0px * var(--tw-space-y-reverse)); } + .md\:border-t { + border-top-width: 1px; + } + .md\:p-0 { padding: 0px; } @@ -4205,6 +4217,11 @@ main .section { padding-bottom: 2.5rem !important; } + .md\:px-0 { + padding-left: 0px; + padding-right: 0px; + } + .md\:px-12 { padding-left: 3rem; padding-right: 3rem; @@ -4229,6 +4246,14 @@ main .section { padding-top: 1rem; padding-bottom: 1rem; } + + .md\:pr-8 { + padding-right: 2rem; + } + + .md\:text-right { + text-align: right; + } } @media (min-width: 1024px) { From 17d58f07512622f4b49ee1ed08d4e86d86e94cde Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 14:23:12 +0100 Subject: [PATCH 036/106] chore: improve image loading by loading first image eager --- blocks/card-list/card-list.js | 5 ++++- blocks/card-list/libraryCard.js | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index ef9c68f3b..4028d6ca4 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -153,7 +153,10 @@ export default async function decorate(block) { { class: 'md:w-1/4 mb-8 px-4 md:px-0 md:text-right md:pr-8' }, h2({ class: 'text-2xl font-extrabold md:border-t mt-0', id: `letter-${letter}` }, letter), ); - cards.forEach((card) => cardList.appendChild(createLibraryCard(card))); + const ifFirstLetter = letter === filteredArticlesMap.keys().next().value; + cards.forEach((card, index) => { + cardList.appendChild(createLibraryCard(card, index === 0 && ifFirstLetter)); + }); block.append(divLetter, cardList); }); // render cards article style diff --git a/blocks/card-list/libraryCard.js b/blocks/card-list/libraryCard.js index 2c62ba72a..eb9c78b05 100644 --- a/blocks/card-list/libraryCard.js +++ b/blocks/card-list/libraryCard.js @@ -4,11 +4,11 @@ import { li, a, p, div, h2, } from '../../scripts/dom-builder.js'; -export default function createCard(article) { +export default function createCard(article, firstCard = false) { const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1 ? article.title.split('| Danaher Life Sciences')[0] : article.title.trim(); - const cardImage = createOptimizedPicture(article.image, article.title, false, [{ media: '(min-width: 1024px)', width: '320' }, { media: '(min-width: 640px)', width: '520' }, { width: '420' }]); + const cardImage = createOptimizedPicture(article.image, article.title, firstCard, [{ media: '(min-width: 1024px)', width: '320' }, { media: '(min-width: 640px)', width: '520' }, { width: '420' }]); cardImage.querySelector('img').className = 'mb-2 h-48 w-full object-cover'; const cardWrapper = a( From e2d6aa060f1d3aa400fe19c0d62cdddeeffb88b2 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 14:52:16 +0100 Subject: [PATCH 037/106] chore: change takeway to block --- .../convert/test/fixtures/blog6-semantic.html | 8 ++++++ .../actions/convert/test/fixtures/blog6.html | 28 +++++++++++++++++++ .../test/fixtures/product-topic-semantic.html | 12 ++++---- .../transformers/containerTakeaway.js | 25 ----------------- tools/importer/transformers/index.js | 2 +- tools/importer/transformers/takeaway.js | 20 +++++++++++++ 6 files changed, 62 insertions(+), 33 deletions(-) delete mode 100644 tools/importer/transformers/containerTakeaway.js create mode 100644 tools/importer/transformers/takeaway.js diff --git a/tools/actions/convert/test/fixtures/blog6-semantic.html b/tools/actions/convert/test/fixtures/blog6-semantic.html index 3e052c2c9..5ec1b37aa 100644 --- a/tools/actions/convert/test/fixtures/blog6-semantic.html +++ b/tools/actions/convert/test/fixtures/blog6-semantic.html @@ -28,6 +28,14 @@

A myriad of experiments, instruments and reports

Key Development Stages

+
+
+
+

Key Takeaway Text Example:

+

The most important thing to consider for your experiment is keeping your sample alive and healthy during sample preparation and imaging. Thus, it is critical to maintain the sample in an environment that resembles as closely as possible physiological conditions, i.e., temperature, pH, oxygen levels, and other important factors.

+
+
+

Figure1: From laboratory to patient - key development stages and their associated documentation required to take a drug to market. Credit:Courtesy ofIDBS.

When reviewing even just the pharmaceutical development section of the IND document (Section 3.2.P.2 Pharmaceutical Development),³the number of systems, instruments, experiments and reports (Table 1) that come together to demonstrate the effectiveness of the process development (PD) stage of drug development cannot be underestimated.

Table1: Non-exhaustive list of example reports compiled within the process development of biological therapeutics.

diff --git a/tools/actions/convert/test/fixtures/blog6.html b/tools/actions/convert/test/fixtures/blog6.html index 2e0499628..be54097c4 100644 --- a/tools/actions/convert/test/fixtures/blog6.html +++ b/tools/actions/convert/test/fixtures/blog6.html @@ -379,6 +379,34 @@
+
+ + + +
+
+
+
+
+ + + + + + +
+ + + +
+ + +
+
+
+ +
diff --git a/tools/actions/convert/test/fixtures/product-topic-semantic.html b/tools/actions/convert/test/fixtures/product-topic-semantic.html index bdc339749..5c87e10d9 100644 --- a/tools/actions/convert/test/fixtures/product-topic-semantic.html +++ b/tools/actions/convert/test/fixtures/product-topic-semantic.html @@ -18,16 +18,14 @@

How are Assay Kits Installed

-
-

Key Takeaway Text Example:

-

The most important thing to consider for your experiment is keeping your sample alive and healthy during sample preparation and imaging. Thus, it is critical to maintain the sample in an environment that resembles as closely as possible physiological conditions, i.e., temperature, pH, oxygen levels, and other important factors.

-
+
-
style
-
product-topic-takeaway
+
+

Key Takeaway Text Example:

+

The most important thing to consider for your experiment is keeping your sample alive and healthy during sample preparation and imaging. Thus, it is critical to maintain the sample in an environment that resembles as closely as possible physiological conditions, i.e., temperature, pH, oxygen levels, and other important factors.

+
-

The understanding of complex and/or fast cellular dynamics is an important step for exploring biological processes. Therefore, today’s life science research is increasingly focused on dynamic processes like cell migration, morphological changes of cells, organs, or whole animals, and real-time physiological (e.g., changes of intracellular ion composition) events in living specimens. One approach to address these challenging demands is to employ certain optical methods that are collectively called live-cell imaging.

Live-cell imaging provides, in real time, a “snapshot” of a cell’s or organism’s current state in its native environment without introducing artifacts typical of fixation. These capabilities make live-cell imaging a requisite technique for addressing questions in cell biology, cancer research, developmental biology, and neuroscience.

In recent years, substantial advances in electronics, optics, and fluorescent tag technology have made live-cell imaging more versatile and easily accessible for scientists.

diff --git a/tools/importer/transformers/containerTakeaway.js b/tools/importer/transformers/containerTakeaway.js deleted file mode 100644 index 7964a8c9c..000000000 --- a/tools/importer/transformers/containerTakeaway.js +++ /dev/null @@ -1,25 +0,0 @@ -import { - featureimage, -} from './util.js'; - -/* global WebImporter */ -const createTakeaway = (main, document) => { - main.querySelectorAll('div.container-takeaway').forEach((takeaway) => { - const fulllayout = takeaway?.querySelector('fulllayout'); - const div = fulllayout?.querySelector('div'); - const featureImg = div?.querySelector('div.featureimage'); - if (takeaway) { - takeaway.innerHTML = ''; - const cells = [['Section Metadata'], ['style', 'product-topic-takeaway']]; - const table = WebImporter.DOMUtils.createTable(cells, document); - if (takeaway.previousElementSibling && takeaway.previousElementSibling.className !== 'container-takeaway') { - takeaway.append(document.createElement('hr')); - } - takeaway.append(featureimage(featureImg, document), table); - if (takeaway.nextElementSibling) { - table.after(document.createElement('hr')); - } - } - }); -}; -export default createTakeaway; diff --git a/tools/importer/transformers/index.js b/tools/importer/transformers/index.js index 82ece1c59..9c78afbd6 100644 --- a/tools/importer/transformers/index.js +++ b/tools/importer/transformers/index.js @@ -26,7 +26,7 @@ import bannerAEM from './bannerAEM.js'; import productCategory from './productCategory.js'; import coveoCategory from './coveoCategory.js'; import workflowContainer from './workflowContainer.js'; -import takeaway from './containerTakeaway.js'; +import takeaway from './takeaway.js'; import topicList from './topicList.js'; import table from './table.js'; import libraryHub from './libraryHub.js'; diff --git a/tools/importer/transformers/takeaway.js b/tools/importer/transformers/takeaway.js new file mode 100644 index 000000000..dc2166bbd --- /dev/null +++ b/tools/importer/transformers/takeaway.js @@ -0,0 +1,20 @@ +/* global WebImporter */ +import { featureimage } from './util.js'; + +const createTakeaway = (main, document) => { + main.querySelectorAll('div.container-takeaway').forEach((takeaway) => { + const block = [['Takeway']]; + const fullLayout = takeaway?.querySelector('fulllayout'); + const featureImgs = fullLayout?.querySelectorAll('div.featureimage'); + if (featureImgs) { + featureImgs.forEach((featureImg) => { + block.push([featureimage(featureImg, document)]); + }); + } else { + block.push([fullLayout.innerHTML]); + } + const table = WebImporter.DOMUtils.createTable(block, document); + fullLayout.replaceWith(table); + }); +}; +export default createTakeaway; From 229ae3119f7f5205b60168c9de55d86ed059630e Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Fri, 17 Nov 2023 15:52:03 +0100 Subject: [PATCH 038/106] feat: implement takeaway as block --- blocks/takeway/takeway.js | 3 +++ styles/styles.css | 57 +++++++++------------------------------ templates/topic/topic.css | 8 ------ 3 files changed, 16 insertions(+), 52 deletions(-) create mode 100644 blocks/takeway/takeway.js diff --git a/blocks/takeway/takeway.js b/blocks/takeway/takeway.js new file mode 100644 index 000000000..2d9e32a6d --- /dev/null +++ b/blocks/takeway/takeway.js @@ -0,0 +1,3 @@ +export default function decorate(block) { + block.classList.add(...'mb-20 bg-danaherpurple-50 border-t-8 border-danaherpurple-500 px-6 lg:px-10 py-6 space-y-4 leading-7 text-base text-danahergray-700'.split(' ')); +} diff --git a/styles/styles.css b/styles/styles.css index eb0d6500d..a436bdc36 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -370,50 +370,6 @@ color: rgb(17 24 39 / var(--tw-text-opacity)); } -.product-topic-takeaway .default-content-wrapper { - margin-bottom: 5rem; -} - -.product-topic-takeaway .default-content-wrapper > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.product-topic-takeaway .default-content-wrapper { - border-top-width: 8px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(234 222 255 / var(--tw-bg-opacity)); - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 1.5rem; - padding-bottom: 1.5rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - - .product-topic-takeaway .default-content-wrapper { - padding-left: 2.5rem; - padding-right: 2.5rem; - } -} - -*:has(.product-topic-takeaway) .default-content-wrapper h2 { - margin-top: 0px; - margin-bottom: 0px; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .topic main p:not(.show-modal-btn) { margin-bottom: 1rem; font-size: 1.125rem; @@ -2412,6 +2368,10 @@ main .section { margin-bottom: 0.5rem; } +.mb-20 { + margin-bottom: 5rem; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -3126,6 +3086,10 @@ main .section { border-top-width: 2px; } +.border-t-8 { + border-top-width: 8px; +} + .border-danaherpurple-500 { --tw-border-opacity: 1; border-color: rgb(117 35 255 / var(--tw-border-opacity)); @@ -4323,6 +4287,11 @@ main .section { padding-right: 0px; } + .lg\:px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; + } + .lg\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; diff --git a/templates/topic/topic.css b/templates/topic/topic.css index 76a5b67c9..5c64f7207 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -18,14 +18,6 @@ @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; } -.product-topic-takeaway .default-content-wrapper { - @apply mb-20 bg-danaherpurple-50 border-t-8 border-danaherpurple-500 px-6 lg:px-10 py-6 space-y-4 leading-7 text-base text-danahergray-700; -} - -*:has(.product-topic-takeaway) .default-content-wrapper h2 { - @apply text-xl font-semibold text-danahergray-900 my-0; -} - .topic main p:not(.show-modal-btn) { @apply leading-7 text-lg mb-4 text-danahergray-700; } From c58887dd6e26c1eb965856dfa54c5e40fe6fe72b Mon Sep 17 00:00:00 2001 From: wz914876 Date: Fri, 17 Nov 2023 20:37:01 +0530 Subject: [PATCH 039/106] Converter issues with C2A --- .../convert/test/fixtures/blog-semantic.html | 25 +- tools/actions/convert/test/fixtures/blog.html | 519 +++++++++++++++--- .../test/fixtures/topic-hub-semantic.html | 1 + tools/importer/transformers/callToAction.js | 24 +- 4 files changed, 485 insertions(+), 84 deletions(-) diff --git a/tools/actions/convert/test/fixtures/blog-semantic.html b/tools/actions/convert/test/fixtures/blog-semantic.html index c5de85f73..b6341c4d8 100644 --- a/tools/actions/convert/test/fixtures/blog-semantic.html +++ b/tools/actions/convert/test/fixtures/blog-semantic.html @@ -1,3 +1,4 @@ +
@@ -17,8 +18,16 @@

The AI-powered pixel classifier

Fast and reproducible microscopy-image segmentation results

- + null

+
+
+
+

Key Takeaway Text Example:

+

The most important thing to consider for your experiment is keeping your sample alive and healthy during sample preparation and imaging. Thus, it is critical to maintain the sample in an environment that resembles as closely as possible physiological conditions, i.e., temperature, pH, oxygen levels, and other important factors.

+
+
+

Quantitative analysis of a sample’s microstructure is based on image segmentation, but dividing the image into constituent objects of interest and their local background is a challenge for scientists. Classical function-based automation has its limits for classifying images. Achieving reproducible results manually requires expertise and is tedious work. But now there is a way to overcome these challenges by speeding up this analysis to extract the real value of the image and gain insights. The artificial-intelligence-powered pixel classifier provides reproducible segmentation results fast and overcomes human action. It delivers more robust results compared to classical function-based automation. And here is why …

The original article was published by Leica Microsystems.

@@ -30,7 +39,7 @@

The AI-powered pixel classifier

Title
-
Unlocking mRNA's Potential Beyond COVID-19 | Danaher Life Sciences
+
The AI-powered pixel classifier | Danaher Life Sciences
canonical
@@ -42,13 +51,7 @@

The AI-powered pixel classifier

Description
-
Learn about 3 key steps to follow if you want to unlock the capability of mRNA's medicines are potential revolutionize the treatment myriad diseases.
-
-
-
Image
-
- -
+
The artificial-intelligence-powered pixel classifier provides reproducible segmentation results fast and overcomes human action.
authorName
@@ -72,11 +75,11 @@

The AI-powered pixel classifier

creationDate
-
+
Fri, 16 Dec 2022 10:55:52 GMT
updateDate
-
+
Thu, 16 Nov 2023 19:20:13 GMT
diff --git a/tools/actions/convert/test/fixtures/blog.html b/tools/actions/convert/test/fixtures/blog.html index 6194807c9..7ebb08de3 100644 --- a/tools/actions/convert/test/fixtures/blog.html +++ b/tools/actions/convert/test/fixtures/blog.html @@ -7,7 +7,9 @@ - + + + @@ -36,26 +38,197 @@ - + + -Unlocking mRNA's Potential Beyond COVID-19 | Danaher Life Sciences - - - - - - - + + + + + + The AI-powered pixel classifier | Danaher Life Sciences + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -70,7 +243,7 @@ - + - + + + + + + + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index 6006b1523..eb26f28ba 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -31,6 +31,7 @@

Assay Kits

Explore our line of Assay Kits

+

View Products

diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index c629ae41f..d6da65588 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -5,17 +5,33 @@ const createCTA = (main, document) => { const title = ctaSection.getAttribute('title'); const btnText1 = ctaSection.getAttribute('btntext1'); const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); + const btnhref1 = ctaSection.getAttribute('btnhref1'); + const btnText2 = ctaSection.getAttribute('btntext2'); + const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); + const btnhref2 = ctaSection.getAttribute('btnhref2'); const div = document.createElement('div'); const h2 = document.createElement('h2'); h2.textContent = title; if (h2) { div.append(h2); } - const btn = document.createElement('button'); - btn.textContent = btnText1; - if (rfqBtn1 && btn.textContent) { - div.append(btn); + const btn1 = document.createElement('button'); + btn1.textContent = btnText1; + if (rfqBtn1 && btn1.textContent) { + div.append(btn1); } + if (btnhref1 && btn1.textContent) { + div.append(btn1); + } + const btn2 = document.createElement('button'); + btn2.textContent = btnText2; + if (rfqBtn2 && btn2.textContent) { + div.append(btn2); + } + if (btnhref2 && btn2.textContent) { + div.append(btn2); + } + const cells = [ ['call-to-action'], [div], From 3d0ea678f7ae171011bc891f94bebc87e78fdc42 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Fri, 17 Nov 2023 19:24:19 +0100 Subject: [PATCH 040/106] feat: move side nav block to own section --- tools/actions/convert/test/fixtures/topic-hub-semantic.html | 1 + tools/importer/transformers/sideNav.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index 6006b1523..9a29568c1 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -21,6 +21,7 @@
+

Assay Kits

diff --git a/tools/importer/transformers/sideNav.js b/tools/importer/transformers/sideNav.js index f3c039afa..af6285241 100644 --- a/tools/importer/transformers/sideNav.js +++ b/tools/importer/transformers/sideNav.js @@ -5,11 +5,12 @@ const sideNav = (main, document) => { let blockName = 'Side Nav'; const sideNavContent = sideNavEl?.textContent?.trim(); if (sideNavContent && sideNavContent.length < 65) { - blockName += ` (${sideNavEl.textContent})`; + blockName += ` (${sideNavContent})`; } const block = [[blockName], ['']]; const table = WebImporter.DOMUtils.createTable(block, document); sideNavEl.replaceWith(table); + table.insertAdjacentElement('afterend', document.createElement('hr')); } }; export default sideNav; From 683baecd236f424bbfd32e02101fc683fdb9c758 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 20 Nov 2023 12:16:45 +0530 Subject: [PATCH 041/106] Updated the converter for application page --- helix-query.yaml | 1 + tools/actions/convert/test/converter.test.js | 3 + .../test/fixtures/application-semantic.html | 61 ++ .../convert/test/fixtures/application.html | 950 ++++++++++++++++++ tools/importer/transformers/cardList.js | 1 + 5 files changed, 1016 insertions(+) create mode 100644 tools/actions/convert/test/fixtures/application-semantic.html create mode 100644 tools/actions/convert/test/fixtures/application.html diff --git a/helix-query.yaml b/helix-query.yaml index f7648e2ef..05158195c 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -5,6 +5,7 @@ indices: - /us/en/blog/** - /us/en/news/** - /us/en/library/** + - /us/en/application/** target: /us/en/article-index.json properties: lastModified: diff --git a/tools/actions/convert/test/converter.test.js b/tools/actions/convert/test/converter.test.js index 6981ac1bc..12aa92a62 100644 --- a/tools/actions/convert/test/converter.test.js +++ b/tools/actions/convert/test/converter.test.js @@ -88,4 +88,7 @@ describe('Converter Tests', () => { it('convert the library hub html', async () => { await test('library-hub'); }); + it('convert the application html', async () => { + await test('application'); + }); }); diff --git a/tools/actions/convert/test/fixtures/application-semantic.html b/tools/actions/convert/test/fixtures/application-semantic.html new file mode 100644 index 000000000..5791555f4 --- /dev/null +++ b/tools/actions/convert/test/fixtures/application-semantic.html @@ -0,0 +1,61 @@ + + + +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
Title
+
Applications | Danaher Life Sciences
+
+ +
+
Description
+
Discover the diverse lifesciences applications that are revolutionizing the biotechnology industry.
+
+
+
Image
+
+ +
+
+
+
creationDate
+
Thu, 24 Aug 2023 10:26:05 GMT
+
+
+
updateDate
+
Thu, 24 Aug 2023 10:26:05 GMT
+
+
+
+
+
+ + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/application.html b/tools/actions/convert/test/fixtures/application.html new file mode 100644 index 000000000..69c42941c --- /dev/null +++ b/tools/actions/convert/test/fixtures/application.html @@ -0,0 +1,950 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Applications | Danaher Life Sciences + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + + +
+
+ + + +
+ + +
+ + +
+ + +
+ +
+ +
+ +
+
+
+
+
+ + + + + + + + + +
+ + +
+ + +
+ + + + + + + + +
+
+ + + + + + + + +
+
+ +

+

+

+ +
+ + + +
+ + +
+
+ +
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + +
+
+
+ +
+
+
+
+window.onload = function() { + +var anchors = document.getElementsByTagName("a"); + +for (var i = 0; i < anchors.length; i++) { + anchors[i].href = anchors[i].href.replace("/content/danaher/ls", "") + + if (anchors[i].href.includes("?") || anchors[i].href.includes("lifesciences.danaher.com") ) { + + } else { + anchors[i].href = anchors[i].href.concat("?utm_source=dhls_website") + } +} + +} + + + + .btn.orange { + background-color: #dc6016; + color: white; + } +
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ +
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tools/importer/transformers/cardList.js b/tools/importer/transformers/cardList.js index b50e6fc54..a0b23f2c3 100644 --- a/tools/importer/transformers/cardList.js +++ b/tools/importer/transformers/cardList.js @@ -5,6 +5,7 @@ const createCardList = (main, document) => { let blockName; if (url.endsWith('/blog.html')) blockName = 'Card List (blog)'; else if (url.endsWith('/news.html')) blockName = 'Card List (news)'; + else if (url.endsWith('/application.html')) blockName = 'Card List (application)'; if (blockName) { const block = [[blockName], ['']]; From 80d6af3bae78a0caefee6136f23dd4721856c69c Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 20 Nov 2023 14:28:59 +0530 Subject: [PATCH 042/106] removed danaher config from html --- .../convert/test/fixtures/application.html | 152 ----------------- .../convert/test/fixtures/blog-hub.html | 150 ----------------- .../actions/convert/test/fixtures/blog2.html | 151 ----------------- .../actions/convert/test/fixtures/blog3.html | 151 ----------------- .../actions/convert/test/fixtures/blog4.html | 152 ----------------- tools/actions/convert/test/fixtures/en.html | 120 -------------- tools/actions/convert/test/fixtures/news.html | 153 ----------------- .../actions/convert/test/fixtures/news2.html | 154 ----------------- .../test/fixtures/product-category.html | 154 ----------------- .../test/fixtures/product-category1.html | 154 ----------------- .../convert/test/fixtures/product-topic.html | 154 ----------------- .../convert/test/fixtures/product.html | 142 ---------------- .../convert/test/fixtures/topic-hub.html | 156 ------------------ 13 files changed, 1943 deletions(-) diff --git a/tools/actions/convert/test/fixtures/application.html b/tools/actions/convert/test/fixtures/application.html index 69c42941c..8499be9bb 100644 --- a/tools/actions/convert/test/fixtures/application.html +++ b/tools/actions/convert/test/fixtures/application.html @@ -43,89 +43,8 @@ - - @@ -150,78 +69,7 @@ }]; - - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/blog-hub.html b/tools/actions/convert/test/fixtures/blog-hub.html index e1dec7f59..784adf031 100644 --- a/tools/actions/convert/test/fixtures/blog-hub.html +++ b/tools/actions/convert/test/fixtures/blog-hub.html @@ -43,86 +43,6 @@ - - - - @@ -147,76 +67,6 @@ - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/blog2.html b/tools/actions/convert/test/fixtures/blog2.html index a90bc3fb7..f2e116dda 100644 --- a/tools/actions/convert/test/fixtures/blog2.html +++ b/tools/actions/convert/test/fixtures/blog2.html @@ -41,88 +41,6 @@ - - - - - Essential Tools for Streamlining mRNA Development | Danaher Life Sciences @@ -148,75 +66,6 @@ - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/blog3.html b/tools/actions/convert/test/fixtures/blog3.html index 01c32e287..f14be01e7 100644 --- a/tools/actions/convert/test/fixtures/blog3.html +++ b/tools/actions/convert/test/fixtures/blog3.html @@ -41,88 +41,6 @@ - - - - - Enabling Science at Scale: How Danaher Life Sciences partners deep with Biopharma | Danaher Life Sciences @@ -148,75 +66,6 @@ - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/blog4.html b/tools/actions/convert/test/fixtures/blog4.html index eb5fa2297..9b4eafda1 100644 --- a/tools/actions/convert/test/fixtures/blog4.html +++ b/tools/actions/convert/test/fixtures/blog4.html @@ -41,89 +41,6 @@ - - - - - - How organoids can redefine pre-clinical research | Danaher Life Sciences @@ -148,75 +65,6 @@ - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/en.html b/tools/actions/convert/test/fixtures/en.html index f4bc44511..fa72bd40f 100644 --- a/tools/actions/convert/test/fixtures/en.html +++ b/tools/actions/convert/test/fixtures/en.html @@ -54,61 +54,6 @@ - - - @@ -126,71 +71,6 @@ - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/news.html b/tools/actions/convert/test/fixtures/news.html index 0465008f3..07ea90ebe 100644 --- a/tools/actions/convert/test/fixtures/news.html +++ b/tools/actions/convert/test/fixtures/news.html @@ -40,90 +40,6 @@ - - - - - - - Drug Discovery World | Danaher Life Sciences @@ -148,75 +64,6 @@ - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/news2.html b/tools/actions/convert/test/fixtures/news2.html index 24ddf621d..6d89010fe 100644 --- a/tools/actions/convert/test/fixtures/news2.html +++ b/tools/actions/convert/test/fixtures/news2.html @@ -40,90 +40,6 @@ - - - - - - - ValitaCell Joins Beckman Coulter Life Sciences | Danaher Life Sciences @@ -148,76 +64,6 @@ - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/product-category.html b/tools/actions/convert/test/fixtures/product-category.html index 4ff2f6999..8c992dd85 100644 --- a/tools/actions/convert/test/fixtures/product-category.html +++ b/tools/actions/convert/test/fixtures/product-category.html @@ -40,90 +40,6 @@ - - - - - - - High-quality Laboratory Centrifuges for Efficient Separation | Danaher Life Sciences @@ -148,76 +64,6 @@ - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/product-category1.html b/tools/actions/convert/test/fixtures/product-category1.html index 2090d830a..fc01ea40e 100644 --- a/tools/actions/convert/test/fixtures/product-category1.html +++ b/tools/actions/convert/test/fixtures/product-category1.html @@ -41,89 +41,6 @@ - - - - - - Capillary Electrophoresis Instruments and Systems, Automated | Danaher Life Sciences @@ -148,77 +65,6 @@ - - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/product-topic.html b/tools/actions/convert/test/fixtures/product-topic.html index 382b4cbfb..fc81c131b 100644 --- a/tools/actions/convert/test/fixtures/product-topic.html +++ b/tools/actions/convert/test/fixtures/product-topic.html @@ -40,90 +40,6 @@ - - - - - - - What Are Assay Kits @@ -147,76 +63,6 @@ - - - - - - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/product.html b/tools/actions/convert/test/fixtures/product.html index e25da412a..c63e09c76 100644 --- a/tools/actions/convert/test/fixtures/product.html +++ b/tools/actions/convert/test/fixtures/product.html @@ -11,84 +11,6 @@ - - @@ -103,70 +25,6 @@ }]; - - - - - - - - - diff --git a/tools/actions/convert/test/fixtures/topic-hub.html b/tools/actions/convert/test/fixtures/topic-hub.html index 8455b46a9..b82b16a5e 100644 --- a/tools/actions/convert/test/fixtures/topic-hub.html +++ b/tools/actions/convert/test/fixtures/topic-hub.html @@ -42,92 +42,6 @@ - - - - - - - Topics @@ -152,76 +66,6 @@ - - - - - - - - - - - - - - From 9e70e40c39c04978dfd84f6df5c56e273bf4bbcd Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 20 Nov 2023 15:30:06 +0530 Subject: [PATCH 043/106] Updated application hub page --- blocks/card-list/applicationCard.js | 40 +++++++++++++++++++++++++++++ blocks/card-list/card-list.js | 3 ++- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 blocks/card-list/applicationCard.js diff --git a/blocks/card-list/applicationCard.js b/blocks/card-list/applicationCard.js new file mode 100644 index 000000000..914713ea9 --- /dev/null +++ b/blocks/card-list/applicationCard.js @@ -0,0 +1,40 @@ +import { makePublicUrl } from '../../scripts/scripts.js'; +import { + li, a, p, div, h2, +} from '../../scripts/dom-builder.js'; + +export default function createCard(article) { + const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1 + ? article.title.split('| Danaher Life Sciences')[0] + : article.title; + + const cardWrapper = a( + { href: makePublicUrl(article.path), title: article.title }, + h2( + { + class: + '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words', + }, + cardTitle, + ), + p( + { class: 'px-6 text-sm text-gray-500 pb-0 pt-0 pb-4 line-clamp-4 h-20 break-words' }, + article.description, + ), + div( + { + class: + 'inline-flex w-full px-6 py-5 text-base text-danaherblue-600 font-semibold', + }, + 'View Application →', + ), + ); + + return li( + { + class: + 'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl', + }, + cardWrapper, + ); +} diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 4028d6ca4..c16dcc56f 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -5,6 +5,7 @@ import { import { toClassName } from '../../scripts/lib-franklin.js'; import createArticleCard from './articleCard.js'; +import createApplicationCard from './applicationCard.js'; import createLibraryCard from './libraryCard.js'; const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; @@ -174,7 +175,7 @@ export default async function decorate(block) { 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', }); articlesToDisplay.forEach((article, index) => { - cardList.appendChild(createArticleCard(article, index === 0)); + cardList.appendChild(articleType === 'application' ? createApplicationCard(article) : createArticleCard(article, index === 0)); }); // render pagination and filters From 38c571a16e74f504c68e2b318f3843966066d579 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 20 Nov 2023 16:10:06 +0530 Subject: [PATCH 044/106] sorted alphabetically --- blocks/card-list/card-list.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index c16dcc56f..fa629c7ca 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -160,6 +160,18 @@ export default async function decorate(block) { }); block.append(divLetter, cardList); }); + // render cards application style + } else if (articleType === 'application') { + filteredArticles.sort((card1, card2) => card1.title.localeCompare(card2.title)); + + const cardList = ul({ + class: + 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', + }); + filteredArticles.forEach((article) => { + cardList.appendChild(createApplicationCard(article)); + }); + block.append(cardList); // render cards article style } else { filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); @@ -175,7 +187,7 @@ export default async function decorate(block) { 'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-4 sm:px-0 justify-items-center mt-3 mb-3', }); articlesToDisplay.forEach((article, index) => { - cardList.appendChild(articleType === 'application' ? createApplicationCard(article) : createArticleCard(article, index === 0)); + cardList.appendChild(createArticleCard(article, index === 0)); }); // render pagination and filters From 0b1fe010689208619d7257a3ed55714b4d7afee8 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Mon, 20 Nov 2023 16:13:11 +0530 Subject: [PATCH 045/106] initial commit --- scripts/scripts.js | 1 + styles/styles.css | 95 +++++++++++++++++++++++++++++++++++ styles/tailwind.css | 1 + templates/library/library.css | 19 +++++++ templates/library/library.js | 13 +++++ 5 files changed, 129 insertions(+) create mode 100644 templates/library/library.css create mode 100644 templates/library/library.js diff --git a/scripts/scripts.js b/scripts/scripts.js index e1be36a14..c8bdea59d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -30,6 +30,7 @@ const TEMPLATE_LIST = { blog: 'blog', news: 'blog', topic: 'topic', + library: 'library', }; /** diff --git a/styles/styles.css b/styles/styles.css index eb0d6500d..86a45024a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -433,6 +433,101 @@ width: 100%; } +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + flex-direction: column; + padding-left: 1rem; + padding-right: 1rem; +} + +.testimonial .testimonial-footer .library main>div:nth-child(2) { + margin-top: 0px; + font-size: 1rem; + font-weight: 500; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(2 105 124 / var(--tw-text-opacity)); +} + +@media (min-width: 1024px) { + + .library main { + padding-left: 0px; + padding-right: 0px; + } +} + +.library main .section { + width: 100%; + flex: 1 1 0%; + padding: 0px; + padding-left: 0px; +} + +@media (min-width: 1024px) { + + .library main .section { + margin-left: auto; + padding-left: 1.5rem; + } +} + +.library main .button-container a { + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); +} + +.library main .button-container a:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.library main .button-container a { + margin-top: 2rem; + margin-bottom: 2rem; + border-radius: 9999px; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + +.library main > div:first-child { + margin-bottom: 0.5rem; +} + +.library main > div:first-child > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.library main > div:first-child .default-content-wrapper h1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0px; + padding-right: 0px; + font-size: 2.25rem; + line-height: 2.5rem; + font-weight: 800; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .testimonial>div { display: flex; align-items: center; diff --git a/styles/tailwind.css b/styles/tailwind.css index 5cd5c5f2d..47366cd59 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -13,6 +13,7 @@ @import '../blocks/banner/banner.css'; @import '../templates/blog/blog.css'; @import '../templates/topic/topic.css'; +@import '../templates/library/library.css'; @import '../blocks/testimonial/testimonial.css'; @import '../blocks/cards/cards.css'; @import '../blocks/columns/columns.css'; diff --git a/templates/library/library.css b/templates/library/library.css new file mode 100644 index 000000000..487acb039 --- /dev/null +++ b/templates/library/library.css @@ -0,0 +1,19 @@ +.library main { + @apply mx-auto w-full flex flex-col px-4 lg:px-0; +} + +.library main .section { + @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6; +} + +.library main .button-container a { + @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; +} + +.library main > div:first-child { + @apply space-y-4 mb-2; +} + +.library main > div:first-child .default-content-wrapper h1 { + @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; +} \ No newline at end of file diff --git a/templates/library/library.js b/templates/library/library.js new file mode 100644 index 000000000..afbe03e02 --- /dev/null +++ b/templates/library/library.js @@ -0,0 +1,13 @@ +import { buildBlock } from '../../scripts/lib-franklin.js'; + +export default async function buildAutoBlocks(block) { + const main = document.querySelector('main'); + const firstWrapper = main.querySelector(':scope > div'); + firstWrapper.prepend( + buildBlock('social-media', { elems: [] }), + ); + const lastWrapper = main.querySelector(':scope > div:last-of-type'); + lastWrapper.append( + buildBlock('social-media', { elems: [] }), + ); +} \ No newline at end of file From c999ea2330123c001f5fe55a4aef9c7eaa92316c Mon Sep 17 00:00:00 2001 From: Amlan Sengupta Date: Mon, 20 Nov 2023 17:07:26 +0530 Subject: [PATCH 046/106] optimized accordion accessibility pagespeed fix --- blocks/accordion/accordion.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 64a9f3fda..dfac28710 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -12,19 +12,19 @@ function toggleAccordion(activeButton) { function createAccordionBlock(question, answer) { const uuid = generateUUID(); - const divEl = div(); + const divEl = dl(); const btn = dt( - { class: 'button peer', 'aria-expanded': false, 'aria-controls': `${uuid}` }, + { class: 'button peer py-4', 'aria-expanded': false, 'aria-controls': `${uuid}` }, button( { type: 'button', class: 'flex w-full items-start justify-between text-left text-gray-900' }, - h3({ class: 'text-base font-semibold leading-7' }, question), - span({ class: 'ml-6 flex h-14 items-center pr-2' }), + h3({ class: 'text-base font-semibold leading-7 my-0' }, question), + span({ class: 'ml-6 flex items-center pr-2 my-auto' }), ), ); btn.querySelector('span').innerHTML = ''; const panel = dd( - { id: `${uuid}`, class: 'panal mt-2 pr-12 pb-4 peer-[.show]:block hidden' }, + { id: `${uuid}`, class: 'panel pr-12 pb-4 peer-[.show]:block hidden' }, div({ class: 'accordion-answer text-base leading-7 text-gray-600 href-text' }), ); @@ -33,7 +33,7 @@ function createAccordionBlock(question, answer) { }); btn.addEventListener('click', () => toggleAccordion(btn)); - divEl.append(document.createElement('hr'), btn, panel); + divEl.append(btn, panel); return divEl; } @@ -50,13 +50,11 @@ export default function decorate(block) { const accordionItems = questions .map((question, index) => createAccordionBlock(question.question, question.answer, index)); - const accordion = dl( - { class: 'space-y-4 divide-y divide-gray-900/10' }, - div({ class: 'pt-6' }), + const accordion = div( + { class: 'divide-y divide-gray-900/10' }, + ...accordionItems, ); - accordionItems.map((items) => accordion.querySelector('div.pt-6').append(items)); block.innerHTML = ''; - block.className = 'divide-y divide-gray-900/10'; block.append(accordion); } From d3ddda22fd6df2dc3eb11902a4982afe79966427 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Mon, 20 Nov 2023 17:27:28 +0530 Subject: [PATCH 047/106] Removed DanaherConfig from test files --- .../convert/test/fixtures/blog-semantic.html | 4 + tools/actions/convert/test/fixtures/blog.html | 86 ------------------- .../test/fixtures/topic-hub-semantic.html | 2 +- tools/importer/transformers/callToAction.js | 14 ++- 4 files changed, 17 insertions(+), 89 deletions(-) diff --git a/tools/actions/convert/test/fixtures/blog-semantic.html b/tools/actions/convert/test/fixtures/blog-semantic.html index b6341c4d8..1bbd59b41 100644 --- a/tools/actions/convert/test/fixtures/blog-semantic.html +++ b/tools/actions/convert/test/fixtures/blog-semantic.html @@ -49,6 +49,10 @@

Key Takeaway Text Example:

keywords
Data Science & Deep Learning,Automation
+
+
Tags
+
danaher:topics/data science-deep learning,danaher:topics/automation
+
Description
The artificial-intelligence-powered pixel classifier provides reproducible segmentation results fast and overcomes human action.
diff --git a/tools/actions/convert/test/fixtures/blog.html b/tools/actions/convert/test/fixtures/blog.html index 7ebb08de3..101a3f7e1 100644 --- a/tools/actions/convert/test/fixtures/blog.html +++ b/tools/actions/convert/test/fixtures/blog.html @@ -43,92 +43,6 @@ - - - - - - - The AI-powered pixel classifier | Danaher Life Sciences diff --git a/tools/actions/convert/test/fixtures/topic-hub-semantic.html b/tools/actions/convert/test/fixtures/topic-hub-semantic.html index 0119fe5c5..be1046cd6 100644 --- a/tools/actions/convert/test/fixtures/topic-hub-semantic.html +++ b/tools/actions/convert/test/fixtures/topic-hub-semantic.html @@ -32,7 +32,7 @@

Assay Kits

Explore our line of Assay Kits

-

View Products

+

View Products

diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index d6da65588..3aa4404c7 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -21,7 +21,12 @@ const createCTA = (main, document) => { div.append(btn1); } if (btnhref1 && btn1.textContent) { - div.append(btn1); + const p1 = document.createElement('p'); + const a1 = document.createElement('a'); + a1.setAttribute('href', btnhref1); + a1.textContent = btn1.textContent; + p1.append(a1); + div.append(p1); } const btn2 = document.createElement('button'); btn2.textContent = btnText2; @@ -29,7 +34,12 @@ const createCTA = (main, document) => { div.append(btn2); } if (btnhref2 && btn2.textContent) { - div.append(btn2); + const p2 = document.createElement('p'); + const a2 = document.createElement('a'); + a2.setAttribute('href', btnhref2); + a2.textContent = btn2.textContent; + p2.append(a2); + div.append(p2); } const cells = [ From 76ce9aead04e2e8eb03160a0d8f215d2eeab244c Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 15:43:27 +0100 Subject: [PATCH 048/106] feat: sidebar for topics hub --- blocks/side-nav/side-nav.js | 24 ++++++++-- styles/styles.css | 88 +++++++++++++++++-------------------- templates/topic/topic.css | 14 +----- templates/topic/topic.js | 2 +- 4 files changed, 63 insertions(+), 65 deletions(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index ada9b2baf..b47e5349f 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -4,12 +4,19 @@ import { getMetadata } from '../../scripts/lib-franklin.js'; import { makePublicUrl } from '../../scripts/scripts.js'; import { fetchTopicsForCategory } from '../topic-list/topic-list.js'; +async function fetchAllProductCategories() { + const products = await ffetch('/us/en/products-index.json') + .filter(({ type, path }) => type === 'Category' && path.endsWith('/topics')) + .all(); + return products.sort((item1, item2) => item1.title.localeCompare(item2.title)); +} + function renderSideNav(sideNavItems) { const sideNavElements = div({ class: 'flex flex-col items-start' }); sideNavItems.forEach((sideNavItem) => { sideNavElements.append(div( { - class: 'w-full side-nav-item', + class: 'w-full side-nav-item hover:bg-danaherpurple-25 hover:rounded-md', }, div( { @@ -30,7 +37,7 @@ export default async function decorate(block) { let sideNavTitle = 'Side Navigation'; let selectedNavItem = null; let sideNavElements = div(); - if (block.classList.contains('topic-content')) { + if (block.classList.contains('topics')) { const category = getMetadata('fullcategory'); sideNavItems = await fetchTopicsForCategory(category); const categoryObj = await ffetch('/us/en/products-index.json') @@ -39,10 +46,19 @@ export default async function decorate(block) { sideNavTitle = categoryObj?.title || category || sideNavTitle; sideNavElements = renderSideNav(sideNavItems); selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); + } else if (block.classList.contains('products')) { + sideNavItems = await fetchAllProductCategories(); + sideNavTitle = 'Products'; + sideNavElements = renderSideNav(sideNavItems); } - - if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'rounded-md'); + selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); + if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'hover:bg-danaherpurple-50', 'rounded-md'); block.append(div({ class: 'text-lg px-5 py-4' }, strong(sideNavTitle)), sideNavElements); block.classList.add('pt-6', 'pr-2'); + + const main = document.querySelector('main'); + main.classList.add('grid', 'px-4', 'lg:px-0', 'max-w-7xl', 'mx-auto', 'auto-cols-auto'); + main.querySelector(':scope > div.side-nav-container').classList.add('!col-span-1', '!col-start-1', 'row-span-6', 'hidden', 'lg:block'); + main.querySelectorAll(':scope > div').forEach((div) => div.classList.add('lg:col-span-3', 'lg:col-start-2', 'space-y-4', 'mb-2', 'flex-1', 'p-0', 'pl-0', 'lg:pl-6')); return block; } diff --git a/styles/styles.css b/styles/styles.css index eeb816d68..36fcadf71 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -275,53 +275,6 @@ padding-bottom: 1.5rem; } -.topic main { - margin-left: auto; - margin-right: auto; - display: grid; - max-width: 80rem; - grid-auto-columns: auto; - padding-left: 1rem; - padding-right: 1rem; -} - -@media (min-width: 1024px) { - - .topic main { - padding-left: 0px; - padding-right: 0px; - } -} - -.topic main > div:first-child { - grid-column-start: 1; - grid-row: span 6 / span 6; -} - -.topic main .section { - grid-column-start: 2; - margin-bottom: 0.5rem; - flex: 1 1 0%; -} - -.topic main .section > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.topic main .section { - padding: 0px; - padding-left: 0px; -} - -@media (min-width: 1024px) { - - .topic main .section { - padding-left: 1.5rem; - } -} - .topic main .button-container a { border-width: 2px; --tw-border-opacity: 1; @@ -2322,6 +2275,10 @@ main .section { order: 0; } +.\!col-span-1 { + grid-column: span 1 / span 1 !important; +} + .col-span-1 { grid-column: span 1 / span 1; } @@ -2330,6 +2287,14 @@ main .section { grid-column: span 2 / span 2; } +.\!col-start-1 { + grid-column-start: 1 !important; +} + +.row-span-6 { + grid-row: span 6 / span 6; +} + .m-0 { margin: 0px; } @@ -2843,6 +2808,10 @@ main .section { list-style-type: none; } +.auto-cols-auto { + grid-auto-columns: auto; +} + .grid-flow-col { grid-auto-flow: column; } @@ -3463,6 +3432,10 @@ main .section { padding-bottom: 56.25%; } +.pl-0 { + padding-left: 0px; +} + .pl-1 { padding-left: 0.25rem; } @@ -3925,6 +3898,10 @@ main .section { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.hover\:rounded-md:hover { + border-radius: 0.375rem; +} + .hover\:border-t-2:hover { border-top-width: 2px; } @@ -3944,6 +3921,11 @@ main .section { background-color: rgb(59 199 229 / var(--tw-bg-opacity)); } +.hover\:bg-danaherpurple-25:hover { + --tw-bg-opacity: 1; + background-color: rgb(245 239 255 / var(--tw-bg-opacity)); +} + .hover\:bg-danaherpurple-50:hover { --tw-bg-opacity: 1; background-color: rgb(234 222 255 / var(--tw-bg-opacity)); @@ -4221,6 +4203,14 @@ main .section { @media (min-width: 1024px) { + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:col-start-2 { + grid-column-start: 2; + } + .lg\:my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -4350,6 +4340,10 @@ main .section { padding-left: 0.5rem; } + .lg\:pl-6 { + padding-left: 1.5rem; + } + .lg\:pt-4 { padding-top: 1rem; } diff --git a/templates/topic/topic.css b/templates/topic/topic.css index 912530100..29750879d 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -1,15 +1,3 @@ -.topic main { - @apply grid px-4 lg:px-0 max-w-7xl mx-auto auto-cols-auto; -} - -.topic main > div:first-child { - @apply col-start-1 row-span-6; -} - -.topic main .section { - @apply space-y-4 mb-2 flex-1 p-0 pl-0 lg:pl-6 col-start-2; -} - .topic main .button-container a { @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; } @@ -36,4 +24,4 @@ .topic main img { @apply w-full mt-10 mb-4; -} \ No newline at end of file +} diff --git a/templates/topic/topic.js b/templates/topic/topic.js index b8dc0d749..bb11f11bf 100644 --- a/templates/topic/topic.js +++ b/templates/topic/topic.js @@ -4,7 +4,7 @@ import { buildBlock } from '../../scripts/lib-franklin.js'; export default async function buildAutoBlocks() { const main = document.querySelector('main'); const sideNavBlock = div(buildBlock('side-nav', { elems: [] })); - sideNavBlock.querySelector('.side-nav').classList.add('topic-content'); + sideNavBlock.querySelector('.side-nav').classList.add('topics'); main.firstElementChild.insertAdjacentElement('afterend', sideNavBlock); main.querySelector(':scope > div:nth-child(3)')?.prepend(buildBlock('social-media', { elems: [] })); main.lastElementChild.append(buildBlock('social-media', { elems: [] })); From c51dd14d5bf9dc1b2b9d4f46b9b0501628f3ee6d Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Mon, 20 Nov 2023 20:44:21 +0530 Subject: [PATCH 049/106] updated for define section --- tools/importer/transformers/callToAction.js | 1 + tools/importer/transformers/workflowContainer.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index 3aa4404c7..bac9a9820 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -47,6 +47,7 @@ const createCTA = (main, document) => { [div], ]; const block = WebImporter.DOMUtils.createTable(cells, document); + if(ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); ctaSection.append(block); } }; diff --git a/tools/importer/transformers/workflowContainer.js b/tools/importer/transformers/workflowContainer.js index 9a1e1dcf3..8654fa989 100644 --- a/tools/importer/transformers/workflowContainer.js +++ b/tools/importer/transformers/workflowContainer.js @@ -11,7 +11,7 @@ const createWorkflowContainerSection = (main, document) => { if (i === arr.length - 1) { const cells = [['Section Metadata'], ['style', 'container-two-col']]; const table = WebImporter.DOMUtils.createTable(cells, document); - e.append(table, document.createElement('hr')); + e.append(table); } }); }; From 7ca486e04e4324563072c5f4f6753a31222dc108 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 16:37:06 +0100 Subject: [PATCH 050/106] chore: show banner full width in grid main --- blocks/banner/banner.css | 4 ++++ styles/styles.css | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index 12aa16ddd..bb75ac739 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -4,6 +4,10 @@ @apply px-6; } +main.grid > .banner { + @apply lg:col-span-4 lg:col-start-1; +} + .banner >div { @apply relative min-h-[13rem] h-max w-full flex justify-start items-center; } diff --git a/styles/styles.css b/styles/styles.css index 36fcadf71..a62cec0bc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -16,6 +16,14 @@ padding-right: 1.5rem; } +@media (min-width: 1024px) { + + main.grid > .banner { + grid-column: span 4 / span 4; + grid-column-start: 1; + } +} + .banner >div { position: relative; display: flex; @@ -597,6 +605,11 @@ @media (min-width: 1024px) { + main.columns > div > .banner { + grid-column: span 4 / span 4; + grid-column-start: 1; + } + .columns > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } From 584e1d1bb434f70891aa0ddc21001790085ac01d Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 16:48:30 +0100 Subject: [PATCH 051/106] chore: clean up side nav block --- blocks/side-nav/side-nav.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index b47e5349f..dcb1103f0 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -44,13 +44,11 @@ export default async function decorate(block) { .filter(({ path }) => path === `/us/en/products/${category}`) .first(); sideNavTitle = categoryObj?.title || category || sideNavTitle; - sideNavElements = renderSideNav(sideNavItems); - selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); } else if (block.classList.contains('products')) { sideNavItems = await fetchAllProductCategories(); sideNavTitle = 'Products'; - sideNavElements = renderSideNav(sideNavItems); } + sideNavElements = renderSideNav(sideNavItems); selectedNavItem = sideNavElements.querySelector(`.side-nav-item a[href="${window.location.pathname}"]`)?.closest('.side-nav-item'); if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'hover:bg-danaherpurple-50', 'rounded-md'); block.append(div({ class: 'text-lg px-5 py-4' }, strong(sideNavTitle)), sideNavElements); From bbd7808d09cb87466115e699a2b5777b562c880c Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 20 Nov 2023 16:48:45 +0100 Subject: [PATCH 052/106] chore: update title indexing --- helix-query.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/helix-query.yaml b/helix-query.yaml index 05158195c..696855ff3 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -12,8 +12,8 @@ indices: select: none value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT") title: - select: head > meta[property="og:title"] - value: match(attribute(el, "content"), "(.*)\\\| Danaher Life.*|(.*)") + select: main h1 + value: textContent(el) description: select: head > meta[name="description"] value: attribute(el, "content") From 253d1e5438b7ba65c6d25056e2bebcedc8be80d2 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 16:51:37 +0100 Subject: [PATCH 053/106] chore: fix lint errors --- blocks/side-nav/side-nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index dcb1103f0..9c752829e 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -57,6 +57,6 @@ export default async function decorate(block) { const main = document.querySelector('main'); main.classList.add('grid', 'px-4', 'lg:px-0', 'max-w-7xl', 'mx-auto', 'auto-cols-auto'); main.querySelector(':scope > div.side-nav-container').classList.add('!col-span-1', '!col-start-1', 'row-span-6', 'hidden', 'lg:block'); - main.querySelectorAll(':scope > div').forEach((div) => div.classList.add('lg:col-span-3', 'lg:col-start-2', 'space-y-4', 'mb-2', 'flex-1', 'p-0', 'pl-0', 'lg:pl-6')); + main.querySelectorAll(':scope > div').forEach((child) => child.classList.add('lg:col-span-3', 'lg:col-start-2', 'space-y-4', 'mb-2', 'flex-1', 'p-0', 'pl-0', 'lg:pl-6')); return block; } From 9523c60ed6e3a2d9457749fd949f0f08d1583532 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 20 Nov 2023 17:38:11 +0100 Subject: [PATCH 054/106] chore: logo link to Danaher corporate page --- blocks/header/header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/header/header.js b/blocks/header/header.js index 28c0d3c9b..2b241927b 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -443,6 +443,7 @@ function buildSearchBlock(headerBlock) { const logoPictureBlock = searchHtmlBlock.querySelector(':scope > p > picture'); const logoLinkBlock = searchHtmlBlock.querySelector(':scope > p > a'); logoPictureBlock.setAttribute('alt', logoLinkBlock.textContent); + if (window.location.pathname === '/') logoLinkBlock.href = 'https://danaher.com/'; const logoImg = logoPictureBlock.querySelector('img'); logoImg.className = 'brand-logo max-w-full w-14 md:w-20 lg:w-44 h-full object-contain'; logoLinkBlock.className = 'ml-2 mb-2'; From f3ce7341d46bb4b5124b06f5a44dcde0d7c028c9 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 17:38:24 +0100 Subject: [PATCH 055/106] chore: improve topics hub layout --- blocks/side-nav/side-nav.js | 4 ++-- blocks/topic-list/topic-list.js | 14 +++++++++----- styles/styles.css | 28 ++++++++++++++++------------ 3 files changed, 27 insertions(+), 19 deletions(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 9c752829e..f147c18e1 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -55,8 +55,8 @@ export default async function decorate(block) { block.classList.add('pt-6', 'pr-2'); const main = document.querySelector('main'); - main.classList.add('grid', 'px-4', 'lg:px-0', 'max-w-7xl', 'mx-auto', 'auto-cols-auto'); - main.querySelector(':scope > div.side-nav-container').classList.add('!col-span-1', '!col-start-1', 'row-span-6', 'hidden', 'lg:block'); + main.classList.add('grid', 'px-4', 'lg:px-0', 'max-w-7xl', 'mx-auto', 'lg:grid-cols-4'); + main.querySelector(':scope > div.side-nav-container').classList.add('lg:!col-span-1', 'lg:!col-start-1', 'row-span-6', 'hidden', 'lg:block'); main.querySelectorAll(':scope > div').forEach((child) => child.classList.add('lg:col-span-3', 'lg:col-start-2', 'space-y-4', 'mb-2', 'flex-1', 'p-0', 'pl-0', 'lg:pl-6')); return block; } diff --git a/blocks/topic-list/topic-list.js b/blocks/topic-list/topic-list.js index 2834dcc8f..4e4b28e42 100644 --- a/blocks/topic-list/topic-list.js +++ b/blocks/topic-list/topic-list.js @@ -26,13 +26,17 @@ export default async function decorate(block) { }, div( { - class: 'flex gap-3 py-9', + class: 'flex items-center gap-3 py-9', }, h2({ class: 'text-xl' }, topic.title), - a({ - class: 'rounded-full px-6 py-3 ml-auto btn-outline-trending-brand text-base', - href: makePublicUrl(topic.path), - }, 'Read Topic'), + div( + { + class: 'flex min-w-[40%] md:min-w-[20%] ml-auto', + }, + a({ + class: 'rounded-full px-6 py-3 ml-auto btn-outline-trending-brand text-base', + href: makePublicUrl(topic.path), + }, 'Read Topic'),), ), hr(), )); diff --git a/styles/styles.css b/styles/styles.css index 3325c9171..d7ae351f0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2244,10 +2244,6 @@ main .section { order: 0; } -.\!col-span-1 { - grid-column: span 1 / span 1 !important; -} - .col-span-1 { grid-column: span 1 / span 1; } @@ -2256,10 +2252,6 @@ main .section { grid-column: span 2 / span 2; } -.\!col-start-1 { - grid-column-start: 1 !important; -} - .row-span-6 { grid-row: span 6 / span 6; } @@ -2684,6 +2676,10 @@ main .section { min-width: 320px; } +.min-w-\[40\%\] { + min-width: 40%; +} + .\!max-w-\[unset\] { max-width: unset !important; } @@ -2793,10 +2789,6 @@ main .section { list-style-type: none; } -.auto-cols-auto { - grid-auto-columns: auto; -} - .grid-flow-col { grid-auto-flow: column; } @@ -4137,6 +4129,10 @@ main .section { width: 100%; } + .md\:min-w-\[20\%\] { + min-width: 20%; + } + .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -4217,10 +4213,18 @@ main .section { @media (min-width: 1024px) { + .lg\:\!col-span-1 { + grid-column: span 1 / span 1 !important; + } + .lg\:col-span-3 { grid-column: span 3 / span 3; } + .lg\:\!col-start-1 { + grid-column-start: 1 !important; + } + .lg\:col-start-2 { grid-column-start: 2; } From 3b2aa80148b0615a320964b85150fafd9a10e959 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Mon, 20 Nov 2023 17:44:06 +0100 Subject: [PATCH 056/106] chore: fix lint errors --- blocks/topic-list/topic-list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blocks/topic-list/topic-list.js b/blocks/topic-list/topic-list.js index 4e4b28e42..3e3ddfdcd 100644 --- a/blocks/topic-list/topic-list.js +++ b/blocks/topic-list/topic-list.js @@ -36,7 +36,8 @@ export default async function decorate(block) { a({ class: 'rounded-full px-6 py-3 ml-auto btn-outline-trending-brand text-base', href: makePublicUrl(topic.path), - }, 'Read Topic'),), + }, 'Read Topic'), + ), ), hr(), )); From 30246344bd85487416259666f57f2ac28a9b09bc Mon Sep 17 00:00:00 2001 From: davenichols-DHLS <124819426+davenichols-DHLS@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:47:38 +0000 Subject: [PATCH 057/106] Just updating the UTM parameters --- blocks/header/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.js b/blocks/header/header.js index 2b241927b..82f354b79 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -443,7 +443,7 @@ function buildSearchBlock(headerBlock) { const logoPictureBlock = searchHtmlBlock.querySelector(':scope > p > picture'); const logoLinkBlock = searchHtmlBlock.querySelector(':scope > p > a'); logoPictureBlock.setAttribute('alt', logoLinkBlock.textContent); - if (window.location.pathname === '/') logoLinkBlock.href = 'https://danaher.com/'; + if (window.location.pathname === '/') logoLinkBlock.href = 'https://danaher.com/?utm_source=dhls_website&utm_medium=referral&utm_content=header'; const logoImg = logoPictureBlock.querySelector('img'); logoImg.className = 'brand-logo max-w-full w-14 md:w-20 lg:w-44 h-full object-contain'; logoLinkBlock.className = 'ml-2 mb-2'; From f1a2ae453e3ae16150ca780880a40658d427fac2 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 09:22:36 +0530 Subject: [PATCH 058/106] Changes for white bg-color --- tools/importer/transformers/callToAction.js | 61 +++------------------ tools/importer/transformers/util.js | 51 +++++++++++++++++ 2 files changed, 60 insertions(+), 52 deletions(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index bac9a9820..3e010b3ba 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -1,54 +1,11 @@ -/* global WebImporter */ -const createCTA = (main, document) => { - const ctaSection = main.querySelector('CTAsection'); - if (ctaSection) { - const title = ctaSection.getAttribute('title'); - const btnText1 = ctaSection.getAttribute('btntext1'); - const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); - const btnhref1 = ctaSection.getAttribute('btnhref1'); - const btnText2 = ctaSection.getAttribute('btntext2'); - const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); - const btnhref2 = ctaSection.getAttribute('btnhref2'); - const div = document.createElement('div'); - const h2 = document.createElement('h2'); - h2.textContent = title; - if (h2) { - div.append(h2); - } - const btn1 = document.createElement('button'); - btn1.textContent = btnText1; - if (rfqBtn1 && btn1.textContent) { - div.append(btn1); - } - if (btnhref1 && btn1.textContent) { - const p1 = document.createElement('p'); - const a1 = document.createElement('a'); - a1.setAttribute('href', btnhref1); - a1.textContent = btn1.textContent; - p1.append(a1); - div.append(p1); - } - const btn2 = document.createElement('button'); - btn2.textContent = btnText2; - if (rfqBtn2 && btn2.textContent) { - div.append(btn2); - } - if (btnhref2 && btn2.textContent) { - const p2 = document.createElement('p'); - const a2 = document.createElement('a'); - a2.setAttribute('href', btnhref2); - a2.textContent = btn2.textContent; - p2.append(a2); - div.append(p2); - } +import { + c2a, +} from './util.js'; - const cells = [ - ['call-to-action'], - [div], - ]; - const block = WebImporter.DOMUtils.createTable(cells, document); - if(ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); - ctaSection.append(block); - } +const createCTA = (main, document) => { + const ctaSection = main.querySelectorAll('div.cta-section'); + [...ctaSection].forEach((cta) => { + c2a(cta, document); + }); }; -export default createCTA; +export default createCTA; \ No newline at end of file diff --git a/tools/importer/transformers/util.js b/tools/importer/transformers/util.js index 6256e4923..07d39503f 100644 --- a/tools/importer/transformers/util.js +++ b/tools/importer/transformers/util.js @@ -161,3 +161,54 @@ export const testimonial = (testimonialElement, document) => { const table = WebImporter.DOMUtils.createTable(block, document); testimonialEl.replaceWith(table); }; + +export const c2a = (cta, document) => { + const ctaSection = cta.querySelector('CTAsection'); + if (ctaSection) { + const title = ctaSection.getAttribute('title'); + const btnText1 = ctaSection.getAttribute('btntext1'); + const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); + const btnhref1 = ctaSection.getAttribute('btnhref1'); + const btnText2 = ctaSection.getAttribute('btntext2'); + const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); + const btnhref2 = ctaSection.getAttribute('btnhref2'); + const h2 = document.createElement('h2'); + h2.textContent = title; + if (h2) { + cta.append(h2); + } + const btn1 = document.createElement('button'); + btn1.textContent = btnText1; + if (rfqBtn1 && btn1.textContent) { + cta.append(btn1); + } + if (btnhref1 && btn1.textContent) { + const p1 = document.createElement('p'); + const a1 = document.createElement('a'); + a1.setAttribute('href', btnhref1); + a1.textContent = btn1.textContent; + p1.append(a1); + cta.append(p1); + } + const btn2 = document.createElement('button'); + btn2.textContent = btnText2; + if (rfqBtn2 && btn2.textContent) { + cta.append(btn2); + } + if (btnhref2 && btn2.textContent) { + const p2 = document.createElement('p'); + const a2 = document.createElement('a'); + a2.setAttribute('href', btnhref2); + a2.textContent = btn2.textContent; + p2.append(a2); + cta.append(p2); + } + /*const cells = [ + ['call-to-action'], [cta], + ]; + const block = WebImporter.DOMUtils.createTable(cells, document); + if(ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); + ctaSection.append(block);*/ + return cta; + } +}; \ No newline at end of file From 844f2e09b5e134ff813ba518845c5b8587c942ce Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Tue, 21 Nov 2023 10:44:57 +0530 Subject: [PATCH 059/106] updated section logic --- tools/importer/transformers/util.js | 22 +++++++++---------- .../transformers/workflowContainer.js | 3 +++ 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/tools/importer/transformers/util.js b/tools/importer/transformers/util.js index 07d39503f..ab8f9d7cf 100644 --- a/tools/importer/transformers/util.js +++ b/tools/importer/transformers/util.js @@ -172,15 +172,16 @@ export const c2a = (cta, document) => { const btnText2 = ctaSection.getAttribute('btntext2'); const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); const btnhref2 = ctaSection.getAttribute('btnhref2'); + const div = document.createElement('div'); const h2 = document.createElement('h2'); h2.textContent = title; if (h2) { - cta.append(h2); + div.append(h2); } const btn1 = document.createElement('button'); btn1.textContent = btnText1; if (rfqBtn1 && btn1.textContent) { - cta.append(btn1); + div.append(btn1); } if (btnhref1 && btn1.textContent) { const p1 = document.createElement('p'); @@ -188,12 +189,12 @@ export const c2a = (cta, document) => { a1.setAttribute('href', btnhref1); a1.textContent = btn1.textContent; p1.append(a1); - cta.append(p1); + div.append(p1); } const btn2 = document.createElement('button'); btn2.textContent = btnText2; if (rfqBtn2 && btn2.textContent) { - cta.append(btn2); + div.append(btn2); } if (btnhref2 && btn2.textContent) { const p2 = document.createElement('p'); @@ -201,14 +202,13 @@ export const c2a = (cta, document) => { a2.setAttribute('href', btnhref2); a2.textContent = btn2.textContent; p2.append(a2); - cta.append(p2); + div.append(p2); } - /*const cells = [ - ['call-to-action'], [cta], + const cells = [ + ['call-to-action'], [div], ]; const block = WebImporter.DOMUtils.createTable(cells, document); - if(ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); - ctaSection.append(block);*/ - return cta; + if (ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); + cta.append(block); } -}; \ No newline at end of file +}; diff --git a/tools/importer/transformers/workflowContainer.js b/tools/importer/transformers/workflowContainer.js index 8654fa989..396bf9e76 100644 --- a/tools/importer/transformers/workflowContainer.js +++ b/tools/importer/transformers/workflowContainer.js @@ -12,6 +12,9 @@ const createWorkflowContainerSection = (main, document) => { const cells = [['Section Metadata'], ['style', 'container-two-col']]; const table = WebImporter.DOMUtils.createTable(cells, document); e.append(table); + if (e.nextElementSibling && !e.nextElementSibling.querySelector('div.bg-danaherlightblue-50')) { + e.append(document.createElement('hr')); + } } }); }; From d2f1a47997829dd5a1b588f7c5ad4765f67fa337 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Tue, 21 Nov 2023 10:48:14 +0530 Subject: [PATCH 060/106] lint issues fixed --- tools/importer/transformers/callToAction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index 3e010b3ba..8c1c2ba0a 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -8,4 +8,4 @@ const createCTA = (main, document) => { c2a(cta, document); }); }; -export default createCTA; \ No newline at end of file +export default createCTA; From 1be24a0164cc607a9d966b469af99948c69200f2 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 11:06:50 +0530 Subject: [PATCH 061/106] Updated the testcases for 2 buttons --- .../convert/test/fixtures/product-category1-semantic.html | 1 + tools/actions/convert/test/fixtures/product-category1.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/tools/actions/convert/test/fixtures/product-category1-semantic.html b/tools/actions/convert/test/fixtures/product-category1-semantic.html index 84cbe2336..94dbdf4dc 100644 --- a/tools/actions/convert/test/fixtures/product-category1-semantic.html +++ b/tools/actions/convert/test/fixtures/product-category1-semantic.html @@ -99,6 +99,7 @@

What is the principle of Capillary electrophoresis?

Need help designing your solution?

Request a Quote

+

Talk to an Expert

diff --git a/tools/actions/convert/test/fixtures/product-category1.html b/tools/actions/convert/test/fixtures/product-category1.html index fc01ea40e..f801a4daa 100644 --- a/tools/actions/convert/test/fixtures/product-category1.html +++ b/tools/actions/convert/test/fixtures/product-category1.html @@ -480,7 +480,7 @@

FAQs

- +
From 4a6856da12f3dd5b3817b1137e585cca97ae6ccb Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 13:13:20 +0530 Subject: [PATCH 062/106] Tests updated. --- .../convert/test/fixtures/blog-semantic.html | 2 +- tools/actions/convert/test/fixtures/blog.html | 2 +- .../convert/test/fixtures/blog2-semantic.html | 18 +++++++++--------- tools/actions/convert/test/fixtures/blog2.html | 18 +++++++++--------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/tools/actions/convert/test/fixtures/blog-semantic.html b/tools/actions/convert/test/fixtures/blog-semantic.html index 1bbd59b41..4d0c02696 100644 --- a/tools/actions/convert/test/fixtures/blog-semantic.html +++ b/tools/actions/convert/test/fixtures/blog-semantic.html @@ -18,7 +18,7 @@

The AI-powered pixel classifier

Fast and reproducible microscopy-image segmentation results

- null +

diff --git a/tools/actions/convert/test/fixtures/blog.html b/tools/actions/convert/test/fixtures/blog.html index 101a3f7e1..b9a30df44 100644 --- a/tools/actions/convert/test/fixtures/blog.html +++ b/tools/actions/convert/test/fixtures/blog.html @@ -449,7 +449,7 @@
- +
diff --git a/tools/actions/convert/test/fixtures/blog2-semantic.html b/tools/actions/convert/test/fixtures/blog2-semantic.html index 3d31252a1..846935c1a 100644 --- a/tools/actions/convert/test/fixtures/blog2-semantic.html +++ b/tools/actions/convert/test/fixtures/blog2-semantic.html @@ -17,7 +17,7 @@

9 Essential Products for Streamlining Your mRNA Development and Manufacturing

- null +

In the realm of life sciences, the tools you employ can significantly influence your work's efficiency and outcomes. For scientists, lab managers, and lab directors involved in mRNA development and manufacturing, having the right instruments at your fingertips can be a game-changer. Here, we spotlight nine indispensable products from Danaher Life Science companies that are revolutionizing this field.

@@ -33,7 +33,7 @@

1. Biomek i7 Automated Liquid Handlers

- null +

@@ -48,7 +48,7 @@

2. Echo 525 Acoustic Liquid Handlers

- null +

@@ -63,7 +63,7 @@

3. Intabio ZT System

- null +

@@ -78,7 +78,7 @@

4. IDBS Polar

- null +

@@ -93,7 +93,7 @@

5. Biophase 8800 Capillary Electrophoresis Systems

- null +

@@ -108,7 +108,7 @@

6. SpectraMax Microplate Readers

- null +

@@ -123,7 +123,7 @@

7. ZenoTOF 7600 Mass Spectrometer

- null +

@@ -138,7 +138,7 @@

8. BioZen Oligo Analytical HPLC Columns

- null +

diff --git a/tools/actions/convert/test/fixtures/blog2.html b/tools/actions/convert/test/fixtures/blog2.html index f2e116dda..9de83d346 100644 --- a/tools/actions/convert/test/fixtures/blog2.html +++ b/tools/actions/convert/test/fixtures/blog2.html @@ -380,7 +380,7 @@
- +
@@ -472,7 +472,7 @@
- +
@@ -544,7 +544,7 @@
- +
@@ -616,7 +616,7 @@
- +
@@ -688,7 +688,7 @@
- +
@@ -760,7 +760,7 @@
- +
@@ -832,7 +832,7 @@
- +
@@ -904,7 +904,7 @@
- +
@@ -976,7 +976,7 @@
- +
From a721f36cda97a07237b6b0b1fa74d92f3c78f541 Mon Sep 17 00:00:00 2001 From: Amlan Sengupta Date: Tue, 21 Nov 2023 14:32:17 +0530 Subject: [PATCH 063/106] basic library styles --- styles/styles.css | 38 +++++++++++++++++++++++++++++++++++ templates/library/library.css | 22 +++++++++++++++++++- 2 files changed, 59 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 3cdabe98f..209a945a8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -417,10 +417,15 @@ } .library main .section { + margin-top: 0.75rem; width: 100%; flex: 1 1 0%; padding: 0px; padding-left: 0px; + font-size: 1rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } @media (min-width: 1024px) { @@ -431,6 +436,39 @@ } } +.library main .section a { + position: relative; + z-index: 0; + font-weight: 700; + text-decoration-line: underline; + text-decoration-color: #3BC7E5; + text-decoration-thickness: 3px; +} + +.library main .section p:not(img) { + margin-top: 1rem; + margin-bottom: 1.5rem; +} + +.library main .section ul { + margin-left: 3rem; + margin-bottom: 2.5rem; + list-style-type: disc; +} + +.library main .section ul li { + margin-bottom: 4px; +} + +.library main .section > .default-content-wrapper > h2 { + display: inline-flex; + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .library main .button-container a { border-width: 2px; --tw-border-opacity: 1; diff --git a/templates/library/library.css b/templates/library/library.css index 487acb039..0735abed0 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -3,7 +3,27 @@ } .library main .section { - @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6; + @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; +} + +.library main .section a { + @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500 font-bold; +} + +.library main .section p:not(img) { + @apply mt-4 mb-6; +} + +.library main .section ul { + @apply list-disc ml-12 mb-10; +} + +.library main .section ul li { + @apply mb-[4px]; +} + +.library main .section > .default-content-wrapper > h2 { + @apply inline-flex font-semibold text-xl text-danahergray-900; } .library main .button-container a { From 45e50b6ddb71f64a310bef638d82d7fc0d9834cb Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 16:42:21 +0530 Subject: [PATCH 064/106] moved c2a function from util.js to callToAction.js --- tools/importer/transformers/callToAction.js | 54 +++++++++++++++++++-- tools/importer/transformers/util.js | 53 +------------------- 2 files changed, 52 insertions(+), 55 deletions(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index 8c1c2ba0a..3b4296ed0 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -1,6 +1,53 @@ -import { - c2a, -} from './util.js'; +export const c2a = (cta, document) => { + const ctaSection = cta.querySelector('CTAsection'); + if (ctaSection) { + const title = ctaSection.getAttribute('title'); + const btnText1 = ctaSection.getAttribute('btntext1'); + const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); + const btnhref1 = ctaSection.getAttribute('btnhref1'); + const btnText2 = ctaSection.getAttribute('btntext2'); + const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); + const btnhref2 = ctaSection.getAttribute('btnhref2'); + const div = document.createElement('div'); + const h2 = document.createElement('h2'); + h2.textContent = title; + if (h2) { + div.append(h2); + } + const btn1 = document.createElement('button'); + btn1.textContent = btnText1; + if (rfqBtn1 && btn1.textContent) { + div.append(btn1); + } + if (btnhref1 && btn1.textContent) { + const p1 = document.createElement('p'); + const a1 = document.createElement('a'); + a1.setAttribute('href', btnhref1); + a1.textContent = btn1.textContent; + p1.append(a1); + div.append(p1); + } + const btn2 = document.createElement('button'); + btn2.textContent = btnText2; + if (rfqBtn2 && btn2.textContent) { + div.append(btn2); + } + if (btnhref2 && btn2.textContent) { + const p2 = document.createElement('p'); + const a2 = document.createElement('a'); + a2.setAttribute('href', btnhref2); + a2.textContent = btn2.textContent; + p2.append(a2); + div.append(p2); + } + const cells = [ + ['call-to-action'], [div], + ]; + const block = WebImporter.DOMUtils.createTable(cells, document); + if (ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); + cta.append(block); + } +}; const createCTA = (main, document) => { const ctaSection = main.querySelectorAll('div.cta-section'); @@ -8,4 +55,5 @@ const createCTA = (main, document) => { c2a(cta, document); }); }; + export default createCTA; diff --git a/tools/importer/transformers/util.js b/tools/importer/transformers/util.js index ab8f9d7cf..dd392c453 100644 --- a/tools/importer/transformers/util.js +++ b/tools/importer/transformers/util.js @@ -160,55 +160,4 @@ export const testimonial = (testimonialElement, document) => { const table = WebImporter.DOMUtils.createTable(block, document); testimonialEl.replaceWith(table); -}; - -export const c2a = (cta, document) => { - const ctaSection = cta.querySelector('CTAsection'); - if (ctaSection) { - const title = ctaSection.getAttribute('title'); - const btnText1 = ctaSection.getAttribute('btntext1'); - const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); - const btnhref1 = ctaSection.getAttribute('btnhref1'); - const btnText2 = ctaSection.getAttribute('btntext2'); - const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); - const btnhref2 = ctaSection.getAttribute('btnhref2'); - const div = document.createElement('div'); - const h2 = document.createElement('h2'); - h2.textContent = title; - if (h2) { - div.append(h2); - } - const btn1 = document.createElement('button'); - btn1.textContent = btnText1; - if (rfqBtn1 && btn1.textContent) { - div.append(btn1); - } - if (btnhref1 && btn1.textContent) { - const p1 = document.createElement('p'); - const a1 = document.createElement('a'); - a1.setAttribute('href', btnhref1); - a1.textContent = btn1.textContent; - p1.append(a1); - div.append(p1); - } - const btn2 = document.createElement('button'); - btn2.textContent = btnText2; - if (rfqBtn2 && btn2.textContent) { - div.append(btn2); - } - if (btnhref2 && btn2.textContent) { - const p2 = document.createElement('p'); - const a2 = document.createElement('a'); - a2.setAttribute('href', btnhref2); - a2.textContent = btn2.textContent; - p2.append(a2); - div.append(p2); - } - const cells = [ - ['call-to-action'], [div], - ]; - const block = WebImporter.DOMUtils.createTable(cells, document); - if (ctaSection.closest('div.bg-danaherlightblue-50')) ctaSection.append(document.createElement('hr')); - cta.append(block); - } -}; +}; \ No newline at end of file From fa4b2d5ef4ec7b1f52e26ff5ce629b7c85f45f53 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 16:52:12 +0530 Subject: [PATCH 065/106] lint errors fix --- tools/importer/transformers/callToAction.js | 1 + tools/importer/transformers/util.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index 3b4296ed0..52f06cd74 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -1,3 +1,4 @@ +/* global WebImporter */ export const c2a = (cta, document) => { const ctaSection = cta.querySelector('CTAsection'); if (ctaSection) { diff --git a/tools/importer/transformers/util.js b/tools/importer/transformers/util.js index dd392c453..6256e4923 100644 --- a/tools/importer/transformers/util.js +++ b/tools/importer/transformers/util.js @@ -160,4 +160,4 @@ export const testimonial = (testimonialElement, document) => { const table = WebImporter.DOMUtils.createTable(block, document); testimonialEl.replaceWith(table); -}; \ No newline at end of file +}; From b554012ed75cef1217347071072ca9f8e5aef5e0 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Tue, 21 Nov 2023 12:46:55 +0100 Subject: [PATCH 066/106] chore: update topic hub category --- blocks/banner/banner.css | 4 -- blocks/side-nav/side-nav.js | 11 +--- styles/styles.css | 123 +++++++++++++++++++++--------------- styles/tailwind.css | 24 +++++-- 4 files changed, 95 insertions(+), 67 deletions(-) diff --git a/blocks/banner/banner.css b/blocks/banner/banner.css index bb75ac739..12aa16ddd 100644 --- a/blocks/banner/banner.css +++ b/blocks/banner/banner.css @@ -4,10 +4,6 @@ @apply px-6; } -main.grid > .banner { - @apply lg:col-span-4 lg:col-start-1; -} - .banner >div { @apply relative min-h-[13rem] h-max w-full flex justify-start items-center; } diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index f147c18e1..37d9b3398 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -5,10 +5,10 @@ import { makePublicUrl } from '../../scripts/scripts.js'; import { fetchTopicsForCategory } from '../topic-list/topic-list.js'; async function fetchAllProductCategories() { - const products = await ffetch('/us/en/products-index.json') - .filter(({ type, path }) => type === 'Category' && path.endsWith('/topics')) + const topicHubs = await ffetch('/us/en/products-index.json') + .filter(({ type, path }) => type === 'TopicHub' && path.endsWith('/topics')) .all(); - return products.sort((item1, item2) => item1.title.localeCompare(item2.title)); + return topicHubs.sort((item1, item2) => item1.title.localeCompare(item2.title)); } function renderSideNav(sideNavItems) { @@ -53,10 +53,5 @@ export default async function decorate(block) { if (selectedNavItem) selectedNavItem.classList.add('font-bold', 'bg-danaherpurple-50', 'hover:bg-danaherpurple-50', 'rounded-md'); block.append(div({ class: 'text-lg px-5 py-4' }, strong(sideNavTitle)), sideNavElements); block.classList.add('pt-6', 'pr-2'); - - const main = document.querySelector('main'); - main.classList.add('grid', 'px-4', 'lg:px-0', 'max-w-7xl', 'mx-auto', 'lg:grid-cols-4'); - main.querySelector(':scope > div.side-nav-container').classList.add('lg:!col-span-1', 'lg:!col-start-1', 'row-span-6', 'hidden', 'lg:block'); - main.querySelectorAll(':scope > div').forEach((child) => child.classList.add('lg:col-span-3', 'lg:col-start-2', 'space-y-4', 'mb-2', 'flex-1', 'p-0', 'pl-0', 'lg:pl-6')); return block; } diff --git a/styles/styles.css b/styles/styles.css index d7ae351f0..fa1866feb 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -16,14 +16,6 @@ padding-right: 1.5rem; } -@media (min-width: 1024px) { - - main.grid > .banner { - grid-column: span 4 / span 4; - grid-column-start: 1; - } -} - .banner >div { position: relative; display: flex; @@ -561,11 +553,6 @@ @media (min-width: 1024px) { - main.columns > div > .banner { - grid-column: span 4 / span 4; - grid-column-start: 1; - } - .columns > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -2037,6 +2024,78 @@ main .section { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.topic main, .topichub main { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 80rem; + padding-left: 1rem; + padding-right: 1rem; +} + +@media (min-width: 1024px) { + + .topic main, .topichub main { + grid-template-columns: repeat(4, minmax(0, 1fr)); + padding-left: 0px; + padding-right: 0px; + } +} + +.topic main > div, .topichub main > div { + margin-bottom: 0.5rem; + flex: 1 1 0%; +} + +.topic main > div > :not([hidden]) ~ :not([hidden]), .topichub main > div > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.topic main > div, .topichub main > div { + padding: 0px; + padding-left: 0px; +} + +@media (min-width: 1024px) { + + .topic main > div, .topichub main > div { + grid-column: span 3 / span 3; + grid-column-start: 2; + padding-left: 1.5rem; + } +} + +.topic main > .side-nav-container, .topichub main > .side-nav-container { + display: none; +} + +@media (min-width: 1024px) { + + .topic main > .side-nav-container, .topichub main > .side-nav-container { + grid-column: span 1 / span 1 !important; + grid-column-start: 1 !important; + grid-row: span 6 / span 6; + display: block; + } + + .topic main > .banner, .topichub main > .banner { + grid-column: span 4 / span 4; + grid-column-start: 1; + } +} + +.\!category main .section { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.category main .section { + padding-top: 2rem; + padding-bottom: 2rem; +} + .\!category .default-content-wrapper p { font-size: 1rem; line-height: 1.75rem; @@ -2125,16 +2184,6 @@ main .section { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.\!category main .section { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.category main .section { - padding-top: 2rem; - padding-bottom: 2rem; -} - .sr-only { position: absolute; width: 1px; @@ -2252,10 +2301,6 @@ main .section { grid-column: span 2 / span 2; } -.row-span-6 { - grid-row: span 6 / span 6; -} - .m-0 { margin: 0px; } @@ -3413,10 +3458,6 @@ main .section { padding-bottom: 56.25%; } -.pl-0 { - padding-left: 0px; -} - .pl-1 { padding-left: 0.25rem; } @@ -4213,22 +4254,6 @@ main .section { @media (min-width: 1024px) { - .lg\:\!col-span-1 { - grid-column: span 1 / span 1 !important; - } - - .lg\:col-span-3 { - grid-column: span 3 / span 3; - } - - .lg\:\!col-start-1 { - grid-column-start: 1 !important; - } - - .lg\:col-start-2 { - grid-column-start: 2; - } - .lg\:my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -4363,10 +4388,6 @@ main .section { padding-left: 0.5rem; } - .lg\:pl-6 { - padding-left: 1.5rem; - } - .lg\:pt-4 { padding-top: 1rem; } diff --git a/styles/tailwind.css b/styles/tailwind.css index 5cd5c5f2d..ecc795ede 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -303,6 +303,26 @@ @apply list-disc list-outside ml-12 mb-4 space-y-4; } + .topic main, .topichub main { + @apply grid px-4 lg:px-0 max-w-7xl mx-auto lg:grid-cols-4 + } + + .topic main > div, .topichub main > div { + @apply lg:col-span-3 lg:col-start-2 space-y-4 mb-2 flex-1 p-0 pl-0 lg:pl-6 + } + + .topic main > .side-nav-container, .topichub main > .side-nav-container { + @apply hidden lg:block lg:!col-span-1 lg:!col-start-1 lg:row-span-6 + } + + .topic main > .banner, .topichub main > .banner { + @apply lg:col-span-4 lg:col-start-1; + } + + .category main .section { + @apply py-8; + } + .category .default-content-wrapper p { @apply xl:w-3/4 leading-7 href-text text-base text-danahergray-700; } @@ -310,10 +330,6 @@ .category .default-content-wrapper h2 { @apply font-semibold text-2xl text-danahergray-900 pt-4; } - - .category main .section { - @apply py-8; - } } @layer utilities { From 5c96cf821aaa7adb1982e24de335974836a0c2ec Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Tue, 21 Nov 2023 18:12:22 +0530 Subject: [PATCH 067/106] updated for wrap with ancher tag --- .../fixtures/product-category-semantic.html | 2 +- .../fixtures/product-category1-semantic.html | 2 +- .../test/fixtures/product-topic-semantic.html | 2 +- tools/importer/transformers/callToAction.js | 40 ++++++++----------- 4 files changed, 19 insertions(+), 27 deletions(-) diff --git a/tools/actions/convert/test/fixtures/product-category-semantic.html b/tools/actions/convert/test/fixtures/product-category-semantic.html index dae8b5a0e..0a7ce2cb5 100644 --- a/tools/actions/convert/test/fixtures/product-category-semantic.html +++ b/tools/actions/convert/test/fixtures/product-category-semantic.html @@ -94,7 +94,7 @@

What types of laboratory centrifuges do we offer?

Need help designing your solution?

-

Request a Quote

+

Request a Quote

diff --git a/tools/actions/convert/test/fixtures/product-category1-semantic.html b/tools/actions/convert/test/fixtures/product-category1-semantic.html index 94dbdf4dc..1a1e2a0c3 100644 --- a/tools/actions/convert/test/fixtures/product-category1-semantic.html +++ b/tools/actions/convert/test/fixtures/product-category1-semantic.html @@ -98,7 +98,7 @@

What is the principle of Capillary electrophoresis?

Need help designing your solution?

-

Request a Quote

+

Request a Quote

Talk to an Expert

diff --git a/tools/actions/convert/test/fixtures/product-topic-semantic.html b/tools/actions/convert/test/fixtures/product-topic-semantic.html index 5c87e10d9..6e4911d05 100644 --- a/tools/actions/convert/test/fixtures/product-topic-semantic.html +++ b/tools/actions/convert/test/fixtures/product-topic-semantic.html @@ -43,7 +43,7 @@

Photoactivation – monitoring gene expression and protein transport

Need help designing your solution?

-

Request a Quote

+

Request a Quote

diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index 52f06cd74..d9e30bef5 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -3,42 +3,34 @@ export const c2a = (cta, document) => { const ctaSection = cta.querySelector('CTAsection'); if (ctaSection) { const title = ctaSection.getAttribute('title'); - const btnText1 = ctaSection.getAttribute('btntext1'); - const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); - const btnhref1 = ctaSection.getAttribute('btnhref1'); - const btnText2 = ctaSection.getAttribute('btntext2'); - const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); - const btnhref2 = ctaSection.getAttribute('btnhref2'); const div = document.createElement('div'); const h2 = document.createElement('h2'); h2.textContent = title; if (h2) { div.append(h2); } - const btn1 = document.createElement('button'); - btn1.textContent = btnText1; - if (rfqBtn1 && btn1.textContent) { - div.append(btn1); - } - if (btnhref1 && btn1.textContent) { + + const btnText1 = ctaSection.getAttribute('btntext1'); + const rfqBtn1 = ctaSection.getAttribute('rfqbtn1'); + const btnhref1 = ctaSection.getAttribute('btnhref1'); + if (btnText1) { const p1 = document.createElement('p'); const a1 = document.createElement('a'); - a1.setAttribute('href', btnhref1); - a1.textContent = btn1.textContent; - p1.append(a1); + a1.setAttribute('href', rfqBtn1 ? '#request-quote' : btnhref1); + a1.textContent = btnText1; + p1.append(a1) div.append(p1); } - const btn2 = document.createElement('button'); - btn2.textContent = btnText2; - if (rfqBtn2 && btn2.textContent) { - div.append(btn2); - } - if (btnhref2 && btn2.textContent) { + + const btnText2 = ctaSection.getAttribute('btntext2'); + const rfqBtn2 = ctaSection.getAttribute('rfqbtn2'); + const btnhref2 = ctaSection.getAttribute('btnhref2'); + if (btnText2) { const p2 = document.createElement('p'); const a2 = document.createElement('a'); - a2.setAttribute('href', btnhref2); - a2.textContent = btn2.textContent; - p2.append(a2); + a2.setAttribute('href', rfqBtn2 ? '#request-quote' : btnhref2); + a2.textContent = btnText2; + p2.append(a2) div.append(p2); } const cells = [ From 3eb36ead110a77157c1f55d0b24b7cf3c91ec3e1 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Tue, 21 Nov 2023 18:26:25 +0530 Subject: [PATCH 068/106] lint errors fix. --- tools/importer/transformers/callToAction.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tools/importer/transformers/callToAction.js b/tools/importer/transformers/callToAction.js index d9e30bef5..0debfbd61 100644 --- a/tools/importer/transformers/callToAction.js +++ b/tools/importer/transformers/callToAction.js @@ -18,7 +18,7 @@ export const c2a = (cta, document) => { const a1 = document.createElement('a'); a1.setAttribute('href', rfqBtn1 ? '#request-quote' : btnhref1); a1.textContent = btnText1; - p1.append(a1) + p1.append(a1); div.append(p1); } @@ -30,7 +30,7 @@ export const c2a = (cta, document) => { const a2 = document.createElement('a'); a2.setAttribute('href', rfqBtn2 ? '#request-quote' : btnhref2); a2.textContent = btnText2; - p2.append(a2) + p2.append(a2); div.append(p2); } const cells = [ From 67b879514efce5ea0117bc4149dfd00ae3024f99 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Tue, 21 Nov 2023 14:10:54 +0100 Subject: [PATCH 069/106] chore: remove redundant condition --- blocks/side-nav/side-nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/side-nav/side-nav.js b/blocks/side-nav/side-nav.js index 37d9b3398..bb1865b8e 100644 --- a/blocks/side-nav/side-nav.js +++ b/blocks/side-nav/side-nav.js @@ -6,7 +6,7 @@ import { fetchTopicsForCategory } from '../topic-list/topic-list.js'; async function fetchAllProductCategories() { const topicHubs = await ffetch('/us/en/products-index.json') - .filter(({ type, path }) => type === 'TopicHub' && path.endsWith('/topics')) + .filter(({ type }) => type === 'TopicHub') .all(); return topicHubs.sort((item1, item2) => item1.title.localeCompare(item2.title)); } From 97938aaba0e66dc496809978245ade8c6cf00ce5 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Tue, 21 Nov 2023 16:16:14 +0100 Subject: [PATCH 070/106] feat: update h1 and h2 in default content wrapper --- styles/styles.css | 24 ++++++++++-------------- styles/tailwind.css | 8 ++++++-- templates/blog/blog.css | 2 +- templates/topic/topic.css | 2 +- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index c71e22f99..f3aa4f02d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -105,11 +105,6 @@ .blog main .default-content-wrapper h1:first-child { margin-top: 0px; margin-bottom: 0.5rem; - font-size: 2.25rem; - line-height: 2.5rem; - font-weight: 800; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); } .blog main .default-content-wrapper p:not(:first-of-type) { @@ -293,11 +288,6 @@ padding-bottom: 0.5rem; padding-left: 0px; padding-right: 0px; - font-size: 2.25rem; - line-height: 2.5rem; - font-weight: 800; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); } .topic main p:not(.show-modal-btn) { @@ -1453,10 +1443,20 @@ h6 { font-weight: 400; } +main .default-content-wrapper h1 { + font-size: 2.25rem; + line-height: 2.5rem; + font-weight: 800; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + main .default-content-wrapper h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } *, ::before, ::after { @@ -2159,8 +2159,6 @@ main .section { font-size: 1.5rem; line-height: 2rem; font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); } .category .default-content-wrapper h2 { @@ -2168,8 +2166,6 @@ main .section { font-size: 1.5rem; line-height: 2rem; font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); } .sr-only { diff --git a/styles/tailwind.css b/styles/tailwind.css index b1ec98e9f..90960ba63 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -64,8 +64,12 @@ @apply font-normal text-base; } + main .default-content-wrapper h1 { + @apply text-gray-900 font-extrabold text-4xl; + } + main .default-content-wrapper h2 { - @apply font-medium text-3xl; + @apply text-gray-900 font-medium text-3xl; } } @@ -332,7 +336,7 @@ } .category .default-content-wrapper h2 { - @apply font-semibold text-2xl text-danahergray-900 pt-4; + @apply font-semibold text-2xl pt-4; } } diff --git a/templates/blog/blog.css b/templates/blog/blog.css index 722f5260e..83798f6d4 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -7,7 +7,7 @@ } .blog main .default-content-wrapper h1:first-child { - @apply text-gray-900 font-extrabold text-4xl mt-0 mb-2; + @apply mt-0 mb-2; } .blog main .default-content-wrapper p:not(:first-of-type) { diff --git a/templates/topic/topic.css b/templates/topic/topic.css index 73e87f382..5b5717909 100644 --- a/templates/topic/topic.css +++ b/templates/topic/topic.css @@ -3,7 +3,7 @@ } .topic main .default-content-wrapper h1 { - @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; + @apply my-2 py-2 px-0; } .topic main p:not(.show-modal-btn) { From 4a9e636b7d4a244998564686fc8476b963487749 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Tue, 21 Nov 2023 16:44:18 +0100 Subject: [PATCH 071/106] fix: alignment padding issue on blog pages --- blocks/blog-hero/blog-hero.css | 3 --- blocks/blog-hero/blog-hero.js | 5 +++-- styles/styles.css | 13 +++++-------- styles/tailwind.css | 1 - templates/blog/blog.css | 2 +- 5 files changed, 9 insertions(+), 15 deletions(-) delete mode 100644 blocks/blog-hero/blog-hero.css diff --git a/blocks/blog-hero/blog-hero.css b/blocks/blog-hero/blog-hero.css deleted file mode 100644 index 34c9995fb..000000000 --- a/blocks/blog-hero/blog-hero.css +++ /dev/null @@ -1,3 +0,0 @@ -.blog-hero h1 + p { - @apply text-xl text-gray-500 leading-8; -} \ No newline at end of file diff --git a/blocks/blog-hero/blog-hero.js b/blocks/blog-hero/blog-hero.js index c6b2d6a0f..b7fd8c3db 100644 --- a/blocks/blog-hero/blog-hero.js +++ b/blocks/blog-hero/blog-hero.js @@ -4,8 +4,9 @@ import { import { getMetadata } from '../../scripts/lib-franklin.js'; export default function decorate(block) { - if (block.querySelector('h1')) block.querySelector('h1').className = 'px-2 text-gray-900 my-2 font-extrabold text-4xl'; - if (block.querySelector('img')) block.querySelector('img').className = 'px-2 mt-8'; + if (block.querySelector('h1')) block.querySelector('h1').classList.add(...'px-2 text-gray-900 my-2 font-extrabold text-4xl'.split(' ')); + if (block.querySelector('h1 + p')) block.querySelector('h1 + p').classList.add(...'px-2 text-xl text-gray-500 leading-8'.split(' ')); + if (block.querySelector('img')) block.querySelector('img').classList.add(...'px-2 mt-8'.split(' ')); const authorName = getMetadata('authorname'); const authorJobTitle = getMetadata('authortitle'); diff --git a/styles/styles.css b/styles/styles.css index fa1866feb..b56317a08 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -163,7 +163,7 @@ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.blog main .default-content-wrapper p { +.blog main .default-content-wrapper > * { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } @@ -857,13 +857,6 @@ button.suggestion.selected { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.blog-hero h1 + p { - font-size: 1.25rem; - line-height: 2rem; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - .block.social-media { position: relative; z-index: 10; @@ -3637,6 +3630,10 @@ main .section { line-height: 1.75rem; } +.leading-8 { + line-height: 2rem; +} + .leading-none { line-height: 1; } diff --git a/styles/tailwind.css b/styles/tailwind.css index ecc795ede..c10860447 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -17,7 +17,6 @@ @import '../blocks/cards/cards.css'; @import '../blocks/columns/columns.css'; @import '../blocks/header/header.css'; -@import '../blocks/blog-hero/blog-hero.css'; @import '../blocks/social-media/social-media.css'; @import '../blocks/category-family/category-family.css'; @import '../styles/modal/modal.css'; diff --git a/templates/blog/blog.css b/templates/blog/blog.css index 638e15b4f..f14deda77 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -26,7 +26,7 @@ @apply mt-3 leading-7 href-text text-base text-danahergray-700; } -.blog main .default-content-wrapper p { +.blog main .default-content-wrapper > * { @apply !px-2; } From a4cad4bb34ee447f968255959c5c689a6dbfb49c Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Tue, 21 Nov 2023 18:23:52 +0100 Subject: [PATCH 072/106] chore: ux updates for topic pages --- styles/styles.css | 7 ++++++- styles/tailwind.css | 8 ++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index f3aa4f02d..55cb8da28 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2051,7 +2051,7 @@ main .section { .topic main > div, .topichub main > div { grid-column: span 3 / span 3; grid-column-start: 2; - padding-left: 1.5rem; + padding-left: 3rem; } } @@ -2066,6 +2066,11 @@ main .section { grid-column-start: 1 !important; grid-row: span 6 / span 6; display: block; + padding-left: 1.5rem; + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + padding-top: 1rem; } .topic main > .banner, .topichub main > .banner { diff --git a/styles/tailwind.css b/styles/tailwind.css index 90960ba63..182d553c9 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -316,11 +316,15 @@ } .topic main > div, .topichub main > div { - @apply lg:col-span-3 lg:col-start-2 space-y-4 mb-2 flex-1 p-0 pl-0 lg:pl-6 + @apply lg:col-span-3 lg:col-start-2 space-y-4 mb-2 flex-1 p-0 pl-0 lg:pl-12 } .topic main > .side-nav-container, .topichub main > .side-nav-container { - @apply hidden lg:block lg:!col-span-1 lg:!col-start-1 lg:row-span-6 + @apply hidden lg:block lg:!col-span-1 lg:!col-start-1 lg:row-span-6 lg:pl-6 + } + + .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { + @apply lg:pt-4 } .topic main > .banner, .topichub main > .banner { From 83a84987d5eb58a28cdeaa3a4c526d42a84fa4ce Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 22 Nov 2023 14:29:28 +0530 Subject: [PATCH 073/106] c2a-button-ui-after-converter-changes --- blocks/call-to-action/call-to-action.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index 5d149595b..4e83bc8cf 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -4,6 +4,18 @@ export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); - block.querySelector('p')?.classList.add(...'show-modal-btn btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); + block.querySelectorAll('p').forEach((p) => { + if(p.className == 'button-container'){ + p.classList.add(...'btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); + } + }); + block.querySelectorAll('p > a').forEach((a) => { + if (a.href.includes('#request-quote')) { + block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' ')); + a.classList.remove(...'btn btn-outline-primary'.split(' ')); + } else if(a.className == 'btn btn-outline-primary'){ + a.classList.remove(...'btn btn-outline-primary'.split(' ')); + } + }); decorateModals(block); } From fa8bb4c578e5d137c5c9bcc309ef4b926a656fca Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 22 Nov 2023 14:42:25 +0530 Subject: [PATCH 074/106] lint error fixes --- blocks/call-to-action/call-to-action.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index 4e83bc8cf..cd52c136d 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -5,7 +5,7 @@ export default function decorate(block) { block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); block.querySelectorAll('p').forEach((p) => { - if(p.className == 'button-container'){ + if (p.className === 'button-container') { p.classList.add(...'btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); } }); @@ -13,7 +13,7 @@ export default function decorate(block) { if (a.href.includes('#request-quote')) { block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' ')); a.classList.remove(...'btn btn-outline-primary'.split(' ')); - } else if(a.className == 'btn btn-outline-primary'){ + } else if (a.className === 'btn btn-outline-primary') { a.classList.remove(...'btn btn-outline-primary'.split(' ')); } }); From c5bd1898929663d94383b9f6d354d4e524749701 Mon Sep 17 00:00:00 2001 From: Dave Nichols Date: Wed, 22 Nov 2023 11:34:39 +0000 Subject: [PATCH 075/106] Fixing error in duplicate class tags --- fragments/footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fragments/footer.html b/fragments/footer.html index ac9629123..62acd9e11 100644 --- a/fragments/footer.html +++ b/fragments/footer.html @@ -36,7 +36,7 @@ From 0c5a6428785eeaee1183f3dd09f8929ab99a0e0d Mon Sep 17 00:00:00 2001 From: wz914876 Date: Wed, 22 Nov 2023 17:51:08 +0530 Subject: [PATCH 076/106] implement-template-for-library-pages --- templates/library/library.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/templates/library/library.js b/templates/library/library.js index afbe03e02..144055015 100644 --- a/templates/library/library.js +++ b/templates/library/library.js @@ -1,13 +1,4 @@ -import { buildBlock } from '../../scripts/lib-franklin.js'; - export default async function buildAutoBlocks(block) { const main = document.querySelector('main'); - const firstWrapper = main.querySelector(':scope > div'); - firstWrapper.prepend( - buildBlock('social-media', { elems: [] }), - ); - const lastWrapper = main.querySelector(':scope > div:last-of-type'); - lastWrapper.append( - buildBlock('social-media', { elems: [] }), - ); -} \ No newline at end of file + main.prepend(block); +} From 1c7cba70ea22ad78374416830fb5708b2962dde6 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Wed, 22 Nov 2023 14:24:51 +0100 Subject: [PATCH 077/106] chore: sort topics based on title alphabetically --- blocks/topic-list/topic-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/topic-list/topic-list.js b/blocks/topic-list/topic-list.js index 3e3ddfdcd..5ac272384 100644 --- a/blocks/topic-list/topic-list.js +++ b/blocks/topic-list/topic-list.js @@ -10,7 +10,7 @@ export async function fetchTopicsForCategory(category) { const topics = await ffetch('/us/en/products-index.json') .filter(({ fullCategory, type }) => fullCategory === category && type === 'Topic') .all(); - return topics.sort((item1, item2) => item2.lastModified - item1.lastModified); + return topics.sort((item1, item2) => item1.title.localeCompare(item2.title)); } export default async function decorate(block) { From 1496979667c76b565e20131062bfde5cb5157507 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 10:23:32 +0530 Subject: [PATCH 078/106] CTA issue fix --- blocks/call-to-action/call-to-action.js | 10 +++++--- styles/styles.css | 34 +++++-------------------- templates/library/library.css | 6 ++--- templates/library/library.js | 5 +--- 4 files changed, 17 insertions(+), 38 deletions(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index cd52c136d..57aa23d2b 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -4,10 +4,12 @@ export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); - block.querySelectorAll('p').forEach((p) => { - if (p.className === 'button-container') { - p.classList.add(...'btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' ')); - } + block.querySelectorAll('p.button-container').forEach((item) => { + item.childNodes.forEach((btns) => { + btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); + btns.classList.remove(...'btn btn-outline-primary'.split(' ')); + }); + item.replaceWith(...item.children); }); block.querySelectorAll('p > a').forEach((a) => { if (a.href.includes('#request-quote')) { diff --git a/styles/styles.css b/styles/styles.css index e98c559ac..fe2f12671 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -309,32 +309,9 @@ width: 100%; } -.library main { - margin-left: auto; - margin-right: auto; - display: flex; - width: 100%; - flex-direction: column; - padding-left: 1rem; - padding-right: 1rem; -} - -.testimonial .testimonial-footer .library main>div:nth-child(2) { - margin-top: 0px; - font-size: 1rem; - font-weight: 500; - line-height: 1.5rem; - --tw-text-opacity: 1; - color: rgb(2 105 124 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - - .library main { - padding-left: 0px; - padding-right: 0px; - } -} +/* .library main { + @apply mx-auto w-full flex flex-col px-4 lg:px-0; +} */ .library main .section { margin-top: 0.75rem; @@ -359,7 +336,6 @@ .library main .section a { position: relative; z-index: 0; - font-weight: 700; text-decoration-line: underline; text-decoration-color: #3BC7E5; text-decoration-thickness: 3px; @@ -3882,6 +3858,10 @@ main .section { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.\!no-underline { + text-decoration-line: none !important; +} + .opacity-50 { opacity: 0.5; } diff --git a/templates/library/library.css b/templates/library/library.css index 0735abed0..a466b0aa4 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,13 +1,13 @@ -.library main { +/* .library main { @apply mx-auto w-full flex flex-col px-4 lg:px-0; -} +} */ .library main .section { @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; } .library main .section a { - @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500 font-bold; + @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; } .library main .section p:not(img) { diff --git a/templates/library/library.js b/templates/library/library.js index 144055015..8b1378917 100644 --- a/templates/library/library.js +++ b/templates/library/library.js @@ -1,4 +1 @@ -export default async function buildAutoBlocks(block) { - const main = document.querySelector('main'); - main.prepend(block); -} + From c18db122e4b4fe2fd53d9c3a8f1438f08a9c2b5b Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Thu, 23 Nov 2023 11:01:58 +0530 Subject: [PATCH 079/106] updated for recent articles in library page --- blocks/banner/banner.js | 2 +- blocks/recent-articles/recent-articles.js | 7 +++++-- styles/styles.css | 12 ++++++++++++ styles/tailwind.css | 4 ++++ 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/blocks/banner/banner.js b/blocks/banner/banner.js index 3ae19e081..871b82cb7 100644 --- a/blocks/banner/banner.js +++ b/blocks/banner/banner.js @@ -1,4 +1,4 @@ export default function decorate(block) { const main = document.querySelector('main'); - main.prepend(block); + main.parentNode.insertBefore(block, main); } diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index 9a098fbf4..dff6bfbf6 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -33,14 +33,17 @@ export default async function decorate(block) { p({ class: 'text-sm font-medium text-danahergray-500 pb-2 my-0' }, article.title), p( { class: 'flex justify-between items-cente my-0' }, - span({ class: 'text-sm text-gray-700 font-normal' }, formatDateUTCSeconds(article.publishDate)), - span({ class: 'flex items-center text-xs font-semibold text-danaherblue-600', id: 'read-article' }), + span({ class: 'flex items-right text-xs font-semibold text-danaherblue-600', id: 'read-article' }), ), ), ); liEl.querySelector('#read-article').innerHTML = `Read Article `; + const readArticleElement = liEl.querySelector('#read-article'); + let formattedDate = ''; + if (articleType !== 'library') formattedDate = formatDateUTCSeconds(article.publishDate); + readArticleElement.parentNode.insertBefore(span({ class: 'text-sm text-gray-700 font-normal' }, formattedDate), readArticleElement); ulEl.append(liEl); }); block.append(ulEl); diff --git a/styles/styles.css b/styles/styles.css index dba5fcd15..8f5e7e043 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2166,6 +2166,18 @@ main .section { font-weight: 600; } +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index 83e3dde48..8bcab49b2 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -341,6 +341,10 @@ .category .default-content-wrapper h2 { @apply font-semibold text-2xl pt-4; } + + .library main { + @apply mx-auto max-w-7xl flex flex-row gap-10 max-w-7xl mx-auto w-full bg-white; + } } @layer utilities { From ebadd444c4507653fb03d41411db6b0e02e33d01 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 11:39:31 +0530 Subject: [PATCH 080/106] lint errors fix --- blocks/call-to-action/call-to-action.js | 2 +- styles/styles.css | 4 ---- templates/library/library.css | 4 ---- templates/library/library.js | 1 - 4 files changed, 1 insertion(+), 10 deletions(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index 57aa23d2b..b63da39cb 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -6,7 +6,7 @@ export default function decorate(block) { block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); block.querySelectorAll('p.button-container').forEach((item) => { item.childNodes.forEach((btns) => { - btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); + btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); btns.classList.remove(...'btn btn-outline-primary'.split(' ')); }); item.replaceWith(...item.children); diff --git a/styles/styles.css b/styles/styles.css index fe2f12671..d034fb27e 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -309,10 +309,6 @@ width: 100%; } -/* .library main { - @apply mx-auto w-full flex flex-col px-4 lg:px-0; -} */ - .library main .section { margin-top: 0.75rem; width: 100%; diff --git a/templates/library/library.css b/templates/library/library.css index a466b0aa4..ab125eeaa 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,7 +1,3 @@ -/* .library main { - @apply mx-auto w-full flex flex-col px-4 lg:px-0; -} */ - .library main .section { @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; } diff --git a/templates/library/library.js b/templates/library/library.js index 8b1378917..e69de29bb 100644 --- a/templates/library/library.js +++ b/templates/library/library.js @@ -1 +0,0 @@ - From 38a174c7905b2473239d6effa4017e0a055cec12 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Thu, 23 Nov 2023 13:06:03 +0530 Subject: [PATCH 081/106] updated top padding for cta --- blocks/call-to-action/call-to-action.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index cd52c136d..0caa08407 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -1,7 +1,7 @@ import { decorateModals } from '../../scripts/scripts.js'; export default function decorate(block) { - block.classList.add(...'ctasection mx-auto max-w-7xl lg:py-8'.split(' ')); + block.classList.add(...'ctasection mx-auto max-w-7xl pt-6 lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); block.querySelectorAll('p').forEach((p) => { From ca2cf8408268c8af97f23b5d6267f9d573f16cb4 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Thu, 23 Nov 2023 14:16:12 +0530 Subject: [PATCH 082/106] updated as per review comments --- blocks/recent-articles/recent-articles.js | 5 +---- styles/styles.css | 5 ----- styles/tailwind.css | 4 ---- 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index dff6bfbf6..06e62d9fc 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -33,6 +33,7 @@ export default async function decorate(block) { p({ class: 'text-sm font-medium text-danahergray-500 pb-2 my-0' }, article.title), p( { class: 'flex justify-between items-cente my-0' }, + span({ class: 'text-sm text-gray-700 font-normal' }, (articleType !== 'library') ? formatDateUTCSeconds(article.publishDate) : ''), span({ class: 'flex items-right text-xs font-semibold text-danaherblue-600', id: 'read-article' }), ), ), @@ -40,10 +41,6 @@ export default async function decorate(block) { liEl.querySelector('#read-article').innerHTML = `Read Article `; - const readArticleElement = liEl.querySelector('#read-article'); - let formattedDate = ''; - if (articleType !== 'library') formattedDate = formatDateUTCSeconds(article.publishDate); - readArticleElement.parentNode.insertBefore(span({ class: 'text-sm text-gray-700 font-normal' }, formattedDate), readArticleElement); ulEl.append(liEl); }); block.append(ulEl); diff --git a/styles/styles.css b/styles/styles.css index 8f5e7e043..4942ed208 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2065,11 +2065,6 @@ main .section { .topic main > .side-nav-container + .section, .topichub main > .side-nav-container + .section { padding-top: 1rem; } - - .topic main > .banner, .topichub main > .banner { - grid-column: span 4 / span 4; - grid-column-start: 1; - } } .\!category main .section { diff --git a/styles/tailwind.css b/styles/tailwind.css index 8bcab49b2..c9fe63546 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -326,10 +326,6 @@ @apply lg:pt-4 } - .topic main > .banner, .topichub main > .banner { - @apply lg:col-span-4 lg:col-start-1; - } - .category main .section { @apply py-8; } From cfbc610e354d6fd4dfffce4e19cb988e4fc2e8bb Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Thu, 23 Nov 2023 15:33:59 +0530 Subject: [PATCH 083/106] Updated styles --- styles/styles.css | 67 +++++++---------------------------- templates/library/library.css | 26 ++++---------- 2 files changed, 19 insertions(+), 74 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 36c0b127e..321c1f1dc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -309,46 +309,18 @@ width: 100%; } -.library main .section { - margin-top: 0.75rem; - width: 100%; - flex: 1 1 0%; - padding: 0px; - padding-left: 0px; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - - .library main .section { - margin-left: auto; - padding-left: 1.5rem; - } -} - -.library main .section a { - position: relative; - z-index: 0; - text-decoration-line: underline; - text-decoration-color: #3BC7E5; - text-decoration-thickness: 3px; -} - -.library main .section p:not(img) { +.library main .section .default-content-wrapper p:not(img) { margin-top: 1rem; margin-bottom: 1.5rem; } -.library main .section ul { +.library main .section .default-content-wrapper ul { margin-left: 3rem; margin-bottom: 2.5rem; list-style-type: disc; } -.library main .section ul li { +.library main .section .default-content-wrapper ul li { margin-bottom: 4px; } @@ -361,6 +333,15 @@ color: rgb(17 24 39 / var(--tw-text-opacity)); } +.library main .section .call-to-action-wrapper > h2 { + display: inline-flex; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + .library main .button-container a { border-width: 2px; --tw-border-opacity: 1; @@ -390,30 +371,6 @@ line-height: 1.75rem; } -.library main > div:first-child { - margin-bottom: 0.5rem; -} - -.library main > div:first-child > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.library main > div:first-child .default-content-wrapper h1 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0px; - padding-right: 0px; - font-size: 2.25rem; - line-height: 2.5rem; - font-weight: 800; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .testimonial>div { display: flex; align-items: center; diff --git a/templates/library/library.css b/templates/library/library.css index ab125eeaa..42ebe512d 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,20 +1,12 @@ -.library main .section { - @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; -} - -.library main .section a { - @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; -} - -.library main .section p:not(img) { +.library main .section .default-content-wrapper p:not(img) { @apply mt-4 mb-6; } -.library main .section ul { +.library main .section .default-content-wrapper ul { @apply list-disc ml-12 mb-10; } -.library main .section ul li { +.library main .section .default-content-wrapper ul li { @apply mb-[4px]; } @@ -22,14 +14,10 @@ @apply inline-flex font-semibold text-xl text-danahergray-900; } -.library main .button-container a { - @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; +.library main .section .call-to-action-wrapper > h2 { + @apply inline-flex font-semibold text-sm text-danahergray-900; } -.library main > div:first-child { - @apply space-y-4 mb-2; +.library main .button-container a { + @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; } - -.library main > div:first-child .default-content-wrapper h1 { - @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; -} \ No newline at end of file From 68bb937653614ca2d1a8ca54fb0cc24aee2e4dc8 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 15:44:48 +0530 Subject: [PATCH 084/106] Removed unwanted css --- styles/styles.css | 62 ----------------------------------- templates/library/library.css | 16 --------- 2 files changed, 78 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index d034fb27e..3b317a3d6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -352,68 +352,6 @@ margin-bottom: 4px; } -.library main .section > .default-content-wrapper > h2 { - display: inline-flex; - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.library main .button-container a { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.library main .button-container a:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.library main .button-container a { - margin-top: 2rem; - margin-bottom: 2rem; - border-radius: 9999px; - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - font-size: 1.125rem; - line-height: 1.75rem; -} - -.library main > div:first-child { - margin-bottom: 0.5rem; -} - -.library main > div:first-child > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.library main > div:first-child .default-content-wrapper h1 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0px; - padding-right: 0px; - font-size: 2.25rem; - line-height: 2.5rem; - font-weight: 800; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .testimonial>div { display: flex; align-items: center; diff --git a/templates/library/library.css b/templates/library/library.css index ab125eeaa..dcbd745a3 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -16,20 +16,4 @@ .library main .section ul li { @apply mb-[4px]; -} - -.library main .section > .default-content-wrapper > h2 { - @apply inline-flex font-semibold text-xl text-danahergray-900; -} - -.library main .button-container a { - @apply btn-outline-trending-brand text-lg px-6 py-2.5 my-8 rounded-full; -} - -.library main > div:first-child { - @apply space-y-4 mb-2; -} - -.library main > div:first-child .default-content-wrapper h1 { - @apply text-gray-900 my-2 font-extrabold text-4xl py-2 px-0; } \ No newline at end of file From f05044227c417565b688f55371948664077c438e Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 15:57:18 +0530 Subject: [PATCH 085/106] css changes --- templates/library/library.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/templates/library/library.css b/templates/library/library.css index dcbd745a3..bfd909291 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,19 +1,15 @@ .library main .section { @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; } - .library main .section a { @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; } - .library main .section p:not(img) { @apply mt-4 mb-6; } - .library main .section ul { @apply list-disc ml-12 mb-10; } - .library main .section ul li { @apply mb-[4px]; } \ No newline at end of file From fb566c336d7450a4fff7a8495a0c8879350b9835 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 12:10:09 +0100 Subject: [PATCH 086/106] chore: add info pages to index --- helix-query.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/helix-query.yaml b/helix-query.yaml index 696855ff3..7f54c2ee0 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -6,6 +6,7 @@ indices: - /us/en/news/** - /us/en/library/** - /us/en/application/** + - /us/en/info/** target: /us/en/article-index.json properties: lastModified: From 3b70e2b51b8c33aa6f5309219aac435fae9ba554 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 16:43:32 +0530 Subject: [PATCH 087/106] css changes --- styles/styles.css | 47 +++++++++++++++++------------------ templates/library/library.css | 16 ++++++------ 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index cd1f3fffe..fc6cf19a8 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -309,27 +309,7 @@ width: 100%; } -.library main .section { - margin-top: 0.75rem; - width: 100%; - flex: 1 1 0%; - padding: 0px; - padding-left: 0px; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -@media (min-width: 1024px) { - - .library main .section { - margin-left: auto; - padding-left: 1.5rem; - } -} - -.library main .section a { +.library main .section .default-content-wrapper a { position: relative; z-index: 0; text-decoration-line: underline; @@ -337,21 +317,40 @@ text-decoration-thickness: 3px; } -.library main .section p:not(img) { +.library main .section .default-content-wrapper p:not(img) { margin-top: 1rem; margin-bottom: 1.5rem; } -.library main .section ul { +.library main .section .default-content-wrapper ul { margin-left: 3rem; margin-bottom: 2.5rem; list-style-type: disc; } -.library main .section ul li { +.library main .section .default-content-wrapper ul li { margin-bottom: 4px; } +.library main .section .call-to-action-wrapper h2 { + margin: 0px; + padding: 0px; + font-size: 1.5rem !important; + line-height: 2rem !important; + font-weight: 400; + letter-spacing: 0.025em; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +@media (min-width: 640px) { + + .library main .section .call-to-action-wrapper h2 { + font-size: 1.875rem; + line-height: 2.25rem; + } +} + .testimonial>div { display: flex; align-items: center; diff --git a/templates/library/library.css b/templates/library/library.css index bfd909291..bd1447b9d 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,15 +1,17 @@ -.library main .section { - @apply w-full flex-1 lg:ml-auto p-0 pl-0 lg:pl-6 mt-3 leading-7 text-base text-danahergray-700; -} -.library main .section a { + +.library main .section .default-content-wrapper a { @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; } -.library main .section p:not(img) { +.library main .section .default-content-wrapper p:not(img) { @apply mt-4 mb-6; } -.library main .section ul { +.library main .section .default-content-wrapper ul { @apply list-disc ml-12 mb-10; } -.library main .section ul li { +.library main .section .default-content-wrapper ul li { @apply mb-[4px]; +} + +.library main .section .call-to-action-wrapper h2 { + @apply !text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide; } \ No newline at end of file From 3191726172e95d055a6e1391ccb511600ffeb833 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Thu, 23 Nov 2023 16:52:04 +0530 Subject: [PATCH 088/106] updated library styles --- styles/styles.css | 28 ++++++++++++++++------------ styles/tailwind.css | 4 ---- templates/library/library.css | 8 ++++++-- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index fc6cf19a8..bca144a92 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -309,6 +309,22 @@ width: 100%; } +.library main { + margin-left: auto; + margin-right: auto; + display: flex; + width: 100%; + max-width: 80rem; + flex-direction: row; + gap: 2.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.library main .section { + padding-left: 0px; +} + .library main .section .default-content-wrapper a { position: relative; z-index: 0; @@ -2203,18 +2219,6 @@ main .section { font-weight: 600; } -.library main { - margin-left: auto; - margin-right: auto; - display: flex; - width: 100%; - max-width: 80rem; - flex-direction: row; - gap: 2.5rem; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index 35f4617d7..329dd2b65 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -338,10 +338,6 @@ .category .default-content-wrapper h2 { @apply font-semibold text-2xl pt-4; } - - .library main { - @apply mx-auto max-w-7xl flex flex-row gap-10 max-w-7xl mx-auto w-full bg-white; - } } @layer utilities { diff --git a/templates/library/library.css b/templates/library/library.css index bd1447b9d..dcc59be02 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,4 +1,9 @@ - +.library main { + @apply mx-auto max-w-7xl flex flex-row gap-10 max-w-7xl mx-auto w-full bg-white; +} +.library main .section{ + @apply pl-0; +} .library main .section .default-content-wrapper a { @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; } @@ -11,7 +16,6 @@ .library main .section .default-content-wrapper ul li { @apply mb-[4px]; } - .library main .section .call-to-action-wrapper h2 { @apply !text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide; } \ No newline at end of file From da2ce822048cac4821b737662e40e6c5fd97df95 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 13:12:39 +0100 Subject: [PATCH 089/106] chore: update converter for info hub pages --- tools/importer/transformers/libraryHub.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/tools/importer/transformers/libraryHub.js b/tools/importer/transformers/libraryHub.js index 3bcf0cf1b..7b26cd798 100644 --- a/tools/importer/transformers/libraryHub.js +++ b/tools/importer/transformers/libraryHub.js @@ -1,15 +1,18 @@ /* global WebImporter */ const libraryHub = (main, document) => { const url = document.querySelector('[property="og:url"]')?.content; - if (url?.endsWith('/library.html')) { - main.querySelectorAll('div.container-sidebar').forEach((div) => div.remove()); - main - .querySelectorAll('div.aem-Grid.aem-Grid--12.aem-Grid--default--12 h2') - .forEach((h2) => h2.closest('div').remove()); - - const block = [['Card List (library)'], ['']]; - const table = WebImporter.DOMUtils.createTable(block, document); - main.append(table); + if (url?.endsWith('/us/en/library.html') || url?.endsWith('/us/en/info.html')) { + const pageNameMatch = url.match(/\/([^/]+)\.html$/); + if (pageNameMatch) { + const pageName = pageNameMatch[1]; + main.querySelectorAll('div.container-sidebar').forEach((div) => div.remove()); + main + .querySelectorAll('div.aem-Grid.aem-Grid--12.aem-Grid--default--12 h2') + .forEach((h2) => h2.closest('div').remove()); + const block = [[`Card List (${pageName})`], ['']]; + const table = WebImporter.DOMUtils.createTable(block, document); + main.append(table); + } } }; export default libraryHub; From ccb3834eccb7fc0e4c2f3a980ca494f640d9ffd8 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 14:05:32 +0100 Subject: [PATCH 090/106] chore: use library template style for info pages --- scripts/scripts.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/scripts.js b/scripts/scripts.js index c8bdea59d..45d87b9e6 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -31,6 +31,7 @@ const TEMPLATE_LIST = { news: 'blog', topic: 'topic', library: 'library', + info: 'library', }; /** From 9c5cdb5a574e82d5eeaa532a29839e7a3828baf3 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 14:19:07 +0100 Subject: [PATCH 091/106] chore: disable decorateButtons as we are not using it and mostly work arround --- blocks/call-to-action/call-to-action.js | 11 +---------- scripts/scripts.js | 3 --- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index cd77a2d84..cb3823d9b 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -4,19 +4,10 @@ export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl pt-6 lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); - block.querySelectorAll('p.button-container').forEach((item) => { - item.childNodes.forEach((btns) => { - btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); - btns.classList.remove(...'btn btn-outline-primary'.split(' ')); - }); - item.replaceWith(...item.children); - }); block.querySelectorAll('p > a').forEach((a) => { + a.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); if (a.href.includes('#request-quote')) { block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' ')); - a.classList.remove(...'btn btn-outline-primary'.split(' ')); - } else if (a.className === 'btn btn-outline-primary') { - a.classList.remove(...'btn btn-outline-primary'.split(' ')); } }); decorateModals(block); diff --git a/scripts/scripts.js b/scripts/scripts.js index 45d87b9e6..214b47bc7 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -3,7 +3,6 @@ import { buildBlock, loadHeader, loadFooter, - decorateButtons, decorateIcons, decorateSections, decorateBlocks, @@ -318,8 +317,6 @@ function decorateTwoColumnSection(main) { */ // eslint-disable-next-line import/prefer-default-export export function decorateMain(main) { - // hopefully forward compatible button decoration - decorateButtons(main); decorateIcons(main); buildAutoBlocks(main); decorateSections(main); From 80b433b6645ba0cd7f8664e535aa4198c626e158 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 14:32:41 +0100 Subject: [PATCH 092/106] chore: clean up list styles to one common style --- styles/styles.css | 96 ++++++++++++++++------------------- styles/tailwind.css | 16 ++++++ templates/blog/blog.css | 16 ------ templates/library/library.css | 12 ++--- 4 files changed, 64 insertions(+), 76 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index bca144a92..ba7109f68 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -187,49 +187,6 @@ color: rgb(255 255 255 / var(--tw-text-opacity)); } -.blog main .default-content-wrapper ol, .blog main .default-content-wrapper ul { - margin-top: 0.75rem; - margin-left: 3rem; - list-style-position: outside; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.blog main .default-content-wrapper ol a, .blog main .default-content-wrapper ul a { - position: relative; - z-index: 0; - word-break: break-all; - text-decoration-line: underline; - text-decoration-color: #3bc7e5; - text-decoration-thickness: 3px; -} - -.blog main .default-content-wrapper ol a:hover, .blog main .default-content-wrapper ul a:hover { - --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.blog main .default-content-wrapper ol>li, .blog main .default-content-wrapper ul>li { - margin-bottom: 0.25rem; -} - -.blog main .default-content-wrapper ol { - list-style-type: decimal; -} - -.blog main .default-content-wrapper ul { - list-style-type: disc; -} - .blog main .popular-articles { display: none; flex-shrink: 0; @@ -338,16 +295,6 @@ margin-bottom: 1.5rem; } -.library main .section .default-content-wrapper ul { - margin-left: 3rem; - margin-bottom: 2.5rem; - list-style-type: disc; -} - -.library main .section .default-content-wrapper ul li { - margin-bottom: 4px; -} - .library main .section .call-to-action-wrapper h2 { margin: 0px; padding: 0px; @@ -2219,6 +2166,49 @@ main .section { font-weight: 600; } +main .default-content-wrapper ol, main .default-content-wrapper ul { + margin-top: 0.75rem; + margin-left: 3rem; + list-style-position: outside; + font-size: 1rem; + line-height: 1.75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +main .default-content-wrapper ol a, main .default-content-wrapper ul a { + position: relative; + z-index: 0; + word-break: break-all; + text-decoration-line: underline; + text-decoration-color: #3bc7e5; + text-decoration-thickness: 3px; +} + +main .default-content-wrapper ol a:hover, main .default-content-wrapper ul a:hover { + --tw-bg-opacity: 1; + background-color: rgb(59 199 229 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +main .default-content-wrapper ol>li, main .default-content-wrapper ul>li { + margin-bottom: 0.25rem; +} + +main .default-content-wrapper ol { + list-style-type: decimal; +} + +main .default-content-wrapper ul { + list-style-type: disc; +} + .sr-only { position: absolute; width: 1px; diff --git a/styles/tailwind.css b/styles/tailwind.css index 329dd2b65..23ba60aa0 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -338,6 +338,22 @@ .category .default-content-wrapper h2 { @apply font-semibold text-2xl pt-4; } + + main .default-content-wrapper ol, main .default-content-wrapper ul { + @apply mt-3 leading-7 href-text text-base text-danahergray-700 ml-12 list-outside; + } + + main .default-content-wrapper ol>li, main .default-content-wrapper ul>li { + @apply mb-1 + } + + main .default-content-wrapper ol { + @apply list-decimal; + } + + main .default-content-wrapper ul { + @apply list-disc; + } } @layer utilities { diff --git a/templates/blog/blog.css b/templates/blog/blog.css index 5e3424daf..373f8a41f 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -38,22 +38,6 @@ @apply bg-danaherpurple-500 text-white; } -.blog main .default-content-wrapper ol, .blog main .default-content-wrapper ul { - @apply mt-3 leading-7 href-text text-base text-danahergray-700 ml-12 list-outside; -} - -.blog main .default-content-wrapper ol>li, .blog main .default-content-wrapper ul>li { - @apply mb-1 -} - -.blog main .default-content-wrapper ol { - @apply list-decimal; -} - -.blog main .default-content-wrapper ul { - @apply list-disc; -} - .blog main .popular-articles { @apply lg:w-96 hidden lg:block flex-shrink-0 py-10 bg-danaherlightblue-50; } diff --git a/templates/library/library.css b/templates/library/library.css index dcc59be02..5b3b80250 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -1,21 +1,19 @@ .library main { @apply mx-auto max-w-7xl flex flex-row gap-10 max-w-7xl mx-auto w-full bg-white; } -.library main .section{ + +.library main .section { @apply pl-0; } + .library main .section .default-content-wrapper a { @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; } + .library main .section .default-content-wrapper p:not(img) { @apply mt-4 mb-6; } -.library main .section .default-content-wrapper ul { - @apply list-disc ml-12 mb-10; -} -.library main .section .default-content-wrapper ul li { - @apply mb-[4px]; -} + .library main .section .call-to-action-wrapper h2 { @apply !text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide; } \ No newline at end of file From 783c7fdccf8c366418527735d3be220da322163b Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 15:45:46 +0100 Subject: [PATCH 093/106] Revert "chore: disable decorateButtons as we are not using it and mostly work arround" This reverts commit 9c5cdb5a574e82d5eeaa532a29839e7a3828baf3. --- blocks/call-to-action/call-to-action.js | 11 ++++++++++- scripts/scripts.js | 3 +++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index cb3823d9b..cd77a2d84 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -4,10 +4,19 @@ export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl pt-6 lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); + block.querySelectorAll('p.button-container').forEach((item) => { + item.childNodes.forEach((btns) => { + btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); + btns.classList.remove(...'btn btn-outline-primary'.split(' ')); + }); + item.replaceWith(...item.children); + }); block.querySelectorAll('p > a').forEach((a) => { - a.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); if (a.href.includes('#request-quote')) { block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' ')); + a.classList.remove(...'btn btn-outline-primary'.split(' ')); + } else if (a.className === 'btn btn-outline-primary') { + a.classList.remove(...'btn btn-outline-primary'.split(' ')); } }); decorateModals(block); diff --git a/scripts/scripts.js b/scripts/scripts.js index 214b47bc7..45d87b9e6 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -3,6 +3,7 @@ import { buildBlock, loadHeader, loadFooter, + decorateButtons, decorateIcons, decorateSections, decorateBlocks, @@ -317,6 +318,8 @@ function decorateTwoColumnSection(main) { */ // eslint-disable-next-line import/prefer-default-export export function decorateMain(main) { + // hopefully forward compatible button decoration + decorateButtons(main); decorateIcons(main); buildAutoBlocks(main); decorateSections(main); From 1dd943740f82d471172de8e38c8bcdbea767b921 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 15:53:54 +0100 Subject: [PATCH 094/106] fix: buttons & links --- .gitignore | 1 + blocks/call-to-action/call-to-action.js | 10 +--------- scripts/lib-franklin.js | 2 +- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index dd3445a19..b72023b10 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ logs/* helix-importer-ui .DS_Store *.bak +.env diff --git a/blocks/call-to-action/call-to-action.js b/blocks/call-to-action/call-to-action.js index cd77a2d84..c9f253390 100644 --- a/blocks/call-to-action/call-to-action.js +++ b/blocks/call-to-action/call-to-action.js @@ -4,19 +4,11 @@ export default function decorate(block) { block.classList.add(...'ctasection mx-auto max-w-7xl pt-6 lg:py-8'.split(' ')); block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' ')); block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' ')); - block.querySelectorAll('p.button-container').forEach((item) => { - item.childNodes.forEach((btns) => { - btns.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); - btns.classList.remove(...'btn btn-outline-primary'.split(' ')); - }); - item.replaceWith(...item.children); - }); block.querySelectorAll('p > a').forEach((a) => { + a.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' ')); if (a.href.includes('#request-quote')) { block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' ')); a.classList.remove(...'btn btn-outline-primary'.split(' ')); - } else if (a.className === 'btn btn-outline-primary') { - a.classList.remove(...'btn btn-outline-primary'.split(' ')); } }); decorateModals(block); diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index 5505ee60a..902aaef92 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -655,7 +655,7 @@ export function decorateButtons(element) { if (a.href !== a.textContent) { const up = a.parentElement; const twoup = a.parentElement.parentElement; - if (!a.querySelector('img')) { + if (!a.querySelector('img') && twoup.tagName !== 'LI' && !a.closest('.call-to-action')) { if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) { a.className = 'btn btn-outline-primary'; // default up.classList.add('button-container'); From f99f9c089564616b58a208f41709337a2c2d2804 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 16:48:44 +0100 Subject: [PATCH 095/106] chore: styles cleanup and recent article fix --- blocks/recent-articles/recent-articles.js | 2 +- styles/styles.css | 288 ++++++---------------- styles/tailwind.css | 101 ++------ templates/blog/blog.css | 22 +- templates/library/library.css | 8 +- 5 files changed, 100 insertions(+), 321 deletions(-) diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index 06e62d9fc..d77dca816 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -33,7 +33,7 @@ export default async function decorate(block) { p({ class: 'text-sm font-medium text-danahergray-500 pb-2 my-0' }, article.title), p( { class: 'flex justify-between items-cente my-0' }, - span({ class: 'text-sm text-gray-700 font-normal' }, (articleType !== 'library') ? formatDateUTCSeconds(article.publishDate) : ''), + span({ class: 'text-sm text-gray-700 font-normal' }, (articleType !== 'library' && articleType !== 'info') ? formatDateUTCSeconds(article.publishDate) : ''), span({ class: 'flex items-right text-xs font-semibold text-danaherblue-600', id: 'read-article' }), ), ), diff --git a/styles/styles.css b/styles/styles.css index ba7109f68..77d439322 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -107,46 +107,8 @@ margin-bottom: 0.5rem; } -.blog main .default-content-wrapper p:not(:first-of-type) { - margin-top: 0.75rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.blog main .default-content-wrapper img:first-child { - margin-top: 0.5rem; - margin-bottom: 1rem; -} - .blog main p { margin-top: 0.75rem; - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.blog main p a { - position: relative; - z-index: 0; - word-break: break-all; - text-decoration-line: underline; - text-decoration-color: #3bc7e5; - text-decoration-thickness: 3px; -} - -.blog main p a:hover { - --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .blog main .default-content-wrapper > * { @@ -154,39 +116,6 @@ padding-right: 0.5rem !important; } -.blog main a { - font-weight: 600; -} - -.blog main p.button-container>a { - margin-top: 1.5rem; - border-radius: 9999px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - background-color: transparent; - padding-left: 1.25rem; - padding-right: 1.25rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); - text-decoration-line: none; - transition-property: all; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.blog main p.button-container>a:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .blog main .popular-articles { display: none; flex-shrink: 0; @@ -282,17 +211,19 @@ padding-left: 0px; } -.library main .section .default-content-wrapper a { - position: relative; - z-index: 0; - text-decoration-line: underline; - text-decoration-color: #3BC7E5; - text-decoration-thickness: 3px; +.library main .default-content-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 800; } -.library main .section .default-content-wrapper p:not(img) { - margin-top: 1rem; - margin-bottom: 1.5rem; +.library main .default-content-wrapper h3 { + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 600; + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } .library main .section .call-to-action-wrapper h2 { @@ -1690,43 +1621,6 @@ main .section { outline-offset: 2px; } -/* START OF TEMP STYLES */ - -.btn.orange { - --tw-border-opacity: 1; - border-color: rgb(220 96 22 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(220 96 22 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.btn.orange:hover { - --tw-border-opacity: 1; - border-color: rgb(206 68 12 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(206 68 12 / var(--tw-bg-opacity)); -} - -.btn.white { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(220 96 22 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(220 96 22 / var(--tw-text-opacity)); -} - -.btn.white:hover { - --tw-bg-opacity: 1; - background-color: rgb(220 96 22 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -/* END OF TEMP STYLES */ - .btn-sm { padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1801,88 +1695,53 @@ main .section { background-color: rgb(64 0 165 / var(--tw-bg-opacity)); } -.btn-info { - --tw-border-opacity: 1; - border-color: rgb(59 199 229 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.btn-info:hover { - --tw-border-opacity: 1; - border-color: rgb(1 139 157 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(1 139 157 / var(--tw-bg-opacity)); -} - -.btn-outline-trending-brand { - border-width: 2px; - --tw-border-opacity: 1; - border-color: rgb(117 35 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(117 35 255 / var(--tw-text-opacity)); -} - -.btn-outline-trending-brand:hover { - --tw-bg-opacity: 1; - background-color: rgb(117 35 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -/* END OF CORE STYLES */ - -.outline { +.btn-outline-primary { border-width: 2px; --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity)); + border-color: rgb(59 130 246 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(59 130 246 / var(--tw-text-opacity)); } -.outline:hover { +.btn-outline-primary:hover { --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.btn-outline-primary { +.btn-outline-secondary { border-width: 2px; --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); + border-color: rgb(107 114 128 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); + color: rgb(107 114 128 / var(--tw-text-opacity)); } -.btn-outline-primary:hover { +.btn-outline-secondary:hover { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.btn-outline-secondary { +.btn-outline-trending-brand { border-width: 2px; --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); + border-color: rgb(117 35 255 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(117 35 255 / var(--tw-text-opacity)); } -.btn-outline-secondary:hover { +.btn-outline-trending-brand:hover { --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @@ -2082,49 +1941,39 @@ main .section { padding-bottom: 2rem; } -.\!category .default-content-wrapper p { - font-size: 1rem; - line-height: 1.75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.\!category .default-content-wrapper p a { - position: relative; - z-index: 0; - word-break: break-all; - text-decoration-line: underline; - text-decoration-color: #3bc7e5; - text-decoration-thickness: 3px; -} - -.\!category .default-content-wrapper p a:hover { - --tw-bg-opacity: 1; - background-color: rgb(59 199 229 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-duration: 150ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - @media (min-width: 1280px) { .\!category .default-content-wrapper p { width: 75%; } + + .category .default-content-wrapper p { + width: 75%; + } +} + +.\!category .default-content-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 600; } -.category .default-content-wrapper p { +.category .default-content-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 600; +} + +main .default-content-wrapper p { font-size: 1rem; line-height: 1.75rem; --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.category .default-content-wrapper p a { +main .default-content-wrapper p a { position: relative; z-index: 0; word-break: break-all; @@ -2133,7 +1982,7 @@ main .section { text-decoration-thickness: 3px; } -.category .default-content-wrapper p a:hover { +main .default-content-wrapper p a:hover { --tw-bg-opacity: 1; background-color: rgb(59 199 229 / var(--tw-bg-opacity)); --tw-text-opacity: 1; @@ -2145,25 +1994,38 @@ main .section { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -@media (min-width: 1280px) { - - .category .default-content-wrapper p { - width: 75%; - } +main .default-content-wrapper p.button-container>a { + margin-top: 1.5rem; + border-radius: 9999px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(117 35 255 / var(--tw-border-opacity)); + background-color: transparent; + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(117 35 255 / var(--tw-text-opacity)); + text-decoration-line: none; + transition-property: all; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } -.\!category .default-content-wrapper h2 { - padding-top: 1rem; - font-size: 1.5rem; - line-height: 2rem; - font-weight: 600; +main .default-content-wrapper p.button-container>a:hover { + --tw-bg-opacity: 1; + background-color: rgb(117 35 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.category .default-content-wrapper h2 { - padding-top: 1rem; - font-size: 1.5rem; - line-height: 2rem; - font-weight: 600; +main .default-content-wrapper p:not(img) { + margin-top: 1rem; + margin-bottom: 1.5rem; } main .default-content-wrapper ol, main .default-content-wrapper ul { diff --git a/styles/tailwind.css b/styles/tailwind.css index 23ba60aa0..4d4f12b4a 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -102,16 +102,6 @@ @apply inline-flex justify-center place-items-center py-1.5 px-3 text-white text-base text-center font-normal whitespace-nowrap no-underline align-middle cursor-pointer space-x-1 tracking-wide select-none rounded transition focus:outline-none bg-danaherorange-500 hover:bg-danaherorange-800; } - /* START OF TEMP STYLES */ - .btn.orange { - @apply text-white bg-danaherorange-500 hover:bg-danaherorange-800 border-danaherorange-500 hover:border-danaherorange-800; - } - - .btn.white { - @apply text-danaherorange-500 bg-white border-2 border-danaherorange-500 hover:text-white hover:bg-danaherorange-500; - } - - /* END OF TEMP STYLES */ .btn-sm { @apply py-0.5 text-sm; } @@ -157,55 +147,6 @@ @apply text-danaherorange-500 bg-white border-2 border-danaherorange-500 hover:text-white hover:bg-danaherorange-500; } - .btn-tertiary { - @apply text-white bg-lightblue-500 hover:bg-lightblue-600 border-lightblue-500 hover:border-lightblue-600; - } - - .btn-brand { - @apply text-white bg-danaherorange-500 hover:bg-danaherorange-800 border-danaherorange-500 hover:border-danaherorange-800; - } - - .btn-info { - @apply text-white bg-lightblue-500 hover:bg-lightblue-600 border-lightblue-500 hover:border-lightblue-600; - } - - .btn-trending-brand { - @apply text-white bg-danaherpurple-500 hover:bg-danaherpurple-800 border-danaherpurple-500; - } - - .btn-outline-brand { - @apply text-danaherorange-500 bg-white border-2 border-danaherorange-500 hover:text-white hover:bg-danaherorange-500; - } - - .btn-outline-trending-brand { - @apply text-danaherpurple-500 bg-white border-2 border-danaherpurple-500 hover:text-white hover:bg-danaherpurple-500; - } - - /* END OF CORE STYLES */ - .btn-dialog { - @apply text-white bg-salmon-500 hover:bg-salmon-700 focus:ring-salmon-700; - } - - .btn-success { - @apply text-white bg-green-500 hover:bg-green-600 focus:ring-green-600; - } - - .btn-danger { - @apply text-white bg-red-500 hover:bg-red-600 focus:ring-red-600; - } - - .btn-warning { - @apply text-white bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-600; - } - - .outline { - @apply text-black bg-white border-2 border-gray-100 hover:text-white hover:bg-gray-200; - } - - .btn-outline-dialog { - @apply text-salmon-500 bg-white border-2 border-salmon-500 hover:text-white hover:bg-salmon-500; - } - .btn-outline-primary { @apply text-blue-500 bg-white border-2 border-blue-500 hover:text-white hover:bg-blue-500; } @@ -214,28 +155,8 @@ @apply text-gray-500 bg-white border-2 border-gray-500 hover:text-white hover:bg-gray-500; } - .btn-outline-success { - @apply text-green-500 bg-white border-2 border-green-500 hover:text-white hover:bg-green-500; - } - - .btn-outline-danger { - @apply text-red-500 bg-white border-2 border-red-500 hover:text-white hover:bg-red-500 focus:ring-red-500; - } - - .btn-outline-warning { - @apply text-yellow-500 bg-white border-2 border-yellow-500 hover:text-white hover:bg-yellow-500 focus:ring-yellow-500; - } - - .btn-outline-info { - @apply text-lightblue-500 bg-white border-2 border-lightblue-500 hover:text-white hover:bg-lightblue-500 focus:ring-lightblue-500; - } - - .btn-primary-brand { - @apply text-white bg-danaherblue-600 focus:ring-danaherblue-600 hover:bg-danaherorange-500; - } - - .btn-transparent { - @apply text-white bg-transparent border border-white focus:ring-white px-10 py-5 text-xl hover:bg-white hover:text-black; + .btn-outline-trending-brand { + @apply text-danaherpurple-500 bg-white border-2 border-danaherpurple-500 hover:text-white hover:bg-danaherpurple-500; } .form-input, @@ -332,12 +253,28 @@ } .category .default-content-wrapper p { - @apply xl:w-3/4 leading-7 href-text text-base text-danahergray-700; + @apply xl:w-3/4; } .category .default-content-wrapper h2 { @apply font-semibold text-2xl pt-4; } + + main .default-content-wrapper p { + @apply leading-7 href-text text-base text-danahergray-700; + } + + main .default-content-wrapper p.button-container>a { + @apply bg-transparent no-underline text-lg px-5 py-3 text-danaherpurple-500 border border-danaherpurple-500 leading-5 rounded-full font-medium mt-6 ease-in-out duration-150 transition-all; + } + + main .default-content-wrapper p.button-container>a:hover { + @apply bg-danaherpurple-500 text-white; + } + + main .default-content-wrapper p:not(img) { + @apply mt-4 mb-6; + } main .default-content-wrapper ol, main .default-content-wrapper ul { @apply mt-3 leading-7 href-text text-base text-danahergray-700 ml-12 list-outside; diff --git a/templates/blog/blog.css b/templates/blog/blog.css index 373f8a41f..6ba3f30f5 100644 --- a/templates/blog/blog.css +++ b/templates/blog/blog.css @@ -10,34 +10,14 @@ @apply mt-0 mb-2; } -.blog main .default-content-wrapper p:not(:first-of-type) { - @apply mt-3 leading-7 text-base text-danahergray-700; -} - -.blog main .default-content-wrapper img:first-child { - @apply mt-2 mb-4; -} - .blog main p { - @apply mt-3 leading-7 href-text text-base text-danahergray-700; + @apply mt-3; } .blog main .default-content-wrapper > * { @apply !px-2; } -.blog main a { - @apply font-semibold; -} - -.blog main p.button-container>a { - @apply bg-transparent no-underline text-lg px-5 py-3 text-danaherpurple-500 border border-danaherpurple-500 leading-5 rounded-full font-medium mt-6 ease-in-out duration-150 transition-all; -} - -.blog main p.button-container>a:hover { - @apply bg-danaherpurple-500 text-white; -} - .blog main .popular-articles { @apply lg:w-96 hidden lg:block flex-shrink-0 py-10 bg-danaherlightblue-50; } diff --git a/templates/library/library.css b/templates/library/library.css index 5b3b80250..40024300d 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -6,12 +6,12 @@ @apply pl-0; } -.library main .section .default-content-wrapper a { - @apply relative z-0 underline decoration-[3px] decoration-danaherlightblue-500; +.library main .default-content-wrapper h2 { + @apply font-extrabold text-2xl pt-4; } -.library main .section .default-content-wrapper p:not(img) { - @apply mt-4 mb-6; +.library main .default-content-wrapper h3 { + @apply font-semibold text-xl text-danahergray-900; } .library main .section .call-to-action-wrapper h2 { From 69ed459cd52d0d0193bf2d018a04d835a1fbf4bf Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 16:49:57 +0100 Subject: [PATCH 096/106] fix: simplify check --- blocks/recent-articles/recent-articles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/recent-articles/recent-articles.js b/blocks/recent-articles/recent-articles.js index d77dca816..e0559bf2e 100644 --- a/blocks/recent-articles/recent-articles.js +++ b/blocks/recent-articles/recent-articles.js @@ -33,7 +33,7 @@ export default async function decorate(block) { p({ class: 'text-sm font-medium text-danahergray-500 pb-2 my-0' }, article.title), p( { class: 'flex justify-between items-cente my-0' }, - span({ class: 'text-sm text-gray-700 font-normal' }, (articleType !== 'library' && articleType !== 'info') ? formatDateUTCSeconds(article.publishDate) : ''), + span({ class: 'text-sm text-gray-700 font-normal' }, !(articleType === 'library' || articleType === 'info') ? formatDateUTCSeconds(article.publishDate) : ''), span({ class: 'flex items-right text-xs font-semibold text-danaherblue-600', id: 'read-article' }), ), ), From 6f4d2860a7d0416069f59059ac0c213950e0f8d4 Mon Sep 17 00:00:00 2001 From: wz914876 Date: Thu, 23 Nov 2023 21:29:27 +0530 Subject: [PATCH 097/106] 487-accordion-converter-issue --- tools/importer/transformers/accordion.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tools/importer/transformers/accordion.js b/tools/importer/transformers/accordion.js index 5db69c1e8..0fdd1d486 100644 --- a/tools/importer/transformers/accordion.js +++ b/tools/importer/transformers/accordion.js @@ -2,13 +2,14 @@ if (window) window.decodeHtmlEntities = (text) => text; // not-needed in browser const createAccordion = (main, document) => { const accordion = main.querySelector('accordion'); - const cells = [['Accordion']]; + const cells = []; if (accordion) { const accordionHeader = document.createElement('div'); - accordionHeader.textContent = accordion.getAttribute('accordionheader'); + accordionHeader.textContent = accordion?.getAttribute('accordionheader'); try { // eslint-disable-next-line no-undef const accordionLists = JSON.parse(decodeHtmlEntities(accordion.getAttribute('accordionlist'))); + cells.push(['Accordion']); const definitionlists = accordionLists.map((list) => { const pEl = document.createElement('p'); pEl.innerHTML = list.description; @@ -19,7 +20,7 @@ const createAccordion = (main, document) => { divEl.append(pEl); return [divEl]; }); - if (accordionHeader.textContent) cells.push([accordionHeader]); + if (accordionHeader.innerHTML) cells.push([accordionHeader.textContent]); cells.push(...definitionlists); const block = WebImporter.DOMUtils.createTable(cells, document); accordion.append(block); From a18bc152d2dbabbdec4b972b7734f7be11468425 Mon Sep 17 00:00:00 2001 From: Duy Nguyen Date: Thu, 23 Nov 2023 17:02:52 +0100 Subject: [PATCH 098/106] fix: we see does not load --- blocks/we-see/we-see.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/blocks/we-see/we-see.js b/blocks/we-see/we-see.js index 45a42a103..a51a69352 100644 --- a/blocks/we-see/we-see.js +++ b/blocks/we-see/we-see.js @@ -2,19 +2,6 @@ import { loadScript } from '../../scripts/lib-franklin.js'; import { getFragmentFromFile } from '../../scripts/scripts.js'; export default async function decorate(block) { - const url = block.querySelector('a').href; - if (new URL(url).origin !== window.location.origin) { - block.innerHTML = '

Cannot use unsafe cross-origin reference for the HTML Snippets.

'; - return; - } - - if (!url) { - block.textContent = ''; - // eslint-disable-next-line no-console - console.warn('no snippet found'); - return; - } - try { // get the content const fragment = await getFragmentFromFile('/fragments/wesee.html'); @@ -38,6 +25,6 @@ export default async function decorate(block) { } catch (e) { block.textContent = ''; // eslint-disable-next-line no-console - console.warn(`cannot load snippet at ${url}: ${e}`); + console.warn(`cannot load we see snippet: ${e}`); } } From 2d364d5ac43f1d481db433d9c17f3808d9732b6c Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Thu, 23 Nov 2023 17:42:07 +0100 Subject: [PATCH 099/106] fix: cleanup extra styles --- styles/styles.css | 15 --------------- templates/library/library.css | 8 -------- 2 files changed, 23 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index 77d439322..ceed9813a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -211,21 +211,6 @@ padding-left: 0px; } -.library main .default-content-wrapper h2 { - padding-top: 1rem; - font-size: 1.5rem; - line-height: 2rem; - font-weight: 800; -} - -.library main .default-content-wrapper h3 { - font-size: 1.25rem; - line-height: 1.75rem; - font-weight: 600; - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .library main .section .call-to-action-wrapper h2 { margin: 0px; padding: 0px; diff --git a/templates/library/library.css b/templates/library/library.css index 40024300d..62c26a803 100644 --- a/templates/library/library.css +++ b/templates/library/library.css @@ -6,14 +6,6 @@ @apply pl-0; } -.library main .default-content-wrapper h2 { - @apply font-extrabold text-2xl pt-4; -} - -.library main .default-content-wrapper h3 { - @apply font-semibold text-xl text-danahergray-900; -} - .library main .section .call-to-action-wrapper h2 { @apply !text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide; } \ No newline at end of file From 197f685bbe7d41ddfc43104f7c6a2d085b6baf3e Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 10:48:41 +0530 Subject: [PATCH 100/106] updated accordion block --- blocks/accordion/accordion.js | 13 ++++++++----- tools/importer/transformers/accordion.js | 9 ++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index dfac28710..31fbd3f09 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -1,5 +1,5 @@ import { - dl, dt, dd, div, h3, button, span, + dl, dt, dd, div, h2, h3, button, span, } from '../../scripts/dom-builder.js'; import { generateUUID } from '../../scripts/scripts.js'; @@ -38,17 +38,19 @@ function createAccordionBlock(question, answer) { } export default function decorate(block) { + const title = h2(); + if(![...block.children][0].querySelector(':scope > div > h3')) title.textContent = [...block.children][0].querySelector(':scope > div').textContent; const questions = [...block.children].map((element) => { - const questionElement = element.querySelector(':scope > div').children[0]; + const questionElement = element.querySelector(':scope > div > h3'); const answerElements = Array.from(element.querySelector(':scope > div').children).slice(1); - return { question: questionElement?.textContent, answer: answerElements.map((elem) => elem.outerHTML), }; }); - - const accordionItems = questions + let filteredQuestions = questions.filter(item => item.question !== undefined); + console.log(filteredQuestions); + const accordionItems = filteredQuestions .map((question, index) => createAccordionBlock(question.question, question.answer, index)); const accordion = div( { class: 'divide-y divide-gray-900/10' }, @@ -56,5 +58,6 @@ export default function decorate(block) { ); block.innerHTML = ''; + if(title.textContent) block.append(title); block.append(accordion); } diff --git a/tools/importer/transformers/accordion.js b/tools/importer/transformers/accordion.js index 0fdd1d486..a1b908c48 100644 --- a/tools/importer/transformers/accordion.js +++ b/tools/importer/transformers/accordion.js @@ -2,14 +2,13 @@ if (window) window.decodeHtmlEntities = (text) => text; // not-needed in browser const createAccordion = (main, document) => { const accordion = main.querySelector('accordion'); - const cells = []; + const cells = [['Accordion']]; if (accordion) { const accordionHeader = document.createElement('div'); - accordionHeader.textContent = accordion?.getAttribute('accordionheader'); + accordionHeader.textContent = accordion.getAttribute('accordionheader'); try { // eslint-disable-next-line no-undef const accordionLists = JSON.parse(decodeHtmlEntities(accordion.getAttribute('accordionlist'))); - cells.push(['Accordion']); const definitionlists = accordionLists.map((list) => { const pEl = document.createElement('p'); pEl.innerHTML = list.description; @@ -20,7 +19,7 @@ const createAccordion = (main, document) => { divEl.append(pEl); return [divEl]; }); - if (accordionHeader.innerHTML) cells.push([accordionHeader.textContent]); + if (accordionHeader.textContent) cells.push([accordionHeader]); cells.push(...definitionlists); const block = WebImporter.DOMUtils.createTable(cells, document); accordion.append(block); @@ -30,4 +29,4 @@ const createAccordion = (main, document) => { } } }; -export default createAccordion; +export default createAccordion; \ No newline at end of file From 1704dbb84c9d8628f49c52c24d9c3cbd6d54fabf Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 10:49:58 +0530 Subject: [PATCH 101/106] reverted converter change --- tools/importer/transformers/accordion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/importer/transformers/accordion.js b/tools/importer/transformers/accordion.js index a1b908c48..5db69c1e8 100644 --- a/tools/importer/transformers/accordion.js +++ b/tools/importer/transformers/accordion.js @@ -29,4 +29,4 @@ const createAccordion = (main, document) => { } } }; -export default createAccordion; \ No newline at end of file +export default createAccordion; From 29b4431f27540ee3efc085ca5f35d082137e5a9b Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 10:52:04 +0530 Subject: [PATCH 102/106] fix lint issues --- blocks/accordion/accordion.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 31fbd3f09..4cde229f4 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -39,7 +39,7 @@ function createAccordionBlock(question, answer) { export default function decorate(block) { const title = h2(); - if(![...block.children][0].querySelector(':scope > div > h3')) title.textContent = [...block.children][0].querySelector(':scope > div').textContent; + if (![...block.children][0].querySelector(':scope > div > h3')) title.textContent = [...block.children][0].querySelector(':scope > div').textContent; const questions = [...block.children].map((element) => { const questionElement = element.querySelector(':scope > div > h3'); const answerElements = Array.from(element.querySelector(':scope > div').children).slice(1); @@ -48,8 +48,8 @@ export default function decorate(block) { answer: answerElements.map((elem) => elem.outerHTML), }; }); - let filteredQuestions = questions.filter(item => item.question !== undefined); - console.log(filteredQuestions); + + const filteredQuestions = questions.filter((item) => item.question !== undefined); const accordionItems = filteredQuestions .map((question, index) => createAccordionBlock(question.question, question.answer, index)); const accordion = div( @@ -58,6 +58,6 @@ export default function decorate(block) { ); block.innerHTML = ''; - if(title.textContent) block.append(title); + if (title.textContent) block.append(title); block.append(accordion); } From 2e184c2cc9ef2e417f1efa61d6d482f6e3883574 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 14:49:11 +0530 Subject: [PATCH 103/106] updated for accordion issue --- blocks/accordion/accordion.js | 7 +- tools/actions/convert/test/converter.test.js | 3 + .../test/fixtures/library-semantic.html | 117 +++ .../convert/test/fixtures/library.html | 753 ++++++++++++++++++ tools/importer/transformers/accordion.js | 2 +- 5 files changed, 877 insertions(+), 5 deletions(-) create mode 100644 tools/actions/convert/test/fixtures/library-semantic.html create mode 100644 tools/actions/convert/test/fixtures/library.html diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 4cde229f4..504099273 100644 --- a/blocks/accordion/accordion.js +++ b/blocks/accordion/accordion.js @@ -1,5 +1,5 @@ import { - dl, dt, dd, div, h2, h3, button, span, + dl, dt, dd, div, h3, button, span, } from '../../scripts/dom-builder.js'; import { generateUUID } from '../../scripts/scripts.js'; @@ -38,8 +38,6 @@ function createAccordionBlock(question, answer) { } export default function decorate(block) { - const title = h2(); - if (![...block.children][0].querySelector(':scope > div > h3')) title.textContent = [...block.children][0].querySelector(':scope > div').textContent; const questions = [...block.children].map((element) => { const questionElement = element.querySelector(':scope > div > h3'); const answerElements = Array.from(element.querySelector(':scope > div').children).slice(1); @@ -57,7 +55,8 @@ export default function decorate(block) { ...accordionItems, ); + const title = [...block.children][0].querySelector(':scope > div > h2'); block.innerHTML = ''; - if (title.textContent) block.append(title); + if (title && title.textContent) block.append(title, document.createElement('hr')); block.append(accordion); } diff --git a/tools/actions/convert/test/converter.test.js b/tools/actions/convert/test/converter.test.js index 12aa92a62..c8056f49c 100644 --- a/tools/actions/convert/test/converter.test.js +++ b/tools/actions/convert/test/converter.test.js @@ -88,6 +88,9 @@ describe('Converter Tests', () => { it('convert the library hub html', async () => { await test('library-hub'); }); + it('convert the library html', async () => { + await test('library'); + }); it('convert the application html', async () => { await test('application'); }); diff --git a/tools/actions/convert/test/fixtures/library-semantic.html b/tools/actions/convert/test/fixtures/library-semantic.html new file mode 100644 index 000000000..d47d84066 --- /dev/null +++ b/tools/actions/convert/test/fixtures/library-semantic.html @@ -0,0 +1,117 @@ + + + +

+
+
+
+ +
+
+ +

Cell viability is the measurement of the number of live cells in a sample, typically given as a proportion of the total cell population. It is a critical parameter to measure when assessing the health of any cell culture or outcome of an assay (e.g., transfection).

+

Cell count assays are applicable for every cell type and culture condition, including cell suspensions and adherent cells. During initial seeding or passaging, it is important to plate the correct number of live cells per area or volume for adherent cultures or bioreactors. Large numbers of dead cells can be detrimental to growth as they release proteins and other cellular factors like cytokines that negatively affect viable cells.

+

Cell viability assays represent a crucial testing component during the drug development process. These assays can inform on the effectiveness and toxicity of medications, such as anticancer medications, where cell survival is monitored.

+

Common Cell Viability Assays

+
    +
  • Trypan blue exclusion assay : This assay identifies viable cells based on the exclusion or uptake of Trypan blue. Viable cells do not permit the absorption of the dye, while dead cells will be colored blue due to the lack of intact cell walls. The assay can be performed manually or automated in most pharmaceutical labs. A traditional light microscope is used for assay readout.
    • +
  • Propidium iodide staining : Propidium iodide (PI) assay is a commonly used flow cytometry assay. Similar to Trypan blue, PI only crosses the membrane of dead or dying cells. Once inside the cell, it binds to the DNA found in the nucleus, resulting in the emission of red fluorescence. The flow cytometer quantifies the number of viable cells at the single cell level. PI is often combined with other cellular markers to provide clues about viable cellular subpopulations, especially when researching targeted therapies against specific cell populations in a mixture.
    • +
  • MTT assay : The MTT viability assay is a commonly used colorimetric method to evaluate the metabolic activity of cells and can serve as a real-time viability assay. The MTT reagent can penetrate both the cell membrane and the inner mitochondrial membrane of viable cells. Cells with active metabolism reduce the MTT reagent to formazan, resulting in a measurable color change. The MTT assay requires a longer incubation time and a spectrophotometer for the final readout.
    • +
  • ATP assay : Adenosine triphosphate (ATP) is produced by living cells and used as a readout to assess cell viability. The most common variation of the assay uses the bioluminescence from a firefly luciferase resulting from interaction with viable cellular ATP. ATP assays are very popular within pharmaceutical labs performing high-throughput screening workflows because of their quick turnaround time.
    • +
+
+
+
+

See how Danaher Life Sciences can help

+

Talk to an expert

+
+
+
+

Factors Influencing Cell Viability

+
    +
  • When conducting viability assays for cells in culture, it is important to carefully control and maintain the factors influencing viability like excessive handling or composition of cell culture medium. Cells require an optimal temperature range for proper functioning, and deviations from this range can induce cellular stress and result in cell death. Similarly, maintaining the appropriate pH is crucial. Any deviations from physiologically optimal ranges can disrupt cellular processes and eventually lead to cell death. For instance, acidic or alkaline conditions can interfere with enzyme activity and disrupt protein structure, leading to cellular dysfunction.
    • +
  • Cell viability is also heavily influenced by the availability of nutrients and oxygen. Adequate nutrient supply, including essential amino acids, glucose, growth factors and vitamins, is vital for supporting cellular metabolic activities. Insufficient availability of these nutrients can induce cellular stress and ultimately lead to cell death. Cells require oxygen for efficient energy production through aerobic respiration. When oxygen levels are too low (hypoxia), cellular stress occurs, and cells may undergo cell death. Conversely, excessive oxygen levels (hyperoxia) can result in oxidative stress, causing damage to cellular structures.
    • +
  • Cellular stressors, including oxidative stress, heat shock, and DNA damage, can significantly affect cell viability. Oxidative stress occurs when there's an imbalance between ROS production and antioxidant defense mechanisms. Heat shock, characterized by sudden exposure to high temperatures, can disrupt the proper folding of proteins, resulting in cellular dysfunction and death. DNA damage caused by radiation or chemical exposure can activate cell death pathways.
    • +
  • Cell viability can be influenced by environmental factors such as radiation, chemical exposure and pathogens. Ionizing radiation, for instance, can induce DNA damage and disturb cellular processes, potentially compromising cell viability. Exposure to toxic chemicals can result in cellular stress and eventual cell death. Pathogens, including bacteria and viruses, can invade cells and disrupt their normal functions, leading to cell death .
    • +
+

Strategies for Improving Cell Viability

+

Maintaining optimal culture conditions and utilizing cell viability, cell toxicity and cell cycle assays are essential for assessing and enhancing cell viability in various research settings. Optimizing factors such as temperature, pH, nutrient availability and oxygen levels are crucial for maintaining cell viability in cell culture. Proper culture conditions provide cells with the necessary resources for growth and survival. Supplementing the culture medium with cell viability-enhancing compounds like growth factors and antiapoptotic molecules can support cell growth and improve viability. Protective agents can shield cells from harsh conditions and prevent cell death, while antioxidants can mitigate oxidative stress. Additionally, genetic modifications can be employed to enhance cell survival. For example, inhibiting specific genes has been shown to improve cell viability and enhance the expression of key survival genes in certain cancer cells.

+
+
+
+

FAQs

+
+
+
+
+

What is cell viability, and how is it measured?

+

Cell viability is defined as the ability of cells to survive and maintain their physiological functions. It is typically measured by assessing the percentage of live cells in a population using various cell viability assays. The formula to calculate cell viability is (Number of viable cells / Total number of cells) x 100%.

+
+
+
+
+

What is the significance of maintaining cell viability in cell culture?

+

Maintaining cell viability in cell culture is significant for obtaining reliable experimental results, supporting cell propagation and expansion, and facilitating accurate drug efficacy and toxicity assessments.

+
+
+
+
+

Why is cell viability analysis important in research and experimental studies?

+

Cell viability analysis is crucial in research and experimental studies as it ensures the reliability and relevance of data, allowing for accurate assessments of cell cycle phases, cellular responses, the evaluation of treatment efficacy, and the development of effective therapeutic strategies.

+
+
+
+
+

What are the indicators of cell viability?

+

Indicators of cell viability include membrane integrity, metabolic activity, DNA accessibility, cell proliferation and cell morphology.

+
+
+
+
+
+
+

See how Danaher Life Sciences can help

+

Talk to an expert

+
+
+
+
+
+
Title
+
Cell Viability: Measurement, Assays & Factors Affecting Cell Health | Danaher Life Sciences
+
+ +
+
Description
+
Explore the importance of cell viability, common viability assays, factors influencing cell health and strategies for improving cell viability.
+
+
+
creationDate
+
Wed, 13 Sep 2023 11:17:36 GMT
+
+
+
updateDate
+
Thu, 23 Nov 2023 15:44:26 GMT
+
+
+
+
+
+ + \ No newline at end of file diff --git a/tools/actions/convert/test/fixtures/library.html b/tools/actions/convert/test/fixtures/library.html new file mode 100644 index 000000000..cb989e440 --- /dev/null +++ b/tools/actions/convert/test/fixtures/library.html @@ -0,0 +1,753 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Cell Viability: Measurement, Assays & Factors Affecting Cell Health | Danaher Life Sciences + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + + + + + + +
+
+ + + + +
+ +
+ + + + +
+
+ + + +
+ + +
+ + +
+ + +
+ +
+ +
+ +
+
+
+
+
+ + + + + + + + + +
+ + +
+ + +
+ + +
+
+
+ + + + + + +
+ + + +
+ + + + +
+ + + +
+ + + + +
+ + + +
+ + + + +
+ + + +
+ + + + +
+ + + +
+ + + + +
+ + +
+ + + + +
+ + + +
+ + +
+
+
+
+ + +
+
+ +
+ + + +
+ + + + + + +
+
+ + + + +
+ +
+ + + +
+
+
+ +
+
+
+
+window.onload = function() { + +var anchors = document.getElementsByTagName("a"); + +for (var i = 0; i < anchors.length; i++) { + anchors[i].href = anchors[i].href.replace("/content/danaher/ls", "") + + if (anchors[i].href.includes("?") || anchors[i].href.includes("lifesciences.danaher.com") ) { + + } else { + anchors[i].href = anchors[i].href.concat("?utm_source=dhls_website") + } +} + +} + + + + .btn.orange { + background-color: #dc6016; + color: white; + } +
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ +
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tools/importer/transformers/accordion.js b/tools/importer/transformers/accordion.js index 5db69c1e8..67dd7de2a 100644 --- a/tools/importer/transformers/accordion.js +++ b/tools/importer/transformers/accordion.js @@ -4,7 +4,7 @@ const createAccordion = (main, document) => { const accordion = main.querySelector('accordion'); const cells = [['Accordion']]; if (accordion) { - const accordionHeader = document.createElement('div'); + const accordionHeader = document.createElement('h2'); accordionHeader.textContent = accordion.getAttribute('accordionheader'); try { // eslint-disable-next-line no-undef From 211f94febc043b209ea7f25c501def44e6ed6edc Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 14:51:00 +0530 Subject: [PATCH 104/106] updated the style for h2 --- styles/styles.css | 2 +- styles/tailwind.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index bca144a92..dceff3045 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2212,7 +2212,7 @@ main .section { font-weight: 600; } -.category .default-content-wrapper h2 { +.category .default-content-wrapper h2, .library .accordion-wrapper h2 { padding-top: 1rem; font-size: 1.5rem; line-height: 2rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index 329dd2b65..b5498debd 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -335,7 +335,7 @@ @apply xl:w-3/4 leading-7 href-text text-base text-danahergray-700; } - .category .default-content-wrapper h2 { + .category .default-content-wrapper h2, .library .accordion-wrapper h2 { @apply font-semibold text-2xl pt-4; } } From 17fa9a4f2e3e4fdf35c5ef4e43c978f67d4560f3 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 16:58:10 +0530 Subject: [PATCH 105/106] updated the styles --- styles/styles.css | 2 +- styles/tailwind.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index dceff3045..d04dd34b6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1502,7 +1502,7 @@ main .default-content-wrapper h1 { color: rgb(17 24 39 / var(--tw-text-opacity)); } -main .default-content-wrapper h2 { +main .default-content-wrapper h2, main .accordion-wrapper h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; diff --git a/styles/tailwind.css b/styles/tailwind.css index b5498debd..991b0b0f5 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -68,7 +68,7 @@ @apply text-gray-900 font-extrabold text-4xl; } - main .default-content-wrapper h2 { + main .default-content-wrapper h2, main .accordion-wrapper h2 { @apply text-gray-900 font-medium text-3xl; } } From 26a931feb18cd27c3602230790725b81798880d8 Mon Sep 17 00:00:00 2001 From: rgravitvl Date: Fri, 24 Nov 2023 17:00:01 +0530 Subject: [PATCH 106/106] updated h2 styles --- styles/styles.css | 11 +++++++++-- styles/tailwind.css | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/styles/styles.css b/styles/styles.css index d04dd34b6..843ca62dc 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -2205,14 +2205,21 @@ main .section { } } -.\!category .default-content-wrapper h2 { +.\!category .default-content-wrapper h2, .\!category .accordion-wrapper h2 { padding-top: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; } -.category .default-content-wrapper h2, .library .accordion-wrapper h2 { +.category .default-content-wrapper h2, .category .accordion-wrapper h2 { + padding-top: 1rem; + font-size: 1.5rem; + line-height: 2rem; + font-weight: 600; +} + +.\!category .default-content-wrapper h2, .\!category .accordion-wrapper h2 { padding-top: 1rem; font-size: 1.5rem; line-height: 2rem; diff --git a/styles/tailwind.css b/styles/tailwind.css index 991b0b0f5..270ba5534 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -335,7 +335,7 @@ @apply xl:w-3/4 leading-7 href-text text-base text-danahergray-700; } - .category .default-content-wrapper h2, .library .accordion-wrapper h2 { + .category .default-content-wrapper h2, .category .accordion-wrapper h2 { @apply font-semibold text-2xl pt-4; } }