Added autoblocking for article header (#33)

blocks/article-header/article-header.css

@@ -0,0 +1,8 @@
+.block .article-byline div {
+  display: inline;
+}
+
+.block .article-byline p {
+  display: inline;
+  margin-right: 2rem;
+}

blocks/article-header/article-header.js

@@ -0,0 +1,9 @@
+export default async function decorate(block) {
+  const rows = Array.from(block.children);
+  // title
+  const titleContainer = rows[0];
+  titleContainer.classList.add('article-title');
+  // byLine
+  const authorContainer = rows[1];
+  authorContainer.classList.add('article-byline');
+}

scripts/scripts.js

@@ -1,18 +1,22 @@
 import {
-  sampleRUM,
   buildBlock,
-  loadHeader,
-  loadFooter,
+  decorateBlocks,
   decorateButtons,
   decorateIcons,
   decorateSections,
-  decorateBlocks,
   decorateTemplateAndTheme,
-  waitForLCP,
+  getMetadata,
   loadBlocks,
   loadCSS,
+  loadFooter,
+  loadHeader,
+  sampleRUM,
+  toClassName,
+  waitForLCP,
 } from './aem.js';
-import { span } from './dom-helpers.js';
+import {
+  a, div, p, span,
+} from './dom-helpers.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
@@ -44,6 +48,105 @@ async function loadFonts() {
   }
 }
 
+const LANG = {
+  EN: 'en',
+  UK: 'uk',
+  DE: 'de',
+  FR: 'fr',
+  NL: 'nl',
+};
+
+const LANG_LOCALE = {
+  en: 'en-US',
+  uk: 'en-UK',
+  de: 'de-DE',
+  fr: 'fr-FR',
+  nl: 'nl-NL',
+};
+
+let language;
+
+/**
+ * Returns the language of the page based on the path.
+ * @returns {*|string}
+ */
+export function getLanguage() {
+  if (language) return language;
+  language = LANG.EN;
+  const segs = window.location.pathname.split('/');
+  if (segs && segs.length > 0) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [, value] of Object.entries(LANG)) {
+      if (value === segs[1]) {
+        language = value;
+        break;
+      }
+    }
+  }
+  return language;
+}
+
+/**
+ * Returns the locale of the page based on the language.
+ * @returns {*}
+ */
+export function getLocale() {
+  const lang = getLanguage();
+  return LANG_LOCALE[lang];
+}
+
+/**
+ * Formats a date in the current locale.
+ * @param date
+ * @returns {string}
+ */
+function formatDate(date) {
+  const d = new Date(date);
+  const locale = getLocale();
+  return d.toLocaleDateString(locale, {
+    month: 'long',
+    day: '2-digit',
+    year: 'numeric',
+  });
+}
+
+/**
+ * Builds an article header and prepends to main in a new section.
+ * @param main
+ */
+function buildArticleHeader(main) {
+  if (main.querySelector('.article-header')) {
+    // already got an article header
+    return;
+  }
+
+  //
+  const author = getMetadata('author');
+  const authorURL = getMetadata('author-url') || `/authors/${toClassName(author)}`;
+  const publicationDate = formatDate(getMetadata('publication-date'));
+  //
+  main.prepend(div(buildBlock('article-header', [
+    [main.querySelector('h1')],
+    [
+      p(a({ href: authorURL }, author)),
+      p(publicationDate),
+    ],
+  ])));
+}
+
+/**
+ * Returns true if the page is an article based on the template metadata.
+ * @returns {boolean}
+ */
+function isArticlePage() {
+  let blogPage = false;
+  const template = getMetadata('template');
+  if (template && template === 'Blog Article') {
+    blogPage = true;
+  }
+  return blogPage;
+}
+
 /**
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
@@ -52,6 +155,9 @@ async function loadFonts() {
 function buildAutoBlocks(main) {
   try {
     // buildHeroBlock(main);
+    if (isArticlePage()) {
+      buildArticleHeader(main);
+    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

styles/styles.css

@@ -224,7 +224,7 @@ a:hover {
 
 /* stylelint-disable no-descending-specificity */
 .sidebar a:any-link,
-.blog-article main .section:first-child .default-content-wrapper p:first-of-type a:any-link {
+.article-byline a:any-link {
   background: none;
   background-image: linear-gradient(to right,var(--link-background-color) 50%,transparent 50%);
   background-size: 205% 2px;
@@ -233,11 +233,11 @@ a:hover {
 }
 
 .sidebar a:hover,
-.blog-article main .section:first-child .default-content-wrapper p:first-of-type a:hover {
+.article-byline p > a:hover {
   background-position: bottom left;
 }
 
-.blog-article main .section:first-child .default-content-wrapper p:first-of-type a {
+.article-byline a:any-link {
   font-family: var(--ff-gilroy-bold);
 }
 /* stylelint-enable no-descending-specificity */