MWPW-134968 - [Blog2Milo] Broken links on Homepage (#1101)

* MWPW-134968 - [Blog2Milo] Broken links on Homepage

- introduce a configuration called 'lang-root' in the page metadata
- append the lang-root config to the category links

* MWPW-134968 - [Blog2Milo] Broken links on Homepage

- removing the bulk performance test as it relies on the Helix Admin Service performance

* MWPW-134968 - [Blog2Milo] Broken links on Homepage

- address PR feedback
- move the utility function to its own helpers.js below /libs/utils
- rename utility function
- error handling for new URL()

libs/blocks/article-feed/article-helpers.js

@@ -1,5 +1,6 @@
 import { getConfig } from '../../utils/utils.js';
 import * as taxonomyLibrary from '../../scripts/taxonomy.js';
+import { updateLinkWithLangRoot } from '../../utils/helpers.js';
 
 /*
  *
@@ -262,7 +263,7 @@ export function getArticleTaxonomy(article) {
 export function getLinkForTopic(topic, path) {
   const titleSubs = { 'Transformation digitale': 'Transformation numérique' };
 
-  const catLink = [getTaxonomyModule()?.get(topic)].map((tax) => tax?.link ?? '#');
+  const catLink = updateLinkWithLangRoot([getTaxonomyModule()?.get(topic)].map((tax) => tax?.link ?? '#'));
 
   if (catLink === '#') {
     // eslint-disable-next-line no-console

libs/blocks/featured-article/featured-article.js

@@ -1,5 +1,6 @@
 import { getMetadata, createTag, getConfig } from '../../utils/utils.js';
 import fetchTaxonomy from '../../scripts/taxonomy.js';
+import { updateLinkWithLangRoot } from '../../utils/helpers.js';
 
 export default async function init(el) {
   const a = el.querySelector('a');
@@ -26,7 +27,7 @@ export default async function init(el) {
 
   const pic = doc.body.querySelector('picture');
   const featuredImg = createTag('div', { class: 'featured-article-card-image' }, pic);
-  const categoryLink = createTag('a', { href: categoryTaxonomy.link }, categoryTaxonomy.name);
+  const categoryLink = createTag('a', { href: updateLinkWithLangRoot(categoryTaxonomy.link) }, categoryTaxonomy.name);
   const categoryEl = createTag('div', { class: 'featured-article-card-category' }, categoryLink);
   const text = doc.body.querySelector('h1, h2, h3').textContent;
   const title = createTag('h3', null, text);

libs/blocks/recommended-articles/recommended-articles.js

@@ -1,6 +1,7 @@
 import { createTag, getMetadata, getConfig } from '../../utils/utils.js';
 import fetchTaxonomy from '../../scripts/taxonomy.js';
 import { replaceKey } from '../../features/placeholders.js';
+import { updateLinkWithLangRoot } from '../../utils/helpers.js';
 
 async function getArticleDetails(article) {
   const path = new URL(article.href).pathname;
@@ -41,7 +42,7 @@ function getDecoratedCards(articles, taxonomy) {
     const cardImage = createTag('div', { class: 'article-card-image' }, imageEl);
     const cardBody = createTag('div', { class: 'article-card-body' });
     const categoryTaxonomy = taxonomy.get(category) || 'News';
-    const categoryLink = createTag('a', { href: categoryTaxonomy.link }, categoryTaxonomy.name);
+    const categoryLink = createTag('a', { href: updateLinkWithLangRoot(categoryTaxonomy.link) }, categoryTaxonomy.name);
     const categoryEl = createTag('p', { class: 'article-card-category' }, categoryLink);
     const titleEl = createTag('h3', null, title);
     const descriptionEl = createTag('p', { class: 'article-card-description' }, description);

libs/utils/helpers.js

@@ -0,0 +1,21 @@
+import { getMetadata } from './utils.js';
+
+/**
+ * Prefixes the link with the language root defined in the metadata
+ * @param link
+ * @returns {string|*}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function updateLinkWithLangRoot(link) {
+  const langRoot = getMetadata('lang-root');
+  if (!langRoot) return link;
+  try {
+    const url = new URL(link);
+    url.pathname = `${langRoot}${url.pathname}`;
+    return url.href;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Could not update link with lang root', e);
+    return link;
+  }
+}