Merge pull request #74 from adobecom/stage

[Release] Stage to Main

blog/scripts/scripts.js

@@ -10,14 +10,94 @@
  * governing permissions and limitations under the License.
  */
 
-import { setLibs, buildAutoBlocks } from './utils.js';
+export function setLibs(location) {
+  const { hostname, search } = location;
+  if (!['.hlx.', '.stage.', 'local'].some((i) => hostname.includes(i))) return '/libs';
+  const branch = new URLSearchParams(search).get('milolibs') || 'main';
+  if (branch === 'local') return 'http://localhost:6456/libs';
+  return branch.includes('--') ? `https://${branch}.hlx.live/libs` : `https://${branch}--milo--adobecom.hlx.live/libs`;
+}
+
+const LIBS = setLibs(window.location);
+
+/**
+ * Builds a block DOM Element from a two dimensional array
+ * @param {string} blockName name of the block
+ * @param {any} content two dimensional array or string or object of content
+ */
+function buildBlock(blockName, content) {
+  const table = Array.isArray(content) ? content : [[content]];
+  const blockEl = document.createElement('div');
+
+  blockEl.classList.add(blockName);
+  table.forEach((row) => {
+    const rowEl = document.createElement('div');
+    row.forEach((col) => {
+      const colEl = document.createElement('div');
+      if (typeof col === 'string') {
+        colEl.innerHTML = col;
+      } else {
+        colEl.appendChild(col);
+      }
+      rowEl.appendChild(colEl);
+    });
+    blockEl.appendChild(rowEl);
+  });
+  return (blockEl);
+}
+
+function getImageCaption(picture) {
+  // Check if the parent element has a caption
+  const parentEl = picture.parentNode;
+  const 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 '';
+  const firstChildEl = parentSiblingEl.firstChild;
+  if (firstChildEl?.tagName === 'EM') return firstChildEl;
+  return '';
+}
+
+async function buildArticleHeader(el) {
+  const { getMetadata, getConfig } = await import(`${LIBS}/utils/utils.js`);
+  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 author = getMetadata('author') || 'Adobe Communications Team';
+  const { locale } = getConfig();
+  const authorURL = getMetadata('author-url') || (author ? `${locale.contentRoot}/authors/${author.replace(/[^0-9a-z]/gi, '-').toLowerCase()}` : null);
+  const publicationDate = getMetadata('publication-date');
+  const articleHeaderBlockEl = buildBlock('article-header', [
+    ['<p></p>'],
+    [h1],
+    [`<p><span ${authorURL ? `data-author-page="${authorURL}"` : ''}>${author}</span></p>
+      <p>${publicationDate}</p>`],
+    [figure],
+  ]);
+  div.append(articleHeaderBlockEl);
+  el.prepend(div);
+}
+
+export async function buildAutoBlocks() {
+  const { getMetadata } = await import(`${LIBS}/utils/utils.js`);
+  const mainEl = document.querySelector('main');
+  try {
+    if (getMetadata('publication-date') && !mainEl.querySelector('.article-header')) {
+      await buildArticleHeader(mainEl);
+    }
+  } catch (error) {
+    window.lana?.log(`Auto Blocking failed: ${error}`, { tags: 'autoBlock' });
+  }
+}
 
 // Add project-wide style path here.
 const STYLES = '/blog/styles/styles.css';
 
