Featured Article LCP help

* Set category link to be asynchronous created
adobecom · Aug 30, 2023 · b677797 · b677797
1 parent 6b86cc1
commit b677797
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/libs/blocks/featured-article/featured-article.css b/libs/blocks/featured-article/featured-article.css
@@ -38,6 +38,10 @@
   padding-right: 0;
 }
 
+.featured-article-card-category {
+  min-height: 15px;
+}
+
 .featured-article-card-category,
 .featured-article-card-category a,
 .featured-article-card-date {

diff --git a/libs/blocks/featured-article/featured-article.js b/libs/blocks/featured-article/featured-article.js
@@ -1,6 +1,16 @@
 import { getMetadata, createTag, getConfig } from '../../utils/utils.js';
-// import fetchTaxonomy from '../../scripts/taxonomy.js';
-// import { updateLinkWithLangRoot } from '../../utils/helpers.js';
+import fetchTaxonomy from '../../scripts/taxonomy.js';
+import { updateLinkWithLangRoot } from '../../utils/helpers.js';
+
+function createCategoryLink(doc, categoryEl) {
+  const category = getMetadata('article:tag', doc);
+  return fetchTaxonomy(getConfig(), '/topics')
+    .then((taxonomy) => {
+      const categoryTaxonomy = taxonomy.get(category) || 'News';
+      const categoryLink = createTag('a', { href: updateLinkWithLangRoot(categoryTaxonomy.link) }, categoryTaxonomy.name);
+      categoryEl.append(categoryLink);
+    });
+}
 
 export default async function init(el) {
   const a = el.querySelector('a');
@@ -19,17 +29,10 @@ export default async function init(el) {
   const html = await resp.text();
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
-  // const category = getMetadata('article:tag', doc);
-
-  // load taxonomy to get link of article "category"
-  // const taxonomy = await fetchTaxonomy(getConfig(), '/topics');
-  // const categoryTaxonomy = taxonomy.get(category) || 'News';
-
   const pic = doc.body.querySelector('picture');
   pic.querySelector('img').removeAttribute('loading');
   const featuredImg = createTag('div', { class: 'featured-article-card-image' }, pic);
-  const categoryLink = createTag('a', { href: '/fake' }, 'fake');
-  const categoryEl = createTag('div', { class: 'featured-article-card-category' }, categoryLink);
+  const categoryEl = createTag('div', { class: 'featured-article-card-category' });
   const text = doc.body.querySelector('h1, h2, h3').textContent;
   const title = createTag('h3', null, text);
   const body = createTag('div', { class: 'featured-article-card-body' });
@@ -40,4 +43,7 @@ export default async function init(el) {
 
   body.append(categoryEl, title, description, date);
   a.append(featuredImg, body);
+
+  // Load category link after block has been displayed to speed up LCP
+  createCategoryLink(doc, categoryEl);
 }