From 11ec35e6f368e50674ec8eae0a968cc85edc8a5d Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:06:10 -0500 Subject: [PATCH 01/39] image-cta URL for testing: - https://feature-cta-image--famous-smoke-cigaradvisor--kailasnadh790.hlx.page/cigaradvisor/drafts/Kailas/image-cta --- cigaradvisor/blocks/imagecta/imagecta.css | 11 +++++++++ cigaradvisor/blocks/imagecta/imagecta.js | 27 +++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 cigaradvisor/blocks/imagecta/imagecta.css create mode 100644 cigaradvisor/blocks/imagecta/imagecta.js diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css new file mode 100644 index 00000000..fdd30b48 --- /dev/null +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -0,0 +1,11 @@ +@media (min-width: 60em) { + .home-tall-banner > a { + display: block!important; + width: 100%!important; + height: 100%!important; + border: 1px solid #000!important; + background-size: cover; + background-position: 50% 50%; + background-repeat: no-repeat; + } +} \ No newline at end of file diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js new file mode 100644 index 00000000..1caad0ba --- /dev/null +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -0,0 +1,27 @@ +export default function decorate(block) { + const anchor = document.createElement('a'); + [...block.children].forEach((row) => { + var link; + [...row.children].forEach((col) => { + const pic = col.querySelector('picture'); + if (pic) { + anchor.append(pic); + } + if (col.textContent.toLowerCase() !== "image" && col.textContent.toLowerCase() !== "link") { + link = col.textContent; + } + }); + anchor.setAttribute("href", link); + + const children = block.children; + + // Loop through the children and remove those that are not anchor tags + for (let i = children.length - 1; i >= 0; i--) { + if (children[i].tagName !== 'A') { + console.log(children[i].tagName); + block.removeChild(children[i]); + } + } + }); + block.append(anchor); +} \ No newline at end of file From a997d51a5088376f9ef4eb1c22237057ce966416 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:38:55 -0500 Subject: [PATCH 02/39] Update imagecta.js --- cigaradvisor/blocks/imagecta/imagecta.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index 1caad0ba..73d2655e 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,27 +1,27 @@ export default function decorate(block) { const anchor = document.createElement('a'); [...block.children].forEach((row) => { - var link; + let link; [...row.children].forEach((col) => { const pic = col.querySelector('picture'); if (pic) { anchor.append(pic); } - if (col.textContent.toLowerCase() !== "image" && col.textContent.toLowerCase() !== "link") { + if (col.textContent.toLowerCase() !== 'image' && col.textContent.toLowerCase() !== 'link') { link = col.textContent; } }); - anchor.setAttribute("href", link); - - const children = block.children; + anchor.setAttribute('href', link); + }); + block.append(anchor); + const children = block.children; - // Loop through the children and remove those that are not anchor tags - for (let i = children.length - 1; i >= 0; i--) { - if (children[i].tagName !== 'A') { - console.log(children[i].tagName); - block.removeChild(children[i]); - } + // Loop through the children and remove those that are not anchor tags + Array.from(children).forEach((child) => { + if (child.tagName !== 'A') { + console.log(child.tagName); + block.removeChild(child); } }); - block.append(anchor); + } \ No newline at end of file From 949c49462e5b865d096a1a29530e834588ff741c Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:42:05 -0500 Subject: [PATCH 03/39] Update imagecta.js --- cigaradvisor/blocks/imagecta/imagecta.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index 73d2655e..b61838ad 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -15,13 +15,10 @@ export default function decorate(block) { }); block.append(anchor); const children = block.children; - // Loop through the children and remove those that are not anchor tags Array.from(children).forEach((child) => { if (child.tagName !== 'A') { - console.log(child.tagName); block.removeChild(child); } }); - -} \ No newline at end of file +} From e046696d72b84e7783828a3538f71c2ad730fbab Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:56:08 -0500 Subject: [PATCH 04/39] Update imagecta.js --- cigaradvisor/blocks/imagecta/imagecta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index b61838ad..017170d2 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -14,7 +14,7 @@ export default function decorate(block) { anchor.setAttribute('href', link); }); block.append(anchor); - const children = block.children; + const { children } = block; // Loop through the children and remove those that are not anchor tags Array.from(children).forEach((child) => { if (child.tagName !== 'A') { From 1dc0bd5812da1631a741752f61f9e855ad60f253 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:11:38 -0500 Subject: [PATCH 05/39] article-teaser --- .../blocks/article-teaser/article-teaser.css | 31 +++ .../blocks/article-teaser/article-teaser.js | 30 +++ cigaradvisor/scripts/ffetch.js | 183 ++++++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 cigaradvisor/blocks/article-teaser/article-teaser.css create mode 100644 cigaradvisor/blocks/article-teaser/article-teaser.js create mode 100644 cigaradvisor/scripts/ffetch.js diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css new file mode 100644 index 00000000..a0315ede --- /dev/null +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -0,0 +1,31 @@ +.cards > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 16px; +} + +.cards > ul > li { + border: 1px solid var(--highlight-background-color); + background-color: var(--background-color) +} + +.cards .cards-card-body { + margin: 16px; +} + +.cards .cards-card-image { + line-height: 0; +} + +.cards .cards-card-body > *:first-child { + margin-top: 0; +} + +.cards > ul > li img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; +} diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js new file mode 100644 index 00000000..d032ecd1 --- /dev/null +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -0,0 +1,30 @@ +import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; +import ffetch from '../../scripts/ffetch.js'; + + +export default function decorate(block) { + const filters = readBlockConfig(block); + block.textContent = ''; + console.log(filters); +} + + +async function fetchArticlesAndCreateTeaser(filters) { + return ffetch(`${window.hlx.codeBasePath}/articles.json`) + .sheet('section-carousel') + // make sure all filters match + .filter((article) => Object.keys(filters).every( + (key) => article[key]?.toLowerCase() === filters[key].toLowerCase(), + )) + .map(async (article) => { + const wrapper = document.createElement('div'); + const card = createCardBlock(article, wrapper); + if (article.section) { + card.classList.add(toClassName(article.section)); + } + + await loadBlock(card); + return wrapper; + }) + .all(); +} \ No newline at end of file diff --git a/cigaradvisor/scripts/ffetch.js b/cigaradvisor/scripts/ffetch.js new file mode 100644 index 00000000..819215f2 --- /dev/null +++ b/cigaradvisor/scripts/ffetch.js @@ -0,0 +1,183 @@ + +/* + * Copyright 2023 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +/* eslint-disable no-restricted-syntax, no-await-in-loop */ +// Copied from https://github.com/Buuhuu/ffetch, see also the docs there. + +async function* request(url, context) { + const { chunkSize, sheetName, fetch } = context; + for (let offset = 0, total = Infinity; offset < total; offset += chunkSize) { + const params = new URLSearchParams(`offset=${offset}&limit=${chunkSize}`); + if (sheetName) params.append('sheet', sheetName); + const resp = await fetch(`${url}?${params.toString()}`); + if (resp.ok) { + const json = await resp.json(); + total = json.total; + context.total = total; + for (const entry of json.data) yield entry; + } else { + return; + } + } +} + +// Operations: + +function withFetch(upstream, context, fetch) { + context.fetch = fetch; + return upstream; +} + +function withHtmlParser(upstream, context, parseHtml) { + context.parseHtml = parseHtml; + return upstream; +} + +function chunks(upstream, context, chunkSize) { + context.chunkSize = chunkSize; + return upstream; +} + +function sheet(upstream, context, sheetName) { + context.sheetName = sheetName; + return upstream; +} + +async function* skip(upstream, context, from) { + let skipped = 0; + for await (const entry of upstream) { + if (skipped < from) { + skipped += 1; + } else { + yield entry; + } + } +} + +async function* limit(upstream, context, aLimit) { + let yielded = 0; + for await (const entry of upstream) { + yield entry; + yielded += 1; + if (yielded === aLimit) { + return; + } + } +} + +async function* map(upstream, context, fn, maxInFlight = 5) { + const promises = []; + for await (let entry of upstream) { + promises.push(fn(entry)); + if (promises.length === maxInFlight) { + for (entry of promises) { + entry = await entry; + if (entry) yield entry; + } + promises.splice(0, promises.length); + } + } + for (let entry of promises) { + entry = await entry; + if (entry) yield entry; + } +} + +async function* filter(upstream, context, fn) { + for await (const entry of upstream) { + if (fn(entry)) { + yield entry; + } + } +} + +function slice(upstream, context, from, to) { + return limit(skip(upstream, context, from), context, to - from); +} + +function follow(upstream, context, name, newName, maxInFlight = 5) { + const { fetch, parseHtml } = context; + return map(upstream, context, async (entry) => { + const value = entry[name]; + if (value) { + const resp = await fetch(value); + return { ...entry, [newName || name]: resp.ok ? parseHtml(await resp.text()) : null }; + } + return entry; + }, maxInFlight); +} + +async function all(upstream) { + const result = []; + for await (const entry of upstream) { + result.push(entry); + } + return result; +} + +async function first(upstream) { + /* eslint-disable-next-line no-unreachable-loop */ + for await (const entry of upstream) { + return entry; + } + return null; +} + +// Helper + +function assignOperations(generator, context) { + // operations that return a new generator + function createOperation(fn) { + return (...rest) => assignOperations(fn.apply(null, [generator, context, ...rest]), context); + } + const operations = { + skip: createOperation(skip), + limit: createOperation(limit), + slice: createOperation(slice), + map: createOperation(map), + filter: createOperation(filter), + follow: createOperation(follow), + }; + + // functions that either return the upstream generator or no generator at all + const functions = { + chunks: chunks.bind(null, generator, context), + all: all.bind(null, generator, context), + first: first.bind(null, generator, context), + withFetch: withFetch.bind(null, generator, context), + withHtmlParser: withHtmlParser.bind(null, generator, context), + sheet: sheet.bind(null, generator, context), + }; + + Object.assign(generator, operations, functions); + Object.defineProperty(generator, 'total', { get: () => context.total }); + return generator; +} + +export default function ffetch(url) { + let chunkSize = 255; + const fetch = (...rest) => window.fetch.apply(null, rest); + const parseHtml = (html) => new window.DOMParser().parseFromString(html, 'text/html'); + + try { + if ('connection' in window.navigator && window.navigator.connection.saveData === true) { + // request smaller chunks in save data mode + chunkSize = 64; + } + } catch (e) { /* ignore */ } + + const context = { chunkSize, fetch, parseHtml }; + const generator = request(url, context); + + return assignOperations(generator, context); +} From e7655bd166591a6d9ec7091060c2b1826826aeb9 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:30:24 -0500 Subject: [PATCH 06/39] optimized code --- cigaradvisor/blocks/imagecta/imagecta.js | 29 +++++++----------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index 017170d2..5bee2a90 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,24 +1,11 @@ -export default function decorate(block) { +import { + buildBlock, createOptimizedPicture, decorateBlock, loadBlock, readBlockConfig, toClassName, +} from '../../scripts/aem.js'; +export default async function decorate(block) { + const configs = readBlockConfig(block); + block.textContent = ''; const anchor = document.createElement('a'); - [...block.children].forEach((row) => { - let link; - [...row.children].forEach((col) => { - const pic = col.querySelector('picture'); - if (pic) { - anchor.append(pic); - } - if (col.textContent.toLowerCase() !== 'image' && col.textContent.toLowerCase() !== 'link') { - link = col.textContent; - } - }); - anchor.setAttribute('href', link); - }); + anchor.append(createOptimizedPicture(configs.image)); + anchor.setAttribute('href', configs.link); block.append(anchor); - const { children } = block; - // Loop through the children and remove those that are not anchor tags - Array.from(children).forEach((child) => { - if (child.tagName !== 'A') { - block.removeChild(child); - } - }); } From 1913a44c555fb0bf5218a41df4b266bfb3887bd0 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:31:46 -0500 Subject: [PATCH 07/39] Update imagecta.js --- cigaradvisor/blocks/imagecta/imagecta.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index 5bee2a90..ddc9e352 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,5 +1,5 @@ import { - buildBlock, createOptimizedPicture, decorateBlock, loadBlock, readBlockConfig, toClassName, + createOptimizedPicture, readBlockConfig, } from '../../scripts/aem.js'; export default async function decorate(block) { const configs = readBlockConfig(block); @@ -9,3 +9,4 @@ export default async function decorate(block) { anchor.setAttribute('href', configs.link); block.append(anchor); } + From 59ad3b75f8f905a635175835a5b1220e46d8ae41 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:32:53 -0500 Subject: [PATCH 08/39] Update imagecta.js --- cigaradvisor/blocks/imagecta/imagecta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index ddc9e352..b8f10e85 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,6 +1,7 @@ import { createOptimizedPicture, readBlockConfig, } from '../../scripts/aem.js'; + export default async function decorate(block) { const configs = readBlockConfig(block); block.textContent = ''; @@ -9,4 +10,3 @@ export default async function decorate(block) { anchor.setAttribute('href', configs.link); block.append(anchor); } - From eaa9e0b61963933590fb703f27bd36ea3d75ef65 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:35:40 -0500 Subject: [PATCH 09/39] Update article-teaser.js --- .../blocks/article-teaser/article-teaser.js | 65 +++++++++++++++---- 1 file changed, 51 insertions(+), 14 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index d032ecd1..ef136644 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,30 +1,67 @@ -import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; +import { createOptimizedPicture, readBlockConfig, buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; import ffetch from '../../scripts/ffetch.js'; -export default function decorate(block) { +export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; + block.classList.add('article-teaser'); console.log(filters); + const teaserContent = await fetchTeaserContent(filters); + block.append(renderBlockTeaser(teaserContent)); } - -async function fetchArticlesAndCreateTeaser(filters) { - return ffetch(`${window.hlx.codeBasePath}/articles.json`) - .sheet('section-carousel') +async function fetchTeaserContent(filters) { + return ffetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`) // make sure all filters match .filter((article) => Object.keys(filters).every( (key) => article[key]?.toLowerCase() === filters[key].toLowerCase(), )) .map(async (article) => { - const wrapper = document.createElement('div'); - const card = createCardBlock(article, wrapper); - if (article.section) { - card.classList.add(toClassName(article.section)); - } - - await loadBlock(card); - return wrapper; + return article; }) .all(); +} + +function renderBlockTeaser(articleinfo) { + /* eslint-disable indent */ + return div( + { class: 'article-teaser' }, + div( + { class: 'article-teaser-thumb' }, + a({ href: articleinfo.path }, createOptimizedPicture(articleinfo.image)), + ), + div( + { class: 'article-teaser-content' }, + h2(a({ href: articleinfo.path }, articleinfo.title)), + div( + { class: 'article_meta' }, + articleinfo.publishedDate + ? div( + i({ class: 'fa fa-calendar' }), + span( + { class: 'article-publish-date' }, + formatDate(blogData.publicationDate, { month: 'long' }), + ), + ) + : '', + blogData.author + ? div(i({ class: 'fa fa-user' }), span({ class: 'blog-author' }, blogData.author)) + : '', + ), + p(blogData.description), + p( + { class: 'button-container' }, + a( + { + href: blogData.path, + 'aria-label': blogData.c2aButtonText, + class: 'button primary', + }, + blogData.c2aButtonText, + ), + ), + ), + ); + /* eslint-enable indent */ } \ No newline at end of file From ec3057873adada9005b5d1d7655975f333259db8 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 30 Nov 2023 20:23:59 -0500 Subject: [PATCH 10/39] refactored code --- cigaradvisor/blocks/imagecta/imagecta.css | 18 ++++++++---------- cigaradvisor/blocks/imagecta/imagecta.js | 14 +++++--------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index fdd30b48..8a053fdd 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -1,11 +1,9 @@ -@media (min-width: 60em) { - .home-tall-banner > a { - display: block!important; - width: 100%!important; - height: 100%!important; - border: 1px solid #000!important; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - } +.home-tall-banner > a img{ + display: block; + position: relative; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + border: 1px solid #000; } \ No newline at end of file diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index b8f10e85..c9d30b33 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,12 +1,8 @@ -import { - createOptimizedPicture, readBlockConfig, -} from '../../scripts/aem.js'; - export default async function decorate(block) { - const configs = readBlockConfig(block); - block.textContent = ''; + const children = []; const anchor = document.createElement('a'); - anchor.append(createOptimizedPicture(configs.image)); - anchor.setAttribute('href', configs.link); - block.append(anchor); + anchor.append(block.querySelector('picture')); + anchor.setAttribute('href', block.querySelector('a').getAttribute('href')); + children.push(anchor); + block.replaceChildren(...children); } From 533f1ffe06fc44d0f6f799bc50bee919ddb23407 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:22:50 -0500 Subject: [PATCH 11/39] initial commit --- .../blocks/article-teaser/article-teaser.css | 293 ++++++++++++++++-- .../blocks/article-teaser/article-teaser.js | 76 ++--- 2 files changed, 302 insertions(+), 67 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index a0315ede..96a51e2f 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -1,31 +1,286 @@ -.cards > ul { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-gap: 16px; +.article{ + position: relative; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-end; + text-align: center; + overflow: hidden; + flex: 1 1 100%; + min-height: 20rem; + padding-bottom: 20px; +} +.article.article__thumbnail::before { + content: ''; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 3; + transition: visibility .2s linear; } -.cards > ul > li { - border: 1px solid var(--highlight-background-color); - background-color: var(--background-color) +.article__thumbnail:hover::before { + visibility: hidden; } -.cards .cards-card-body { - margin: 16px; +@media screen and (min-width: 60em) { + .article.article__thumbnail { + min-height: 26.25rem; + } } -.cards .cards-card-image { - line-height: 0; +.article__thumbnail .tag{ + position: absolute; + background-color: #7e4a3a; + top: 20px; + left: 0; + padding: 7px 24px; + margin: 0 auto; + text-transform: capitalize; + justify-content: center; + display: flex; + flex: none; + align-items: center; + z-index: 9999; + color: #fff; + text-decoration: none; + font-family: montserrat,sans-serif; + font-weight: 600; } -.cards .cards-card-body > *:first-child { - margin-top: 0; +a:hover { + transition: .8s; + text-decoration: none; + outline-width: 0; +} + +*, ::before, ::after{ + box-sizing: border-box; +} + +@media screen and (min-width: 60em) { + .article.article__thumbnail .article__image { + -webkit-flex-basis: 19.25rem; + -ms-flex-preferred-size: 19.25rem; + flex-basis: 19.25rem; + max-height: 321px; + } +} + +.article__thumbnail picture{ + display: flex; + align-items: flex-start; + flex: 1 0 13rem; + max-height: 321px; + width: 100%; } -.cards > ul > li img { +.article__thumbnail picture>img{ + display: block; width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; + max-height: 321px; + height: auto; + max-width: 100%; + border-style: none; +} + +.article__thumbnail .article__content{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-end; + text-align: center; + overflow: hidden; +} + +@media screen and (min-width: 60em) { + .article.article__thumbnail .article__header { + min-height: 140px; + } +} + +.article__thumbnail .article__header{ + flex: 0 0 auto; + width: 100%; + min-height: 7rem; + padding: 20px 30px; + padding-top: 40px; + background-color: #eaeaea; + display: block; +} + +.article__thumbnail .article__title{ + margin: 0 14px 16px; + font-size: 16px; + font-weight: 800; +} + +.h2{ + font-family: montserrat,sans-serif; + text-transform: uppercase; + color: #141414; +} + +@media screen and (min-width: 60em) { + .article.article__thumbnail .article__titleLink::before { + content: ''; + display: block; + position: absolute; + } +} + +.article__thumbnail .article__titleLink{ + display: block; + font-size: 1em; + font-weight: inherit; + color: inherit; + text-decoration: none; + font-family: montserrat,sans-serif; + background-color: transparent; +} + +.article__thumbnail .article__meta{ + font-size: 0; + color: #141414; +} + +.article__thumbnail .article__meta a{ + position: relative; + z-index: 2; + text-decoration: none; + color: #141414; +} + +.article__thumbnail .article__meta > * { + display: inline-block; + font-family: montserrat,sans-serif; + font-weight: 600; + font-size: 16px; } + +.article.article__thumbnail .article__pubdate:not(:only-child)::before { + content: '|'; + display: inline-block; + margin: 0 .5em; +} + +.article.article__thumbnail:hover .article__preview { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.article__thumbnail .article__preview{ + flex: 0 0 0; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + overflow: hidden; + padding: 0 30px; + font-family: open sans,sans-serif; + background-color: #eaeaea; + transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; +} + +/* .article__preview{ + position: absolute; + top: 0; + left: 0; + width: 100%; + transition: transform 0.5s ease; +} + +.article__preview { + transform: translateY(100%); +} + +.article:hover .article__preview { + transform: translateY(0); +} */ +body{ + color: #333; +} + +.article__thumbnail .article__excerpt{ + position: relative; + flex: 0 0 auto; + overflow: hidden; + padding-bottom: 20px; + font-weight: 600; + opacity: 1; + transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out,-ms-flex-negative .55s ease-in-out; +} + +.article.article__thumbnail:hover .article__excerpt { + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + opacity: 1; +} + +.article__thumbnail .article__excerpt::after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 20px; + background: linear-gradient(to top,#eaeaea,rgba(234,234,234,.8) 6px,rgba(234,234,234,0)); +} +.article.article__thumbnail .article__excerpt p:last-child, .article.article__thumbnail .article__excerpt ul:last-child, .article.article__thumbnail .article__excerpt ol:last-child { + margin-bottom: 0; +} + +.article.article__thumbnail .article__excerpt p:first-child, .article.article__thumbnail .article__excerpt ul:first-child, .article.article__thumbnail .article__excerpt ol:first-child { + margin-top: 0; +} + +.article__thumbnail .article__excerpt p{ + font-size: 1em; + font-family: inherit; + font-weight: inherit; + color: inherit; + cursor: default; +} + +.article.article__thumbnail .article__readMore::after { + content: ''; + font-family: FontAwesome; +} + +.read_more::after { + content: ''; + font-family: FontAwesome; + margin-left: 8px; + line-height: 1.5; + color: #b19b5e; + font-size: 18px; +} + +.article__thumbnail .article__readMore { + display: block; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + position: relative; + z-index: 2; + margin-bottom: 16px; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + opacity: 1; + transition: opacity .55s ease-in-out; +} \ No newline at end of file diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index ef136644..152b2913 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -6,62 +6,42 @@ export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; block.classList.add('article-teaser'); - console.log(filters); - const teaserContent = await fetchTeaserContent(filters); - block.append(renderBlockTeaser(teaserContent)); + console.log(filters.path); + const article = await fetchTeaserContent(filters); + const articleInfo = article[0]; + block.innerHTML = ` +
+ +Cigar Buying Guides +${createOptimizedPicture(articleInfo.image).outerHTML} +
+
+

