From 8664ae52786dbb4de76648da1bf62b12fe7a1808 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:51:06 -0500 Subject: [PATCH 01/15] initial --- .../blocks/articleheader/articleheader.css | 102 ++++++++++++++++++ .../blocks/articleheader/articleheader.js | 47 ++++++++ cigaradvisor/scripts/scripts.js | 44 +++++++- cigaradvisor/styles/styles.css | 7 ++ 4 files changed, 195 insertions(+), 5 deletions(-) create mode 100644 cigaradvisor/blocks/articleheader/articleheader.css create mode 100644 cigaradvisor/blocks/articleheader/articleheader.js diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css new file mode 100644 index 00000000..9da3b08f --- /dev/null +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -0,0 +1,102 @@ +main .articleheader-container{ + margin-top: 46px; +} + +.articleheader.block .image-wrapper { + display: flex; + justify-content: center; + align-items: center; + max-height: 650px; + background-color: #eaeaea; +} + +.articleheader.block .image-wrapper img{ + display: block; + width: 100%; + max-height: 650px; +} + +.articleheader.block .article-info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-left: 0; + padding-right: 0; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + text-align: center; +} + +.articleheader.block .article-info .article-category { + float: none; + display: flex; + justify-content: center; + margin: 30px auto 10px; +} + +.articleheader.block .article-info .article-category a { + position: relative; + top: 0; + left: 0; + padding: 7px 24px; + margin: 0 auto; + text-transform: capitalize; + display: flex; + justify-content: center; + color: #fff; + font-family: montserrat,sans-serif; + font-weight: 600; + background-color: #3c3a3b; + font-size: 12px; +} + +.articleheader.block .article-info h1{ + font-size: 36px; +} + +.articleheader.block .article-info .article-author { + padding-left: 0; + display: flex; + justify-content: center; + align-items: center; + margin: 40px auto; +} + +/* separate children of .article-author with a pipe */ +.articleheader.block .article-info .article-author > a::after { + content: ""; + display: inline-block; + width: 1px; + height: 12px; + background-color: #3c3a3b; + margin: 0 10px; +} + +.articleheader.block .article-info .article-author .article-published-date { + font-family: var(--ff-opensans); + font-weight: 600; + color: #141414; + font-size: 14px; +} + +.articleheader.block .article-read-time { + text-align: justify; + font-size: 18px; + line-height: 30px; + color: var(--grey); + padding-left: 0; + padding-right: 0; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; +} + +@media screen and (min-width: 900px) { + main .articleheader-container { + margin-top: 77px; + } +} \ No newline at end of file diff --git a/cigaradvisor/blocks/articleheader/articleheader.js b/cigaradvisor/blocks/articleheader/articleheader.js new file mode 100644 index 00000000..72ce88b9 --- /dev/null +++ b/cigaradvisor/blocks/articleheader/articleheader.js @@ -0,0 +1,47 @@ +import { fetchData } from '../../scripts/scripts.js'; + +function getRelativePath(path) { + let relPath = path; + try { + const url = new URL(path); + relPath = url.pathname; + } catch (error) { + // do nothing + } + return relPath; +} + +export default async function decorate(block) { + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('image-wrapper'); + const picture = block.querySelector('picture'); + imageWrapper.append(picture); + const articleInfo = document.createElement('div'); + articleInfo.classList.add('article-info'); + const categoryLink = block.querySelector('p.category').innerText; + const category = await fetchData(getRelativePath(categoryLink)); + const categoryLinkEl = document.createElement('div'); + categoryLinkEl.classList.add('article-category'); + categoryLinkEl.innerHTML = `${category.title}`; + articleInfo.append(categoryLinkEl); + articleInfo.append(block.querySelector('h1')); + const authorLink = block.querySelector('p.author').innerText; + const author = await fetchData(getRelativePath(authorLink)); + const authorLinkEl = document.createElement('div'); + authorLinkEl.classList.add('article-author'); + authorLinkEl.innerHTML = `By ${author.title}`; + articleInfo.append(authorLinkEl); + const publishedDate = block.querySelector('p.published-date').innerText; + const publishedDateEl = document.createElement('span'); + publishedDateEl.classList.add('article-published-date'); + publishedDateEl.innerText = publishedDate; + authorLinkEl.append(publishedDateEl); + articleInfo.append(authorLinkEl); + const readTime = block.querySelector('p.read-time') ? block.querySelector('p.read-time').innerText : ''; + const readTimeEl = document.createElement('span'); + readTimeEl.classList.add('article-read-time'); + readTimeEl.innerHTML = `Reading Time: ${readTime}`; + articleInfo.append(readTimeEl); + block.replaceChildren(imageWrapper); + block.append(articleInfo); +} diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index a2e6a47b..bd660e23 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -11,6 +11,7 @@ import { waitForLCP, loadBlocks, loadCSS, + getMetadata, } from './aem.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -53,6 +54,29 @@ function buildHeroBlock(main) { } } +function buildArticleHeader(mainEl) { + const div = document.createElement('div'); + const h1 = mainEl.querySelector('h1'); + const picture = mainEl.querySelector('picture'); + const category = getMetadata('category'); + const authorLink = getMetadata('author'); + const publishedDate = getMetadata('publisheddate'); + const readTime = document.querySelector('meta[name="readingtime"]').content; + const articleBlurb = getMetadata('articleblurb'); + + const articleHeaderBlockEl = buildBlock('articleheader', [ + [picture], + [`

${category}

`], + [h1], + [`

${readTime}

`], + [`

${authorLink}

`], + [`

${publishedDate}

`], + [`

${articleBlurb}

`], + ]); + div.append(articleHeaderBlockEl); + mainEl.prepend(div); +} + /** * Builds two column grid. * @param {Element} main The container element @@ -94,7 +118,14 @@ async function loadFonts() { */ function buildAutoBlocks(main) { try { - buildHeroBlock(main); + const isHome = document.querySelector('body.homepage'); + const isBlogPost = !!document.querySelector('body.blog-post-template'); + if (isHome) { + buildHeroBlock(main); + } + if (isBlogPost) { + buildArticleHeader(main); + } } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); @@ -145,17 +176,20 @@ export function decorateExternalLink(element) { } /** - * Simple funtion to fetch json data from a spreadsheet + * Simple funtion to fetch json data from query-index.json * @param {*} url * @returns jsonData */ -export async function fetchData(url) { - const resp = await fetch(url); +export async function fetchData(filterPath) { + const fetchUrl = '/query-index.json'; + const resp = await fetch(fetchUrl); let jsonData = ''; if (resp.ok) { jsonData = await resp.json(); } - return jsonData.data; + const responseData = jsonData.data; + const filteredData = responseData.find((obj) => obj.path === filterPath); + return filteredData; } /** diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 316e0085..3ce073c2 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -197,6 +197,7 @@ body { display: none; margin: 0; color: var(--clr-text); + font-family: var(--ff-arial); } body.appear { @@ -379,3 +380,9 @@ main .section[data-layout="50/50"] .right-grid>div { font-size: 45px; } } + +@media screen and (min-width: 1200px) { + a { + font-size: 14px; + } +} From cf1108d1f744e16c149f518e139c888a803fb830 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 12:00:09 -0500 Subject: [PATCH 02/15] Update articleheader.css --- .../blocks/articleheader/articleheader.css | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 9da3b08f..3e3a763a 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -95,6 +95,36 @@ main .articleheader-container{ max-width: 1080px; } +.blog-post-template .author-container > .default-content-wrapper { + padding-left: 0; + padding-right: 0; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + text-align: justify; +} + +.blog-post-template .author-container > .default-content-wrapper p { + font-size: 18px; + line-height: 30px; + font-family: var(--ff-opensans); + font-weight: 600; + color: #141414; + cursor: default; +} + +.blog-post-template .author-container > .default-content-wrapper picture { + width: 1000px; + padding: 20px; + max-width: 100%; + clear: both; +} + +.blog-post-template .author-container > .default-content-wrapper picture img { + padding: 20px 20px 20px 0; +} + @media screen and (min-width: 900px) { main .articleheader-container { margin-top: 77px; From 9b2a4cbf26481b60c202e180ace4f12f350a8390 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 13:35:09 -0500 Subject: [PATCH 03/15] article image caption --- cigaradvisor/blocks/articleheader/articleheader.css | 11 +++++++++++ cigaradvisor/scripts/scripts.js | 13 +++++++++++++ 2 files changed, 24 insertions(+) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 3e3a763a..444a0fc5 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -125,6 +125,17 @@ main .articleheader-container{ padding: 20px 20px 20px 0; } +.blog-post-template .author-container > .default-content-wrapper .article-image-caption { + font-family: var(--ff-opensans); + font-size: 16px; + text-align: center; + padding: 0 20px; + font-style: italic; + font-weight: 700; + color: #888; + +} + @media screen and (min-width: 900px) { main .articleheader-container { margin-top: 77px; diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index bd660e23..6a88580d 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -54,7 +54,20 @@ function buildHeroBlock(main) { } } +/** + * Builds the article header for the given main element. + * @param {HTMLElement} mainEl - The main element to build the article header for. + */ function buildArticleHeader(mainEl) { + const paragraphs = mainEl.querySelectorAll('p'); + paragraphs.forEach(function(paragraph) { + if (paragraph.querySelector('picture') !== null) { + var nextSibling = paragraph.nextElementSibling; + if (nextSibling && nextSibling.querySelector('em') !== null) { + nextSibling.classList.add('article-image-caption'); + } + } + }); const div = document.createElement('div'); const h1 = mainEl.querySelector('h1'); const picture = mainEl.querySelector('picture'); From 3298de53ed05b07a844dad7af7c95c0d4bf48ae1 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 13:41:47 -0500 Subject: [PATCH 04/15] caption --- cigaradvisor/blocks/articleheader/articleheader.css | 5 ++--- cigaradvisor/scripts/scripts.js | 9 +++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 444a0fc5..81a41e27 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -114,7 +114,7 @@ main .articleheader-container{ cursor: default; } -.blog-post-template .author-container > .default-content-wrapper picture { +.blog-post-template .author-container > .default-content-wrapper .article-image-wrapper { width: 1000px; padding: 20px; max-width: 100%; @@ -129,11 +129,10 @@ main .articleheader-container{ font-family: var(--ff-opensans); font-size: 16px; text-align: center; - padding: 0 20px; font-style: italic; font-weight: 700; color: #888; - + margin: 0; } @media screen and (min-width: 900px) { diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 6a88580d..f196bef9 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -60,12 +60,17 @@ function buildHeroBlock(main) { */ function buildArticleHeader(mainEl) { const paragraphs = mainEl.querySelectorAll('p'); - paragraphs.forEach(function(paragraph) { + paragraphs.forEach((paragraph) => { if (paragraph.querySelector('picture') !== null) { - var nextSibling = paragraph.nextElementSibling; + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('article-image-wrapper'); + imageWrapper.append(paragraph.querySelector('picture')); + const nextSibling = paragraph.nextElementSibling; if (nextSibling && nextSibling.querySelector('em') !== null) { nextSibling.classList.add('article-image-caption'); + imageWrapper.append(nextSibling); } + paragraph.replaceChildren(imageWrapper); } }); const div = document.createElement('div'); From 492b89b673260bd4379b2936e43c3466875c2f28 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 13:46:35 -0500 Subject: [PATCH 05/15] Update articleheader.css --- cigaradvisor/blocks/articleheader/articleheader.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 81a41e27..4077ff80 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -96,8 +96,7 @@ main .articleheader-container{ } .blog-post-template .author-container > .default-content-wrapper { - padding-left: 0; - padding-right: 0; + padding: 0 15px; width: 100%; margin-left: auto; margin-right: auto; @@ -139,4 +138,10 @@ main .articleheader-container{ main .articleheader-container { margin-top: 77px; } +} + +@media screen and (min-width: 1200px) { + .blog-post-template .author-container > .default-content-wrapper { + padding: 0; + } } \ No newline at end of file From bced1c94681b408df18bc809e6010118130b1981 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 14:49:28 -0500 Subject: [PATCH 06/15] article header --- .../blocks/articleheader/articleheader.css | 79 ++++++++++--------- cigaradvisor/scripts/scripts.js | 15 +++- 2 files changed, 57 insertions(+), 37 deletions(-) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 4077ff80..0c74b1df 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -1,4 +1,4 @@ -main .articleheader-container{ +main .articleheader-container { margin-top: 46px; } @@ -10,7 +10,7 @@ main .articleheader-container{ background-color: #eaeaea; } -.articleheader.block .image-wrapper img{ +.articleheader.block .image-wrapper img { display: block; width: 100%; max-height: 650px; @@ -31,29 +31,29 @@ main .articleheader-container{ } .articleheader.block .article-info .article-category { - float: none; - display: flex; - justify-content: center; - margin: 30px auto 10px; + float: none; + display: flex; + justify-content: center; + margin: 30px auto 10px; } .articleheader.block .article-info .article-category a { position: relative; top: 0; left: 0; - padding: 7px 24px; - margin: 0 auto; - text-transform: capitalize; - display: flex; - justify-content: center; - color: #fff; - font-family: montserrat,sans-serif; - font-weight: 600; - background-color: #3c3a3b; - font-size: 12px; -} - -.articleheader.block .article-info h1{ + padding: 7px 24px; + margin: 0 auto; + text-transform: capitalize; + display: flex; + justify-content: center; + color: #fff; + font-family: montserrat, sans-serif; + font-weight: 600; + background-color: #3c3a3b; + font-size: 12px; +} + +.articleheader.block .article-info h1 { font-size: 36px; } @@ -66,7 +66,7 @@ main .articleheader-container{ } /* separate children of .article-author with a pipe */ -.articleheader.block .article-info .article-author > a::after { +.articleheader.block .article-info .article-author>a::after { content: ""; display: inline-block; width: 1px; @@ -75,7 +75,7 @@ main .articleheader-container{ margin: 0 10px; } -.articleheader.block .article-info .article-author .article-published-date { +.articleheader.block .article-info .article-author .article-published-date { font-family: var(--ff-opensans); font-weight: 600; color: #141414; @@ -84,10 +84,10 @@ main .articleheader-container{ .articleheader.block .article-read-time { text-align: justify; - font-size: 18px; - line-height: 30px; - color: var(--grey); - padding-left: 0; + font-size: 18px; + line-height: 30px; + color: var(--grey); + padding-left: 0; padding-right: 0; width: 100%; margin-left: auto; @@ -95,7 +95,7 @@ main .articleheader-container{ max-width: 1080px; } -.blog-post-template .author-container > .default-content-wrapper { +.blog-post-template .author-container>.default-content-wrapper { padding: 0 15px; width: 100%; margin-left: auto; @@ -104,33 +104,40 @@ main .articleheader-container{ text-align: justify; } -.blog-post-template .author-container > .default-content-wrapper p { +.blog-post-template .author-container>.default-content-wrapper p { font-size: 18px; line-height: 30px; font-family: var(--ff-opensans); - font-weight: 600; - color: #141414; - cursor: default; + font-weight: 600; + color: #141414; + cursor: default; +} + +.blog-post-template .author-container>.default-content-wrapper a{ + font-size: 18px; + line-height: 30px; + text-decoration: underline; + color: #b19b5e; } -.blog-post-template .author-container > .default-content-wrapper .article-image-wrapper { +.blog-post-template .author-container>.default-content-wrapper .article-image-wrapper { width: 1000px; padding: 20px; max-width: 100%; clear: both; } -.blog-post-template .author-container > .default-content-wrapper picture img { +.blog-post-template .author-container>.default-content-wrapper picture img { padding: 20px 20px 20px 0; } -.blog-post-template .author-container > .default-content-wrapper .article-image-caption { +.blog-post-template .author-container>.default-content-wrapper .article-image-caption { font-family: var(--ff-opensans); font-size: 16px; text-align: center; font-style: italic; - font-weight: 700; - color: #888; + font-weight: 700; + color: #888; margin: 0; } @@ -141,7 +148,7 @@ main .articleheader-container{ } @media screen and (min-width: 1200px) { - .blog-post-template .author-container > .default-content-wrapper { + .blog-post-template .author-container>.default-content-wrapper { padding: 0; } } \ No newline at end of file diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index f196bef9..4068d1cf 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -59,12 +59,19 @@ function buildHeroBlock(main) { * @param {HTMLElement} mainEl - The main element to build the article header for. */ function buildArticleHeader(mainEl) { + decorateExternalLink(mainEl); const paragraphs = mainEl.querySelectorAll('p'); paragraphs.forEach((paragraph) => { if (paragraph.querySelector('picture') !== null) { const imageWrapper = document.createElement('div'); imageWrapper.classList.add('article-image-wrapper'); - imageWrapper.append(paragraph.querySelector('picture')); + if (paragraph.querySelector('a') !== null) { + const a = paragraph.querySelector('a'); + a.replaceChildren(paragraph.querySelector('picture')); + imageWrapper.append(a); + } else { + imageWrapper.append(paragraph.querySelector('picture')); + } const nextSibling = paragraph.nextElementSibling; if (nextSibling && nextSibling.querySelector('em') !== null) { nextSibling.classList.add('article-image-caption'); @@ -73,6 +80,12 @@ function buildArticleHeader(mainEl) { paragraph.replaceChildren(imageWrapper); } }); + const h3 = mainEl.querySelectorAll('h3'); + h3.forEach((heading) => { + const p = document.createElement('p'); + p.innerHTML = ' '; + heading.prepend(p); + }); const div = document.createElement('div'); const h1 = mainEl.querySelector('h1'); const picture = mainEl.querySelector('picture'); From 4d3e04594ad00908c233f6aeaf88bab8b606f0e7 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:22:33 -0500 Subject: [PATCH 07/15] null check --- .../blocks/articleheader/articleheader.js | 16 ++++++++++------ cigaradvisor/scripts/scripts.js | 1 + 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/cigaradvisor/blocks/articleheader/articleheader.js b/cigaradvisor/blocks/articleheader/articleheader.js index 72ce88b9..4dc80152 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.js +++ b/cigaradvisor/blocks/articleheader/articleheader.js @@ -20,17 +20,21 @@ export default async function decorate(block) { articleInfo.classList.add('article-info'); const categoryLink = block.querySelector('p.category').innerText; const category = await fetchData(getRelativePath(categoryLink)); - const categoryLinkEl = document.createElement('div'); - categoryLinkEl.classList.add('article-category'); - categoryLinkEl.innerHTML = `${category.title}`; - articleInfo.append(categoryLinkEl); + if (category) { + const categoryLinkEl = document.createElement('div'); + categoryLinkEl.classList.add('article-category'); + categoryLinkEl.innerHTML = `${category.title}`; + articleInfo.append(categoryLinkEl); + } articleInfo.append(block.querySelector('h1')); const authorLink = block.querySelector('p.author').innerText; const author = await fetchData(getRelativePath(authorLink)); const authorLinkEl = document.createElement('div'); authorLinkEl.classList.add('article-author'); - authorLinkEl.innerHTML = `By ${author.title}`; - articleInfo.append(authorLinkEl); + if (author) { + authorLinkEl.innerHTML = `By ${author.title}`; + articleInfo.append(authorLinkEl); + } const publishedDate = block.querySelector('p.published-date').innerText; const publishedDateEl = document.createElement('span'); publishedDateEl.classList.add('article-published-date'); diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 4068d1cf..77daea91 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -59,6 +59,7 @@ function buildHeroBlock(main) { * @param {HTMLElement} mainEl - The main element to build the article header for. */ function buildArticleHeader(mainEl) { + // eslint-disable-next-line no-use-before-define decorateExternalLink(mainEl); const paragraphs = mainEl.querySelectorAll('p'); paragraphs.forEach((paragraph) => { From 640c2f80e13b4cc085c27411bd5c76dacb33076e Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:50:39 -0500 Subject: [PATCH 08/15] template styling --- .../blocks/articleheader/articleheader.css | 52 ------------------ cigaradvisor/styles/styles.css | 54 +++++++++++++++++++ 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css index 0c74b1df..e1b92b09 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.css +++ b/cigaradvisor/blocks/articleheader/articleheader.css @@ -95,60 +95,8 @@ main .articleheader-container { max-width: 1080px; } -.blog-post-template .author-container>.default-content-wrapper { - padding: 0 15px; - width: 100%; - margin-left: auto; - margin-right: auto; - max-width: 1080px; - text-align: justify; -} - -.blog-post-template .author-container>.default-content-wrapper p { - font-size: 18px; - line-height: 30px; - font-family: var(--ff-opensans); - font-weight: 600; - color: #141414; - cursor: default; -} - -.blog-post-template .author-container>.default-content-wrapper a{ - font-size: 18px; - line-height: 30px; - text-decoration: underline; - color: #b19b5e; -} - -.blog-post-template .author-container>.default-content-wrapper .article-image-wrapper { - width: 1000px; - padding: 20px; - max-width: 100%; - clear: both; -} - -.blog-post-template .author-container>.default-content-wrapper picture img { - padding: 20px 20px 20px 0; -} - -.blog-post-template .author-container>.default-content-wrapper .article-image-caption { - font-family: var(--ff-opensans); - font-size: 16px; - text-align: center; - font-style: italic; - font-weight: 700; - color: #888; - margin: 0; -} - @media screen and (min-width: 900px) { main .articleheader-container { margin-top: 77px; } -} - -@media screen and (min-width: 1200px) { - .blog-post-template .author-container>.default-content-wrapper { - padding: 0; - } } \ No newline at end of file diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 3ce073c2..14780047 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -362,6 +362,56 @@ main .section[data-layout="50/50"] .right-grid>div { background-color: var(--clr-pampas); } +/* Blog post template starts */ + +.blog-post-template .author-container>.default-content-wrapper { + padding: 0 15px; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + text-align: justify; +} + +.blog-post-template .author-container>.default-content-wrapper p { + font-size: 18px; + line-height: 30px; + font-family: var(--ff-opensans); + font-weight: 600; + color: #141414; + cursor: default; +} + +.blog-post-template .author-container>.default-content-wrapper a{ + font-size: 18px; + line-height: 30px; + text-decoration: underline; +color: #b19b5e; +} + +.blog-post-template .author-container>.default-content-wrapper .article-image-wrapper { + width: 1000px; + padding: 20px; + max-width: 100%; + clear: both; +} + +.blog-post-template .author-container>.default-content-wrapper picture img { + padding: 20px 20px 20px 0; +} + +.blog-post-template .author-container>.default-content-wrapper .article-image-caption { + font-family: var(--ff-opensans); + font-size: 16px; + text-align: center; + font-style: italic; + font-weight: 700; + color: #888; + margin: 0; +} + +/* Blog post template ends */ + @media screen and (max-width: 600px) { main .section[data-layout="50/50"] { width: 100%; @@ -385,4 +435,8 @@ main .section[data-layout="50/50"] .right-grid>div { a { font-size: 14px; } + + .blog-post-template .author-container>.default-content-wrapper { + padding: 0; + } } From 0d3f38bce1b028b147b999bd2164d768079b25df Mon Sep 17 00:00:00 2001 From: tmaret Date: Thu, 11 Jan 2024 22:36:27 +0100 Subject: [PATCH 09/15] wip author block --- cigaradvisor/blocks/author/author.css | 4 ++++ cigaradvisor/blocks/author/author.js | 30 +++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 cigaradvisor/blocks/author/author.css create mode 100644 cigaradvisor/blocks/author/author.js diff --git a/cigaradvisor/blocks/author/author.css b/cigaradvisor/blocks/author/author.css new file mode 100644 index 00000000..c54d42bd --- /dev/null +++ b/cigaradvisor/blocks/author/author.css @@ -0,0 +1,4 @@ +.author { + display: flex; + flex-wrap: wrap; +} diff --git a/cigaradvisor/blocks/author/author.js b/cigaradvisor/blocks/author/author.js new file mode 100644 index 00000000..3c850f68 --- /dev/null +++ b/cigaradvisor/blocks/author/author.js @@ -0,0 +1,30 @@ +/** + * Loads an author. + * @param {string} path The path to the author + * @returns {HTMLElement} The root element of the author + */ +async function loadAuthor(path) { + if (path && path.startsWith('/')) { + const resp = await fetch(`${path}.plain.html`); + if (resp.ok) { + const div = document.createElement('div'); + div.innerHTML = await resp.text(); + return div; + } + } + return null; +} + +export default async function decorate(block) { + const link = block.querySelector('a'); + const path = link ? link.getAttribute('href') : block.textContent.trim(); + block.innerHTML = ''; + const author = await loadAuthor(path); + if (author) { + // add updated link to all author articles + const authorName = author.querySelector('h2').innerHTML; + link.textContent = `Show all ${authorName}'s Articles`; + author.append(link); + block.append(author); + } +} From fb1c0da21a7a34cc35c71ca916bc2e3a7c541a45 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Thu, 11 Jan 2024 21:11:06 -0500 Subject: [PATCH 10/15] Update styles.css --- cigaradvisor/styles/styles.css | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 14780047..a1be8b49 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -245,6 +245,10 @@ h2 { font-size: 12px; } +b,strong{ + font-weight: bolder; +} + a { font-family: var(--ff-montserrat); font-weight: 600; @@ -410,7 +414,25 @@ color: #b19b5e; margin: 0; } -/* Blog post template ends */ +.blog-post-template .author-container>.default-content-wrapper blockquote { + border-color: #e0e0e0; + border-width: 1px 0; + border-style: solid; + margin: 0 0 20px; + padding: 10px 0 10px 50px; + background: transparent url('/cigaradvisor/images/blog-post/blockquote.png') no-repeat 0 20px; +} + +.blog-post-template .author-container>.default-content-wrapper blockquote p{ + padding: 10px; + margin: 0; + color: #1c1c1c; + background: transparent url('/cigaradvisor/images/blog-post/pattern-1.png') repeat; +} + +.blog-post-template .author-container>.default-content-wrapper blockquote p strong{ + font-weight: 700; +} @media screen and (max-width: 600px) { main .section[data-layout="50/50"] { From f2a43d569b90061bda5b0a8346310b99e219958d Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 12 Jan 2024 08:20:31 -0500 Subject: [PATCH 11/15] progress --- cigaradvisor/blocks/author/author.css | 78 ++++++++++++++++++++++++++- cigaradvisor/blocks/author/author.js | 23 +++++++- cigaradvisor/styles/styles.css | 4 +- 3 files changed, 100 insertions(+), 5 deletions(-) diff --git a/cigaradvisor/blocks/author/author.css b/cigaradvisor/blocks/author/author.css index c54d42bd..795aaebe 100644 --- a/cigaradvisor/blocks/author/author.css +++ b/cigaradvisor/blocks/author/author.css @@ -1,4 +1,78 @@ -.author { +.author.block{ display: flex; - flex-wrap: wrap; + padding: 20px 0; } + +.author.block > div{ + display: flex; + margin-top: 20px; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; +} + +.author.block .image-wrapper{ + text-align: center; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + width: 25%; + float: left; +} + +.author.block .image-wrapper img{ + width: 100%; + max-width: 300px; + border: 1px solid #8e7b5c; +} + +.author.block .author-details{ + display: flex; + flex-direction: column; + align-items: left; + border-top: 2px solid #141414; + border-bottom: 2px solid #141414; + text-align: left; + width: 75%; + margin-top: 0; + padding: 0; + margin-left: 60px; + float: left; +} + +.author.block .author-details .author-heading-wrapper{ + display: flex; + text-align: left; +} + +.author.block .author-details .author-heading{ + display: flex; + align-items: center; +} + +.author.block .author-details .author-heading h2{ + font-size: 24px; + text-align: center; + font-family: montserrat,sans-serif; + font-weight: 900; + color: #141414; +} + +.author.block .author-details .author-heading h3{ + margin: 0 0 0 10px; + position: relative; + bottom: 2px; + font-size: 14px; + font-family: var(--ff-opensans); + font-weight: 600; + color: #141414; + cursor: default; + display: inline-block; +} + + +.author.block .author-details p{ + font-weight: bolder; +} \ No newline at end of file diff --git a/cigaradvisor/blocks/author/author.js b/cigaradvisor/blocks/author/author.js index 3c850f68..d484f18d 100644 --- a/cigaradvisor/blocks/author/author.js +++ b/cigaradvisor/blocks/author/author.js @@ -22,9 +22,30 @@ export default async function decorate(block) { const author = await loadAuthor(path); if (author) { // add updated link to all author articles + const imageWrapper = document.createElement('div'); + imageWrapper.classList.add('image-wrapper'); + const picture = author.querySelector('picture'); + imageWrapper.append(picture); const authorName = author.querySelector('h2').innerHTML; + const authorDetails = document.createElement('div'); + authorDetails.classList.add('author-details'); + const authorHeadingWrapper = document.createElement('div'); + authorHeadingWrapper.classList.add('author-heading-wrapper'); + const authorHeading = document.createElement('div'); + authorHeading.classList.add('author-heading'); + authorHeading.append(author.querySelector('h2')); + authorHeading.append(author.querySelector('h3')); + authorHeadingWrapper.append(authorHeading); + authorDetails.append(authorHeadingWrapper); + const authorP = author.querySelectorAll('p'); + const authorPCount = authorP.length; + const authorPIndex = authorPCount - 1; + const authorPContent = authorP[authorPIndex]; + authorDetails.append(authorPContent); link.textContent = `Show all ${authorName}'s Articles`; - author.append(link); + authorDetails.append(link); + author.replaceChildren(imageWrapper); + author.append(authorDetails); block.append(author); } } diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index a1be8b49..67b59fdf 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -210,7 +210,7 @@ header { html { font-size: 100%; - line-height: 1.5 + line-height: 1.5; } *, @@ -454,7 +454,7 @@ color: #b19b5e; } @media screen and (min-width: 1200px) { - a { + a,p { font-size: 14px; } From 1865c68c133ad49f2deabdacacf331444cb72332 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 12 Jan 2024 12:31:45 -0500 Subject: [PATCH 12/15] complete --- cigaradvisor/blocks/author/author.css | 132 +++++++++++++++++++++----- cigaradvisor/blocks/author/author.js | 39 +++++++- 2 files changed, 140 insertions(+), 31 deletions(-) diff --git a/cigaradvisor/blocks/author/author.css b/cigaradvisor/blocks/author/author.css index 795aaebe..3310765b 100644 --- a/cigaradvisor/blocks/author/author.css +++ b/cigaradvisor/blocks/author/author.css @@ -1,66 +1,63 @@ -.author.block{ +.author.block { display: flex; padding: 20px 0; } -.author.block > div{ +.author.block>div { display: flex; + flex-direction: column; + justify-content: center; + align-items: center; margin-top: 20px; width: 100%; - margin-left: auto; - margin-right: auto; - max-width: 1080px; } -.author.block .image-wrapper{ +.author.block .image-wrapper { text-align: center; display: flex; align-items: center; justify-content: center; padding: 0; - width: 25%; - float: left; } -.author.block .image-wrapper img{ +.author.block .image-wrapper img { width: 100%; max-width: 300px; border: 1px solid #8e7b5c; } -.author.block .author-details{ +.author.block .author-details { display: flex; flex-direction: column; - align-items: left; - border-top: 2px solid #141414; - border-bottom: 2px solid #141414; - text-align: left; - width: 75%; - margin-top: 0; - padding: 0; - margin-left: 60px; - float: left; + align-items: center; + border-top: 2px solid #141414; + border-bottom: 2px solid #141414; + text-align: center; + width: 100%; + margin-top: 20px; + padding: 10px 0; } -.author.block .author-details .author-heading-wrapper{ +.author.block .author-details .author-heading-wrapper { display: flex; - text-align: left; + margin-top: 5px; } -.author.block .author-details .author-heading{ +.author.block .author-details .author-heading { display: flex; + flex-direction: column; align-items: center; } -.author.block .author-details .author-heading h2{ +.author.block .author-details .author-heading h2 { font-size: 24px; text-align: center; - font-family: montserrat,sans-serif; + font-family: montserrat, sans-serif; font-weight: 900; color: #141414; } -.author.block .author-details .author-heading h3{ +.author.block .author-details .author-heading h3 { margin: 0 0 0 10px; position: relative; bottom: 2px; @@ -73,6 +70,89 @@ } -.author.block .author-details p{ +.author.block .author-details p { font-weight: bolder; +} + +.author.block .author-details a { + color: #1e90ff; + font-weight: bolder; + margin-bottom: 5px; +} + +.author.block .author-details ul { + display: flex; + margin: 10px 0; +} + +.author.block .author-details ul li { + margin-right: 20px; +} + +.author.block .author-details ul li a::before { + font-family: var(--ff-fontawesome); + font-style: normal; + font-weight: bolder; + text-decoration: inherit; + font-size: 20px; + color: #141414 +} + +.author.block .author-details ul li.social-twitter a::before { + content: "\f099"; +} + +.author.block .author-details ul li.social-facebook a::before { + content: "\f39e"; +} + +.author.block .author-details ul li.social-instagram a::before { + content: "\f16d"; +} + +.author.block .author-details ul li.social-youtube a::before { + content: "\f167"; +} + +/* media queries */ +@media screen and (min-width: 900px) { + .author.block>div { + display: flex; + flex-direction: row; + margin-top: 20px; + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; + } + + .author.block .image-wrapper { + text-align: center; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + width: 25%; + float: left; + } + + .author.block .author-details { + align-items: flex-start; + display: flex; + flex-direction: column; + border-top: 2px solid #141414; + border-bottom: 2px solid #141414; + text-align: left; + width: 75%; + margin-top: 0; + padding: 0; + margin-left: 60px; + float: left; + } + + .author.block .author-details .author-heading { + display: flex; + flex-direction: row; + align-items: left; + } } \ No newline at end of file diff --git a/cigaradvisor/blocks/author/author.js b/cigaradvisor/blocks/author/author.js index d484f18d..d6414017 100644 --- a/cigaradvisor/blocks/author/author.js +++ b/cigaradvisor/blocks/author/author.js @@ -1,3 +1,5 @@ +import { decorateExternalLink } from '../../scripts/scripts.js'; + /** * Loads an author. * @param {string} path The path to the author @@ -20,6 +22,7 @@ export default async function decorate(block) { const path = link ? link.getAttribute('href') : block.textContent.trim(); block.innerHTML = ''; const author = await loadAuthor(path); + decorateExternalLink(author); if (author) { // add updated link to all author articles const imageWrapper = document.createElement('div'); @@ -33,17 +36,43 @@ export default async function decorate(block) { authorHeadingWrapper.classList.add('author-heading-wrapper'); const authorHeading = document.createElement('div'); authorHeading.classList.add('author-heading'); - authorHeading.append(author.querySelector('h2')); - authorHeading.append(author.querySelector('h3')); + if (author.querySelector('h2')) { + authorHeading.append(author.querySelector('h2')); + } + if (author.querySelector('h3')) { + authorHeading.append(author.querySelector('h3')); + } authorHeadingWrapper.append(authorHeading); authorDetails.append(authorHeadingWrapper); const authorP = author.querySelectorAll('p'); const authorPCount = authorP.length; const authorPIndex = authorPCount - 1; const authorPContent = authorP[authorPIndex]; - authorDetails.append(authorPContent); - link.textContent = `Show all ${authorName}'s Articles`; - authorDetails.append(link); + if (authorPContent) { + authorDetails.append(authorPContent); + } + const socilaLinks = author.querySelector('ul'); + if (socilaLinks) { + const socialItems = socilaLinks.querySelectorAll('li'); + socialItems.forEach((item) => { + const textNode = item.childNodes[0]; + if (textNode && textNode.textContent !== '') { + const text = `social-${textNode.textContent.trim()}`; + textNode.innerText = ''; + const textToClass = text.toLowerCase().replace(/\s/g, '-'); + item.className = textToClass; + } + }); + + authorDetails.append(socilaLinks); + } else { + const emptySocialLinks = document.createElement('ul'); + authorDetails.append(emptySocialLinks); + } + if (authorName) { + link.textContent = `Show all ${authorName}'s Articles`; + authorDetails.append(link); + } author.replaceChildren(imageWrapper); author.append(authorDetails); block.append(author); From e023cc0551feb0c91735435b0b2e2114ebf0bfc7 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 12 Jan 2024 13:06:12 -0500 Subject: [PATCH 13/15] Update scripts.js --- cigaradvisor/scripts/scripts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 77daea91..32bc3724 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -74,7 +74,7 @@ function buildArticleHeader(mainEl) { imageWrapper.append(paragraph.querySelector('picture')); } const nextSibling = paragraph.nextElementSibling; - if (nextSibling && nextSibling.querySelector('em') !== null) { + if (nextSibling && nextSibling.tagName === 'P' && nextSibling.querySelector('em')) { nextSibling.classList.add('article-image-caption'); imageWrapper.append(nextSibling); } @@ -151,7 +151,7 @@ async function loadFonts() { function buildAutoBlocks(main) { try { const isHome = document.querySelector('body.homepage'); - const isBlogPost = !!document.querySelector('body.blog-post-template'); + const isBlogPost = document.querySelector('body.blog-post-template'); if (isHome) { buildHeroBlock(main); } From acab89c07aa790dfc1cbe370fa71af27fe11b4a2 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 12 Jan 2024 14:24:27 -0500 Subject: [PATCH 14/15] Update styles.css --- cigaradvisor/styles/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 67b59fdf..cb818bb0 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -454,6 +454,10 @@ color: #b19b5e; } @media screen and (min-width: 1200px) { + h2 { + font-size: 16px; + } + a,p { font-size: 14px; } From f53a3013ebfe087ecd23ba2fe6513222453dab35 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 15 Jan 2024 11:22:46 -0500 Subject: [PATCH 15/15] Update helix-query.yaml --- helix-query.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/helix-query.yaml b/helix-query.yaml index 5c7e396d..ec4c6e85 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -51,6 +51,9 @@ indices: name: select: div:nth-of-type(1) > h2:nth-of-type(1) value: textContent(el) + title: + select: div:nth-of-type(1) > h3:nth-of-type(1) + value: textContent(el) description: select: div:nth-of-type(1) > p:nth-of-type(2) value: textContent(el)