Bootstrapper script for milo feds blocks

libs/blocks/fragment/fragment.js

@@ -90,11 +90,16 @@ export default async function init(a) {
   }
 
   const { customFetch } = await import('../../utils/helpers.js');
-  const resp = await customFetch({ resource: `${a.href}.plain.html`, withCacheRules: true })
+  let resourcePath = a.href;
+  if (a.href.includes('/federal/')) {
+    const { getFederatedUrl } = await import('../../utils/federated.js');
+    resourcePath = getFederatedUrl(a.href);
+  }
+  const resp = await customFetch({ resource: `${resourcePath}.plain.html`, withCacheRules: true })
     .catch(() => ({}));
 
   if (!resp?.ok) {
-    window.lana?.log(`Could not get fragment: ${a.href}.plain.html`);
+    window.lana?.log(`Could not get fragment: ${resourcePath}.plain.html`);
     return;
   }
 
@@ -106,7 +111,7 @@ export default async function init(a) {
   const sections = doc.querySelectorAll('body > div');
 
   if (!sections.length) {
-    window.lana?.log(`Could not make fragment: ${a.href}.plain.html`);
+    window.lana?.log(`Could not make fragment: ${resourcePath}.plain.html`);
     return;
   }
 

libs/blocks/global-footer/global-footer.js

@@ -5,6 +5,7 @@ import {
   getMetadata,
   getConfig,
   loadBlock,
+  localizeLink,
 } from '../../utils/utils.js';
 
 import {
@@ -258,6 +259,7 @@ class Footer {
     } else {
       // No hash -> region selector expands a dropdown
       regionPickerElem.href = '#'; // reset href value to not get treated as a fragment
+      regionSelector.href = localizeLink(regionSelector.href);
       decorateAutoBlock(regionSelector); // add fragment-specific class(es)
       this.elements.regionPicker.append(regionSelector); // add fragment after regionPickerElem
       await loadBlock(regionSelector); // load fragment and replace original link

libs/navigation/bootstrapper.js

@@ -0,0 +1,22 @@
+export default async function bootstrapBlock(miloConfigs, blockConfig) {
+  const { miloLibs } = miloConfigs;
+  const { name, targetEl } = blockConfig;
+  const { getConfig, setConfig, createTag, loadLink, loadScript } = await import(`${miloLibs}/utils/utils.js`);
+  setConfig({ ...miloConfigs });
+  const { default: initBlock } = await import(`${miloLibs}/blocks/${name}/${name}.js`);
+
+  const styles = [`${miloLibs}/blocks/${name}/${name}.css`, `${miloLibs}/navigation/navigation.css`];
+  styles.forEach((url) => loadLink(url, { rel: 'stylesheet' }));
+
+  if (!document.querySelector(targetEl)) {
+    const block = createTag(targetEl, { class: name });
+    document.body[blockConfig.appendType](block);
+  }
+  initBlock(document.querySelector(targetEl));
+  if (blockConfig.targetEl === 'footer') {
+    const { loadPrivacy } = await import(`${miloLibs}/scripts/delayed.js`);
+    setTimeout(() => {
+      loadPrivacy(getConfig, loadScript);
+    }, blockConfig.delay);
+  }
+}

libs/navigation/navigation.css

@@ -0,0 +1,21 @@
+ /* Extracting the essential styles required for rendering the component independently */
+ .global-footer, .dialog-modal {
+   font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
+   line-height: 27px;
+   color: #2c2c2c;
+   word-wrap: break-word;
+   -webkit-font-smoothing: antialiased;
+}
+
+.global-footer a, .dialog-modal a {
+  text-decoration: none;
+}
+
+.dialog-modal a {
+  color: #035FE6;
+}
+
+.global-footer img {
+  max-width: 100%;
+  height: auto;
+}

libs/navigation/navigation.js

@@ -0,0 +1,34 @@
+const blockConfig = {
+  footer: {
+    name: 'global-footer',
+    targetEl: 'footer',
+    appendType: 'appendChild',
+  },
+};
+
+const envMap = {
+  prod: 'https://www.adobe.com',
+  stage: 'https://www.stage.adobe.com',
+  qa: 'https://feds--milo--adobecom.hlx.page',
+};
+
+export default async function loadBlock(configs = {}) {
+  const { footer, locale, env = 'prod' } = configs;
+  const branch = new URLSearchParams(window.location.search).get('navbranch');
+  const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : envMap[env];
+
+  // Relative path can't be used, as the script will run on consumer's app
+  const { default: bootstrapBlock } = await import(`${miloLibs}/libs/navigation/bootstrapper.js`);
+  const { default: locales } = await import(`${miloLibs}/libs/utils/locales.js`);
+  const clientConfig = {
+    origin: miloLibs,
+    miloLibs: `${miloLibs}/libs`,
+    pathname: `/${locale || ''}`,
+    locales: configs.locales || locales,
+  };
+  if (footer) {
+    const { footer: { authoringPath, privacyId, privacyLoadDelay = 3000 } } = configs;
+    blockConfig.delay = privacyLoadDelay;
+    bootstrapBlock({ ...clientConfig, contentRoot: authoringPath, privacyId }, blockConfig.footer);
+  }
+}

libs/scripts/scripts.js

@@ -16,6 +16,7 @@ import {
   setConfig,
   getMetadata,
 } from '../utils/utils.js';
+import locales from '../utils/locales.js';
 
 // Production Domain
 const prodDomains = ['milo.adobe.com'];
@@ -28,106 +29,6 @@ const stageDomainsMap = {
   'news.adobe.com': 'news.stage.adobe.com',
 };
 
-const locales = {
-  '': { ietf: 'en-US', tk: 'hah7vzn.css' },
-  ae_ar: { ietf: 'ar-AE', tk: 'lpk1hwn.css', dir: 'rtl' },
-  ae_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  africa: { ietf: 'en', tk: 'hah7vzn.css' },
-  ar: { ietf: 'ar', tk: 'lpk1hwn.css', dir: 'rtl' },
-  ar_es: { ietf: 'es-AR', tk: 'hah7vzn.css' },
-  at: { ietf: 'de-AT', tk: 'hah7vzn.css' },
-  au: { ietf: 'en-AU', tk: 'hah7vzn.css' },
-  be_en: { ietf: 'en-BE', tk: 'hah7vzn.css' },
-  be_fr: { ietf: 'fr-BE', tk: 'hah7vzn.css' },
-  be_nl: { ietf: 'nl-BE', tk: 'qxw8hzm.css' },
-  bg: { ietf: 'bg-BG', tk: 'qxw8hzm.css' },
-  br: { ietf: 'pt-BR', tk: 'hah7vzn.css' },
-  ca_fr: { ietf: 'fr-CA', tk: 'hah7vzn.css' },
-  ca: { ietf: 'en-CA', tk: 'hah7vzn.css' },
-  ch_de: { ietf: 'de-CH', tk: 'hah7vzn.css' },
-  ch_fr: { ietf: 'fr-CH', tk: 'hah7vzn.css' },
-  ch_it: { ietf: 'it-CH', tk: 'hah7vzn.css' },
-  cl: { ietf: 'es-CL', tk: 'hah7vzn.css' },
-  cn: { ietf: 'zh-CN', tk: 'qxw8hzm' },
-  co: { ietf: 'es-CO', tk: 'hah7vzn.css' },
-  cr: { ietf: 'es-419', tk: 'hah7vzn.css' },
-  cy_en: { ietf: 'en-CY', tk: 'hah7vzn.css' },
-  cz: { ietf: 'cs-CZ', tk: 'qxw8hzm.css' },
-  de: { ietf: 'de-DE', tk: 'hah7vzn.css' },
-  dk: { ietf: 'da-DK', tk: 'qxw8hzm.css' },
-  ec: { ietf: 'es-419', tk: 'hah7vzn.css' },
-  ee: { ietf: 'et-EE', tk: 'qxw8hzm.css' },
-  eg_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
-  eg_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  el: { ietf: 'el', tk: 'qxw8hzm.css' },
-  es: { ietf: 'es-ES', tk: 'hah7vzn.css' },
-  fi: { ietf: 'fi-FI', tk: 'qxw8hzm.css' },
-  fr: { ietf: 'fr-FR', tk: 'hah7vzn.css' },
-  gr_el: { ietf: 'el', tk: 'qxw8hzm.css' },
-  gr_en: { ietf: 'en-GR', tk: 'hah7vzn.css' },
-  gt: { ietf: 'es-419', tk: 'hah7vzn.css' },
-  hk_en: { ietf: 'en-HK', tk: 'hah7vzn.css' },
-  hk_zh: { ietf: 'zh-HK', tk: 'jay0ecd' },
-  hu: { ietf: 'hu-HU', tk: 'qxw8hzm.css' },
-  id_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  id_id: { ietf: 'id', tk: 'qxw8hzm.css' },
-  ie: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  il_en: { ietf: 'en-IL', tk: 'hah7vzn.css' },
-  il_he: { ietf: 'he', tk: 'qxw8hzm.css', dir: 'rtl' },
-  in_hi: { ietf: 'hi', tk: 'qxw8hzm.css' },
-  in: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  it: { ietf: 'it-IT', tk: 'hah7vzn.css' },
-  jp: { ietf: 'ja-JP', tk: 'dvg6awq' },
-  kr: { ietf: 'ko-KR', tk: 'qjs5sfm' },
-  kw_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
-  kw_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  la: { ietf: 'es-LA', tk: 'hah7vzn.css' },
-  langstore: { ietf: 'en-US', tk: 'hah7vzn.css' },
-  lt: { ietf: 'lt-LT', tk: 'qxw8hzm.css' },
-  lu_de: { ietf: 'de-LU', tk: 'hah7vzn.css' },
-  lu_en: { ietf: 'en-LU', tk: 'hah7vzn.css' },
-  lu_fr: { ietf: 'fr-LU', tk: 'hah7vzn.css' },
-  lv: { ietf: 'lv-LV', tk: 'qxw8hzm.css' },
-  mena_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
-  mena_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  mt: { ietf: 'en-MT', tk: 'hah7vzn.css' },
-  mx: { ietf: 'es-MX', tk: 'hah7vzn.css' },
-  my_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  my_ms: { ietf: 'ms', tk: 'qxw8hzm.css' },
-  ng: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  nl: { ietf: 'nl-NL', tk: 'qxw8hzm.css' },
-  no: { ietf: 'no-NO', tk: 'qxw8hzm.css' },
-  nz: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  pe: { ietf: 'es-PE', tk: 'hah7vzn.css' },
-  ph_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  ph_fil: { ietf: 'fil-PH', tk: 'qxw8hzm.css' },
-  pl: { ietf: 'pl-PL', tk: 'qxw8hzm.css' },
-  pr: { ietf: 'es-419', tk: 'hah7vzn.css' },
-  pt: { ietf: 'pt-PT', tk: 'hah7vzn.css' },
-  qa_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
-  qa_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  ro: { ietf: 'ro-RO', tk: 'qxw8hzm.css' },
-  ru: { ietf: 'ru-RU', tk: 'qxw8hzm.css' },
-  sa_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
-  sa_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  se: { ietf: 'sv-SE', tk: 'qxw8hzm.css' },
-  sg: { ietf: 'en-SG', tk: 'hah7vzn.css' },
-  si: { ietf: 'sl-SI', tk: 'qxw8hzm.css' },
-  sk: { ietf: 'sk-SK', tk: 'qxw8hzm.css' },
-  th_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  th_th: { ietf: 'th', tk: 'lqo2bst.css' },
-  tr: { ietf: 'tr-TR', tk: 'qxw8hzm.css' },
-  tw: { ietf: 'zh-TW', tk: 'jay0ecd' },
-  ua: { ietf: 'uk-UA', tk: 'qxw8hzm.css' },
-  uk: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  vn_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  vn_vi: { ietf: 'vi', tk: 'qxw8hzm.css' },
-  za: { ietf: 'en-GB', tk: 'hah7vzn.css' },
-  cis_en: { ietf: 'en', tk: 'rks2kng.css' },
-  cis_ru: { ietf: 'ru', tk: 'qxw8hzm.css' },
-  sea: { ietf: 'en', tk: 'hah7vzn.css' },
-};
-
 const config = {
   geoRouting: 'on',
   fallbackRouting: 'on',

libs/utils/federated.js

@@ -10,10 +10,11 @@ export const getFederatedContentRoot = () => {
     'https://milo.adobe.com',
     'https://news.adobe.com',
   ];
-  const { allowedOrigins = [] } = getConfig();
+  const { allowedOrigins = [], origin: configOrigin } = getConfig();
   if (federatedContentRoot) return federatedContentRoot;
+  // Non milo consumers will have its origin from congig
+  const origin = configOrigin || window.location.origin;
 
-  const { origin } = window.location;
   federatedContentRoot = [...allowedOrigins, ...cdnWhitelistedOrigins].some((o) => origin.replace('.stage', '') === o)
     ? origin
     : 'https://www.adobe.com';

libs/utils/locales.js

@@ -0,0 +1,99 @@
+export default {
+  '': { ietf: 'en-US', tk: 'hah7vzn.css' },
+  ae_ar: { ietf: 'ar-AE', tk: 'lpk1hwn.css', dir: 'rtl' },
+  ae_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  africa: { ietf: 'en', tk: 'hah7vzn.css' },
+  ar: { ietf: 'ar', tk: 'lpk1hwn.css', dir: 'rtl' },
+  ar_es: { ietf: 'es-AR', tk: 'hah7vzn.css' },
+  at: { ietf: 'de-AT', tk: 'hah7vzn.css' },
+  au: { ietf: 'en-AU', tk: 'hah7vzn.css' },
+  be_en: { ietf: 'en-BE', tk: 'hah7vzn.css' },
+  be_fr: { ietf: 'fr-BE', tk: 'hah7vzn.css' },
+  be_nl: { ietf: 'nl-BE', tk: 'qxw8hzm.css' },
+  bg: { ietf: 'bg-BG', tk: 'qxw8hzm.css' },
+  br: { ietf: 'pt-BR', tk: 'hah7vzn.css' },
+  ca_fr: { ietf: 'fr-CA', tk: 'hah7vzn.css' },
+  ca: { ietf: 'en-CA', tk: 'hah7vzn.css' },
+  ch_de: { ietf: 'de-CH', tk: 'hah7vzn.css' },
+  ch_fr: { ietf: 'fr-CH', tk: 'hah7vzn.css' },
+  ch_it: { ietf: 'it-CH', tk: 'hah7vzn.css' },
+  cl: { ietf: 'es-CL', tk: 'hah7vzn.css' },
+  cn: { ietf: 'zh-CN', tk: 'qxw8hzm' },
+  co: { ietf: 'es-CO', tk: 'hah7vzn.css' },
+  cr: { ietf: 'es-419', tk: 'hah7vzn.css' },
+  cy_en: { ietf: 'en-CY', tk: 'hah7vzn.css' },
+  cz: { ietf: 'cs-CZ', tk: 'qxw8hzm.css' },
+  de: { ietf: 'de-DE', tk: 'hah7vzn.css' },
+  dk: { ietf: 'da-DK', tk: 'qxw8hzm.css' },
+  ec: { ietf: 'es-419', tk: 'hah7vzn.css' },
+  ee: { ietf: 'et-EE', tk: 'qxw8hzm.css' },
+  eg_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
+  eg_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  el: { ietf: 'el', tk: 'qxw8hzm.css' },
+  es: { ietf: 'es-ES', tk: 'hah7vzn.css' },
+  fi: { ietf: 'fi-FI', tk: 'qxw8hzm.css' },
+  fr: { ietf: 'fr-FR', tk: 'hah7vzn.css' },
+  gr_el: { ietf: 'el', tk: 'qxw8hzm.css' },
+  gr_en: { ietf: 'en-GR', tk: 'hah7vzn.css' },
+  gt: { ietf: 'es-419', tk: 'hah7vzn.css' },
+  hk_en: { ietf: 'en-HK', tk: 'hah7vzn.css' },
+  hk_zh: { ietf: 'zh-HK', tk: 'jay0ecd' },
+  hu: { ietf: 'hu-HU', tk: 'qxw8hzm.css' },
+  id_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  id_id: { ietf: 'id', tk: 'qxw8hzm.css' },
+  ie: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  il_en: { ietf: 'en-IL', tk: 'hah7vzn.css' },
+  il_he: { ietf: 'he', tk: 'qxw8hzm.css', dir: 'rtl' },
+  in_hi: { ietf: 'hi', tk: 'qxw8hzm.css' },
+  in: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  it: { ietf: 'it-IT', tk: 'hah7vzn.css' },
+  jp: { ietf: 'ja-JP', tk: 'dvg6awq' },
+  kr: { ietf: 'ko-KR', tk: 'qjs5sfm' },
+  kw_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
+  kw_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  la: { ietf: 'es-LA', tk: 'hah7vzn.css' },
+  langstore: { ietf: 'en-US', tk: 'hah7vzn.css' },
+  lt: { ietf: 'lt-LT', tk: 'qxw8hzm.css' },
+  lu_de: { ietf: 'de-LU', tk: 'hah7vzn.css' },
+  lu_en: { ietf: 'en-LU', tk: 'hah7vzn.css' },
+  lu_fr: { ietf: 'fr-LU', tk: 'hah7vzn.css' },
+  lv: { ietf: 'lv-LV', tk: 'qxw8hzm.css' },
+  mena_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
+  mena_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  mt: { ietf: 'en-MT', tk: 'hah7vzn.css' },
+  mx: { ietf: 'es-MX', tk: 'hah7vzn.css' },
+  my_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  my_ms: { ietf: 'ms', tk: 'qxw8hzm.css' },
+  ng: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  nl: { ietf: 'nl-NL', tk: 'qxw8hzm.css' },
+  no: { ietf: 'no-NO', tk: 'qxw8hzm.css' },
+  nz: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  pe: { ietf: 'es-PE', tk: 'hah7vzn.css' },
+  ph_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  ph_fil: { ietf: 'fil-PH', tk: 'qxw8hzm.css' },
+  pl: { ietf: 'pl-PL', tk: 'qxw8hzm.css' },
+  pr: { ietf: 'es-419', tk: 'hah7vzn.css' },
+  pt: { ietf: 'pt-PT', tk: 'hah7vzn.css' },
+  qa_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
+  qa_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  ro: { ietf: 'ro-RO', tk: 'qxw8hzm.css' },
+  ru: { ietf: 'ru-RU', tk: 'qxw8hzm.css' },
+  sa_ar: { ietf: 'ar', tk: 'qxw8hzm.css', dir: 'rtl' },
+  sa_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  se: { ietf: 'sv-SE', tk: 'qxw8hzm.css' },
+  sg: { ietf: 'en-SG', tk: 'hah7vzn.css' },
+  si: { ietf: 'sl-SI', tk: 'qxw8hzm.css' },
+  sk: { ietf: 'sk-SK', tk: 'qxw8hzm.css' },
+  th_en: { ietf: 'en', tk: 'hah7vzn.css' },
+  th_th: { ietf: 'th', tk: 'lqo2bst.css' },
+  tr: { ietf: 'tr-TR', tk: 'qxw8hzm.css' },
+  tw: { ietf: 'zh-TW', tk: 'jay0ecd' },
+  ua: { ietf: 'uk-UA', tk: 'qxw8hzm.css' },
+  uk: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  vn_en: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  vn_vi: { ietf: 'vi', tk: 'qxw8hzm.css' },
+  za: { ietf: 'en-GB', tk: 'hah7vzn.css' },
+  cis_en: { ietf: 'en', tk: 'rks2kng.css' },
+  cis_ru: { ietf: 'ru', tk: 'qxw8hzm.css' },
+  sea: { ietf: 'en', tk: 'hah7vzn.css' },
+};

test/blocks/fragment/mocks/body.html

@@ -6,6 +6,7 @@
 <a class="parent-link" href="/test/blocks/fragment/mocks/fragments/fragment">Fragment</a>
 <a class="frag-a" href="/test/blocks/fragment/mocks/fragments/frag-a">Fragment</a>
 <a class="frag-image" href="/test/blocks/fragment/mocks/fragments/frag-image">Fragment</a>
+<a class="frag-a" href="/test/blocks/fragment/mocks/federal/fragments/frag-a">Fragment</a>
 <p class="frag-p-wrapper" test="test">
   <a class="frag-p" href="/test/blocks/fragment/mocks/fragments/frag-p">Fragment</a>
 </p>

test/blocks/fragment/mocks/federal/fragments/frag-a.plain.html

@@ -0,0 +1,4 @@
+<div>
+    <h4>Frag A, Loads Frag B</h4>
+    <a href="/test/blocks/fragment/mocks/fragments/frag-b">Frag B link</a>
+</div>

test/navigation/bootstrapper.test.js

@@ -0,0 +1,32 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import loadBlock from '../../libs/navigation/bootstrapper.js';
+
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+
+const blockConfig = {
+  name: 'global-footer',
+  targetEl: 'footer',
+  appendType: 'appendChild',
+  footer: { authoringPath: '/federal/home', privacyLoadDelay: 0 },
+};
+
+const miloConfigs = {
+  origin: 'https://feds--milo--adobecom.hlx.page',
+  miloLibs: 'https://feds--milo--adobecom.hlx.page/libs',
+  pathname: '/',
+};
+
+describe('Bootstrapper', async () => {
+  it('Renders the footer block', async () => {
+    await loadBlock(miloConfigs, blockConfig);
+    const clock = sinon.useFakeTimers({
+      toFake: ['setTimeout'],
+      shouldAdvanceTime: true,
+    });
+    clock.tick(3000);
+    const el = document.getElementsByTagName('footer');
+    expect(el).to.exist;
+  });
+});