MWPW-135319 Init Tags Block

scripts/scripts.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { setLibs } from './utils.js';
+import { setLibs, buildAutoBlocks } from './utils.js';
 
 // Add project-wide style path here.
 const STYLES = '/styles/styles.css';
@@ -109,6 +109,7 @@ const CONFIG = {
   // geoRouting: 'on',
   productionDomain: 'business.adobe.com',
   contentRoot: '/blog',
+  taxonomyRoot: '/tags',
 };
 
 // Load LCP image immediately
@@ -140,5 +141,6 @@ const miloLibs = setLibs(LIBS);
   const { loadArea, setConfig } = await import(`${miloLibs}/utils/utils.js`);
 
   setConfig({ ...CONFIG, miloLibs });
+  await buildAutoBlocks();
   await loadArea();
 }());

scripts/utils.js

@@ -34,3 +34,65 @@ export const [setLibs, getLibs] = (() => {
  * Edit above at your own risk.
  * ------------------------------------------------------------
  */
+
+/**
+ * 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');
+      const vals = col.elems || [col];
+      vals.forEach((val) => {
+        if (val) {
+          if (typeof val === 'string') {
+            colEl.innerHTML += val;
+          } else {
+            colEl.appendChild(val);
+          }
+        }
+      });
+      rowEl.appendChild(colEl);
+    });
+    blockEl.appendChild(rowEl);
+  });
+  return (blockEl);
+}
+
+function buildTagsBlock() {
+  const tagsArray = [...document.head.querySelectorAll('meta[property="article:tag"]')].map((el) => el.content) || [];
+  const tagsBlock = buildBlock('tags', tagsArray.join(', '));
+  const main = document.querySelector('main');
+  const recBlock = main.querySelector('.recommended-articles');
+  if (recBlock) {
+    // Put tags block before recommended articles block
+    if (recBlock.parentElement.childElementCount === 1) {
+      recBlock.parentElement.previousElementSibling.append(tagsBlock);
+    } else {
+      recBlock.before(tagsBlock);
+    }
+  } else {
+    main.lastElementChild.append(tagsBlock);
+  }
+}
+
+export async function buildAutoBlocks() {
+  const miloLibs = getLibs();
+  const { getMetadata } = await import(`${miloLibs}/utils/utils.js`);
+  const mainEl = document.querySelector('main');
+  try {
+    if (getMetadata('publication-date') && !mainEl.querySelector('.article-header')) {
+      buildTagsBlock(mainEl);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Auto Blocking failed', error);
+  }
+}

styles/styles.css

@@ -98,7 +98,8 @@ main p picture img {
     font-size: var(--body-font-size-l);
   }
 
-  main .section .content {
+  main .section .content,
+  main .section .tags {
     max-width: var(--body-max-width);
     margin-left: auto;
     margin-right: auto;

test/scripts/mocks/tagsBody.html

@@ -0,0 +1,36 @@
+<header></header>
+    <main>
+      <div>
+        <h1 id="connecting-external-data-sources-to-adobe-experience-manager-guides-is-now-a-breeze">Connecting external data sources to Adobe Experience Manager Guides is now a breeze</h1>
+        <p>Missing or outdated content can have a huge impact on brand reputation, customer experience, and eventually sales. According to a recent <a href="https://business.adobe.com/resources/reports/forrester-ccms-for-personalized-long-form-content.html">Forrester study</a> commissioned by Adobe, 50% of surveyed decision-makers said that incorrect or unclear content and documentation pose significant risks to organizations’ support centers. The study highlights how inefficient content creation, management, and delivery processes pose significant compliance and regulatory risks.</p>
+        <p>In the modern enterprise, product information is stored in various dispersed and at times siloed systems and databases but needs to be accessed by stakeholders from multiple departments. Getting accurate information that is up to date can be a huge challenge. Authors and content creators either depend on IT teams to source data or copy and paste information from multiple systems. They must track down what has changed, re-author information, and verify that changes are final before making them public. Images, copy, diagrams, and part numbers may be stored in different content repositories, compounding the effort and risk of errors. The smallest of changes translate into a lot of manual effort. And once content is created, maintaining it becomes an ongoing challenge.</p>
+        <h2 id="increase-productivity-by-making-your-ccms-a-content-hub">Increase productivity by making your CCMS a content hub</h2>
+        <p>There is a better way to tackle this. <a href="https://business.adobe.com/products/experience-manager/guides/aem-guides.html">Adobe Experience Manager Guides</a>, our component content management system (CCMS), now includes out-of-the-box connectors to external data sources — including product lifecycle management (PLM), product information management (PIM), master data management (MDM), ERP, SQL databases, and Jira. It connects securely to external data sources and ingests data into easily customizable templates, some of which are available out of the box, while more templates can be created as per the format or style users need. This data can then be rendered as a content chunk or a DITA topic, or a map plus a DITA topic, and then published to various outputs like PDF, <a href="https://business.adobe.com/products/experience-manager/sites/aem-sites.html">Adobe Experience Manager Sites</a>, HTML, and more. In this way, it acts as a single source of truth and a content hub allowing users to easily connect with any data source, manage content efficiently, and publish it across channels.</p>
+        <p>This makes it easier and faster than ever for content writers and documentation teams to maintain accurate, up-to-date content for customers and internal teams. They can avoid re-creating content, copying and pasting, or spending time tracking down information from a variety of locations. Instead, changes in external repositories are automatically retrieved and reflected in documentation projects, ensuring content is always up to date and ready to be published in a variety of formats and channels.</p>
+        <p>Let’s take an in-depth look into this through two use cases from two different industries.</p>
+        <h2 id="delivering-release-notes-faster-with-jira-integration">Delivering release notes faster with Jira integration</h2>
+        <p>Software and technology companies follow agile software development practices that offer good outcomes for their customers, but their documentation teams struggle to constantly update release notes and manuals. Monthly software releases leave the documentation teams scrambling, as many changes happen in the month’s final days.</p>
+        <p>With a secure connection to Jira and a customizable data template, Experience Manager Guides automatically reflects the latest features and bug fixes in the release notes project. It can ingest different types of data, such as screen captures and other supporting content, making release notes more understandable and visually interesting. Once software commits are complete, documentation teams can publish immediately to their public-facing website and customer support portal and as an article in their knowledge base.</p>
+        <p>Using this capability, one of our customers — Marco Cacciacarro, documentation systems and innovation manager at BlackBerry — empowers their team of content writers to author known and fixed issue write-ups for release notes directly in Jira tickets, which can then be pulled up into formatted DITA topics in Experience Manager Guides.</p>
+        <p>This enables them to:</p>
+        <ul>
+          <li>Conduct tech reviews with subject matter experts directly in Jira, eliminating the need to circulate PDF documents for review.</li>
+          <li>Reduce the manual effort involved in writing and formatting release notes content in DITA topics.</li>
+          <li>Improve the visibility of release notes content by making it directly visible and accessible in Jira via a dedicated “Release Notes comments” field.</li>
+          <li>Easily manage known versus fixed issues using Jira labels.</li>
+        </ul>
+        <h2 id="keeping-repair-and-maintenance-manuals-accurate-by-connecting-to-multiple-databases">Keeping repair and maintenance manuals accurate by connecting to multiple databases</h2>
+        <p>A global parts manufacturer offers tens of thousands of parts, product variants, and SKUs to its heavy machinery customers. New parts, or shortages due to supply chain issues, mean that parts lists are constantly changing. All of this impacts the repair and maintenance manuals customers rely on. It is always time-consuming and complex for them to produce product catalogs, operating procedures, or other technical content as it relies on distributed part or product information stored in disjointed systems. Documentation managers generally cut and paste data from multiple databases to update manuals, a time-consuming process.</p>
+        <p>External data connectors included with Experience Manager Guides enable documentation managers to automatically assemble part numbers, descriptions, images, specifications, and repair information from PLM, PIM, MDM, and other databases. Any update to the source database is automatically reflected in the templates mapped to the data sources. This enables documentation managers to easily publish the manuals directly to their website, PDFs, or even as printed manuals.</p>
+        <p>Using this capability, one of our customers — Ron Egle, content systems administrator from Ariel Corporation — provides an enterprise service bus that sends master data source data from their SQL database directly into their technical documentation managed within Experience Manager Guides. Before they started using this capability, whenever there was a specification change on a compressor, for example, if the Maximum Allowable Speed was increased from 1400 RPM to 1500 RPM, the data change made in the performance program database was of no consequence. Instead, the 1500 RPM data change was manually updated through a series of engineering change requests facilitated by forms and workflow approvals. The specification data was manually authored into the product manual, and the proceeding documents are updated accordingly. This process could take several weeks to accomplish and required huge attention to detail by each author. Now the enterprise service bus enables them to:</p>
+        <ul>
+          <li>Update all documentation automatically to any specification change as soon as the data is updated in the performance program.</li>
+          <li>Add update notifications and apply data governance to ensure that specification changes are properly applied in all instances.</li>
+        </ul>
+        <p>More details on the customer use cases can be found in <a href="https://youtu.be/kGD3MXQpSMM">this webinar</a>.</p>
+        <h2 id="reduce-risk-increase-content-velocity-and-elevate-customer-experience">Reduce risk, increase content velocity, and elevate customer experience</h2>
+        <p>Be it manufacturing, financial services, automotive, high tech, or other industries, with this new external data source capability in Experience Manager Guides, content and documentation leaders can elevate customer experiences, reduce risk by delivering high-quality, always accurate, up-to-date technical content and take it to market faster.</p>
+        <p><em>Rohit Bansal is a principal product marketing manager at Adobe, leading global go-to-market strategy for Adobe Experience Manager Guides. With over 14 years of experience, Rohit has led marketing for product and services firms in the B2B domain — and managed key functions like product marketing, digital marketing, thought leadership, demand generation, and partner relations. A passionate data-driven marketer, he is also a big advocate of the customer experience.</em></p>
+      </div>
+    </main>
+    <footer></footer>

test/scripts/mocks/tagsHead.html

@@ -0,0 +1,3 @@
+<meta name="publication-date" content="08-10-2023">
+<meta property="article:tag" content="Customer Intelligence">
+<meta property="article:tag" content="Customer Success">