From 1d1e4a97c5e4f95f7c5be42257856f5bb1782fa2 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 5 Feb 2024 16:33:32 +0100 Subject: [PATCH 1/4] feat: add support for dynamic article topic pages --- blocks/card-list/card-list.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index cbbacb364..bc03ac3f9 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -7,8 +7,9 @@ import { toClassName } from '../../scripts/lib-franklin.js'; import createArticleCard from './articleCard.js'; import createApplicationCard from './applicationCard.js'; import createLibraryCard from './libraryCard.js'; +import { makePublicUrl } from '../../scripts/scripts.js'; -const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || ''; +const getSelectionFromUrl = () => (window.location.pathname.indexOf('topics') > -1 ? toClassName(window.location.pathname.split('/').pop()) : ''); const createPaginationLink = (page, label, current = false) => { const newUrl = new URL(window.location); @@ -77,26 +78,32 @@ const createFilters = (articles, activeTag) => { // render tag cloud const newUrl = new URL(window.location); - newUrl.searchParams.delete('tag'); newUrl.searchParams.delete('page'); + if (window.location.pathname.indexOf('topics') > -1) { + newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf('/topics/')); + } const tags = div( { class: 'flex flex-wrap gap-2 mb-4' }, a( { class: 'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold bg-d text-danaherpurple-500 bg-danaherpurple-50 hover:bg-white hover:text-danaherpurple-500 border hover:border-danaherpurple-500', - href: newUrl.toString(), + href: makePublicUrl(newUrl.toString()), }, 'View All', ), ); [...keywords].sort().forEach((keyword) => { - newUrl.searchParams.set('tag', toClassName(keyword).toLowerCase()); + if (window.location.pathname.indexOf('topics') > -1) { + newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1) + toClassName(keyword).toLowerCase(); + } else { + newUrl.pathname = `${window.location.pathname}/topics/${toClassName(keyword).toLowerCase()}`; + } const tagAnchor = a( { class: 'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold bg-d hover:bg-white hover:text-danaherpurple-500 border hover:border-danaherpurple-500', - href: newUrl.toString(), + href: makePublicUrl(newUrl.toString()), }, keyword, ); @@ -122,7 +129,7 @@ export default async function decorate(block) { .filter(({ type }) => type.toLowerCase() === articleType) .all(); let filteredArticles = articles; - const activeTagFilter = getSelectionFromUrl('tag'); + const activeTagFilter = getSelectionFromUrl(); if (activeTagFilter) { filteredArticles = articles.filter( (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1, From 0972e41f7bf9b35144963f58e04a0b2f8094d6f5 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Mon, 5 Feb 2024 17:20:42 +0100 Subject: [PATCH 2/4] fix: pagination link does not work --- blocks/card-list/card-list.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index bc03ac3f9..8a1123e5b 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -10,6 +10,7 @@ import createLibraryCard from './libraryCard.js'; import { makePublicUrl } from '../../scripts/scripts.js'; const getSelectionFromUrl = () => (window.location.pathname.indexOf('topics') > -1 ? toClassName(window.location.pathname.split('/').pop()) : ''); +const getPageFromUrl = () => toClassName(new URLSearchParams(window.location.search).get('page')) || ''; const createPaginationLink = (page, label, current = false) => { const newUrl = new URL(window.location); @@ -182,8 +183,7 @@ export default async function decorate(block) { // render cards article style } else { filteredArticles.sort((card1, card2) => card2.publishDate - card1.publishDate); - - let page = parseInt(getSelectionFromUrl('page'), 10); + let page = parseInt(getPageFromUrl(), 10); page = Number.isNaN(page) ? 1 : page; const limitPerPage = 20; const start = (page - 1) * limitPerPage; From 672162805b613f3d11e2a56c3945f787934116a2 Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Tue, 6 Feb 2024 10:38:06 +0100 Subject: [PATCH 3/4] chore: add folder mapping for news --- fstab.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/fstab.yaml b/fstab.yaml index a704f7f1b..0f5516bd7 100644 --- a/fstab.yaml +++ b/fstab.yaml @@ -9,3 +9,4 @@ folders: /us/en/products/sku/: /us/en/products/product-coveo /us/en/products/bundles/: /us/en/products/product-coveo /us/en/blog/topics/: /us/en/blog/topics-template + /us/en/news/topics/: /us/en/news/topics-template From 7a1f56867a89ef726d9f403d3c8f106bacfcf98c Mon Sep 17 00:00:00 2001 From: Markus Haack Date: Tue, 6 Feb 2024 10:46:14 +0100 Subject: [PATCH 4/4] chore: fix link generation --- blocks/card-list/card-list.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/blocks/card-list/card-list.js b/blocks/card-list/card-list.js index 8a1123e5b..b6038f68e 100644 --- a/blocks/card-list/card-list.js +++ b/blocks/card-list/card-list.js @@ -12,6 +12,13 @@ import { makePublicUrl } from '../../scripts/scripts.js'; const getSelectionFromUrl = () => (window.location.pathname.indexOf('topics') > -1 ? toClassName(window.location.pathname.split('/').pop()) : ''); const getPageFromUrl = () => toClassName(new URLSearchParams(window.location.search).get('page')) || ''; +const createTopicUrl = (keyword = '') => { + if (window.location.pathname.indexOf('topics') > -1) { + return window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1) + toClassName(keyword).toLowerCase(); + } + return `${window.location.pathname}/topics/${toClassName(keyword).toLowerCase()}`; +}; + const createPaginationLink = (page, label, current = false) => { const newUrl = new URL(window.location); newUrl.searchParams.set('page', page); @@ -95,11 +102,7 @@ const createFilters = (articles, activeTag) => { ), ); [...keywords].sort().forEach((keyword) => { - if (window.location.pathname.indexOf('topics') > -1) { - newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1) + toClassName(keyword).toLowerCase(); - } else { - newUrl.pathname = `${window.location.pathname}/topics/${toClassName(keyword).toLowerCase()}`; - } + newUrl.pathname = createTopicUrl(keyword); const tagAnchor = a( { class: @@ -130,7 +133,7 @@ export default async function decorate(block) { .filter(({ type }) => type.toLowerCase() === articleType) .all(); let filteredArticles = articles; - const activeTagFilter = getSelectionFromUrl(); + const activeTagFilter = block.classList.contains('url-filtered') ? getSelectionFromUrl() : ''; if (activeTagFilter) { filteredArticles = articles.filter( (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1,