From cbe00f51e2286f1cbebd747cad40ea6a81bd465c Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 22 Jan 2024 18:04:27 -0500 Subject: [PATCH 1/2] Feature/author teaser (#98) * Update author-teaser.js * initial * author-teaser --- .../blocks/author-teaser/author-teaser.css | 58 +++++---- .../blocks/author-teaser/author-teaser.js | 114 ++++++------------ cigaradvisor/styles/styles.css | 1 + 3 files changed, 67 insertions(+), 106 deletions(-) diff --git a/cigaradvisor/blocks/author-teaser/author-teaser.css b/cigaradvisor/blocks/author-teaser/author-teaser.css index 68624c49..66c5006a 100644 --- a/cigaradvisor/blocks/author-teaser/author-teaser.css +++ b/cigaradvisor/blocks/author-teaser/author-teaser.css @@ -1,9 +1,9 @@ -.author.block { +.author-teaser-wrapper { display: flex; padding: 20px 0; } -.author.block>div { +.author-teaser.block { display: flex; flex-direction: column; justify-content: center; @@ -12,7 +12,7 @@ width: 100%; } -.author.block .image-wrapper { +.author-teaser.block .image-wrapper { text-align: center; display: flex; align-items: center; @@ -20,13 +20,13 @@ padding: 0; } -.author.block .image-wrapper img { +.author-teaser.block .image-wrapper img { width: 100%; max-width: 300px; border: 1px solid var(--tan); } -.author.block .author-details { +.author-teaser.block .author-details { display: flex; flex-direction: column; align-items: center; @@ -38,62 +38,62 @@ padding: 10px 0; } -.author.block .author-details .author-heading-wrapper { +.author-teaser.block .author-details .author-heading-wrapper { display: flex; - margin-top: 5px; + margin-top: 15px; } -.author.block .author-details .author-heading { +.author-teaser.block .author-details .author-heading { display: flex; flex-direction: column; align-items: center; } -.author.block .author-details .author-heading h2 { - font-size: 24px; +.author-teaser.block .author-details .author-heading h2 { + font-size: var(--body-font-size-xxl); text-align: center; font-family: montserrat, sans-serif; - font-weight: 900; + font-weight: var(--font-weight-heavy); color: var(--clr-dark-gray); } -.author.block .author-details .author-heading h3 { +.author-teaser.block .author-details .author-heading h3 { margin: 0 0 0 10px; position: relative; bottom: 2px; - font-size: 14px; + font-size: var(--body-font-size-s); font-family: var(--ff-opensans); - font-weight: 600; + font-weight: var(--font-weight-semibold); color: var(--clr-dark-gray); cursor: default; display: inline-block; } -.author.block .author-details p { - font-weight: bolder; +.author-teaser.block .author-details p { + font-weight: var(--font-weight-bold); } -.author.block .author-details a { - color: #1e90ff; - font-weight: bolder; - margin-bottom: 5px; +.author-teaser.block .author-details a { + color: var(--dodger-blue); + font-weight: var(--font-weight-bold); + margin-bottom: 15px; } -.author.block .author-details ul { +.author-teaser.block .author-details ul { display: flex; - margin: 10px 0; + margin: 10px 30px; --icon-size: 20px; } -.author.block .author-details ul li { +.author-teaser.block .author-details ul li { margin-right: 20px; } /* media queries */ @media screen and (min-width: 900px) { - .author.block>div { + .author-teaser.block { display: flex; flex-direction: row; margin-top: 20px; @@ -103,7 +103,7 @@ max-width: 1080px; } - .author.block .image-wrapper { + .author-teaser.block .image-wrapper { text-align: center; display: flex; align-items: center; @@ -113,12 +113,10 @@ float: left; } - .author.block .author-details { + .author-teaser.block .author-details { align-items: flex-start; display: flex; flex-direction: column; - border-top: 2px solid var(--clr-dark-gray); - border-bottom: 2px solid var(--clr-dark-gray); text-align: left; width: 75%; margin-top: 0; @@ -127,9 +125,9 @@ float: left; } - .author.block .author-details .author-heading { + .author-teaser.block .author-details .author-heading { display: flex; flex-direction: row; - align-items: start; + align-items: center; } } diff --git a/cigaradvisor/blocks/author-teaser/author-teaser.js b/cigaradvisor/blocks/author-teaser/author-teaser.js index 1d19d272..16f78f18 100644 --- a/cigaradvisor/blocks/author-teaser/author-teaser.js +++ b/cigaradvisor/blocks/author-teaser/author-teaser.js @@ -1,99 +1,61 @@ -import { decorateExternalLink } from '../../scripts/scripts.js'; -import { decorateIcons } from '../../scripts/aem.js'; - -/** - * 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; -} +import { fetchAuthorInfo } from '../../scripts/scripts.js'; +import { decorateIcons, createOptimizedPicture } from '../../scripts/aem.js'; 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); - decorateExternalLink(author); + const author = await fetchAuthorInfo(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; + imageWrapper.append(createOptimizedPicture(author.image)); 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'); - if (author.querySelector('h2')) { - authorHeading.append(author.querySelector('h2')); - } - if (author.querySelector('h3')) { - authorHeading.append(author.querySelector('h3')); - } + authorHeading.innerHTML = `

${author.name}

${author.title}

`; authorHeadingWrapper.append(authorHeading); authorDetails.append(authorHeadingWrapper); - const authorP = author.querySelectorAll('p'); - const authorPCount = authorP.length; - const authorPIndex = authorPCount - 1; - const authorPContent = authorP[authorPIndex]; - if (authorPContent) { - authorDetails.append(authorPContent); + const authorDescription = document.createElement('p'); + authorDescription.append(author.intro); + authorDetails.append(authorDescription); + const socialLinks = document.createElement('ul'); + if (author.twitter) { + const twitterLink = document.createElement('li'); + twitterLink.innerHTML = ``; + socialLinks.append(twitterLink); } - const socialLinks = author.querySelector('ul'); - if (socialLinks) { - const socialItems = socialLinks.querySelectorAll('li > a'); - socialItems.forEach((item) => { - const innerText = item.innerText.trim(); - if (innerText && innerText !== '') { - let icon; - switch (innerText) { - case 'twitter': - icon = 'twitter'; - break; - case 'facebook': - icon = 'facebook-f'; - break; - case 'instagram': - icon = 'instagram'; - break; - case 'youtube': - icon = 'youtube'; - break; - case 'pintrest': - icon = 'pintrest-p'; - break; - default: - icon = 'unknown'; - } - item.innerHTML = ``; - } - }); - - decorateIcons(socialLinks); - authorDetails.append(socialLinks); - } else { - const emptySocialLinks = document.createElement('ul'); - authorDetails.append(emptySocialLinks); + if (author.facebook) { + const facebookLink = document.createElement('li'); + facebookLink.innerHTML = ``; + socialLinks.append(facebookLink); + } + if (author.instagram) { + const instagramLink = document.createElement('li'); + instagramLink.innerHTML = ``; + socialLinks.append(instagramLink); + } + if (author.youtube) { + const youtubeLink = document.createElement('li'); + youtubeLink.innerHTML = ``; + socialLinks.append(youtubeLink); + } + if (author.pintrest) { + const pintrestLink = document.createElement('li'); + pintrestLink.innerHTML = ``; + socialLinks.append(pintrestLink); } - if (authorName) { - link.textContent = `Show all ${authorName}'s Articles`; + decorateIcons(socialLinks); + authorDetails.append(socialLinks); + if (author.name) { + link.textContent = `Show all ${author.name}'s Articles`; authorDetails.append(link); } - author.replaceChildren(imageWrapper); - author.append(authorDetails); - block.append(author); + block.replaceChildren(imageWrapper); + block.append(authorDetails); } } diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index f39e26ff..8177b7fe 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -33,6 +33,7 @@ --off-white: #f7f7f7; --grey-background: #eaeaea; --charcoal: #1c1c1c; + --dodger-blue: #1e90ff; /* functional-colors */ --clr-text: var(--clr-dark-gray); From 4c0f948593d0f7b3efe559f8cd62474864d628e5 Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Mon, 22 Jan 2024 18:05:12 -0500 Subject: [PATCH 2/2] Feature/article list (#99) * initial commit * article-list * pagination * prev and next fix * Update article-list.js * vars * Update author-card.js * code refactor * Update article-list.css * Update scripts.js * review comments * Update article-list.js * Update scripts.js --- cigaradvisor/scripts/scripts.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index fb66276b..2c6ef429 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -16,12 +16,8 @@ import { const LCP_BLOCKS = []; // add your LCP blocks to the list const AUTHOR_INDEX_PATH = '/cigaradvisor/author/query-index.json'; -// const DEFAULT_INDEX_PATH = '/cigaradvisor/query-index.json'; -// const ARTICLE_INDEX_PATH = '/cigaradvisor/posts/query-index.json'; - -const DEFAULT_INDEX_PATH = '/cigaradvisor/drafts/Kailas/query-index.json'; -const ARTICLE_INDEX_PATH = '/cigaradvisor/drafts/Kailas/query-index.json'; - +const DEFAULT_INDEX_PATH = '/cigaradvisor/query-index.json'; +const ARTICLE_INDEX_PATH = '/cigaradvisor/posts/query-index.json'; /** * Builds hero block and prepends to main in a new section. * @param {Element} main The container element