[UE] fix issues with the Authoring experience

blocks/breadcrumb/breadcrumb.js

@@ -7,7 +7,9 @@ const TEMPLATE_PATH_PATTERN = /\/us\/en\/[^/]+\/topics-template/;
 
 async function getItems() {
   // get the breadcrumb items from the page path, only after '/us/en'
-  const path = window.location.pathname;
+  let path = window.location.pathname;
+  if (path.startsWith('/content/danaher/ls')) path = path.substring(19);
+  if (path.endsWith('.html')) path = path.substring(0, path.length - 5);
   const pathParts = path.split('/');
   const itemPaths = pathParts.length > 2 ? pathParts.slice(3).map((_, i) => pathParts.slice(0, i + 4).join('/')) : [];
   const articles = await ffetch('/us/en/article-index.json')
@@ -18,7 +20,8 @@ async function getItems() {
   return itemPaths.map((itemPath) => {
     // get the title from the article, based on its path
     const article = articles.find((entry) => entry.path === itemPath);
-    const title = (article && article.navTitle !== '') ? article.navTitle : itemPath.split('/').pop();
+    let title = (article && article.navTitle !== '') ? article.navTitle : itemPath.split('/').pop();
+    title = title.charAt(0).toUpperCase() + title.slice(1);
     return {
       title,
       href: `${itemPath}.html`,

blocks/related-articles/related-articles.js

@@ -8,7 +8,7 @@ import createCard from '../card-list/articleCard.js';
 export default async function decorate(block) {
   const articleType = getMetadata('template').toLowerCase();
   const articleTopics = getMetadata('topics')?.toLowerCase();
-  const url = new URL(getMetadata('og:url'));
+  const url = new URL(getMetadata('og:url'), window.location.origin);
   let articles = await ffetch('/us/en/article-index.json')
     .filter(({ type }) => type.toLowerCase() === articleType)
     .filter(({ topics }) => topics.toLowerCase() === articleTopics)

blocks/tags-list/tags-list.js

@@ -9,7 +9,7 @@ import { createFilters } from '../card-list/card-list.js';
 export default async function decorate(block) {
   const articleType = getMetadata('template').toLowerCase();
   const articleTopics = getMetadata('topics')?.toLowerCase();
-  const url = new URL(getMetadata('og:url'));
+  const url = new URL(getMetadata('og:url'), window.location.origin);
   let articles = await ffetch('/us/en/article-index.json')
     .filter(({ type }) => type.toLowerCase() === articleType)
     .filter(({ topics }) => topics.toLowerCase() === articleTopics)

component-models.json

@@ -28,7 +28,6 @@
             "component": "aem-tag",
             "valueType": "string",
             "name": "cq:tags",
-            "multi": true,
             "label": "AEM Tag Picker"
           },
           {
@@ -71,7 +70,7 @@
           },
           {
             "component": "date-time",
-            "valueType": "date",
+            "valueType": "date-time",
             "name": "publishDate",
             "label": "Publish Date",
             "placeholder": "YYYY-MM-DD",
@@ -83,6 +82,13 @@
             "valueType": "string",
             "name": "navTitle",
             "label": "Navigation Title"
+          },
+          {
+            "component": "text",
+            "valueType": "string",
+            "name": "template",
+            "label": "Template (temporary)",
+            "description": "Until we get the metadata spreadsheet fixed"
           }
         ]
       }

paths.json

@@ -8,7 +8,10 @@
     "/content/dam/danaher/franklin/metadata.json:/metadata.json",
     "/content/dam/danaher/franklin/metadata-products.json:/metadata-products.json",
     "/content/dam/danaher/franklin/metadata-articles.json:/metadata-articles.json",
-    "/content/dam/danaher/franklin/redirects.json:/redirects.json"
+    "/content/dam/danaher/franklin/redirects.json:/redirects.json",
+    "/content/danaher.resource/us/en/article-index.json:/us/en/article-index.json",
+    "/content/danaher.resource/fragments/header/master.plain.html:/fragments/header/master.plain.html",
+    "/content/danaher.resource/fragments/footer.html:/fragments/footer.html"
   ],
   "includes": [
     "/content/danaher/ls/us/en",

scripts/lib-franklin-dev.js

@@ -862,7 +862,12 @@ export function setup() {
   const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
   if (scriptEl) {
     try {
-      [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');
+      const scriptURL = new URL(scriptEl.src, window.location);
+      if (scriptURL.host === window.location.host) {
+        [window.hlx.codeBasePath] = scriptURL.pathname.split('/scripts/scripts.js');
+      } else {
+        [window.hlx.codeBasePath] = scriptURL.href.split('/scripts/scripts.js');
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);

scripts/scripts-dev.js

@@ -49,6 +49,40 @@ const TEMPLATE_LIST = {
 };
 TEMPLATE_LIST.news = TEMPLATE_LIST.blog;
 
+/**
+ * Moves all the attributes from a given elmenet to another given element.
+ * @param {Element} from the element to copy attributes from
+ * @param {Element} to the element to copy attributes to
+ */
+export function moveAttributes(from, to, attributes) {
+  if (!attributes) {
+    // eslint-disable-next-line no-param-reassign
+    attributes = [...from.attributes].map(({ nodeName }) => nodeName);
+  }
+  attributes.forEach((attr) => {
+    const value = from.getAttribute(attr);
+    if (value) {
+      to.setAttribute(attr, value);
+      from.removeAttribute(attr);
+    }
+  });
+}
+
+/**
+ * Move instrumentation attributes from a given element to another given element.
+ * @param {Element} from the element to copy attributes from
+ * @param {Element} to the element to copy attributes to
+ */
+export function moveInstrumentation(from, to) {
+  moveAttributes(
+    from,
+    to,
+    [...from.attributes]
+      .map(({ nodeName }) => nodeName)
+      .filter((attr) => attr.startsWith('data-aue-') || attr.startsWith('data-richtext-')),
+  );
+}
+
 /**
  * Get the Image URL from Scene7 and Optimize the picture
  * @param {string} imageUrl

styles/styles.css

@@ -455,6 +455,8 @@ video {
 body {
   margin: 0px;
   display: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   line-height: 1.625;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

styles/tailwind.css

@@ -18,7 +18,7 @@
 /* stylelint-disable selector-type-no-unknown */
 @layer base {
   body {
-    @apply m-0 leading-relaxed hidden antialiased;
+    @apply m-0 leading-relaxed hidden antialiased bg-white;
   }
 
   main img {

templates/blog/blog.js

@@ -3,6 +3,14 @@ import { buildArticleSchema } from '../../scripts/schema.js';
 import {
   div,
 } from '../../scripts/dom-builder.js';
+// eslint-disable-next-line import/named
+import { moveInstrumentation } from '../../scripts/scripts.js';
+
+function moveImageInstrumentation(picture) {
+  if (picture.tagName === 'PICTURE') {
+    moveInstrumentation(picture.parentElement, picture.querySelector('img'));
+  }
+}
 
 export default async function buildAutoBlocks() {
   const main = document.querySelector('main');
@@ -32,9 +40,11 @@ export default async function buildAutoBlocks() {
     section.removeChild(blogHeroP2);
     const divEl = div();
     divEl.append(blogH1, blogHeroP1);
+    moveImageInstrumentation(blogHeroImage);
     columnElements = [[divEl, blogHeroImage]];
   } else if (blogHeroP1) {
     blogHeroImage = blogHeroP1.querySelector(':scope > picture, :scope > img');
+    moveImageInstrumentation(blogHeroImage);
     section.removeChild(blogHeroP1);
     columnElements = [[blogHeroImage, blogH1]];
   } else {