fix: resolve JS and CSS lint errors across blocks

blocks/article-feed/article-feed.css

@@ -448,15 +448,15 @@ main .article-feed .load-more {
   flex-direction: column;
   background: var(--color-white);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
   overflow: hidden;
   transition: all 0.3s ease;
   text-decoration: none;
   height: 100%;
 }
 
 .newsletter-landing main .article-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
   transform: translateY(-4px);
 }
 
@@ -500,7 +500,7 @@ main .article-feed .load-more {
 .newsletter-landing main .article-card-body h3 {
   font-size: var(--heading-font-size-s);
   color: var(--color-black);
-  margin: 0 0 12px 0;
+  margin: 0 0 12px;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;

blocks/article-header/article-header.css

@@ -215,7 +215,9 @@ main .article-byline .article-byline-sharing .applause-inline-wrapper {
 main .article-byline .article-byline-sharing .applause-inline-wrapper applause-button {
   margin: 0 !important;
   padding: 0 !important;
-  --applause-button-color: #000000;
+
+  --applause-button-color: #000;
+
   display: flex !important;
   align-items: center !important;
   width: auto !important;
@@ -238,7 +240,7 @@ main .article-byline .article-byline-sharing .applause-inline-wrapper applause-b
   margin: 0 !important;
   font-size: 16px !important;
   font-weight: 600 !important;
-  color: #000000 !important;
+  color: #000 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
 }

blocks/article-header/article-header.js

@@ -97,7 +97,7 @@ function loadApplauseButtonLibrary() {
   const script = document.createElement('script');
   script.src = 'https://unpkg.com/applause-button@latest/dist/applause-button.js';
   document.head.appendChild(script);
-  
+
   // Add custom style override after library loads
   script.onload = () => {
     const style = document.createElement('style');
@@ -124,7 +124,7 @@ async function buildSharing() {
   const sharing = document.createElement('div');
   const placeholders = await fetchPlaceholders();
   sharing.classList.add('article-byline-sharing');
-  
+
   // Create applause button
   const applauseSpan = document.createElement('span');
   applauseSpan.classList.add('applause-inline-wrapper');
@@ -134,28 +134,28 @@ async function buildSharing() {
   applauseButton.setAttribute('multiclap', 'true');
   applauseButton.setAttribute('color', '#1473E6');
   applauseSpan.appendChild(applauseButton);
-  
+
   // Create copy link button
   const copySpan = document.createElement('span');
   copySpan.innerHTML = `<a id="copy-to-clipboard" alt="${placeholders['copy-to-clipboard']}" aria-label="${placeholders['copy-to-clipboard']}">
         ${createSVG('link').outerHTML}
       </a>`;
-  
+
   // Assemble sharing section
   sharing.appendChild(applauseSpan);
   sharing.appendChild(copySpan);
-  
+
   sharing.querySelectorAll('[data-href]').forEach((link) => {
     link.addEventListener('click', openPopup);
   });
   const copyButton = sharing.querySelector('#copy-to-clipboard');
   copyButton.addEventListener('click', () => {
     copyToClipboard(copyButton);
   });
-  
+
   // Load the applause button library
   loadApplauseButtonLibrary();
-  
+
   return sharing;
 }
 

blocks/featured-article/featured-article.css

@@ -232,7 +232,7 @@ main .tag-header-container .featured-article-card-body p:not(:first-child) {
 .newsletter-landing main .featured-article-card {
   background-color: var(--color-white);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
   overflow: hidden;
   max-width: 1200px;
   margin: 0 auto;
@@ -241,7 +241,7 @@ main .tag-header-container .featured-article-card-body p:not(:first-child) {
 }
 
 .newsletter-landing main .featured-article-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
   transform: translateY(-2px);
   transition: all 0.3s ease;
 }

blocks/featured-articles/featured-articles.js

@@ -11,18 +11,18 @@ async function decorateFeaturedArticles(featuredArticlesEl, articlePaths, eager
 
   const tagHeader = document.querySelector('.tag-header-container > div');
 
-  for (const articlePath of articlePaths) {
-    const article = await getBlogArticle(articlePath);
+  const articles = await Promise.all(articlePaths.map((path) => getBlogArticle(path)));
+  const { origin } = new URL(window.location.href);
+  articles.forEach((article, i) => {
     if (article) {
       const card = buildArticleCard(article, 'featured-article', eager);
-      card.classList.add('featured-article-card'); // Ensure the card has the correct class
+      card.classList.add('featured-article-card');
       featuredArticlesEl.append(card);
     } else {
-      const { origin } = new URL(window.location.href);
       // eslint-disable-next-line no-console
-      console.warn(`Featured article does not exist or is missing in index: ${origin}${articlePath}`);
+      console.warn(`Featured article does not exist or is missing in index: ${origin}${articlePaths[i]}`);
     }
-  }
+  });
 
   if (tagHeader) {
     tagHeader.append(featuredArticlesEl);
@@ -37,4 +37,4 @@ export default async function decorate(block, blockName, document, eager) {
     const paths = Array.from(links).map((a) => new URL(a.href).pathname);
     await decorateFeaturedArticles(block, paths, eager);
   }
-}
+}

blocks/fluffyjaws/fluffyjaws-header.js

@@ -160,14 +160,15 @@ export default async function decorateArticleHeader(blockEl, blockName, eager) {
   }
 
   // author
-  const author = bylineContainer && bylineContainer.firstElementChild && bylineContainer.firstElementChild.firstElementChild;
+  const bylineInfo = bylineContainer && bylineContainer.firstElementChild;
+  const author = bylineInfo && bylineInfo.firstElementChild;
   const authorLink = author ? author.querySelector('a') : null;
   const authorURL = authorLink ? authorLink.href : '#';
   const authorName = author ? author.textContent.trim() : 'Author';
   if (author) author.classList.add('article-author');
 
   // publication date
-  const date = bylineContainer && bylineContainer.firstElementChild && bylineContainer.firstElementChild.lastElementChild;
+  const date = bylineInfo && bylineInfo.lastElementChild;
   if (date) {
     date.classList.add('article-date');
     validateDate(date);
@@ -196,4 +197,4 @@ export default async function decorateArticleHeader(blockEl, blockName, eager) {
     featureImgContainer.prepend(featureFigEl);
     if (featureImgContainer.lastElementChild) featureImgContainer.lastElementChild.remove();
   }
-}
+}

blocks/tags/tags.js

@@ -3,10 +3,8 @@ export default function decorateTags(blockEl) {
   const container = blockEl.querySelector('p');
   container.classList.add('tags-container');
   container.textContent = '';
-  const target = Array.from(tags).reduce((targets, tag) => {
+  Array.from(tags).forEach((tag) => {
     tag.classList.add('button');
     container.append(tag);
-    targets.push(tag.textContent);
-    return targets;
-  }, []).join('; ');
+  });
 }

styles/styles.css

@@ -594,6 +594,8 @@ main .section.carousel-container {
   }
 }
 
+/* stylelint-disable no-descending-specificity -- theme overrides are intentionally ordered by theme */
+
 /* Fact-box width override */
 .fact-box main,
 .fact-box main .section,
@@ -680,3 +682,4 @@ main .section.carousel-container {
   margin-bottom: 64px;
 }
 
+/* stylelint-enable no-descending-specificity */