Restructure tag page - change the logic of tag rendering (#576)

hlxsites · Apr 14, 2024 · 9de0d9f · 9de0d9f
1 parent 246ce7d
commit 9de0d9f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 16 deletions.
diff --git a/404.html b/404.html
@@ -41,16 +41,6 @@
 			window.location.replace(newLoc);
     }
 
-    /**
-    * * Redirecting all tag pages
-    */
-    const tagRegex = /(.*\/healthy-thinking\/tag)\/(.+)/;
-    if (tagRegex.test(windowHref)) {
-      window.stop(); // Stop processing this page, make sure no 404 rendering is done
-      const newLoc = windowHref.replace(tagRegex, "$1" + "?feed-tags=" + "$2");
-      window.location.replace(newLoc);
-    }
-
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">

diff --git a/blocks/breadcrumb/breadcrumb.js b/blocks/breadcrumb/breadcrumb.js
@@ -7,6 +7,7 @@ import {
   setMetaTag,
 } from '../../scripts/scripts.js';
 import { fetchPlaceholders, getMetadata } from '../../scripts/lib-franklin.js';
+import { getTagName } from '../../scripts/blocks-utils.js';
 
 function prependSlash(path) {
   return path.startsWith('/') ? path : `/${path}`;
@@ -28,9 +29,7 @@ async function getTagPageTitle() {
   const type = getMetadata('type') || '';
   const locale = getLanguage();
   const tags = await fetchTagsOrCategories([], 'tags', type, locale);
-  const queryString = window.location.search;
-  const queryParams = new URLSearchParams(queryString);
-  const feedTags = queryParams.get('feed-tags');
+  const feedTags = getTagName();
   let tagPageTitle = '';
   if (feedTags && tags.length) {
     const tag = tags.find((tagItem) => (feedTags.trim() === tagItem.id));

diff --git a/blocks/feed/feed.js b/blocks/feed/feed.js
@@ -3,6 +3,7 @@ import {
   getFormattedDate, getMetadata, loadBlock, readBlockConfig,
 } from '../../scripts/lib-franklin.js';
 import { queryIndex, getLanguage, fetchTagsOrCategories } from '../../scripts/scripts.js';
+import { getTagName } from '../../scripts/blocks-utils.js';
 
 // Result parsers parse the query results into a format that can be used by the block builder for
 // the specific block types
@@ -140,10 +141,10 @@ export default async function decorate(block) {
 
   // Parse the query string into an object
   const queryParams = new URLSearchParams(queryString);
-
+  const tagName = getTagName();
   const type = (blockCfg.type ?? getMetadataNullable('type') ?? queryParams.get('feed-type'))?.trim().toLowerCase();
   const category = (blockCfg.category ?? getMetadataNullable('category' ?? queryParams.get('feed-category')))?.trim().toLowerCase();
-  const tags = (blockCfg.tags ?? getMetadataNullable('tags') ?? queryParams.get('feed-tags'))?.trim().toLowerCase();
+  const tags = (blockCfg.tags ?? getMetadataNullable('tags') ?? tagName)?.trim().toLowerCase();
   const omitPageTypes = (blockCfg['omit-page-types'] ?? getMetadataNullable('omit-page-types')
     ?? queryParams.get('feed-omit-page-types'))?.trim().toLowerCase();
   // eslint-disable-next-line prefer-arrow-callback

diff --git a/blocks/tags/tags.js b/blocks/tags/tags.js
@@ -24,7 +24,7 @@ export default async function decorate(block) {
       .join('-');
     tags.forEach((tag) => {
       const prefix = locale === 'en' ? '/' : `/${locale}/`;
-      const hrefVal = `${prefix}${typeKey}/tag?feed-tags=${tag.id}`;
+      const hrefVal = `${prefix}${typeKey}/tag/${tag.id}`;
       const a = document.createElement('a');
       a.href = hrefVal || '#';
       a.textContent = tag.name || tag.id;

diff --git a/scripts/blocks-utils.js b/scripts/blocks-utils.js
@@ -95,3 +95,14 @@ export function addTabs(tabs, block) {
     }
   });
 }
+
+export function getTagName() {
+  const urlPathName = window.location.pathname;
+  let tagName = '';
+  const tagRegex = /(^\/healthy-thinking\/tag)\/(.+)/;
+  if (tagRegex.test(urlPathName)) {
+    const pathArr = urlPathName.replace(tagRegex, '$2');
+    tagName = pathArr.endsWith('/') ? pathArr.slice(0, -1) : pathArr;
+  }
+  return tagName;
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -631,7 +631,21 @@ function loadDelayed() {
   // load anything that can be postponed to the latest here
 }
 
+/**
+ * Redirect tag page with url parameter to
+ * tag page in url path.
+ */
+function redirectTagPage() {
+  const windowHref = window.location.href;
+  const tagRegex = /(.*\/healthy-thinking\/tag)\?feed-tags=(.*)/;
+  if (tagRegex.test(windowHref)) {
+    const newLoc = windowHref.replace(tagRegex, '$1/$2');
+    window.location.replace(newLoc);
+  }
+}
+
 async function loadPage() {
+  redirectTagPage();
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();