diff --git a/best-cigars-guide/blocks/related/related.css b/best-cigars-guide/blocks/related/related.css new file mode 100644 index 0000000..e5d3574 --- /dev/null +++ b/best-cigars-guide/blocks/related/related.css @@ -0,0 +1,7 @@ +.sidebar-related-articles a::before { + content: url('/best-cigars-guide/icons/external-link.svg'); + display: inline-block; + width: 12px; + height: 12px; + padding-right: 0.5em; +} diff --git a/best-cigars-guide/blocks/related/related.js b/best-cigars-guide/blocks/related/related.js new file mode 100644 index 0000000..5568737 --- /dev/null +++ b/best-cigars-guide/blocks/related/related.js @@ -0,0 +1,33 @@ +export default async function decorate(block) { + const links = block.querySelectorAll(':scope > div'); + if (!links || links.length === 0) { + return; + } + + const wrap = document.createElement('div'); + wrap.className = 'sidebar-related-articles'; + + const heading = document.createElement('h3'); + heading.textContent = 'Related Articles'; + wrap.append(heading); + + const list = document.createElement('ul'); + // eslint-disable-next-line no-restricted-syntax + for (const link of links) { + const el = document.createElement('li'); + + const linkEl = document.createElement('a'); + linkEl.textContent = link.firstElementChild.textContent; + linkEl.href = link.lastElementChild.textContent; + linkEl.target = '_blank'; + el.appendChild(linkEl); + + list.appendChild(el); + } + + wrap.append(list); + + const sidebar = document.querySelector('.sidebar-wrapper > div.sidebar'); + sidebar.append(wrap); + block.remove(); +} diff --git a/best-cigars-guide/blocks/sidebar/sidebar.js b/best-cigars-guide/blocks/sidebar/sidebar.js index 193d46d..8a13f03 100644 --- a/best-cigars-guide/blocks/sidebar/sidebar.js +++ b/best-cigars-guide/blocks/sidebar/sidebar.js @@ -3,30 +3,11 @@ import { fetchCategoryList, fetchArticleList } from '../../scripts/scripts.js'; // get the current category name const currentCategoryPath = window.location.pathname.split('/').slice(0, 3).join('/'); -async function getRelatedArticles() { - const wrap = document.createElement('div'); - wrap.className = 'sidebar-related-articles'; - - const heading = document.createElement('h3'); - heading.textContent = 'Related Articles'; - wrap.append(heading); - - const list = document.createElement('ul'); - - // todo: related article magic 🪄 - list.innerHTML = '