[Release] Stage to Main

libs/blocks/library-config/library-config.css

@@ -277,7 +277,8 @@ input.sk-library-search-input:focus {
   padding: 0 24px;
 }
 
-.sk-library li.placeholder {
+.sk-library li.placeholder,
+.sk-library li.template {
   padding: 0 12px;
 }
 
@@ -287,6 +288,22 @@ input.sk-library-search-input:focus {
   padding: 0 12px;
 }
 
+.sk-library li.template {
+  display: flex;
+  align-items: stretch;
+  justify-content: end;
+}
+
+.sk-library li.template .item-title {
+  flex: 1 1 100%;
+}
+
+.sk-library li.template button {
+  position: static;
+  height: unset;
+  width: 44px;
+}
+
 .in-page {
   display: flex;
   justify-content: center;

libs/blocks/library-config/library-config.js

@@ -7,6 +7,11 @@ async function loadBlocks(content, list, query) {
   blocks(content, list, query);
 }
 
+async function loadTemplates(content, list) {
+  const { default: templates } = await import('./lists/templates.js');
+  templates(content, list);
+}
+
 async function loadPlaceholders(content, list) {
   const { default: placeholders } = await import('./lists/placeholders.js');
   placeholders(content, list);
@@ -65,6 +70,9 @@ async function loadList(type, content, list) {
       addSearch(content, list);
       loadBlocks(content, list, query);
       break;
+    case 'templates':
+      loadTemplates(content, list);
+      break;
     case 'placeholders':
       loadPlaceholders(content, list);
       break;
@@ -122,6 +130,7 @@ async function combineLibraries(base, supplied) {
   const library = {
     assets: await fetchAssetsData(assetsPath),
     blocks: base.blocks.data,
+    templates: base.templates?.data,
     icons: base.icons?.data,
     personalization_tags: base.personalization?.data,
     placeholders: base.placeholders?.data,
@@ -135,6 +144,10 @@ async function combineLibraries(base, supplied) {
     if (supplied.placeholders.data.length > 0) {
       library.placeholders = supplied.placeholders.data;
     }
+
+    if (supplied.templates?.data.length > 0) {
+      library.templates.push(...supplied.templates.data);
+    }
   }
 
   return library;

libs/blocks/library-config/lists/blocks.js

@@ -43,20 +43,22 @@ function getContainerName(container) {
   return getAuthorName(container) || getBlockName(firstBlock);
 }
 
-function getTable(block) {
+export function getTable(block, returnDom = false) {
   const name = getBlockName(block);
   const rows = [...block.children];
   const maxCols = rows.reduce((cols, row) => (
     row.children.length > cols ? row.children.length : cols), 0);
   const table = document.createElement('table');
   table.setAttribute('border', 1);
+  table.setAttribute('style', 'width: 100%');
   const headerRow = document.createElement('tr');
   headerRow.append(createTag('th', { colspan: maxCols }, name));
   table.append(headerRow);
   rows.forEach((row) => {
     const tr = document.createElement('tr');
     [...row.children].forEach((col) => {
       const td = document.createElement('td');
+      td.setAttribute('style', `width: ${100 / row.children.length}%`);
       if (row.children.length < maxCols) {
         td.setAttribute('colspan', maxCols);
       }
@@ -65,10 +67,11 @@ function getTable(block) {
     });
     table.append(tr);
   });
+  if (returnDom) return table;
   return table.outerHTML;
 }
 
-function handleLinks(element, path) {
+export function handleLinks(element, path) {
   if (!element || !path) return;
   try {
     const url = new URL(path);
@@ -83,7 +86,7 @@ function handleLinks(element, path) {
   }
 }
 
-function decorateImages(element, path) {
+export function decorateImages(element, path) {
   if (!element || !path) return;
   try {
     const url = new URL(path);

libs/blocks/library-config/lists/templates.js

@@ -0,0 +1,76 @@
+import { createTag } from '../../../utils/utils.js';
+import createCopy from '../library-utils.js';
+import { getTable, decorateImages, handleLinks } from './blocks.js';
+
+function createSpace() {
+  const br = createTag('br');
+  return createTag('p', null, br);
+}
+
+function formatDom(aemDom, path) {
+  // Decorate Links
+  handleLinks(aemDom, path);
+
+  // Decorate Images
+  decorateImages(aemDom, path);
+
+  // Decorate Blocks
+  const divs = aemDom.querySelectorAll('main > div > div');
+  divs.forEach((div) => {
+    // Give table some space
+    div.insertAdjacentElement('afterend', createSpace());
+
+    const table = getTable(div, true);
+    div.parentElement.replaceChild(table, div);
+  });
+
+  // Decorate Sections
+  const sections = aemDom.body.querySelectorAll('main > div');
+  const formattedSections = [...sections].map((section, idx) => {
+    const fragment = new DocumentFragment();
+    if (idx > 0) {
+      const divider = createTag('p', null, '---');
+      fragment.append(divider, createSpace());
+    }
+    fragment.append(...section.querySelectorAll(':scope > *'));
+
+    return fragment;
+  });
+  const flattedDom = createTag('div');
+  flattedDom.append(...formattedSections);
+  return flattedDom;
+}
+
+async function formatTemplate(path) {
+  const resp = await fetch(path);
+  if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'errorType=info,module=sidekick-templates' });
+
+  const html = await resp.text();
+  const dom = new DOMParser().parseFromString(html, 'text/html');
+  return formatDom(dom, path);
+}
+
+export default async function loadTemplates(templates, list) {
+  templates.forEach(async (template) => {
+    const titleText = createTag('p', { class: 'item-title' }, template.name);
+    const title = createTag('li', { class: 'template' }, titleText);
+    const previewButton = createTag('button', { class: 'preview-group' }, 'Preview');
+    const copy = createTag('button', { class: 'copy' });
+    const formatted = await formatTemplate(template.path);
+
+    list.append(title);
+    title.append(previewButton, copy);
+
+    previewButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      window.open(template.path, '_templatepreview');
+    });
+
+    copy.addEventListener('click', (e) => {
+      e.target.classList.add('copied');
+      setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
+      const blob = new Blob([formatted.outerHTML], { type: 'text/html' });
+      createCopy(blob);
+    });
+  });
+}

libs/blocks/locui/locui.css

@@ -0,0 +1,8 @@
+.locui.container {
+  margin: 0 auto;
+  margin-top: 10vh;
+  max-width: 700px;
+  border-radius: 10px;
+  border: 10px solid #eee;
+  padding: 10px 30px 30px;
+}

libs/blocks/locui/locui.js

@@ -0,0 +1,16 @@
+import { createTag } from '../../utils/utils.js';
+
+export default function init(el) {
+  el.classList.add('container');
+  const heading = createTag('h2', null, 'Missing project details');
+  const paragraph = createTag('p', null, 'The project details were removed after you logged in. To resolve this:');
+  const steps = createTag('ol', null);
+  const stepList = ['Close this window or tab.', 'Open your project Excel file.', 'Click "Localize..." in Sidekick again.'];
+  stepList.forEach((step) => steps.append(createTag('li', null, step)));
+  const learnmore = createTag('a', {
+    class: 'con-button',
+    href: 'https://milo.adobe.com/docs/authoring/localization#:~:text=at%20render%20time.-,Troubleshooting,-Error%20matrix',
+    target: '_blank',
+  }, 'Learn More');
+  el.append(heading, paragraph, steps, learnmore);
+}

libs/features/personalization/personalization.js

@@ -495,10 +495,10 @@ const getVariantInfo = (line, variantNames, variants, manifestId) => {
   });
 };
 
-export function parseConfig(data, manifestId) {
+export function parseManifestVariants(data, manifestId) {
   if (!data?.length) return null;
 
-  const config = {};
+  const manifestConfig = {};
   const experiences = data.map((d) => normalizeKeys(d));
 
   try {
@@ -512,12 +512,12 @@ export function parseConfig(data, manifestId) {
 
     experiences.forEach((line) => getVariantInfo(line, variantNames, variants, manifestId));
 
-    config.variants = variants;
-    config.variantNames = variantNames;
-    return config;
+    manifestConfig.variants = variants;
+    manifestConfig.variantNames = variantNames;
+    return manifestConfig;
   } catch (e) {
     /* c8 ignore next 3 */
-    console.log('error parsing personalization config:', e, experiences);
+    console.log('error parsing personalization manifestConfig:', e, experiences);
   }
   return null;
 }
@@ -612,7 +612,7 @@ const createDefaultExperiment = (manifest) => ({
   variants: {},
 });
 
-export async function getPersConfig(info, variantOverride = false) {
+export async function getManifestConfig(info, variantOverride = false) {
   const {
     name,
     manifestData,
@@ -637,17 +637,17 @@ export async function getPersConfig(info, variantOverride = false) {
   if (!persData) return null;
 
   let manifestId = getFileName(manifestPath);
-  const globalConfig = getConfig();
-  if (!globalConfig.mep?.preview) {
+  const config = getConfig();
+  if (!config.mep?.preview) {
     manifestId = false;
   } else if (name) {
     manifestId = `${name}: ${manifestId}`;
   }
-  const config = parseConfig(persData, manifestId);
+  const manifestConfig = parseManifestVariants(persData, manifestId);
 
-  if (!config) {
+  if (!manifestConfig) {
     /* c8 ignore next 3 */
-    console.log('Error loading personalization config: ', name || manifestPath);
+    console.log('Error loading personalization manifestConfig: ', name || manifestPath);
     return null;
   }
 
@@ -661,8 +661,8 @@ export async function getPersConfig(info, variantOverride = false) {
       acc[item.key] = item.value;
       return acc;
     }, {});
-    config.manifestOverrideName = infoObj?.['manifest-override-name']?.toLowerCase();
-    config.manifestType = infoObj?.['manifest-type']?.toLowerCase();
+    manifestConfig.manifestOverrideName = infoObj?.['manifest-override-name']?.toLowerCase();
+    manifestConfig.manifestType = infoObj?.['manifest-type']?.toLowerCase();
     const executionOrder = {
       'manifest-type': 1,
       'manifest-execution-order': 1,
@@ -672,43 +672,43 @@ export async function getPersConfig(info, variantOverride = false) {
       const index = infoKeyMap[key].indexOf(infoObj[key]);
       executionOrder[key] = index > -1 ? index : 1;
     });
-    config.executionOrder = `${executionOrder['manifest-execution-order']}-${executionOrder['manifest-type']}`;
+    manifestConfig.executionOrder = `${executionOrder['manifest-execution-order']}-${executionOrder['manifest-type']}`;
   } else {
     // eslint-disable-next-line prefer-destructuring
-    config.manifestType = infoKeyMap['manifest-type'][1];
-    config.executionOrder = '1-1';
+    manifestConfig.manifestType = infoKeyMap['manifest-type'][1];
+    manifestConfig.executionOrder = '1-1';
   }
 
-  config.manifestPath = normalizePath(manifestPath);
+  manifestConfig.manifestPath = normalizePath(manifestPath);
   const selectedVariantName = await getPersonalizationVariant(
-    config.manifestPath,
-    config.variantNames,
+    manifestConfig.manifestPath,
+    manifestConfig.variantNames,
     variantLabel,
   );
 
-  if (selectedVariantName && config.variantNames.includes(selectedVariantName)) {
-    config.run = true;
-    config.selectedVariantName = selectedVariantName;
-    config.selectedVariant = config.variants[selectedVariantName];
+  if (selectedVariantName && manifestConfig.variantNames.includes(selectedVariantName)) {
+    manifestConfig.run = true;
+    manifestConfig.selectedVariantName = selectedVariantName;
+    manifestConfig.selectedVariant = manifestConfig.variants[selectedVariantName];
   } else {
     /* c8 ignore next 2 */
-    config.selectedVariantName = 'default';
-    config.selectedVariant = 'default';
+    manifestConfig.selectedVariantName = 'default';
+    manifestConfig.selectedVariant = 'default';
   }
 
   const placeholders = manifestPlaceholders || data?.placeholders?.data;
   if (placeholders) {
     updateConfig(
-      parsePlaceholders(placeholders, getConfig(), config.selectedVariantName),
+      parsePlaceholders(placeholders, getConfig(), manifestConfig.selectedVariantName),
     );
   }
 
-  config.name = name;
-  config.manifest = manifestPath;
-  config.manifestUrl = manifestUrl;
-  config.disabled = disabled;
-  config.event = event;
-  return config;
+  manifestConfig.name = name;
+  manifestConfig.manifest = manifestPath;
+  manifestConfig.manifestUrl = manifestUrl;
+  manifestConfig.disabled = disabled;
+  manifestConfig.event = event;
+  return manifestConfig;
 }
 
 export const deleteMarkedEls = (rootEl = document) => {
@@ -838,7 +838,7 @@ export async function applyPers(manifests, postLCP = false) {
     if (!manifests?.length) return;
     let experiments = manifests;
     for (let i = 0; i < experiments.length; i += 1) {
-      experiments[i] = await getPersConfig(experiments[i], config.mep?.variantOverride);
+      experiments[i] = await getManifestConfig(experiments[i], config.mep?.variantOverride);
     }
 
     experiments = cleanAndSortManifestList(experiments);

libs/scripts/scripts.js

@@ -14,6 +14,7 @@ import {
   loadArea,
   loadLana,
   setConfig,
+  getMetadata,
 } from '../utils/utils.js';
 
 // Production Domain
@@ -161,6 +162,7 @@ const eagerLoad = (img) => {
 }());
 
 (async function loadPage() {
+  if (getMetadata('template') === '404') window.SAMPLE_PAGEVIEWS_AT_RATE = 'high';
   performance.mark('loadpage');
   setConfig(config);
   loadLana({ clientId: 'milo' });