feat: v7 upgrade

blog/blocks/animation/animation.js

@@ -27,7 +27,7 @@ export default function decorateAnimation(blockEl) {
     parentEl.innerHTML = picEl;
   }
 
-  const figEl = buildFigure(blockEl.firstChild.firstChild);
+  const figEl = buildFigure(blockEl.firstElementChild.firstElementChild);
   blockEl.prepend(figEl);
-  blockEl.lastChild.remove();
+  blockEl.lastElementChild.remove();
 }

blog/blocks/article-header/article-header.js

@@ -35,8 +35,8 @@ export default async function decorateArticleHeader(blockEl, blockName, document
   categoryContainer.classList.add('article-category');
   const category = categoryContainer.querySelector('p');
   const categoryA = document.createElement('a');
-  categoryA.textContent = category.textContent;
-  categoryA.href = `${window.location.origin}${getRootPath()}/tags/${toClassName(category.textContent)}`;
+  categoryA.textContent = category.textContent.trim();
+  categoryA.href = `${window.location.origin}${getRootPath()}/tags/${toClassName(category.textContent.trim())}`;
   category.innerHTML = '';
   category.append(categoryA);
   // title
@@ -45,15 +45,15 @@ export default async function decorateArticleHeader(blockEl, blockName, document
   // byline
   const bylineContainer = childrenEls[2];
   bylineContainer.classList.add('article-byline');
-  bylineContainer.firstChild.classList.add('article-byline-info');
+  bylineContainer.firstElementChild.classList.add('article-byline-info');
   // author
-  const author = bylineContainer.firstChild.firstChild;
+  const author = bylineContainer.firstElementChild.firstElementChild;
   const authorURL = author.querySelector('a').href;
-  const authorName = author.textContent;
+  const authorName = author.textContent.trim();
   author.textContent = authorName;
   author.classList.add('article-author');
   // publication date
-  const date = bylineContainer.firstChild.lastChild;
+  const date = bylineContainer.firstElementChild.lastElementChild;
   date.classList.add('article-date');
   // author img
   const authorImg = document.createElement('div');
@@ -64,8 +64,8 @@ export default async function decorateArticleHeader(blockEl, blockName, document
   // feature img
   const featureImgContainer = childrenEls[3];
   featureImgContainer.classList.add('article-feature-image');
-  const featureFigEl = buildFigure(featureImgContainer.firstChild);
+  const featureFigEl = buildFigure(featureImgContainer.firstElementChild);
   featureFigEl.classList.add('figure-feature');
   featureImgContainer.prepend(featureFigEl);
-  featureImgContainer.lastChild.remove();
+  featureImgContainer.lastElementChild.remove();
 }

blog/blocks/block-helpers.js

@@ -25,7 +25,7 @@ export const replaceElementType = (el, type) => {
  * @param {HTMLElement} html the content of the element
  * @returns {HTMLElement} the element created
  */
- export function createTag(tag, attributes, html) {
+export function createTag(tag, attributes, html) {
   const el = document.createElement(tag);
   if (html) {
     if (html instanceof HTMLElement) {
@@ -40,4 +40,4 @@ export const replaceElementType = (el, type) => {
     });
   }
   return el;
-}
+}

blog/blocks/embed/embed.js

@@ -46,9 +46,9 @@ const embedInstagram = (url) => {
 const embedVimeo = (url) => {
   const video = url.pathname.split('/')[1];
   const embedHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
-      <iframe src="https://player.vimeo.com/video/${video}?app_id=122963" 
-      style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
-      frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen  
+      <iframe src="https://player.vimeo.com/video/${video}?app_id=122963"
+      style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
+      frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
       title="Content from Vimeo" loading="lazy"></iframe>
     </div>`;
   return embedHTML;
@@ -150,7 +150,7 @@ const loadEmbed = (block) => {
   }
 
   const a = block.querySelector('a');
-  const figure = buildFigure(block.firstChild.firstChild);
+  const figure = buildFigure(block.firstElementChild.firstElementChild);
 
   if (a) {
     const url = new URL(a.href.replace(/\/$/, ''));

blog/blocks/example/example.js

@@ -2,8 +2,8 @@ export default function decorate($block) {
   // turn links into buttons
   $block.querySelectorAll(':scope a').forEach(($a) => {
     const $button = document.createElement('button');
-    $button.title = $a.title || $a.textContent;
-    $button.textContent = $a.textContent;
+    $button.title = $a.title || $a.textContent.trim();
+    $button.textContent = $a.textContent.trim();
     $button.addEventListener('click', () => {
       window.location.href = $a.href;
     });

blog/blocks/footer/footer.js

@@ -44,13 +44,13 @@ class Footer {
       infoRow.classList.add('has-privacy');
     }
 
-    if (infoColumnLeft.hasChildNodes()) {
+    if (infoColumnLeft.childElementCount !== 0) {
       infoRow.append(infoColumnLeft);
     }
-    if (infoColumnRight.hasChildNodes()) {
+    if (infoColumnRight.childElementCount !== 0) {
       infoRow.append(infoColumnRight);
     }
-    if (infoRow.hasChildNodes()) {
+    if (infoRow.childElementCount !== 0) {
       wrapper.append(infoRow);
     }
 
@@ -81,7 +81,7 @@ class Footer {
           'aria-expanded': expanded,
           'aria-controls': `${titleId}-menu`,
         });
-        title.textContent = heading.textContent;
+        title.textContent = heading.textContent.trim();
         navItem.append(title);
         const linksContainer = heading.nextElementSibling;
         linksContainer.classList = 'footer-nav-item-links';
@@ -197,7 +197,7 @@ class Footer {
     const privacyWrapper = createTag('div', { class: 'footer-privacy' });
     // build privacy copyright text
     const copyright = createTag('p', { class: 'footer-privacy-copyright' });
-    copyright.textContent = copyrightEl.textContent;
+    copyright.textContent = copyrightEl.textContent.trim();
     privacyWrapper.append(copyright);
     // build privacy links
     const infoLinks = createTag('ul', { class: 'footer-privacy-links' });

blog/blocks/gnav/gnav-profile.js

@@ -46,7 +46,7 @@ function decorateProfileMenu(blockEl, profileEl, profiles, toggle) {
   const profileActions = createTag('ul', { class: 'gnav-profile-actions' });
 
   profileHeader.href = decorateProfileLink(accountLink.href, 'account');
-  profileHeader.setAttribute('aria-label', accountLink.textContent);
+  profileHeader.setAttribute('aria-label', accountLink.textContent.trim());
 
   const profileImg = avatarImg.cloneNode(true);
   const profileName = createTag('p', { class: 'gnav-profile-name' }, displayName);

blog/blocks/gnav/gnav-search.js

@@ -21,7 +21,7 @@ function decorateCard(hit) {
 function highlightTextElements(terms, elements) {
   elements.forEach((e) => {
     const matches = [];
-    const txt = e.textContent;
+    const txt = e.textContent.trim();
     terms.forEach((term) => {
       const offset = txt.toLowerCase().indexOf(term);
       if (offset >= 0) {

blog/blocks/gnav/gnav.js

@@ -92,10 +92,10 @@ class Gnav {
     if (!brandBlock) return null;
     const brand = brandBlock.querySelector('a');
     brand.className = brandBlock.className;
-    const title = createTag('span', { class: 'gnav-brand-title' }, brand.textContent);
+    const title = createTag('span', { class: 'gnav-brand-title' }, brand.textContent.trim());
 
     brand.href = makeLinkRelative(brand.href);
-    brand.setAttribute('aria-label', brand.textContent);
+    brand.setAttribute('aria-label', brand.textContent.trim());
     brand.textContent = '';
     if (brand.classList.contains('logo')) {
       brand.insertAdjacentHTML('afterbegin', BRAND_IMG);
@@ -108,7 +108,7 @@ class Gnav {
     const logo = this.body.querySelector('.adobe-logo a');
     logo.href = makeLinkRelative(logo.href);
     logo.classList.add('gnav-logo');
-    logo.setAttribute('aria-label', logo.textContent);
+    logo.setAttribute('aria-label', logo.textContent.trim());
     logo.textContent = '';
     logo.insertAdjacentHTML('afterbegin', COMPANY_IMG);
     return logo;
@@ -169,7 +169,7 @@ class Gnav {
     linkGroups.forEach((linkGroup) => {
       const image = linkGroup.querySelector('picture');
       const anchor = linkGroup.querySelector('p a');
-      const title = anchor.textContent;
+      const title = anchor.textContent.trim();
       const subtitle = linkGroup.querySelector('p:last-of-type');
       const titleWrapper = createTag('div');
       anchor.href = makeLinkRelative(anchor.href);
@@ -257,7 +257,7 @@ class Gnav {
   decorateSearch = () => {
     const searchBlock = this.body.querySelector('.search');
     if (searchBlock) {
-      const label = searchBlock.querySelector('p').textContent;
+      const label = searchBlock.querySelector('p').textContent.trim();
       const advancedLink = searchBlock.querySelector('a');
       const searchEl = createTag('div', { class: 'gnav-search' });
       const searchBar = this.decorateSearchBar(label, advancedLink);

blog/blocks/images/images.js

@@ -11,11 +11,11 @@ function buildColumns(rowEl, count) {
 }
 
 export default function decorateImages(blockEl) {
-  const blockCount = blockEl.firstChild.childElementCount;
+  const blockCount = blockEl.firstElementChild.childElementCount;
   if (blockCount > 1) {
-    buildColumns(blockEl.firstChild, blockCount);
+    buildColumns(blockEl.firstElementChild, blockCount);
   } else {
-    const figEl = buildFigure(blockEl.firstChild.firstChild);
+    const figEl = buildFigure(blockEl.firstElementChild.firstElementChild);
     blockEl.innerHTML = '';
     blockEl.append(figEl);
   }

blog/blocks/infographic/infographic.js

@@ -1,7 +1,7 @@
 import { buildFigure } from '../../scripts/scripts.js';
 
 export default function decorateInfographic(blockEl) {
-  const figEl = buildFigure(blockEl.firstChild.firstChild);
+  const figEl = buildFigure(blockEl.firstElementChild.firstElementChild);
   blockEl.prepend(figEl);
-  blockEl.lastChild.remove();
+  blockEl.lastElementChild.remove();
 }

blog/blocks/interlinks/interlinks.js

@@ -36,7 +36,7 @@ export default async function interlink() {
   const resp = await fetch(`${getRootPath()}/keywords.json`);
   if (articleBody && resp.ok) {
     const json = await resp.json();
-    const articleText = articleBody.textContent.toLowerCase();
+    const articleText = articleBody.textContent.trim().toLowerCase();
     // set article link limit: 1 every 100 words
     const articleLinks = articleBody.querySelectorAll('a').length;
     const articleWords = articleText.split(/\s/).length;
@@ -61,7 +61,7 @@ export default async function interlink() {
       .forEach((p) => {
         // set paragraph link limit: 1 every 40 words
         const paraLinks = p.querySelectorAll('a').length;
-        const paraWords = p.textContent.split(/\s/).length;
+        const paraWords = p.textContent.trim().split(/\s/).length;
         const maxParaLinks = Math.floor(paraWords / 40) - paraLinks;
         if (maxParaLinks > 0) {
           Array.from(p.childNodes)
@@ -91,8 +91,9 @@ export default async function interlink() {
                   a.href = item.URL;
                   a.setAttribute('data-origin', 'interlink');
                   a.appendChild(document.createTextNode(text.substring(start, end)));
-                  p.insertBefore(a, textNode.nextSibling);
-                  p.insertBefore(document.createTextNode(text.substring(end)), a.nextSibling);
+                  p.insertBefore(a, textNode.nextElementSibling);
+                  p.insertBefore(document.createTextNode(text.substring(end)),
+                    a.nextElementSibling);
                   textNode.nodeValue = text.substring(0, start);
                   // remove matched link from interlinks
                   keywords.splice(keywords.indexOf(item), 1);

blog/blocks/recommended-articles/recommended-articles.js

@@ -30,7 +30,7 @@ async function decorateRecommendedArticles(recommendedArticlesEl, paths) {
     }
   }
   recommendedArticlesEl.closest('.section').classList.add('appear');
-  if (!articleCardsContainer.hasChildNodes()) {
+  if (articleCardsContainer.childElementCount === 0) {
     recommendedArticlesEl.parentNode.parentNode.remove();
   }
 }

blog/blocks/table-of-contents/table-of-contents.js

@@ -11,15 +11,15 @@ export default function decorate($block) {
     const $anchor = createTag('a', {}, null);
     let target;
 
-    if ($tab.textContent === 'Introduction') {
+    if ($tab.textContent.trim() === 'Introduction') {
       $anchor.href = `${baseUrl}introduction`;
       $anchor.textContent = 'Introduction';
-      target = $block.parentElement.parentElement.previousSibling;
+      target = $block.parentElement.parentElement.previousElementSibling;
     } else {
       $headers.forEach(($header) => {
-        if ($tab.textContent === $header.textContent) {
+        if ($tab.textContent.trim() === $header.textContent.trim()) {
           $anchor.href = `${baseUrl}${$header.id}`;
-          $anchor.textContent = $tab.textContent;
+          $anchor.textContent = $tab.textContent.trim();
           target = $header;
         }
       });

blog/blocks/tags/tags.js

@@ -3,8 +3,8 @@ import {
   loadTaxonomy,
 } from '../../scripts/scripts.js';
 
-export default function decorateTags(blockEl) {
-  const tags = blockEl.textContent.split(', ');
+export default function decorateTags(blockEl) { //
+  const tags = blockEl.textContent.trim().split(', ');
   const container = blockEl.querySelector('p');
   container.classList.add('tags-container');
   container.textContent = '';

blog/blocks/video/video.js

@@ -8,13 +8,13 @@ export default function decorate(block) {
   const a = block.querySelector('a');
   const videoSrc = a.href;
   const video = document.createElement('div');
-  const figure = buildFigure(block.firstChild.firstChild);
+  const figure = buildFigure(block.firstElementChild.firstElementChild);
   video.classList.add('video-wrapper');
   video.innerHTML = `<video controls preload="none" ${poster}>
     <source src="${videoSrc}" type="video/mp4">
   </video>`;
   block.innerHTML = '<figure class="figure"></figure>';
-  block.firstChild.prepend(video);
-  block.firstChild.append(figure.querySelector('figcaption'));
+  block.firstElementChild.prepend(video);
+  block.firstElementChild.append(figure.querySelector('figcaption'));
   block.classList.add('is-loaded');
 }

blog/scripts/canary.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-unused-vars
 export default function init(el) {}

blog/scripts/delayed.js

@@ -87,7 +87,7 @@ async function setupLinkTracking() {
           if (img) {
             value = img.getAttribute('alt');
           } else {
-            value = a.textContent.substr(0, 64);
+            value = a.textContent.trim().substr(0, 64);
           }
           a.setAttribute('daa-ll', value);
         }