MWPW-135320 Init article header

scripts/utils.js

@@ -85,13 +85,59 @@ function buildTagsBlock() {
   }
 }
 
+function getImageCaption(picture) {
+  // Check if the parent element has a caption
+  const parentEl = picture.parentNode;
+  let caption = parentEl.querySelector('em');
+  if (caption) return caption;
+
+  // If the parent element doesn't have a caption, check if the next sibling does
+  const parentSiblingEl = parentEl.nextElementSibling;
+  if (!parentSiblingEl || !parentSiblingEl.querySelector('picture')) return undefined;
+  const firstChildEl = parentSiblingEl.firstChild;
+  caption = firstChildEl?.tagName === 'EM' ? firstChildEl : undefined;
+  return caption;
+}
+
+async function buildArticleHeader(el) {
+  const miloLibs = getLibs();
+  const { getMetadata, getConfig } = await import(`${miloLibs}/utils/utils.js`);
+  const { loadTaxonomy, getLinkForTopic, getTaxonomyModule } = await import(`${miloLibs}/blocks/article-feed/article-helpers.js`);
+  if (!getTaxonomyModule()) {
+    await loadTaxonomy();
+  }
+  const div = document.createElement('div');
+  const h1 = el.querySelector('h1');
+  const picture = el.querySelector('picture');
+  const caption = getImageCaption(picture);
+  const figure = document.createElement('div');
+  figure.append(picture, caption);
+  const tag = getMetadata('article:tag');
+  const category = tag || 'News';
+  const author = getMetadata('author') || 'Adobe Communications Team';
+  const { codeRoot } = getConfig();
+  const authorURL = getMetadata('author-url') || (author ? `${codeRoot}/authors/${author.replace(/[^0-9a-z]/gi, '-').toLowerCase()}` : null);
+  const publicationDate = getMetadata('publication-date');
+  const categoryTag = getLinkForTopic(category);
+  const articleHeaderBlockEl = buildBlock('article-header', [
+    [`<p>${categoryTag}</p>`],
+    [h1],
+    [`<p>${authorURL ? `<a href="${authorURL}">${author}</a>` : author}</p>
+      <p>${publicationDate}</p>`],
+    [figure],
+  ]);
+  div.append(articleHeaderBlockEl);
+  el.prepend(div);
+}
+
 export async function buildAutoBlocks() {
   const miloLibs = getLibs();
   const { getMetadata } = await import(`${miloLibs}/utils/utils.js`);
   const mainEl = document.querySelector('main');
   try {
     if (getMetadata('publication-date') && !mainEl.querySelector('.article-header')) {
       buildTagsBlock(mainEl);
+      await buildArticleHeader(mainEl);
     }
   } catch (error) {
     // eslint-disable-next-line no-console

styles/styles.css

@@ -91,7 +91,20 @@ main p picture img {
     max-width: var(--body-max-width);
     margin-left: auto;
     margin-right: auto;
-} 
+}
+
+.article-header .article-feature-image {
+  padding: 0;
+  margin: auto;
+  width: 100%;
+  max-width: 1000px;
+}
+
+.article-header .article-feature-image .figure-feature img {
+  width: 100%;
+  max-height: 440px;
+  object-fit: cover;
+}
 
 @media screen and (min-width: 600px) {
   body main {
@@ -103,5 +116,15 @@ main p picture img {
     max-width: var(--body-max-width);
     margin-left: auto;
     margin-right: auto;
-  }  
+  }
+
+  main .article-header .article-category,
+  main .article-header .article-title,
+  main .article-header .article-byline {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+  }
 }