-// Use '/libs' if your live site maps '/libs' to milo's origin.
-const LIBS = '/libs';
-
 // Add any config options.
 const CONFIG = {
   imsClientId: 'bacom',
@@ -125,6 +205,7 @@ const CONFIG = {
   codeRoot: '/blog',
   taxonomyRoot: '/tags',
   links: 'on',
+  dynamicNavKey: 'bacom',
   stageDomainsMap: { 'business.stage.adobe.com': { 'business.adobe.com': 'origin' } },
 };
 
@@ -139,11 +220,8 @@ const CONFIG = {
  * Edit below at your own risk
  * ------------------------------------------------------------
  */
-
-const miloLibs = setLibs(LIBS);
-
 (function loadStyles() {
-  const paths = [`${miloLibs}/styles/styles.css`];
+  const paths = [`${LIBS}/styles/styles.css`];
   if (STYLES) { paths.push(STYLES); }
   paths.forEach((path) => {
     const link = document.createElement('link');
@@ -154,9 +232,9 @@ const miloLibs = setLibs(LIBS);
 }());
 
 (async function loadPage() {
-  const { loadArea, setConfig, loadLana } = await import(`${miloLibs}/utils/utils.js`);
+  const { loadArea, setConfig, loadLana } = await import(`${LIBS}/utils/utils.js`);
 
-  setConfig({ ...CONFIG, miloLibs });
+  setConfig({ ...CONFIG, miloLibs: LIBS });
   loadLana({ clientId: 'bacom-blog', tags: 'default' });
   await buildAutoBlocks();
   await loadArea();

head.html

@@ -1,5 +1,26 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <script src="/blog/scripts/fallback.js" nomodule></script>
+<script>
+  const libs = (() => {
+    const { hostname, search } = window.location;
+    if (!['.hlx.', '.stage.', 'local'].some((i) => hostname.includes(i))) return '/libs';
+    const branch = new URLSearchParams(search).get('milolibs') || 'main';
+    if (branch === 'local') return 'http://localhost:6456/libs';
+    return branch.includes('--') ? `https://${branch}.hlx.live/libs` : `https://${branch}--milo--adobecom.hlx.live/libs`;
+  })();
+
+  const miloStyles = document.createElement('link');
+  const miloUtils = document.createElement('link');
+
+  miloStyles.setAttribute('as', 'style');
+  miloStyles.setAttribute('href', `${libs}/styles/styles.css`);
+  miloUtils.setAttribute('as', 'script');
+  miloUtils.setAttribute('crossorigin', 'true');
+  miloUtils.setAttribute('href', `${libs}/utils/utils.js`);
+
+  [miloStyles, miloUtils].forEach((tag) => tag.setAttribute('rel', 'preload'));
+  document.head.append(miloStyles, miloUtils);
+</script>
 <script src="/blog/scripts/scripts.js" type="module"></script>
 <style>body { display: none; }</style>
 <link rel="icon" href="data:,">

test/scripts/utils.test.js

@@ -1,11 +1,11 @@
 import { expect } from '@esm-bundle/chai';
 import { readFile } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import { setLibs, buildAutoBlocks } from '../../blog/scripts/utils.js';
+import { setLibs, buildAutoBlocks } from '../../blog/scripts/scripts.js';
 
 describe('Libs', () => {
   it('Default Libs', () => {
-    const libs = setLibs('/libs');
+    const libs = setLibs(window.location);
     expect(libs).to.equal('https://main--milo--adobecom.hlx.live/libs');
   });
 
@@ -14,7 +14,7 @@ describe('Libs', () => {
       hostname: 'business.adobe.com',
       search: '?milolibs=foo',
     };
-    const libs = setLibs('/libs', location);
+    const libs = setLibs(location);
     expect(libs).to.equal('/libs');
   });
 
@@ -23,7 +23,7 @@ describe('Libs', () => {
       hostname: 'localhost',
       search: '?milolibs=foo',
     };
-    const libs = setLibs('/libs', location);
+    const libs = setLibs(location);
     expect(libs).to.equal('https://foo--milo--adobecom.hlx.live/libs');
   });
 
@@ -32,7 +32,7 @@ describe('Libs', () => {
       hostname: 'localhost',
       search: '?milolibs=local',
     };
-    const libs = setLibs('/libs', location);
+    const libs = setLibs(location);
     expect(libs).to.equal('http://localhost:6456/libs');
   });
 
@@ -41,7 +41,7 @@ describe('Libs', () => {
       hostname: 'localhost',
       search: '?milolibs=awesome--milo--forkedowner',
     };
-    const libs = setLibs('/libs', location);
+    const libs = setLibs(location);
     expect(libs).to.equal('https://awesome--milo--forkedowner.hlx.live/libs');
   });
 });
@@ -53,7 +53,7 @@ window.lana = { log: () => {} };
 
 describe('Auto Blocks', () => {
   before(() => {
-    setLibs('/test/scripts/mocks', { hostname: 'none', search: '' });
+    setLibs({ hostname: 'none', search: '' });
     document.head.innerHTML = metadata;
   });