Fix LCP for Article Pages (#308)

* Remove RTT as a block.

* Improve LCP on article pages.

* Dont delay too long.

* No consent manager on localhost.

* put articleheader back in LCP

* Fix Article Image.

* Lint.

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   },
   rules: {
     // allow reassigning param
+    'max-len': ['error', { code: 220 }],
     'no-param-reassign': [2, { props: false }],
     'linebreak-style': ['error', 'unix'],
     'import/extensions': ['error', {

cigaradvisor/blocks/article-ldjson/article-ldjson.css

@@ -0,0 +1 @@
+/* intentionally empty */

cigaradvisor/blocks/article-ldjson/article-ldjson.js

@@ -0,0 +1,63 @@
+import { fetchAuthorInfo, fetchCategoryInfo, fetchPostsInfo } from '../../scripts/scripts.js';
+import { getMetadata } from '../../scripts/aem.js';
+import { addLdJsonScript } from '../../scripts/linking-data.js';
+
+export default async function decorate(block) {
+  block.parentElement.remove();
+  const img = document.querySelector('main img');
+
+  const promises = [];
+  promises.push(fetchPostsInfo(window.location.pathname));
+  promises.push(fetchAuthorInfo(getMetadata('author')));
+  promises.push(fetchCategoryInfo(getMetadata('category')));
+
+  let article;
+  let author;
+  let category;
+
+  await Promise.all(promises).then((results) => {
+    [[article], author, category] = results;
+  });
+  if (!article || !author || !category) {
+    return;
+  }
+
+  const ldjson = {
+    '@context': 'https://schema.org/',
+    '@type': 'BlogPosting',
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': window.location.href,
+    },
+    url: window.location.href,
+    headline: article.heading,
+    datePublished: new Date(article.published * 1000).toISOString(),
+    dateModified: new Date(article.lastModified * 1000).toISOString(),
+    publisher: {
+      '@type': 'Organization',
+      '@id': 'https://www.famous-smoke.com/cigaradvisor#organization',
+      name: 'Cigar Advisor',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://www.famous-smoke.com/cigaradvisor/styles/images/CALogo_512x512.png',
+      },
+    },
+    image: {
+      '@type': 'ImageObject',
+      url: img.src,
+    },
+    articleSection: category.heading,
+    description: article.description,
+    author: {
+      '@type': 'Person',
+      name: author.name,
+      url: `https://www.famous-smoke.com${author.path}`,
+      description: author.intro,
+      image: {
+        '@type': 'ImageObject',
+        url: author.image,
+      },
+    },
+  };
+  addLdJsonScript(document.querySelector('head'), ldjson);
+}

cigaradvisor/blocks/article-list/article-list.js

@@ -12,12 +12,12 @@ import { generatePagination, getCategory } from '../../scripts/util.js';
  *
  * @param {HTMLElement} wrapper - The wrapper element to render the page into.
  * @param {Array} articles - The array of articles to render.
- * @param {number} limit - The limit of articles per page.
+ * @param {Number|String} limit - The limit of articles per page.
  * @param {number} articlesCount - The total count of articles. This is passed for pagination
  *  when full list of articles are not passed.
  * @returns {Promise<void>} - A promise that resolves when the page is rendered.
  */
-export async function renderPage(wrapper, articles, limit, articlesCount) {
+export async function renderPage(wrapper, articles, limit = 10, articlesCount = undefined) {
   let pageSize = 10;
   if (!articles || articles.length === 0) {
     return;

cigaradvisor/blocks/article-teaser/article-teaser.js

@@ -34,6 +34,7 @@ export function buildArticleTeaser(parentElement, article) {
   decorateSeoPicture(picture, article.path.substring(article.path.lastIndexOf('/') + 1));
 
   const category = (article.category && article.category.heading) ? article.category.heading : '';
+  /* eslint-disable max-len */
   parentElement.innerHTML += `
     <article class="article article-thumbnail">
       <a class="article-category ${category.toLowerCase().replaceAll(/\s+/g, '-')}" href="${article.category ? article.category.path : ''}" data-category="${category}" title="${category}">${category}</a>
@@ -59,6 +60,7 @@ export function buildArticleTeaser(parentElement, article) {
       <script type="application/ld+json">${JSON.stringify(ldjson)}</script>
     </article>
   `;
+  /* eslint-disable max-len */
 }
 
 export default async function decorate(block) {

cigaradvisor/blocks/articleheader/articleheader.js

@@ -1,33 +1,25 @@
-import { fetchCategoryInfo, fetchAuthorInfo, decorateSeoPicture } from '../../scripts/scripts.js';
+import {
+  a, div, h1, section,
+} from '../../scripts/dom-helpers.js';
+import { fetchCategoryInfo, fetchAuthorInfo } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
-  const section = document.createElement('section');
-  const imageWrapper = document.createElement('div');
-  imageWrapper.classList.add('image-wrapper');
+  const config = readBlockConfig(block);
+
   const picture = block.querySelector('picture');
-  decorateSeoPicture(picture, window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1));
-  imageWrapper.append(picture);
-  const articleInfo = document.createElement('div');
-  articleInfo.classList.add('article-info');
-  const categoryLink = block.querySelector('p.category').innerText;
-  const category = await fetchCategoryInfo(categoryLink);
-  if (category) {
-    const categoryLinkEl = document.createElement('div');
-    categoryLinkEl.classList.add('article-category');
-    categoryLinkEl.innerHTML = `<a href="${categoryLink}">${category.heading}</a>`;
-    articleInfo.append(categoryLinkEl);
-  }
-  articleInfo.append(block.querySelector('h1'));
-  const authorLink = block.querySelector('p.author').innerText;
-  const author = await fetchAuthorInfo(authorLink);
-  const authorLinkEl = document.createElement('div');
-  authorLinkEl.classList.add('article-author');
-  if (author) {
-    authorLinkEl.innerHTML = `<a href="${authorLink}">By ${author.name}</a>`;
-    articleInfo.append(authorLinkEl);
-  }
-  articleInfo.append(authorLinkEl);
-  section.append(imageWrapper);
-  section.append(articleInfo);
-  block.replaceChildren(section);
+
+  const category = await fetchCategoryInfo(config.category);
+  const author = await fetchAuthorInfo(config.author);
+  const sect = section(
+    {},
+    div({ class: 'image-wrapper' }, picture),
+    div(
+      { class: 'article-info' },
+      div({ class: 'article-category' }, a({ href: config.category }, category.heading)),
+      h1(config.heading),
+      div({ class: 'article-author' }, a({ href: config.author }, author.name)),
+    ),
+  );
+  block.replaceChildren(sect);
 }

cigaradvisor/blocks/dynamic-article-list/dynamic-article-list.css

@@ -0,0 +1,10 @@
+@import url('../article-list/article-list.css');
+@import url('../article-teaser/article-teaser.css');
+
+.dynamic-article-list h3 {
+  font-family: var(--ff-opensans);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--heading-font-size-xxs);
+  line-height: var(--line-height-m);
+  margin: 2rem 0 1rem;
+}

cigaradvisor/blocks/dynamic-article-list/dynamic-article-list.js

@@ -0,0 +1,41 @@
+import { loadPosts } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { h3 } from '../../scripts/dom-helpers.js';
+import { renderPage } from '../article-list/article-list.js';
+
+async function loadMustReadPosts() {
+  const resp = await fetch('/cigaradvisor/must-reads.plain.html');
+  if (resp.ok) {
+    const dom = document.createElement('main');
+    dom.innerHTML = await resp.text();
+    const mustReadArticleList = dom.querySelectorAll('.article-list li a');
+    return Array.from(mustReadArticleList).map((a) => a.getAttribute('href'));
+  }
+  return [];
+}
+
+export default async function decorate(block) {
+  const config = readBlockConfig(block);
+  // Build Article's Custom List Article Block
+  const { author, category } = config;
+
+  const posts = await loadPosts();
+  const articles = [];
+
+  // 3 posts from the same author and category “most recent by published date”
+  articles.push(...posts.filter((post) => author.includes(post.author) && post.path !== window.location.pathname).slice(0, 2));
+  articles.push(...posts.filter((post) => category.includes(post.category) && !articles.includes(post) && post.path !== window.location.pathname).slice(0, 3 - articles.length));
+
+  // 1 random post from must-reads page
+  const mustReadPosts = await loadMustReadPosts();
+  const mustReadCandidatePosts = posts.filter((post) => mustReadPosts.includes(post.path) && !articles.includes(post) && post.path !== window.location.pathname);
+  const randomIndex = Math.floor(Math.random() * mustReadCandidatePosts.length);
+  articles.push(...mustReadCandidatePosts.slice(randomIndex, randomIndex + 1));
+
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('article-teaser-wrapper');
+
+  await renderPage(wrapper, articles);
+  block.replaceChildren(h3('You Might Also Like...'), wrapper);
+  block.classList.add('article-list');
+}

cigaradvisor/scripts/delayed.js

@@ -100,8 +100,6 @@ function loadConsentManager() {
   document.head.appendChild(script);
 }
 
-loadConsentManager();
-
 function loadGTM() {
   const tag = document.createElement('script');
   tag.type = 'text/javascript';
@@ -147,12 +145,11 @@ function loadWisePopup() {
   document.querySelector('body').append(script);
 }
 
-window.setTimeout(() => {
-  if (window.location.hostname !== 'localhost') {
-    loadGTM();
-    // loadFoxPush();
-    loadiZooto();
-    loadAccessibility();
-    loadWisePopup();
-  }
-}, 3000);
+if (window.location.hostname !== 'localhost') {
+  loadConsentManager();
+  loadGTM();
+  // loadFoxPush();
+  loadiZooto();
+  loadAccessibility();
+  loadWisePopup();
+}