+ ${articleInfo.title} +

+
+ By ${articleInfo.author} + +
+
+
+
+

Reading Time: ${articleInfo.readingTime} ${articleInfo.description}

+
+ Read More +
+
+
+ `; } async function fetchTeaserContent(filters) { return ffetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`) - // make sure all filters match .filter((article) => Object.keys(filters).every( - (key) => article[key]?.toLowerCase() === filters[key].toLowerCase(), + (path) => article[path].toLowerCase() === filters.path.toLowerCase(), )) .map(async (article) => { return article; }) .all(); -} - -function renderBlockTeaser(articleinfo) { - /* eslint-disable indent */ - return div( - { class: 'article-teaser' }, - div( - { class: 'article-teaser-thumb' }, - a({ href: articleinfo.path }, createOptimizedPicture(articleinfo.image)), - ), - div( - { class: 'article-teaser-content' }, - h2(a({ href: articleinfo.path }, articleinfo.title)), - div( - { class: 'article_meta' }, - articleinfo.publishedDate - ? div( - i({ class: 'fa fa-calendar' }), - span( - { class: 'article-publish-date' }, - formatDate(blogData.publicationDate, { month: 'long' }), - ), - ) - : '', - blogData.author - ? div(i({ class: 'fa fa-user' }), span({ class: 'blog-author' }, blogData.author)) - : '', - ), - p(blogData.description), - p( - { class: 'button-container' }, - a( - { - href: blogData.path, - 'aria-label': blogData.c2aButtonText, - class: 'button primary', - }, - blogData.c2aButtonText, - ), - ), - ), - ); - /* eslint-enable indent */ } \ No newline at end of file From 4c1e41f1ce7037e3831d30d3f243bd92f57ed24d Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 1 Dec 2023 23:05:09 -0500 Subject: [PATCH 12/39] css changes --- .../blocks/article-teaser/article-teaser.css | 286 +++++++++++------- .../blocks/article-teaser/article-teaser.js | 2 +- 2 files changed, 175 insertions(+), 113 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 96a51e2f..30d528c6 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -1,3 +1,62 @@ +body{ + color: #333; +} + + +*, ::before, ::after{ + box-sizing: border-box; +} + +img { + width: auto; + height: auto; + max-width: 100%; + border-style: none; +} + +h2 { + font-family: montserrat,sans-serif; + font-weight: 900; + text-transform: uppercase; + color: #141414; + margin: 0 auto; + font-size: 12px; +} + +a{ + font-family: montserrat,sans-serif; + font-weight: 600; + color: #141414; + font-size: 12px; + background-color: transparent; +} + +a:hover { + transition: .8s; + text-decoration: none; + outline-width: 0; +} + +a:active, a:hover { + outline-width: 0; +} + + +.article--thumbnail:hover::before { + visibility: hidden; +} + +.article.article--thumbnail::before { + content: ''; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 3; + transition: visibility .2s linear; +} + .article{ position: relative; top: 0; @@ -14,241 +73,240 @@ min-height: 20rem; padding-bottom: 20px; } -.article.article__thumbnail::before { - content: ''; - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 3; - transition: visibility .2s linear; -} -.article__thumbnail:hover::before { - visibility: hidden; -} + + @media screen and (min-width: 60em) { - .article.article__thumbnail { + .article.article--thumbnail { min-height: 26.25rem; } } -.article__thumbnail .tag{ +.article.article--thumbnail .tag { + -webkit-flex: none; + -ms-flex: none; + flex: none; position: absolute; + top: 20px; + left: 0; +} + +.tag[data-category="Cigar Buying Guides"] { background-color: #7e4a3a; +} + +.tag { + position: absolute; top: 20px; left: 0; padding: 7px 24px; margin: 0 auto; text-transform: capitalize; - justify-content: center; + font-weight: 700; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - flex: none; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; - z-index: 9999; color: #fff; - text-decoration: none; font-family: montserrat,sans-serif; font-weight: 600; -} - -a:hover { - transition: .8s; + background-color: #3c3a3b; + font-size: 12px; + z-index: 9999; text-decoration: none; - outline-width: 0; -} - -*, ::before, ::after{ - box-sizing: border-box; } -@media screen and (min-width: 60em) { - .article.article__thumbnail .article__image { - -webkit-flex-basis: 19.25rem; - -ms-flex-preferred-size: 19.25rem; - flex-basis: 19.25rem; - max-height: 321px; - } -} - -.article__thumbnail picture{ +.article.article--thumbnail .article__image { + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-align-items: flex-start; + -ms-flex-align: start; align-items: flex-start; + -webkit-flex: 1 0 13rem; + -ms-flex: 1 0 13rem; flex: 1 0 13rem; - max-height: 321px; width: 100%; + max-height: 321px; +} + +.article.article--thumbnail:hover .article__content::before { + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; } -.article__thumbnail picture>img{ +.article.article--thumbnail .article__content::before { + content: ''; display: block; - width: 100%; - max-height: 321px; - height: auto; - max-width: 100%; - border-style: none; + -webkit-flex: 1 0 72px; + -ms-flex: 1 0 72px; + flex: 1 0 72px; + flex-grow: 1; + min-height: 72px; + transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out; + transition: flex-grow .55s ease-in-out; + transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; } -.article__thumbnail .article__content{ +.article.article--thumbnail .article__content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: stretch; + -ms-flex-align: stretch; align-items: stretch; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; justify-content: flex-end; text-align: center; overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; } -@media screen and (min-width: 60em) { - .article.article__thumbnail .article__header { - min-height: 140px; - } -} - -.article__thumbnail .article__header{ +.article.article--thumbnail .article__header { + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; min-height: 7rem; padding: 20px 30px; + padding-top: 20px; padding-top: 40px; background-color: #eaeaea; display: block; } -.article__thumbnail .article__title{ +.article.article--thumbnail .article__title { margin: 0 14px 16px; - font-size: 16px; + font-size: 18px; font-weight: 800; } -.h2{ - font-family: montserrat,sans-serif; - text-transform: uppercase; - color: #141414; -} - -@media screen and (min-width: 60em) { - .article.article__thumbnail .article__titleLink::before { - content: ''; - display: block; - position: absolute; - } -} - -.article__thumbnail .article__titleLink{ +.article.article--thumbnail .article__titleLink { display: block; font-size: 1em; font-weight: inherit; color: inherit; - text-decoration: none; - font-family: montserrat,sans-serif; - background-color: transparent; } -.article__thumbnail .article__meta{ +.article--thumbnail .article__meta{ font-size: 0; color: #141414; } -.article__thumbnail .article__meta a{ +.article--thumbnail .article__meta a{ position: relative; z-index: 2; text-decoration: none; color: #141414; } -.article__thumbnail .article__meta > * { +.article--thumbnail .article__meta > * { display: inline-block; font-family: montserrat,sans-serif; font-weight: 600; font-size: 16px; } -.article.article__thumbnail .article__pubdate:not(:only-child)::before { +.article.article--thumbnail .article__pubdate:not(:only-child)::before { content: '|'; display: inline-block; margin: 0 .5em; } -.article.article__thumbnail:hover .article__preview { +.article.article--thumbnail:hover .article__preview { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } -.article__thumbnail .article__preview{ +.article.article--thumbnail .article__preview { + -webkit-flex: 0 0 0; + -ms-flex: 0 0 0; flex: 0 0 0; + flex-grow: 0; + display: -webkit-flex; + display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; flex-direction: column; + -webkit-align-items: stretch; + -ms-flex-align: stretch; align-items: stretch; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; padding: 0 30px; font-family: open sans,sans-serif; background-color: #eaeaea; + transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out; + transition: flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; } -/* .article__preview{ +.article.article--thumbnail .article__excerpt::after { + content: ''; + display: block; position: absolute; - top: 0; + bottom: 0; left: 0; - width: 100%; - transition: transform 0.5s ease; -} - -.article__preview { - transform: translateY(100%); -} - -.article:hover .article__preview { - transform: translateY(0); -} */ -body{ - color: #333; + right: 0; + height: 20px; + background: linear-gradient(to top,#eaeaea,rgba(234,234,234,.8) 6px,rgba(234,234,234,0)); } -.article__thumbnail .article__excerpt{ +.article.article--thumbnail .article__excerpt { position: relative; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; flex: 0 0 auto; + flex-shrink: 0; overflow: hidden; padding-bottom: 20px; font-weight: 600; - opacity: 1; + opacity: 0; + transition: opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out; + transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out; transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out,-ms-flex-negative .55s ease-in-out; } -.article.article__thumbnail:hover .article__excerpt { +.article.article--thumbnail:hover .article__excerpt { -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; opacity: 1; } -.article__thumbnail .article__excerpt::after { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 20px; - background: linear-gradient(to top,#eaeaea,rgba(234,234,234,.8) 6px,rgba(234,234,234,0)); -} -.article.article__thumbnail .article__excerpt p:last-child, .article.article__thumbnail .article__excerpt ul:last-child, .article.article__thumbnail .article__excerpt ol:last-child { +.article.article--thumbnail .article__excerpt p:last-child, .article.article--thumbnail .article__excerpt ul:last-child, .article.article--thumbnail .article__excerpt ol:last-child { margin-bottom: 0; } -.article.article__thumbnail .article__excerpt p:first-child, .article.article__thumbnail .article__excerpt ul:first-child, .article.article__thumbnail .article__excerpt ol:first-child { +.article.article--thumbnail .article__excerpt p:first-child, .article.article--thumbnail .article__excerpt ul:first-child, .article.article--thumbnail .article__excerpt ol:first-child { margin-top: 0; } -.article__thumbnail .article__excerpt p{ +.article--thumbnail .article__excerpt p{ font-size: 1em; font-family: inherit; font-weight: inherit; @@ -256,7 +314,7 @@ body{ cursor: default; } -.article.article__thumbnail .article__readMore::after { +.article.article--thumbnail .article__readMore::after { content: ''; font-family: FontAwesome; } @@ -270,7 +328,11 @@ body{ font-size: 18px; } -.article__thumbnail .article__readMore { +.article.article--thumbnail:hover .article__readMore { + opacity: 1; +} + +.article--thumbnail .article__readMore { display: block; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 152b2913..eafe09e4 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -10,7 +10,7 @@ export default async function decorate(block) { const article = await fetchTeaserContent(filters); const articleInfo = article[0]; block.innerHTML = ` -
+
Cigar Buying Guides ${createOptimizedPicture(articleInfo.image).outerHTML} From 8825d90ca1aaebd406c80678cb7e4cb2ab57c340 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sat, 2 Dec 2023 09:33:39 -0500 Subject: [PATCH 13/39] css changes --- .../blocks/article-teaser/article-teaser.css | 31 ++++++++++++++++--- .../blocks/article-teaser/article-teaser.js | 2 ++ 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 30d528c6..246a1a6a 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -2,6 +2,10 @@ body{ color: #333; } +html { + font-size:100%; + line-height:1.5 +} *, ::before, ::after{ box-sizing: border-box; @@ -29,6 +33,7 @@ a{ color: #141414; font-size: 12px; background-color: transparent; + text-decoration:none } a:hover { @@ -136,6 +141,12 @@ a:active, a:hover { max-height: 321px; } +.article.article--thumbnail .article__image > img { + display: block; + width: 100%; + max-height: 321px; +} + .article.article--thumbnail:hover .article__content::before { -webkit-flex-grow: 0; -ms-flex-positive: 0; @@ -314,13 +325,9 @@ a:active, a:hover { cursor: default; } -.article.article--thumbnail .article__readMore::after { - content: ''; - font-family: FontAwesome; -} .read_more::after { - content: ''; + content: '\f054'; font-family: FontAwesome; margin-left: 8px; line-height: 1.5; @@ -345,4 +352,18 @@ a:active, a:hover { text-transform: uppercase; opacity: 1; transition: opacity .55s ease-in-out; +} + +.read_more { + text-transform: uppercase; + font-weight: 700; + text-align: center; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + color: #b19b5e; + font-size: 18px; } \ No newline at end of file diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index eafe09e4..36f7fb91 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -13,7 +13,9 @@ export default async function decorate(block) {
Cigar Buying Guides +
${createOptimizedPicture(articleInfo.image).outerHTML} +

From c52b45ec68ab90d757ba0acc67fbbc8e680488f8 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sat, 2 Dec 2023 14:49:13 -0500 Subject: [PATCH 14/39] alignment fixes --- .../blocks/article-teaser/article-teaser.css | 10 ++- .../blocks/article-teaser/article-teaser.js | 63 ++++++++++++------- 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 246a1a6a..d9ec1153 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -2,6 +2,10 @@ body{ color: #333; } +.article-teaser{ + /* width: 530px; */ +} + html { font-size:100%; line-height:1.5 @@ -55,7 +59,7 @@ a:active, a:hover { content: ''; height: 100%; width: 100%; - position: absolute; + position: relative; top: 0; left: 0; z-index: 3; @@ -138,7 +142,7 @@ a:active, a:hover { -ms-flex: 1 0 13rem; flex: 1 0 13rem; width: 100%; - max-height: 321px; + /* max-height: 321px; */ } .article.article--thumbnail .article__image > img { @@ -233,7 +237,7 @@ a:active, a:hover { .article--thumbnail .article__meta > * { display: inline-block; - font-family: montserrat,sans-serif; + font-family: montserrat, sans-serif; font-weight: 600; font-size: 16px; } diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 36f7fb91..44ba4837 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -9,31 +9,34 @@ export default async function decorate(block) { console.log(filters.path); const article = await fetchTeaserContent(filters); const articleInfo = article[0]; + console.log(articleInfo.publishedDate); + const formattedDate = formatDate(articleInfo.publishedDate); + console.log(formattedDate); block.innerHTML = ` + + Cigar Buying Guides +
+ ${createOptimizedPicture(articleInfo.image).outerHTML} +
+
+ +

+ ${articleInfo.title} +

+
+ By ${articleInfo.author} + +
+ +
+
+

Reading Time: ${articleInfo.readingTime} ${articleInfo.description}

+
+ Read More +
+
+

`; } @@ -46,4 +49,18 @@ async function fetchTeaserContent(filters) { return article; }) .all(); +} + +function formatDate(originalDateString) { + const MS_PER_DAY = 24 * 60 * 60 * 1000; + const excelStartDate = new Date(Date.UTC(1899, 11, 30)); + const millisecondsSinceExcelStart = originalDateString * MS_PER_DAY; + + const targetDate = new Date(excelStartDate.getTime() + millisecondsSinceExcelStart); + + const day = targetDate.getUTCDate(); + const month = targetDate.toLocaleString('default', { month: 'short' }); + const year = targetDate.getUTCFullYear().toString().slice(-2); + + return `${day} ${month} ${year}`; } \ No newline at end of file From 63c8ac85ca69fe3914bcda107781beaefed2729f Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sat, 2 Dec 2023 20:22:04 -0500 Subject: [PATCH 15/39] moving foundation styling to style.css --- .../blocks/article-teaser/article-teaser.css | 53 ------------------- cigaradvisor/styles/styles.css | 53 ++++++++++++++++++- 2 files changed, 51 insertions(+), 55 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index d9ec1153..367347b9 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -1,56 +1,3 @@ -body{ - color: #333; -} - -.article-teaser{ - /* width: 530px; */ -} - -html { - font-size:100%; - line-height:1.5 -} - -*, ::before, ::after{ - box-sizing: border-box; -} - -img { - width: auto; - height: auto; - max-width: 100%; - border-style: none; -} - -h2 { - font-family: montserrat,sans-serif; - font-weight: 900; - text-transform: uppercase; - color: #141414; - margin: 0 auto; - font-size: 12px; -} - -a{ - font-family: montserrat,sans-serif; - font-weight: 600; - color: #141414; - font-size: 12px; - background-color: transparent; - text-decoration:none -} - -a:hover { - transition: .8s; - text-decoration: none; - outline-width: 0; -} - -a:active, a:hover { - outline-width: 0; -} - - .article--thumbnail:hover::before { visibility: hidden; } diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 0a17953d..ae28d6f8 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -23,14 +23,63 @@ --nav-height: 64px; } -body { +/* body { display: none; } body.appear { display: block; -} +} */ header { height: var(--nav-height); } + +body{ + color: #333; +} + +html { + font-size:100%; + line-height:1.5 +} + +*, ::before, ::after{ + box-sizing: border-box; +} + +img { + width: auto; + height: auto; + max-width: 100%; + border-style: none; +} + +h2 { + font-family: montserrat,sans-serif; + font-weight: 900; + text-transform: uppercase; + color: #141414; + margin: 0 auto; + font-size: 12px; +} + +a{ + font-family: montserrat,sans-serif; + font-weight: 600; + color: #141414; + font-size: 12px; + background-color: transparent; + text-decoration:none +} + +a:hover { + transition: .8s; + text-decoration: none; + outline-width: 0; +} + +a:active, a:hover { + outline-width: 0; +} + From e503e9dc6a6bb926415ffa694e12b80289f29d59 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sat, 2 Dec 2023 23:05:38 -0500 Subject: [PATCH 16/39] date fix --- .../blocks/article-teaser/article-teaser.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 44ba4837..fb59a23f 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -52,15 +52,12 @@ async function fetchTeaserContent(filters) { } function formatDate(originalDateString) { - const MS_PER_DAY = 24 * 60 * 60 * 1000; - const excelStartDate = new Date(Date.UTC(1899, 11, 30)); - const millisecondsSinceExcelStart = originalDateString * MS_PER_DAY; - - const targetDate = new Date(excelStartDate.getTime() + millisecondsSinceExcelStart); - - const day = targetDate.getUTCDate(); - const month = targetDate.toLocaleString('default', { month: 'short' }); - const year = targetDate.getUTCFullYear().toString().slice(-2); - - return `${day} ${month} ${year}`; + const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); + const utcDate = new Date(utcDateString); + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + const day = utcDate.getUTCDate(); + const month = months[utcDate.getUTCMonth()]; + const year = utcDate.getUTCFullYear().toString().slice(-2); // Get last two digits of the year + const formattedDate = `${day} ${month} ${year}`; + return formattedDate; } \ No newline at end of file From 731781e4b9fc5bfc49c01510b9597bac0c7579cf Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Sun, 3 Dec 2023 16:50:46 -0500 Subject: [PATCH 17/39] Update article-teaser.css --- cigaradvisor/blocks/article-teaser/article-teaser.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 367347b9..51e18c25 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -157,6 +157,12 @@ display: block; } +@media screen and (min-width: 60em) { + .article.article--thumbnail .article__header { + min-height:140px + } +} + .article.article--thumbnail .article__title { margin: 0 14px 16px; font-size: 18px; From 8d36258ed18ee32db3f815c1bf34cbed07ae6f72 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 10:31:25 -0500 Subject: [PATCH 18/39] Update article-teaser.js --- cigaradvisor/blocks/article-teaser/article-teaser.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index fb59a23f..b5b52c88 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -6,12 +6,9 @@ export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; block.classList.add('article-teaser'); - console.log(filters.path); const article = await fetchTeaserContent(filters); const articleInfo = article[0]; - console.log(articleInfo.publishedDate); const formattedDate = formatDate(articleInfo.publishedDate); - console.log(formattedDate); block.innerHTML = `
From f45a693f3bd27e15f47b9014d1575b03205e8e6f Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 10:49:36 -0500 Subject: [PATCH 19/39] Update article-teaser.js --- cigaradvisor/blocks/article-teaser/article-teaser.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index b5b52c88..4616f192 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,7 +1,6 @@ import { createOptimizedPicture, readBlockConfig, buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; import ffetch from '../../scripts/ffetch.js'; - export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; From cd773a03a1d82ec97fecfc181aa932fd8e9c5945 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 4 Dec 2023 10:39:15 -0600 Subject: [PATCH 20/39] Save space for the image. --- cigaradvisor/blocks/imagecta/imagecta.css | 26 +++++++++++++++++------ cigaradvisor/blocks/imagecta/imagecta.js | 10 ++++++++- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index 8a053fdd..a72e837b 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -1,9 +1,21 @@ -.home-tall-banner > a img{ +.imagecta.block > a { + display: block; + margin: 0 auto; +} + +.imagecta.block > a picture { display: block; position: relative; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - border: 1px solid #000; -} \ No newline at end of file + width: 100%; + height: 100%; + margin: 0 auto; +} + +.imagecta.block > a picture > img { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + object-fit: cover; + object-position: center; +} diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index c9d30b33..60bf1ed7 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -1,7 +1,15 @@ export default async function decorate(block) { const children = []; const anchor = document.createElement('a'); - anchor.append(block.querySelector('picture')); + const picture = block.querySelector('picture'); + const img = picture.querySelector('img'); + const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100; + picture.style.paddingBottom = `${ratio}%`; + anchor.style.maxWidth = `${img.width}px`; + + + + anchor.append(picture); anchor.setAttribute('href', block.querySelector('a').getAttribute('href')); children.push(anchor); block.replaceChildren(...children); From 5a36ceacef8fff147122d2eb3f1d5fdf1e3795ad Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 4 Dec 2023 10:41:14 -0600 Subject: [PATCH 21/39] Fix lint. --- cigaradvisor/blocks/imagecta/imagecta.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js index 60bf1ed7..ee980e02 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.js +++ b/cigaradvisor/blocks/imagecta/imagecta.js @@ -6,9 +6,6 @@ export default async function decorate(block) { const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100; picture.style.paddingBottom = `${ratio}%`; anchor.style.maxWidth = `${img.width}px`; - - - anchor.append(picture); anchor.setAttribute('href', block.querySelector('a').getAttribute('href')); children.push(anchor); From 707244f80ab28423a6492455b655f781f6d62741 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:13:32 -0500 Subject: [PATCH 22/39] Update article-teaser.js --- .../blocks/article-teaser/article-teaser.js | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 4616f192..a39094eb 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,6 +1,28 @@ -import { createOptimizedPicture, readBlockConfig, buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js'; +import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; import ffetch from '../../scripts/ffetch.js'; +function formatDate(originalDateString) { + const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); + const utcDate = new Date(utcDateString); + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + const day = utcDate.getUTCDate(); + const month = months[utcDate.getUTCMonth()]; + const year = utcDate.getUTCFullYear().toString().slice(-2); // Get last two digits of the year + const formattedDate = `${day} ${month} ${year}`; + return formattedDate; +} + +async function fetchTeaserContent(filters) { + return ffetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`) + .filter((article) => Object.keys(filters).every( + (path) => article[path].toLowerCase() === filters.path.toLowerCase(), + )) + .map(async (article) => { + return article; + }) + .all(); +} + export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; @@ -34,26 +56,4 @@ export default async function decorate(block) {
`; -} - -async function fetchTeaserContent(filters) { - return ffetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`) - .filter((article) => Object.keys(filters).every( - (path) => article[path].toLowerCase() === filters.path.toLowerCase(), - )) - .map(async (article) => { - return article; - }) - .all(); -} - -function formatDate(originalDateString) { - const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); - const utcDate = new Date(utcDateString); - const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - const day = utcDate.getUTCDate(); - const month = months[utcDate.getUTCMonth()]; - const year = utcDate.getUTCFullYear().toString().slice(-2); // Get last two digits of the year - const formattedDate = `${day} ${month} ${year}`; - return formattedDate; } \ No newline at end of file From 13093f36b9c91be7278ea0ed4e2d65234707385d Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:21:46 -0500 Subject: [PATCH 23/39] Update imagecta.css --- cigaradvisor/blocks/imagecta/imagecta.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index a72e837b..ca627735 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -16,6 +16,6 @@ bottom: 0; left: 0; width: 100%; - object-fit: cover; + object-fit: contain; object-position: center; } From de2f8d68ab6ccf2d45eca2873590a9f8ad491e1f Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 4 Dec 2023 11:54:43 -0600 Subject: [PATCH 24/39] Fix image hegiht on small screens. --- cigaradvisor/blocks/imagecta/imagecta.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index ca627735..f22e77e1 100644 --- a/cigaradvisor/blocks/imagecta/imagecta.css +++ b/cigaradvisor/blocks/imagecta/imagecta.css @@ -16,6 +16,7 @@ bottom: 0; left: 0; width: 100%; - object-fit: contain; + height: 100%; + object-fit: cover; object-position: center; } From f6f81573e38185a9986b9a9997a44b0858f6be07 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 14:37:43 -0500 Subject: [PATCH 25/39] refactoring to remove ffetch --- .../blocks/article-teaser/article-teaser.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index a39094eb..69ca36b3 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,5 +1,4 @@ import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; -import ffetch from '../../scripts/ffetch.js'; function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); @@ -13,22 +12,18 @@ function formatDate(originalDateString) { } async function fetchTeaserContent(filters) { - return ffetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`) - .filter((article) => Object.keys(filters).every( - (path) => article[path].toLowerCase() === filters.path.toLowerCase(), - )) - .map(async (article) => { - return article; - }) - .all(); + const resp = await fetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`); + if (resp.ok) { + const teaserContent = await resp.json(); + return teaserContent.data.find(obj => obj.path === filters.path); + } } export default async function decorate(block) { const filters = readBlockConfig(block); block.textContent = ''; block.classList.add('article-teaser'); - const article = await fetchTeaserContent(filters); - const articleInfo = article[0]; + const articleInfo = await fetchTeaserContent(filters); const formattedDate = formatDate(articleInfo.publishedDate); block.innerHTML = `
From 9b7a91d8180a00439ee9a8d7d63cc9dc7036dad7 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 4 Dec 2023 22:26:41 -0500 Subject: [PATCH 26/39] Update article-teaser.js --- .../blocks/article-teaser/article-teaser.js | 107 ++++++++++++------ 1 file changed, 74 insertions(+), 33 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 69ca36b3..31c5e9ec 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,8 +1,10 @@ -import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; +import { createOptimizedPicture, readBlockConfig, getMetadata } from '../../scripts/aem.js'; function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); + console.log(utcDateString); const utcDate = new Date(utcDateString); + console.log(utcDate); const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const day = utcDate.getUTCDate(); const month = months[utcDate.getUTCMonth()]; @@ -11,44 +13,83 @@ function formatDate(originalDateString) { return formattedDate; } -async function fetchTeaserContent(filters) { - const resp = await fetch(`${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`); +async function fetchData(url) { + console.log("URL", url); + const resp = await fetch(url); if (resp.ok) { - const teaserContent = await resp.json(); - return teaserContent.data.find(obj => obj.path === filters.path); + const jsonDataJson = await resp.json(); + console.log(jsonDataJson); + return jsonDataJson.data; } } export default async function decorate(block) { const filters = readBlockConfig(block); + let doc; block.textContent = ''; block.classList.add('article-teaser'); - const articleInfo = await fetchTeaserContent(filters); - const formattedDate = formatDate(articleInfo.publishedDate); - block.innerHTML = ` - - `; + const url = new URL(filters.path); + const trimmedURL = url.pathname; + const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; + const teaserContent = await fetchData(fetchUrl); + const articleInfo = teaserContent.find(obj => obj.path === trimmedURL); + const categoryListUrl = `${window.hlx.codeBasePath}/drafts/Kailas/category/category-list.json`; + const categoryListData = await fetchData(categoryListUrl); + console.log('categoryListData', categoryListData); + const articlePath = articleInfo.path; + fetch(articlePath) + .then(response => { + // Check if the request was successful (status code 200) + if (response.ok) { + // Convert the response to text + return response.text(); + } + throw new Error('Network response was not ok.'); + }) + .then(html => { + // Create a new HTML document using DOMParser + const parser = new DOMParser(); + doc = parser.parseFromString(html, 'text/html'); + + + console.log('doc', doc); + console.log(doc.head); + const articleCategory = getMetadata('category', doc); + console.log('articleCategory', articleCategory); + const articleCategoryInfo = categoryListData.find(obj => obj.category === articleCategory); + console.log('articleCategoryInfo', articleCategoryInfo); + const articleCategoryLink = articleCategoryInfo.categoryLink; + console.log('articleCategoryLink', articleCategoryLink); + const formattedDate = formatDate(articleInfo.publishedDate); + block.innerHTML = ` + + `; + }) + .catch(error => { + // Handle any errors that occurred during the fetch + console.error('There was a problem with the fetch operation:', error); + }); } \ No newline at end of file From 1b7042729fcdb5041142d7ef9c3be0e5cb04786d Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 00:06:08 -0500 Subject: [PATCH 27/39] link fixes --- .../blocks/article-teaser/article-teaser.js | 43 ++-- cigaradvisor/scripts/ffetch.js | 183 ------------------ 2 files changed, 18 insertions(+), 208 deletions(-) delete mode 100644 cigaradvisor/scripts/ffetch.js diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 31c5e9ec..037d0202 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -2,25 +2,23 @@ import { createOptimizedPicture, readBlockConfig, getMetadata } from '../../scri function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); - console.log(utcDateString); const utcDate = new Date(utcDateString); - console.log(utcDate); const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const day = utcDate.getUTCDate(); const month = months[utcDate.getUTCMonth()]; const year = utcDate.getUTCFullYear().toString().slice(-2); // Get last two digits of the year const formattedDate = `${day} ${month} ${year}`; - return formattedDate; + const dateTimeAttribute = `${utcDate.getUTCFullYear()}-${String(utcDate.getUTCMonth() + 1).padStart(2, '0')}-${String(utcDate.getUTCDate()).padStart(2, '0')}`; + return `${formattedDate}|${dateTimeAttribute}`; } async function fetchData(url) { - console.log("URL", url); const resp = await fetch(url); + let jsonDataJson = ''; if (resp.ok) { - const jsonDataJson = await resp.json(); - console.log(jsonDataJson); - return jsonDataJson.data; + jsonDataJson = await resp.json(); } + return jsonDataJson.data; } export default async function decorate(block) { @@ -32,13 +30,12 @@ export default async function decorate(block) { const trimmedURL = url.pathname; const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; const teaserContent = await fetchData(fetchUrl); - const articleInfo = teaserContent.find(obj => obj.path === trimmedURL); + const articleInfo = teaserContent.find((obj) => obj.path === trimmedURL); const categoryListUrl = `${window.hlx.codeBasePath}/drafts/Kailas/category/category-list.json`; const categoryListData = await fetchData(categoryListUrl); - console.log('categoryListData', categoryListData); const articlePath = articleInfo.path; fetch(articlePath) - .then(response => { + .then((response) => { // Check if the request was successful (status code 200) if (response.ok) { // Convert the response to text @@ -46,21 +43,17 @@ export default async function decorate(block) { } throw new Error('Network response was not ok.'); }) - .then(html => { + .then((html) => { // Create a new HTML document using DOMParser const parser = new DOMParser(); doc = parser.parseFromString(html, 'text/html'); - - - console.log('doc', doc); - console.log(doc.head); const articleCategory = getMetadata('category', doc); - console.log('articleCategory', articleCategory); - const articleCategoryInfo = categoryListData.find(obj => obj.category === articleCategory); - console.log('articleCategoryInfo', articleCategoryInfo); + const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); const articleCategoryLink = articleCategoryInfo.categoryLink; - console.log('articleCategoryLink', articleCategoryLink); - const formattedDate = formatDate(articleInfo.publishedDate); + const formattedDate = formatDate(articleInfo.publishedDate).split('|')[0]; + const datetimeAttr = formatDate(articleInfo.publishedDate).split('|')[1]; + const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); + const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; block.innerHTML = ` `; }) - .catch(error => { + .catch((error) => { // Handle any errors that occurred during the fetch console.error('There was a problem with the fetch operation:', error); }); -} \ No newline at end of file +} diff --git a/cigaradvisor/scripts/ffetch.js b/cigaradvisor/scripts/ffetch.js deleted file mode 100644 index 819215f2..00000000 --- a/cigaradvisor/scripts/ffetch.js +++ /dev/null @@ -1,183 +0,0 @@ - -/* - * Copyright 2023 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* eslint-disable no-restricted-syntax, no-await-in-loop */ -// Copied from https://github.com/Buuhuu/ffetch, see also the docs there. - -async function* request(url, context) { - const { chunkSize, sheetName, fetch } = context; - for (let offset = 0, total = Infinity; offset < total; offset += chunkSize) { - const params = new URLSearchParams(`offset=${offset}&limit=${chunkSize}`); - if (sheetName) params.append('sheet', sheetName); - const resp = await fetch(`${url}?${params.toString()}`); - if (resp.ok) { - const json = await resp.json(); - total = json.total; - context.total = total; - for (const entry of json.data) yield entry; - } else { - return; - } - } -} - -// Operations: - -function withFetch(upstream, context, fetch) { - context.fetch = fetch; - return upstream; -} - -function withHtmlParser(upstream, context, parseHtml) { - context.parseHtml = parseHtml; - return upstream; -} - -function chunks(upstream, context, chunkSize) { - context.chunkSize = chunkSize; - return upstream; -} - -function sheet(upstream, context, sheetName) { - context.sheetName = sheetName; - return upstream; -} - -async function* skip(upstream, context, from) { - let skipped = 0; - for await (const entry of upstream) { - if (skipped < from) { - skipped += 1; - } else { - yield entry; - } - } -} - -async function* limit(upstream, context, aLimit) { - let yielded = 0; - for await (const entry of upstream) { - yield entry; - yielded += 1; - if (yielded === aLimit) { - return; - } - } -} - -async function* map(upstream, context, fn, maxInFlight = 5) { - const promises = []; - for await (let entry of upstream) { - promises.push(fn(entry)); - if (promises.length === maxInFlight) { - for (entry of promises) { - entry = await entry; - if (entry) yield entry; - } - promises.splice(0, promises.length); - } - } - for (let entry of promises) { - entry = await entry; - if (entry) yield entry; - } -} - -async function* filter(upstream, context, fn) { - for await (const entry of upstream) { - if (fn(entry)) { - yield entry; - } - } -} - -function slice(upstream, context, from, to) { - return limit(skip(upstream, context, from), context, to - from); -} - -function follow(upstream, context, name, newName, maxInFlight = 5) { - const { fetch, parseHtml } = context; - return map(upstream, context, async (entry) => { - const value = entry[name]; - if (value) { - const resp = await fetch(value); - return { ...entry, [newName || name]: resp.ok ? parseHtml(await resp.text()) : null }; - } - return entry; - }, maxInFlight); -} - -async function all(upstream) { - const result = []; - for await (const entry of upstream) { - result.push(entry); - } - return result; -} - -async function first(upstream) { - /* eslint-disable-next-line no-unreachable-loop */ - for await (const entry of upstream) { - return entry; - } - return null; -} - -// Helper - -function assignOperations(generator, context) { - // operations that return a new generator - function createOperation(fn) { - return (...rest) => assignOperations(fn.apply(null, [generator, context, ...rest]), context); - } - const operations = { - skip: createOperation(skip), - limit: createOperation(limit), - slice: createOperation(slice), - map: createOperation(map), - filter: createOperation(filter), - follow: createOperation(follow), - }; - - // functions that either return the upstream generator or no generator at all - const functions = { - chunks: chunks.bind(null, generator, context), - all: all.bind(null, generator, context), - first: first.bind(null, generator, context), - withFetch: withFetch.bind(null, generator, context), - withHtmlParser: withHtmlParser.bind(null, generator, context), - sheet: sheet.bind(null, generator, context), - }; - - Object.assign(generator, operations, functions); - Object.defineProperty(generator, 'total', { get: () => context.total }); - return generator; -} - -export default function ffetch(url) { - let chunkSize = 255; - const fetch = (...rest) => window.fetch.apply(null, rest); - const parseHtml = (html) => new window.DOMParser().parseFromString(html, 'text/html'); - - try { - if ('connection' in window.navigator && window.navigator.connection.saveData === true) { - // request smaller chunks in save data mode - chunkSize = 64; - } - } catch (e) { /* ignore */ } - - const context = { chunkSize, fetch, parseHtml }; - const generator = request(url, context); - - return assignOperations(generator, context); -} From 117148591289021f66150493a8d497bdef5e718b Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 10:32:55 -0500 Subject: [PATCH 28/39] Update article-teaser.css --- .../blocks/article-teaser/article-teaser.css | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 51e18c25..5eccf7c0 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -78,6 +78,42 @@ text-decoration: none; } +.tag.featured { + background-color: #1f1e1e +} + +.tag[data-category="Cigars 101"] { + background-color: #5f5d59 +} + +.tag[data-category="Cigar Makers"] { + background-color: #8e7b5c +} + +.tag[data-category="Cigar News"] { + background-color: #916e35 +} + +.tag[data-category="Cigar Buying Guides"] { + background-color: #7e4a3a +} + +.tag[data-category="Cigar Lifestyle"] .tag { + background-color: #673841 +} + +.tag[data-category="Food & Drink"] .tag { + background-color: #3c5351 +} + +.tag[data-category="Cigar Ratings & Reviews"] { + background-color: #24445d +} + +.tag[data-category="Cigar Humidification"] { + background-color: #5d8371 +} + .article.article--thumbnail .article__image { display: -webkit-flex; display: -ms-flexbox; From cd44030004126c87530b1c316990e516c303c1ae Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 11:04:58 -0500 Subject: [PATCH 29/39] lint fixes --- .../blocks/article-teaser/article-teaser.css | 160 ++++++------------ .../blocks/article-teaser/article-teaser.js | 22 +-- 2 files changed, 66 insertions(+), 116 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 5eccf7c0..90083691 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -1,8 +1,8 @@ -.article--thumbnail:hover::before { +.article-thumbnail:hover::before { visibility: hidden; } -.article.article--thumbnail::before { +.article.article-thumbnail::before { content: ''; height: 100%; width: 100%; @@ -30,28 +30,12 @@ padding-bottom: 20px; } - - - @media screen and (min-width: 60em) { - .article.article--thumbnail { + .article.article-thumbnail { min-height: 26.25rem; } } -.article.article--thumbnail .tag { - -webkit-flex: none; - -ms-flex: none; - flex: none; - position: absolute; - top: 20px; - left: 0; -} - -.tag[data-category="Cigar Buying Guides"] { - background-color: #7e4a3a; -} - .tag { position: absolute; top: 20px; @@ -59,14 +43,9 @@ padding: 7px 24px; margin: 0 auto; text-transform: capitalize; - font-weight: 700; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #fff; @@ -114,37 +93,30 @@ background-color: #5d8371 } -.article.article--thumbnail .article__image { - display: -webkit-flex; - display: -ms-flexbox; +.article.article-thumbnail .tag { + flex: none; + position: absolute; + top: 20px; + left: 0; +} + +.article.article-thumbnail .article-image { display: flex; - -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; - -webkit-flex: 1 0 13rem; - -ms-flex: 1 0 13rem; flex: 1 0 13rem; width: 100%; - /* max-height: 321px; */ } -.article.article--thumbnail .article__image > img { +.article.article-thumbnail .article-image > img { display: block; width: 100%; max-height: 321px; } -.article.article--thumbnail:hover .article__content::before { - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; -} - -.article.article--thumbnail .article__content::before { +.article.article-thumbnail .article-content::before { content: ''; display: block; - -webkit-flex: 1 0 72px; - -ms-flex: 1 0 72px; flex: 1 0 72px; flex-grow: 1; min-height: 72px; @@ -153,25 +125,22 @@ transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; } -.article.article--thumbnail .article__content { +.article.article-thumbnail:hover .article-content::before { + -ms-flex-positive: 0; + flex-grow: 0; +} + +.article.article-thumbnail .article-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - -webkit-flex: none; - -ms-flex: none; flex: none; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; - -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: center; @@ -180,9 +149,7 @@ overflow-y: hidden; } -.article.article--thumbnail .article__header { - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; +.article.article-thumbnail .article-header { flex: 0 0 auto; width: 100%; min-height: 7rem; @@ -194,82 +161,73 @@ } @media screen and (min-width: 60em) { - .article.article--thumbnail .article__header { + .article.article-thumbnail .article-header { min-height:140px } } -.article.article--thumbnail .article__title { +.article.article-thumbnail .article-title { margin: 0 14px 16px; font-size: 18px; font-weight: 800; } -.article.article--thumbnail .article__titleLink { +.article.article-thumbnail .article-title-link { display: block; font-size: 1em; font-weight: inherit; color: inherit; } -.article--thumbnail .article__meta{ +.article-thumbnail .article-meta{ font-size: 0; color: #141414; } -.article--thumbnail .article__meta a{ +.article-thumbnail .article-meta a{ position: relative; z-index: 2; text-decoration: none; color: #141414; } -.article--thumbnail .article__meta > * { +.article-thumbnail .article-meta > * { display: inline-block; font-family: montserrat, sans-serif; font-weight: 600; font-size: 16px; } -.article.article--thumbnail .article__pubdate:not(:only-child)::before { +.article.article-thumbnail .article-pubdate:not(:only-child)::before { content: '|'; display: inline-block; margin: 0 .5em; } -.article.article--thumbnail:hover .article__preview { - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; -} - -.article.article--thumbnail .article__preview { - -webkit-flex: 0 0 0; - -ms-flex: 0 0 0; +.article.article-thumbnail .article-preview { flex: 0 0 0; flex-grow: 0; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; - -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; padding: 0 30px; - font-family: open sans,sans-serif; + font-family: "Open Sans", sans-serif; background-color: #eaeaea; transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; } -.article.article--thumbnail .article__excerpt::after { +.article.article-thumbnail:hover .article-preview { + -ms-flex-positive: 1; + flex-grow: 1; +} + +.article.article-thumbnail .article-excerpt::after { content: ''; display: block; position: absolute; @@ -277,13 +235,11 @@ left: 0; right: 0; height: 20px; - background: linear-gradient(to top,#eaeaea,rgba(234,234,234,.8) 6px,rgba(234,234,234,0)); + background: linear-gradient(to top, #eaeaea, rgba(234 234 234 80%) 6px, rgba(234 234 234 0%)); } -.article.article--thumbnail .article__excerpt { +.article.article-thumbnail .article-excerpt { position: relative; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; flex: 0 0 auto; flex-shrink: 0; overflow: hidden; @@ -295,22 +251,13 @@ transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out,-ms-flex-negative .55s ease-in-out; } -.article.article--thumbnail:hover .article__excerpt { - -webkit-flex-shrink: 1; +.article.article-thumbnail:hover .article-excerpt { -ms-flex-negative: 1; flex-shrink: 1; opacity: 1; } -.article.article--thumbnail .article__excerpt p:last-child, .article.article--thumbnail .article__excerpt ul:last-child, .article.article--thumbnail .article__excerpt ol:last-child { - margin-bottom: 0; -} - -.article.article--thumbnail .article__excerpt p:first-child, .article.article--thumbnail .article__excerpt ul:first-child, .article.article--thumbnail .article__excerpt ol:first-child { - margin-top: 0; -} - -.article--thumbnail .article__excerpt p{ +.article-thumbnail .article-excerpt p{ font-size: 1em; font-family: inherit; font-weight: inherit; @@ -318,24 +265,25 @@ cursor: default; } +.article.article-thumbnail .article-excerpt p:last-child, .article.article-thumbnail .article-excerpt ul:last-child, .article.article-thumbnail .article-excerpt ol:last-child { + margin-bottom: 0; +} -.read_more::after { +.article.article-thumbnail .article-excerpt p:first-child, .article.article-thumbnail .article-excerpt ul:first-child, .article.article-thumbnail .article-excerpt ol:first-child { + margin-top: 0; +} + +.read-more::after { content: '\f054'; - font-family: FontAwesome; + font-family: FontAwesome, sans-serif; margin-left: 8px; line-height: 1.5; color: #b19b5e; font-size: 18px; } -.article.article--thumbnail:hover .article__readMore { - opacity: 1; -} - -.article--thumbnail .article__readMore { +.article-thumbnail .article-read-more { display: block; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; z-index: 2; @@ -347,14 +295,16 @@ transition: opacity .55s ease-in-out; } -.read_more { + +.article.article-thumbnail:hover .article-read-more { + opacity: 1; +} + +.read-more { text-transform: uppercase; font-weight: 700; text-align: center; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: #b19b5e; diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 037d0202..e449e4e5 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -55,27 +55,27 @@ export default async function decorate(block) { const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; block.innerHTML = ` -
+ From d9aa7407db00930b6d5bfd4db7c3aed7ef633cc0 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 11:15:29 -0500 Subject: [PATCH 30/39] code cleanup --- .../blocks/article-teaser/article-teaser.css | 82 +++++++++---------- 1 file changed, 37 insertions(+), 45 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 90083691..49465bff 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -13,21 +13,21 @@ transition: visibility .2s linear; } -.article{ - position: relative; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-end; - text-align: center; - overflow: hidden; - flex: 1 1 100%; - min-height: 20rem; - padding-bottom: 20px; +.article { + position: relative; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-end; + text-align: center; + overflow: hidden; + flex: 1 1 100%; + min-height: 20rem; + padding-bottom: 20px; } @media screen and (min-width: 60em) { @@ -49,7 +49,7 @@ -ms-flex-align: center; align-items: center; color: #fff; - font-family: montserrat,sans-serif; + font-family: montserrat, sans-serif; font-weight: 600; background-color: #3c3a3b; font-size: 12px; @@ -102,13 +102,12 @@ .article.article-thumbnail .article-image { display: flex; - -ms-flex-align: start; align-items: flex-start; flex: 1 0 13rem; width: 100%; } -.article.article-thumbnail .article-image > img { +.article.article-thumbnail .article-image>img { display: block; width: 100%; max-height: 321px; @@ -118,15 +117,11 @@ content: ''; display: block; flex: 1 0 72px; - flex-grow: 1; min-height: 72px; - transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out; - transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; } .article.article-thumbnail:hover .article-content::before { - -ms-flex-positive: 0; flex-grow: 0; } @@ -139,14 +134,12 @@ flex: none; display: flex; flex-direction: column; - -ms-flex-align: stretch; align-items: stretch; - -ms-flex-pack: end; justify-content: flex-end; text-align: center; overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; + overflow-x: hidden; + overflow-y: hidden; } .article.article-thumbnail .article-header { @@ -154,7 +147,7 @@ width: 100%; min-height: 7rem; padding: 20px 30px; - padding-top: 20px; + padding-top: 20px; padding-top: 40px; background-color: #eaeaea; display: block; @@ -162,7 +155,7 @@ @media screen and (min-width: 60em) { .article.article-thumbnail .article-header { - min-height:140px + min-height: 140px } } @@ -179,19 +172,19 @@ color: inherit; } -.article-thumbnail .article-meta{ +.article-thumbnail .article-meta { font-size: 0; color: #141414; } -.article-thumbnail .article-meta a{ +.article-thumbnail .article-meta a { position: relative; z-index: 2; text-decoration: none; color: #141414; } -.article-thumbnail .article-meta > * { +.article-thumbnail .article-meta>* { display: inline-block; font-family: montserrat, sans-serif; font-weight: 600; @@ -209,21 +202,18 @@ flex-grow: 0; display: flex; flex-direction: column; - -ms-flex-align: stretch; align-items: stretch; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; padding: 0 30px; font-family: "Open Sans", sans-serif; background-color: #eaeaea; - transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out; + transition: flex-grow .55s ease-in-out, -webkit-flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out; - transition: flex-grow .55s ease-in-out,-webkit-flex-grow .55s ease-in-out,-ms-flex-positive .55s ease-in-out; + transition: flex-grow .55s ease-in-out, -webkit-flex-grow .55s ease-in-out, -ms-flex-positive .55s ease-in-out; } .article.article-thumbnail:hover .article-preview { - -ms-flex-positive: 1; flex-grow: 1; } @@ -241,23 +231,22 @@ .article.article-thumbnail .article-excerpt { position: relative; flex: 0 0 auto; - flex-shrink: 0; + flex-shrink: 0; overflow: hidden; padding-bottom: 20px; font-weight: 600; opacity: 0; - transition: opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out; - transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out; - transition: flex-shrink .55s ease-in-out,opacity .55s ease-in-out,-webkit-flex-shrink .55s ease-in-out,-ms-flex-negative .55s ease-in-out; + transition: opacity .55s ease-in-out, -webkit-flex-shrink .55s ease-in-out; + transition: flex-shrink .55s ease-in-out, opacity .55s ease-in-out; + transition: flex-shrink .55s ease-in-out, opacity .55s ease-in-out, -webkit-flex-shrink .55s ease-in-out, -ms-flex-negative .55s ease-in-out; } .article.article-thumbnail:hover .article-excerpt { - -ms-flex-negative: 1; flex-shrink: 1; opacity: 1; } -.article-thumbnail .article-excerpt p{ +.article-thumbnail .article-excerpt p { font-size: 1em; font-family: inherit; font-weight: inherit; @@ -265,11 +254,15 @@ cursor: default; } -.article.article-thumbnail .article-excerpt p:last-child, .article.article-thumbnail .article-excerpt ul:last-child, .article.article-thumbnail .article-excerpt ol:last-child { +.article.article-thumbnail .article-excerpt p:last-child, +.article.article-thumbnail .article-excerpt ul:last-child, +.article.article-thumbnail .article-excerpt ol:last-child { margin-bottom: 0; } -.article.article-thumbnail .article-excerpt p:first-child, .article.article-thumbnail .article-excerpt ul:first-child, .article.article-thumbnail .article-excerpt ol:first-child { +.article.article-thumbnail .article-excerpt p:first-child, +.article.article-thumbnail .article-excerpt ul:first-child, +.article.article-thumbnail .article-excerpt ol:first-child { margin-top: 0; } @@ -305,7 +298,6 @@ font-weight: 700; text-align: center; display: flex; - -ms-flex-pack: center; justify-content: center; color: #b19b5e; font-size: 18px; From a5adb7f999ba4d65dbca1bdc1b35c80c294c4739 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 11:59:48 -0500 Subject: [PATCH 31/39] no message --- .../blocks/article-teaser/article-teaser.css | 39 ++++++------------- 1 file changed, 11 insertions(+), 28 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index 49465bff..e3e569ef 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -36,7 +36,7 @@ } } -.tag { +.article-category { position: absolute; top: 20px; left: 0; @@ -44,9 +44,7 @@ margin: 0 auto; text-transform: capitalize; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; color: #fff; font-family: montserrat, sans-serif; @@ -57,49 +55,42 @@ text-decoration: none; } -.tag.featured { +.article-category.featured { background-color: #1f1e1e } -.tag[data-category="Cigars 101"] { +.article-category[data-category="Cigars 101"] { background-color: #5f5d59 } -.tag[data-category="Cigar Makers"] { +.article-category[data-category="Cigar Makers"] { background-color: #8e7b5c } -.tag[data-category="Cigar News"] { +.article-category[data-category="Cigar News"] { background-color: #916e35 } -.tag[data-category="Cigar Buying Guides"] { +.article-category[data-category="Cigar Buying Guides"] { background-color: #7e4a3a } -.tag[data-category="Cigar Lifestyle"] .tag { +.article-category[data-category="Cigar Lifestyle"] .article-category { background-color: #673841 } -.tag[data-category="Food & Drink"] .tag { +.article-category[data-category="Food & Drink"] .article-category { background-color: #3c5351 } -.tag[data-category="Cigar Ratings & Reviews"] { +.article-category[data-category="Cigar Ratings & Reviews"] { background-color: #24445d } -.tag[data-category="Cigar Humidification"] { +.article-category[data-category="Cigar Humidification"] { background-color: #5d8371 } -.article.article-thumbnail .tag { - flex: none; - position: absolute; - top: 20px; - left: 0; -} - .article.article-thumbnail .article-image { display: flex; align-items: flex-start; @@ -146,9 +137,7 @@ flex: 0 0 auto; width: 100%; min-height: 7rem; - padding: 20px 30px; - padding-top: 20px; - padding-top: 40px; + padding: 40px 30px 20px; background-color: #eaeaea; display: block; } @@ -199,7 +188,6 @@ .article.article-thumbnail .article-preview { flex: 0 0 0; - flex-grow: 0; display: flex; flex-direction: column; align-items: stretch; @@ -208,9 +196,7 @@ padding: 0 30px; font-family: "Open Sans", sans-serif; background-color: #eaeaea; - transition: flex-grow .55s ease-in-out, -webkit-flex-grow .55s ease-in-out; transition: flex-grow .55s ease-in-out; - transition: flex-grow .55s ease-in-out, -webkit-flex-grow .55s ease-in-out, -ms-flex-positive .55s ease-in-out; } .article.article-thumbnail:hover .article-preview { @@ -231,14 +217,11 @@ .article.article-thumbnail .article-excerpt { position: relative; flex: 0 0 auto; - flex-shrink: 0; overflow: hidden; padding-bottom: 20px; font-weight: 600; opacity: 0; - transition: opacity .55s ease-in-out, -webkit-flex-shrink .55s ease-in-out; transition: flex-shrink .55s ease-in-out, opacity .55s ease-in-out; - transition: flex-shrink .55s ease-in-out, opacity .55s ease-in-out, -webkit-flex-shrink .55s ease-in-out, -ms-flex-negative .55s ease-in-out; } .article.article-thumbnail:hover .article-excerpt { From 8b202b2e854927ccf82159e87b17b8e5b122858a Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:10:34 -0500 Subject: [PATCH 32/39] teaser refactoring --- cigaradvisor/blocks/article-teaser/article-teaser.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index e449e4e5..65f1d045 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -56,7 +56,7 @@ export default async function decorate(block) { const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; block.innerHTML = ` From d5b3c02a4e5f8bccf72321433335acc50f965bc7 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:23:38 -0500 Subject: [PATCH 33/39] Update article-teaser.js --- cigaradvisor/blocks/article-teaser/article-teaser.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 65f1d045..1b107368 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -22,15 +22,12 @@ async function fetchData(url) { } export default async function decorate(block) { - const filters = readBlockConfig(block); - let doc; + const filterPath = block.querySelector('a').getAttribute('href'); block.textContent = ''; block.classList.add('article-teaser'); - const url = new URL(filters.path); - const trimmedURL = url.pathname; const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; const teaserContent = await fetchData(fetchUrl); - const articleInfo = teaserContent.find((obj) => obj.path === trimmedURL); + const articleInfo = teaserContent.find((obj) => obj.path === filterPath); const categoryListUrl = `${window.hlx.codeBasePath}/drafts/Kailas/category/category-list.json`; const categoryListData = await fetchData(categoryListUrl); const articlePath = articleInfo.path; @@ -46,7 +43,7 @@ export default async function decorate(block) { .then((html) => { // Create a new HTML document using DOMParser const parser = new DOMParser(); - doc = parser.parseFromString(html, 'text/html'); + const doc = parser.parseFromString(html, 'text/html'); const articleCategory = getMetadata('category', doc); const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); const articleCategoryLink = articleCategoryInfo.categoryLink; From 8c4ebedf4b022444857d408741655fba742ed601 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:25:54 -0500 Subject: [PATCH 34/39] Update article-teaser.js --- cigaradvisor/blocks/article-teaser/article-teaser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 1b107368..91d0773c 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,4 +1,4 @@ -import { createOptimizedPicture, readBlockConfig, getMetadata } from '../../scripts/aem.js'; +import { createOptimizedPicture, getMetadata } from '../../scripts/aem.js'; function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); From cc70e977c8130b87677b019cb5c21ceeb8deb9fb Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 13:05:55 -0500 Subject: [PATCH 35/39] Update article-teaser.js --- .../blocks/article-teaser/article-teaser.js | 37 +++++-------------- 1 file changed, 9 insertions(+), 28 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 91d0773c..fa272351 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,4 +1,4 @@ -import { createOptimizedPicture, getMetadata } from '../../scripts/aem.js'; +import { createOptimizedPicture } from '../../scripts/aem.js'; function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); @@ -30,28 +30,14 @@ export default async function decorate(block) { const articleInfo = teaserContent.find((obj) => obj.path === filterPath); const categoryListUrl = `${window.hlx.codeBasePath}/drafts/Kailas/category/category-list.json`; const categoryListData = await fetchData(categoryListUrl); - const articlePath = articleInfo.path; - fetch(articlePath) - .then((response) => { - // Check if the request was successful (status code 200) - if (response.ok) { - // Convert the response to text - return response.text(); - } - throw new Error('Network response was not ok.'); - }) - .then((html) => { - // Create a new HTML document using DOMParser - const parser = new DOMParser(); - const doc = parser.parseFromString(html, 'text/html'); - const articleCategory = getMetadata('category', doc); - const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); - const articleCategoryLink = articleCategoryInfo.categoryLink; - const formattedDate = formatDate(articleInfo.publishedDate).split('|')[0]; - const datetimeAttr = formatDate(articleInfo.publishedDate).split('|')[1]; - const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); - const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; - block.innerHTML = ` + const articleCategory = articleInfo.category; + const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); + const articleCategoryLink = articleCategoryInfo.categoryLink; + const formattedDate = formatDate(articleInfo.publishedDate).split('|')[0]; + const datetimeAttr = formatDate(articleInfo.publishedDate).split('|')[1]; + const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); + const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; + block.innerHTML = ` `; - }) - .catch((error) => { - // Handle any errors that occurred during the fetch - console.error('There was a problem with the fetch operation:', error); - }); } From 3489899935892dc9506ffb8501c25dd8451de485 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 5 Dec 2023 13:14:54 -0500 Subject: [PATCH 36/39] Update article-teaser.js --- cigaradvisor/blocks/article-teaser/article-teaser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index fa272351..9c0618fb 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -40,7 +40,7 @@ export default async function decorate(block) { block.innerHTML = `
- Cigar Buying Guides + ${articleCategory}
${createOptimizedPicture(articleInfo.image).outerHTML}
From 03e8428a96efd72aaa8480662bbebf4b6b0a7bb8 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 10:44:03 -0500 Subject: [PATCH 37/39] code review fixes --- cigaradvisor/blocks/article-teaser/article-teaser.js | 6 ++---- cigaradvisor/styles/styles.css | 9 +++------ 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 9c0618fb..bcb2bd55 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -23,7 +23,6 @@ async function fetchData(url) { export default async function decorate(block) { const filterPath = block.querySelector('a').getAttribute('href'); - block.textContent = ''; block.classList.add('article-teaser'); const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; const teaserContent = await fetchData(fetchUrl); @@ -38,9 +37,8 @@ export default async function decorate(block) { const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; block.innerHTML = ` -
- - ${articleCategory} +
+ ${articleCategory}
${createOptimizedPicture(articleInfo.image).outerHTML}
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index ae28d6f8..0859d291 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -23,22 +23,19 @@ --nav-height: 64px; } -/* body { +body { display: none; + color: #333; } body.appear { display: block; -} */ +} header { height: var(--nav-height); } -body{ - color: #333; -} - html { font-size:100%; line-height:1.5 From 1a021814169e4892c7c9773614d0262cc63d385e Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 11:52:09 -0500 Subject: [PATCH 38/39] Update article-teaser.css --- .../blocks/article-teaser/article-teaser.css | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index e3e569ef..3a68429e 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -1,8 +1,8 @@ -.article-thumbnail:hover::before { +.article-teaser.block .article-thumbnail:hover::before { visibility: hidden; } -.article.article-thumbnail::before { +.article-teaser.block .article.article-thumbnail::before { content: ''; height: 100%; width: 100%; @@ -13,7 +13,7 @@ transition: visibility .2s linear; } -.article { +.article-teaser.block .article { position: relative; top: 0; right: 0; @@ -31,12 +31,12 @@ } @media screen and (min-width: 60em) { - .article.article-thumbnail { + .article-teaser.block .article.article-thumbnail { min-height: 26.25rem; } } -.article-category { +.article-teaser.block .article-category { position: absolute; top: 20px; left: 0; @@ -55,56 +55,56 @@ text-decoration: none; } -.article-category.featured { +.article-teaser.block .article-category.featured { background-color: #1f1e1e } -.article-category[data-category="Cigars 101"] { +.article-teaser.block .article-category[data-category="Cigars 101"] { background-color: #5f5d59 } -.article-category[data-category="Cigar Makers"] { +.article-teaser.block .article-category[data-category="Cigar Makers"] { background-color: #8e7b5c } -.article-category[data-category="Cigar News"] { +.article-teaser.block .article-category[data-category="Cigar News"] { background-color: #916e35 } -.article-category[data-category="Cigar Buying Guides"] { +.article-teaser.block .article-category[data-category="Cigar Buying Guides"] { background-color: #7e4a3a } -.article-category[data-category="Cigar Lifestyle"] .article-category { +.article-teaser.block .article-category[data-category="Cigar Lifestyle"] .article-category { background-color: #673841 } -.article-category[data-category="Food & Drink"] .article-category { +.article-teaser.block .article-category[data-category="Food & Drink"] .article-category { background-color: #3c5351 } -.article-category[data-category="Cigar Ratings & Reviews"] { +.article-teaser.block .article-category[data-category="Cigar Ratings & Reviews"] { background-color: #24445d } -.article-category[data-category="Cigar Humidification"] { +.article-teaser.block .article-category[data-category="Cigar Humidification"] { background-color: #5d8371 } -.article.article-thumbnail .article-image { +.article-teaser.block .article.article-thumbnail .article-image { display: flex; align-items: flex-start; flex: 1 0 13rem; width: 100%; } -.article.article-thumbnail .article-image>img { +.article-teaser.block .article.article-thumbnail .article-image>img { display: block; width: 100%; max-height: 321px; } -.article.article-thumbnail .article-content::before { +.article-teaser.block .article.article-thumbnail .article-content::before { content: ''; display: block; flex: 1 0 72px; @@ -112,11 +112,11 @@ transition: flex-grow .55s ease-in-out; } -.article.article-thumbnail:hover .article-content::before { +.article-teaser.block .article.article-thumbnail:hover .article-content::before { flex-grow: 0; } -.article.article-thumbnail .article-content { +.article-teaser.block .article.article-thumbnail .article-content { position: absolute; top: 0; right: 0; @@ -133,7 +133,7 @@ overflow-y: hidden; } -.article.article-thumbnail .article-header { +.article-teaser.block .article.article-thumbnail .article-header { flex: 0 0 auto; width: 100%; min-height: 7rem; @@ -143,50 +143,50 @@ } @media screen and (min-width: 60em) { - .article.article-thumbnail .article-header { + .article-teaser.block .article.article-thumbnail .article-header { min-height: 140px } } -.article.article-thumbnail .article-title { +.article-teaser.block .article.article-thumbnail .article-title { margin: 0 14px 16px; font-size: 18px; font-weight: 800; } -.article.article-thumbnail .article-title-link { +.article-teaser.block .article.article-thumbnail .article-title-link { display: block; font-size: 1em; font-weight: inherit; color: inherit; } -.article-thumbnail .article-meta { +.article-teaser.block .article-thumbnail .article-meta { font-size: 0; color: #141414; } -.article-thumbnail .article-meta a { +.article-teaser.block .article-thumbnail .article-meta a { position: relative; z-index: 2; text-decoration: none; color: #141414; } -.article-thumbnail .article-meta>* { +.article-teaser.block .article-thumbnail .article-meta>* { display: inline-block; font-family: montserrat, sans-serif; font-weight: 600; font-size: 16px; } -.article.article-thumbnail .article-pubdate:not(:only-child)::before { +.article-teaser.block .article.article-thumbnail .article-pubdate:not(:only-child)::before { content: '|'; display: inline-block; margin: 0 .5em; } -.article.article-thumbnail .article-preview { +.article-teaser.block .article.article-thumbnail .article-preview { flex: 0 0 0; display: flex; flex-direction: column; @@ -199,11 +199,11 @@ transition: flex-grow .55s ease-in-out; } -.article.article-thumbnail:hover .article-preview { +.article-teaser.block .article.article-thumbnail:hover .article-preview { flex-grow: 1; } -.article.article-thumbnail .article-excerpt::after { +.article-teaser.block .article.article-thumbnail .article-excerpt::after { content: ''; display: block; position: absolute; @@ -214,7 +214,7 @@ background: linear-gradient(to top, #eaeaea, rgba(234 234 234 80%) 6px, rgba(234 234 234 0%)); } -.article.article-thumbnail .article-excerpt { +.article-teaser.block .article.article-thumbnail .article-excerpt { position: relative; flex: 0 0 auto; overflow: hidden; @@ -224,12 +224,12 @@ transition: flex-shrink .55s ease-in-out, opacity .55s ease-in-out; } -.article.article-thumbnail:hover .article-excerpt { +.article-teaser.block .article.article-thumbnail:hover .article-excerpt { flex-shrink: 1; opacity: 1; } -.article-thumbnail .article-excerpt p { +.article-teaser.block .article-thumbnail .article-excerpt p { font-size: 1em; font-family: inherit; font-weight: inherit; @@ -237,19 +237,19 @@ cursor: default; } -.article.article-thumbnail .article-excerpt p:last-child, -.article.article-thumbnail .article-excerpt ul:last-child, -.article.article-thumbnail .article-excerpt ol:last-child { +.article-teaser.block .article.article-thumbnail .article-excerpt p:last-child, +.article-teaser.block .article.article-thumbnail .article-excerpt ul:last-child, +.article-teaser.block .article.article-thumbnail .article-excerpt ol:last-child { margin-bottom: 0; } -.article.article-thumbnail .article-excerpt p:first-child, -.article.article-thumbnail .article-excerpt ul:first-child, -.article.article-thumbnail .article-excerpt ol:first-child { +.article-teaser.block .article.article-thumbnail .article-excerpt p:first-child, +.article-teaser.block .article.article-thumbnail .article-excerpt ul:first-child, +.article-teaser.block .article.article-thumbnail .article-excerpt ol:first-child { margin-top: 0; } -.read-more::after { +.article-teaser.block .read-more::after { content: '\f054'; font-family: FontAwesome, sans-serif; margin-left: 8px; @@ -258,7 +258,7 @@ font-size: 18px; } -.article-thumbnail .article-read-more { +.article-teaser.block .article-thumbnail .article-read-more { display: block; flex: 0 0 auto; position: relative; @@ -272,11 +272,11 @@ } -.article.article-thumbnail:hover .article-read-more { +.article-teaser.block .article.article-thumbnail:hover .article-read-more { opacity: 1; } -.read-more { +.article-teaser.block .read-more { text-transform: uppercase; font-weight: 700; text-align: center; From f135093e82d424179354c40f68eeca66065698c7 Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 6 Dec 2023 12:43:25 -0500 Subject: [PATCH 39/39] Update cigaradvisor/blocks/article-teaser/article-teaser.js Co-authored-by: Bryan Stopp --- cigaradvisor/blocks/article-teaser/article-teaser.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index bcb2bd55..9547592e 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -32,8 +32,7 @@ export default async function decorate(block) { const articleCategory = articleInfo.category; const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); const articleCategoryLink = articleCategoryInfo.categoryLink; - const formattedDate = formatDate(articleInfo.publishedDate).split('|')[0]; - const datetimeAttr = formatDate(articleInfo.publishedDate).split('|')[1]; + const [formattedDate, datetimeAttr] = formatDate(articleInfo.publishedDate).split('|'); const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; block.innerHTML = `