Merge branch 'skms-release-test' into skms-integration

.eslintrc.js

@@ -12,7 +12,7 @@ module.exports = {
   rules: {
     'chai-friendly/no-unused-expressions': 2,
     'import/extensions': ['error', { js: 'always' }],
-    'import/no-cycle': 1,
+    'import/no-cycle': 0,
     'linebreak-style': ['error', 'unix'],
     'no-await-in-loop': 0,
     'no-param-reassign': [2, { props: false }],

CODEOWNERS

@@ -5,6 +5,8 @@
 # Milo Core (alphabetical order)
 /fstab.yaml @adobecom/admins
 /libs/features/ @adobecom/admins
+/libs/features/seotech/ @hparra
+/libs/features/title-append/ @hparra
 /libs/martech/ @adobecom/admins
 /libs/scripts/ @adobecom/admins
 /libs/utils/ @adobecom/admins
@@ -41,5 +43,3 @@
 # Milo Tools (alphabetical order)
 /tools/caas-import/ @chrischrischris
 /tools/send-to-caas/ @chrischrischris
-
-

libs/blocks/columns/columns.css

@@ -35,23 +35,23 @@
 }
 
 /* Table */
-.columns.table {
+.columns.columns-table {
   font-size: 14px;
 }
 
-.columns.table > .row {
+.columns.columns-table > .row {
   margin-bottom: 0;
   padding: var(--spacing-xs) 0;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   border-bottom: 1px solid #D5D5D5;
   align-items: center;
 }
 
-.columns.table > .row:hover {
+.columns.columns-table > .row:hover {
   background-color: #0000000f;
 }
 
-.columns.table > .row:first-child {
+.columns.columns-table > .row:first-child {
   text-transform: uppercase;
   font-size: 11px;
   font-weight: bold;
@@ -60,7 +60,7 @@
 
 /* For desktop only */
 @media (min-width:600px) {
-  .columns.table > .row {
+  .columns.columns-table > .row {
     padding: var(--spacing-xs);
   }
 }

libs/blocks/columns/columns.js

@@ -7,4 +7,8 @@ export default function init(el) {
       col.className = `col col-${cdx + 1}`;
     });
   });
+  if (el.classList.contains('table')) {
+    el.classList.add('columns-table');
+    el.classList.remove('table');
+  }
 }

libs/blocks/global-navigation/utilities/menu/menu.css

@@ -76,7 +76,6 @@
   display: none;
 }
 
-/* Start mobile styles */
 @media (min-width: 900px) {
   .feds-menu-content {
     display: flex;
@@ -89,6 +88,10 @@
     padding: 12px 0;
   }
 
+  .feds-menu-section + .feds-menu-section {
+    margin-top: 12px;
+  }
+
   .feds-menu-headline {
     position: static;
     margin: 0 32px;

libs/blocks/section-metadata/section-metadata.js

@@ -1,35 +1,34 @@
-function handleBackground(div, section) {
-  const pic = div.background.content.querySelector('picture');
-  if (pic) {
-    section.classList.add('has-background');
-    pic.classList.add('section-background');
-    handleFocalpoint(pic, div.background.content);
-    section.insertAdjacentElement('afterbegin', pic);
-  } else {
-    const color = div.background.content.textContent;
-    if (color) {
-      section.style.background = color;
-    }
-  }
-}
-
 export function handleFocalpoint(pic, child, removeChild) {
   const image = pic.querySelector('img');
   if (!child || !image) return;
   let text = '';
   if (child.childElementCount === 2) {
     const dataElement = child.querySelectorAll('p')[1];
     text = dataElement?.textContent;
-    removeChild ? dataElement?.remove() : '';
+    if (removeChild) dataElement?.remove();
   } else if (child.textContent) {
     text = child.textContent;
     const childData = child.childNodes;
-    removeChild ? childData.forEach((c) => c.nodeType === Node.TEXT_NODE && c.remove()) : '';
+    if (removeChild) childData.forEach((c) => c.nodeType === Node.TEXT_NODE && c.remove());
   }
   const directions = text.trim().toLowerCase().split(',');
   const [x, y = ''] = directions;
   image.style.objectPosition = `${x} ${y}`;
 }
+function handleBackground(div, section) {
+  const pic = div.background.content?.querySelector('picture');
+  if (pic) {
+    section.classList.add('has-background');
+    pic.classList.add('section-background');
+    handleFocalpoint(pic, div.background.content);
+    section.insertAdjacentElement('afterbegin', pic);
+  } else {
+    const color = div.background.content?.textContent;
+    if (color) {
+      section.style.background = color;
+    }
+  }
+}
 
 function handleTopHeight(section) {
   const headerHeight = document.querySelector('header').offsetHeight;
@@ -39,10 +38,12 @@ async function handleStickySection(sticky, section) {
   const main = document.querySelector('main');
   switch (sticky) {
     case 'sticky-top':
+    {
       const { debounce } = await import('../../utils/action.js');
       window.addEventListener('resize', debounce(() => handleTopHeight(section)));
       main.prepend(section);
       break;
+    }
     case 'sticky-bottom':
       main.append(section);
       break;

libs/features/personalization/add-preview-to-config.js

@@ -1,14 +1,15 @@
-export default async function addPreviewToConfig(
-  PAGE_URL,
-  utils,
-  persManifests,
+import { getConfig, updateConfig } from '../../utils/utils.js';
+
+export default async function addPreviewToConfig({
+  pageUrl,
   persEnabled,
-  targetEnabled,
+  persManifests,
   previewPage,
-) {
-  const { mep: mepOverride, mepHighlight, mepButton } = Object.fromEntries(PAGE_URL.searchParams);
-  const config = utils.updateConfig({
-    ...utils.getConfig(),
+  targetEnabled,
+}) {
+  const { mep: mepOverride, mepHighlight, mepButton } = Object.fromEntries(pageUrl.searchParams);
+  const config = updateConfig({
+    ...getConfig(),
     mep: {
       preview: (mepButton !== 'off' && (mepOverride !== undefined || (previewPage && (persEnabled || targetEnabled)))),
       override: mepOverride ? decodeURIComponent(mepOverride) : '',
@@ -24,7 +25,7 @@ export default async function addPreviewToConfig(
 
   if (config.mep.preview && !targetEnabled && !persManifests.length) {
     import('./preview.js')
-      .then(({ default: decoratePreviewMode }) => decoratePreviewMode([], utils));
+      .then(({ default: decoratePreviewMode }) => decoratePreviewMode([]));
   }
   return persManifests;
 }

libs/features/personalization/manifest-utils.js

@@ -1,13 +1,15 @@
+import { getConfig, loadLink } from '../../utils/utils.js';
+
 export const appendJsonExt = (path) => (path.endsWith('.json') ? path : `${path}.json`);
 
-export const normalizePath = (p, utils) => {
+export const normalizePath = (p) => {
   let path = p;
 
   if (!path.includes('/')) {
     return path;
   }
 
-  const config = utils.getConfig();
+  const config = getConfig();
 
   if (path.startsWith(config.codeRoot) || path.startsWith(`https://${config.productionDomain}`)) {
     try {
@@ -19,7 +21,7 @@ export const normalizePath = (p, utils) => {
   return path;
 };
 
-export const preloadManifests = ({ targetManifests = [], persManifests = [] }, utils) => {
+export const preloadManifests = ({ targetManifests = [], persManifests = [] }) => {
   let manifests = targetManifests;
 
   manifests = manifests.concat(
@@ -28,8 +30,8 @@ export const preloadManifests = ({ targetManifests = [], persManifests = [] }, u
 
   for (const manifest of manifests) {
     if (!manifest.manifestData && manifest.manifestPath) {
-      manifest.manifestPath = normalizePath(manifest.manifestPath, utils);
-      utils.loadLink(
+      manifest.manifestPath = normalizePath(manifest.manifestPath);
+      loadLink(
         manifest.manifestPath,
         { as: 'fetch', crossorigin: 'anonymous', rel: 'preload' },
       );

libs/features/personalization/personalization.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-let utils;
+import { createTag, getConfig, loadLink, loadScript, updateConfig } from '../../utils/utils.js';
 
 const CLASS_EL_DELETE = 'p13n-deleted';
 const CLASS_EL_REPLACE = 'p13n-replaced';
@@ -33,10 +33,10 @@ const DATA_TYPE = {
 };
 
 const createFrag = (url, manifestId) => {
-  const a = utils.createTag('a', { href: url }, url);
+  const a = createTag('a', { href: url }, url);
   if (manifestId) a.dataset.manifestId = manifestId;
-  const p = utils.createTag('p', undefined, a);
-  utils.loadLink(`${url}.plain.html`, { as: 'fetch', crossorigin: 'anonymous', rel: 'preload' });
+  const p = createTag('p', undefined, a);
+  loadLink(`${url}.plain.html`, { as: 'fetch', crossorigin: 'anonymous', rel: 'preload' });
   return p;
 };
 
@@ -47,7 +47,7 @@ const COMMANDS = {
   removecontent: (el, target, manifestId) => {
     if (target === 'false') return;
     if (manifestId) {
-      const div = utils.createTag('div', { 'data-removed-manifest-id': manifestId });
+      const div = createTag('div', { 'data-removed-manifest-id': manifestId });
       el.insertAdjacentElement('beforebegin', div);
     }
     el.classList.add(CLASS_EL_DELETE);
@@ -73,11 +73,14 @@ const fetchData = async (url, type = DATA_TYPE.JSON) => {
   try {
     const resp = await fetch(url);
     if (!resp.ok) {
-      throw new Error('Invalid response', resp);
+      if (resp.status === 404) {
+        throw new Error('File not found');
+      }
+      throw new Error(`Invalid response: ${resp.status} ${resp.statusText}`);
     }
     return await resp[type]();
   } catch (e) {
-    console.log(`Error loading content: ${url}`, e);
+    console.log(`Error loading content: ${url}`, e.message || e);
   }
   return null;
 };
@@ -96,7 +99,7 @@ function normalizePath(p) {
     return path;
   }
 
-  const config = utils.getConfig();
+  const config = getConfig();
 
   if (path.startsWith(config.codeRoot)
     || path.includes('.hlx.')
@@ -260,7 +263,7 @@ function parsePlaceholders(placeholders, config, selectedVariantName = '') {
 }
 
 function getPersonalizationVariant(manifestPath, variantNames = [], variantLabel = null) {
-  const config = utils.getConfig();
+  const config = getConfig();
   let manifestFound = false;
   if (config.mep?.override !== '') {
     config.mep?.override.split(',').forEach((item) => {
@@ -298,12 +301,12 @@ export async function getPersConfig(name, variantLabel, manifestData, manifestPa
   }
 
   const persData = data?.data || data?.experiences?.data || data?.experiments?.data;
-  if (!persData) return {};
+  if (!persData) return null;
   const config = parseConfig(persData);
 
   if (!config) {
     console.log('Error loading personalization config: ', name || manifestPath);
-    return {};
+    return null;
   }
 
   const selectedVariantName = getPersonalizationVariant(
@@ -322,8 +325,8 @@ export async function getPersConfig(name, variantLabel, manifestData, manifestPa
   }
 
   if (placeholders) {
-    utils.updateConfig(
-      parsePlaceholders(placeholders, utils.getConfig(), config.selectedVariantName),
+    updateConfig(
+      parsePlaceholders(placeholders, getConfig(), config.selectedVariantName),
     );
   }
 
@@ -367,7 +370,7 @@ const modifyFragment = (selectedEl, action, htmlFragment, manifestId) => {
       selectedEl.insertAdjacentElement('afterend', htmlFragment);
       break;
     case 'remove': case 'removecontent':
-      selectedEl.insertAdjacentElement('beforebegin', utils.createTag('div', { 'data-remove-manifest-id': manifestId }));
+      selectedEl.insertAdjacentElement('beforebegin', createTag('div', { 'data-remove-manifest-id': manifestId }));
       selectedEl.remove();
       break;
     default:
@@ -416,6 +419,8 @@ export async function runPersonalization(info, config) {
 
   const experiment = await getPersConfig(name, variantLabel, manifestData, manifestPath);
 
+  if (!experiment) return null;
+
   const { selectedVariant } = experiment;
   if (!selectedVariant) return {};
   if (selectedVariant === 'no changes') {
@@ -428,7 +433,7 @@ export async function runPersonalization(info, config) {
     document.querySelector('main').dataset.manifestId = manifestPath;
   }
 
-  selectedVariant.insertscript?.map((script) => utils.loadScript(script.val));
+  selectedVariant.insertscript?.map((script) => loadScript(script.val));
   selectedVariant.updatemetadata?.map((metadata) => setMetadata(metadata));
 
   let manifestId = experiment.manifest;
@@ -469,15 +474,11 @@ function cleanManifestList(manifests) {
   return cleanedList;
 }
 
-export async function applyPers(
-  manifests,
-  utilities,
-) {
+export async function applyPers(manifests) {
   if (!manifests?.length) return;
   const cleanedManifests = cleanManifestList(manifests);
 
-  utils = utilities;
-  const config = utils.getConfig();
+  const config = getConfig();
 
   let results = [];
   for (const manifest of cleanedManifests) {
@@ -487,7 +488,7 @@ export async function applyPers(
   deleteMarkedEls();
 
   const experiments = results.map((r) => r.experiment);
-  utils.updateConfig({
+  updateConfig({
     ...config,
     experiments,
     expBlocks: consolidateObjects(results, 'blocks'),
@@ -496,6 +497,6 @@ export async function applyPers(
 
   if (config.mep?.preview) {
     const { default: decoratePreviewMode } = await import('./preview.js');
-    decoratePreviewMode(experiments, utils);
+    decoratePreviewMode(experiments);
   }
 }