Revert "lighthouse improvements for article pages"

hlxsites · Apr 3, 2024 · bf08711 · bf08711
1 parent bf99028
commit bf08711
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 94 deletions.
diff --git a/blocks/article/article.css b/blocks/article/article.css
@@ -363,20 +363,20 @@ article [data-docs-heading] span {
   letter-spacing: var(--letter-spacing-neg--s);
 }
 
-.book-content h1, .book-content .h1 {
+.book-content h1 {
   font-size: 28px;
   line-height: 28px;
 }
-.book-content h2, .book-content .h2 {
+.book-content h2 {
   font-size: 24px;
   line-height: 24px;
 }
-.book-content h3, .book-content .h3 {
+.book-content h3 {
   font-size: 20px;
   line-height: 20px;
 }
-.book-content h4, .book-content .h4,
-.book-content h5, .book-content .h5 {
+.book-content h4,
+.book-content h5 {
   font-size: 18px;
   line-height: 18px;
 }
@@ -426,10 +426,6 @@ article [data-docs-heading] span {
   word-break: break-word;
 }
 
-.pan-article .book-content a.inline-link {
-  text-decoration: underline;
-}
-
 .pan-article .book-content pre {
   display: block;
   margin: var(--spacing--6) 0;

diff --git a/blocks/article/article.js b/blocks/article/article.js
@@ -4,9 +4,7 @@ import {
   SPA_NAVIGATION,
   decorateMain,
   getPlaceholders,
-  isMobile,
   loadBook,
-  makeHeadersSequential,
   parseFragment,
   render,
   renderSidenav,
@@ -237,22 +235,6 @@ async function redirectToFirstChapter() {
   window.location.href = redirect;
 }
 
-/**
- * @param {HTMLElement} block
- */
-function decorateInlineLinks(block) {
-  block.querySelectorAll('p:not(.button-container) > a').forEach((a) => {
-    const isInline = [
-      a.previousSibling ? a.previousSibling.nodeType : -1,
-      a.nextSibling ? a.nextSibling.nodeType : -1,
-    ].includes(Node.TEXT_NODE);
-
-    if (isInline) {
-      a.classList.add('inline-link');
-    }
-  });
-}
-
 const decorateCodeBlocks = (block) => {
   // Add copy code button
   for (const pre of block.querySelectorAll('pre')) {
@@ -474,18 +456,6 @@ async function renderContent(block, res, rerender = false) {
       span.textContent = info.title;
       articleTitle.remove();
       fragment.append(span);
-
-      // add meta description
-      const meta = document.createElement('meta');
-      meta.setAttribute('name', 'description');
-      meta.setAttribute('content', document.title);
-
-      const existing = document.head.querySelector('meta[name="description"]');
-      if (existing) {
-        existing.replaceWith(meta);
-      } else {
-        document.head.appendChild(meta);
-      }
     }
 
     const content = document.createElement('div');
@@ -556,12 +526,17 @@ async function renderContent(block, res, rerender = false) {
     });
   }
 
+  // Load sidenav, once
+  if (!rerender) {
+    renderSidenav(block);
+    import('../theme-toggle/theme-toggle.js');
+    import('../../scripts/scroll-spy.js');
+  }
+
   if (articleFound) {
     const bookContent = block.querySelector('.book-content div[slot="content"]');
     if (bookContent) {
       await decorateMain(bookContent);
-      makeHeadersSequential(bookContent);
-      decorateInlineLinks(bookContent);
       await loadBlocks(bookContent);
       updateSectionsStatus(bookContent);
 
@@ -571,11 +546,6 @@ async function renderContent(block, res, rerender = false) {
       decorateCodeBlocks(block);
     }
   }
-
-  // Load sidenav, once
-  if (!rerender) {
-    renderSidenav(block);
-  }
 }
 
 const renderCurrentVersion = (block) => {
@@ -599,16 +569,4 @@ export default async function decorate(block) {
       initVersionDropdown(block);
     });
   }
-
-  // load theme toggle
-
-  import('../theme-toggle/theme-toggle.js');
-
-  // scroll spy only works on desktop
-  // still load it on mobile, incase of tablet portrait/landscape change, but delay it
-  if (isMobile()) {
-    store.once('delayed:loaded', () => import('../../scripts/scroll-spy.js'));
-  } else {
-    import('../../scripts/scroll-spy.js');
-  }
 }
diff --git a/blocks/search-bar/search-bar.js b/blocks/search-bar/search-bar.js
@@ -124,7 +124,7 @@ export class SearchBar extends HTMLElement {
       let html = '';
       const options = JSON.parse(defaultOptions);
       options.forEach((option, i) => {
-        html += `<a href="#" class="coveo-dropdown-item coveo-dropdown-custom-option ${
+        html += `<a class="coveo-dropdown-item coveo-dropdown-custom-option ${
           i === 0 ? 'selected' : ''
         }" 
         data-label="${option.label}" 
@@ -138,7 +138,6 @@ export class SearchBar extends HTMLElement {
     }
     if (docsetMeta && productMeta) {
       const docSetOption = document.createElement('a');
-      docSetOption.href = '#';
       docSetOption.classList.add('coveo-dropdown-item');
       if (!booknameMeta) {
         this.querySelector('.coveo-dropdown-item.selected').classList.remove('selected');
@@ -152,7 +151,6 @@ export class SearchBar extends HTMLElement {
     }
     if (booknameMeta) {
       const bookOption = document.createElement('a');
-      bookOption.href = '#';
       this.querySelector('.coveo-dropdown-item.selected').classList.remove('selected');
       bookOption.classList.add('coveo-dropdown-item');
       bookOption.classList.add('selected');

diff --git a/blocks/sidenav/sidenav.js b/blocks/sidenav/sidenav.js
@@ -554,7 +554,7 @@ function bookToList(book) {
     const div = document.createElement('div');
     const link = document.createElement('a');
     link.innerText = title;
-    link.href = href || '#';
+    link.href = href || '';
     link.addEventListener('click', navigateArticleSPA);
 
     div.append(link);
@@ -749,7 +749,7 @@ function initAdditionalBooks(block, container) {
         : html` <ul data-additional-book-href="${book.href}">
             <li data-key="" aria-expanded="false">
               <div>
-                <a href="${book.href}" >${book.title}</a>
+                <a>${book.title}</a>
                 <span class="icon-toggle">
                 <svg
                     class="icon icon-arrow"

diff --git a/blocks/theme-toggle/theme-toggle.js b/blocks/theme-toggle/theme-toggle.js
@@ -130,9 +130,8 @@ class ThemeToggle extends HTMLElement {
       ? 'dark'
       : 'light';
     // Attempts to load the setting from local storage
-    const currentSetting = passedSetting
-      || localStorage.getItem(this.STORAGE_KEY)
-      || browserSetting;
+    const currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY)
+    || browserSetting;
 
     if (currentSetting) {
       this.setToggleSwitchStatus(currentSetting);

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -259,8 +259,6 @@ const store = new (class {
 
     window.addEventListener('popstate', (ev) => {
       const { state } = ev;
-      if (!state) return;
-
       index = state.index;
       this.emit('spa:navigate:article', state);
       ev.preventDefault();
@@ -656,32 +654,6 @@ export function renderSidenav(contentBlock) {
   });
 }
 
-function swapHeadingLevel(heading, newLvl) {
-  const cls = heading.tagName.toLowerCase();
-  const newHeading = document.createElement(typeof newLvl === 'string' ? newLvl : `h${newLvl}`);
-  newHeading.textContent = heading.textContent;
-  newHeading.id = heading.id;
-  newHeading.classList.add(cls);
-  heading.replaceWith(newHeading);
-}
-
-/**
- * @param {HTMLElement} main
- */
-export function makeHeadersSequential(main) {
-  let curLevel = 1;
-  let prevTag;
-  main.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((heading) => {
-    if (heading.tagName[1] !== curLevel) {
-      swapHeadingLevel(heading, curLevel);
-    }
-    if (prevTag !== heading.tagName) {
-      curLevel += 1;
-    }
-    prevTag = heading.tagName;
-  });
-}
-
 /**
  * Load article as HTML string
  * @param {string} href