From 49914ec10c4dd5891af4e36a6e93c4b8d45cb480 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 22 Jan 2024 09:19:55 -0600 Subject: [PATCH] Refactor author cards slightly. --- .../blocks/author-card/author-card.css | 325 +++++++----------- .../blocks/author-card/author-card.js | 107 +++--- cigaradvisor/blocks/hero/hero.js | 4 +- cigaradvisor/scripts/scripts.js | 20 ++ .../styles/images/author-underline.png | Bin 0 -> 117 bytes 5 files changed, 209 insertions(+), 247 deletions(-) create mode 100644 cigaradvisor/styles/images/author-underline.png diff --git a/cigaradvisor/blocks/author-card/author-card.css b/cigaradvisor/blocks/author-card/author-card.css index 96c60d56..8f59ad33 100644 --- a/cigaradvisor/blocks/author-card/author-card.css +++ b/cigaradvisor/blocks/author-card/author-card.css @@ -1,224 +1,163 @@ -.author-card-container { - background: url('/cigaradvisor/images/author-card/media_17501a5f7bf5b4aebcf109765ead7cb5956480cbe.png'); - margin-top: 50px; - background-position: center; - background-repeat: no-repeat; - background-color: transparent; - padding: 0 40px; - background-size: 900px 500px; - margin-bottom: 40px; -} - -.author-card-wrapper::after { - display: block; - clear: both; -} - -.author-card-wrapper { - display: flex; - padding-left: 0; - padding-right: 0; - width: 100%; - margin-left: auto; - margin-right: auto; - max-width: 1080px; - align-items: stretch; - justify-content: flex-start; - flex-wrap: wrap; - align-content: flex-start; -} .author-card.block { - display: flex; + position: relative; + display: flex; + padding: 60px 10px; + flex-direction: column; + overflow: hidden; } -.author-card.block .left-column, -.right-column { - display: flex; - float: none; - width: 50%; - align-items: center; - justify-content: flex-start; - padding: 10px; +.author-card.block .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + max-width: 900px; + max-height: 500px; + background-color: #ede8e3; + z-index: -1000; } -.author-card.block .left-column h2 { - font-family: var(--ff-alfaslabone); - font-size: var(--heading-font-size-xl); - color: var(--deep-reddish-brown); - margin-top: 0; - padding-bottom: 10px; - border-image-source: url('/cigaradvisor/images/author-card/media_176afb26345b78f372ca811cf0e842c7ff75875a5.png'); - border-image-slice: 50; - border-bottom: 30px solid; +.author-card.block .content-wrapper { + display: flex;; + flex-direction: column; + align-items: stretch; } -.author-card.block .left-column h2:first-child { - font-size: var(--heading-font-size-l); - border-bottom: none; -} - - -.author-card.block .left-column p { - font-family: var(--ff-opensans); - font-weight: var(--font-weight-semibold); - color: var(--dark-grey); - font-size: var(--body-font-size-xs); - cursor: default; - margin-top: 30px; -} - -.author-card.block .left-column .button { - background-color: var(--clr-black); - border: 2px solid; - font-family: var(--ff-montserrat); - font-weight: var(--font-weight-bold); - color: var(--clr-white); - text-transform: uppercase; - border-color: var(--tan); - display: inline-block; - line-height: 26px; - height: 50px; - width: 250px; - max-height: 50px; - max-width: 250px; - min-height: 2.85rem; - padding-top: .8em; - padding-bottom: .8em; - cursor: pointer; - text-decoration: none; - text-align: center; - margin: 2px 0; - padding-left: 1em; - border-radius: 0; - font-size: var(--body-font-size-s); - outline: none; - vertical-align: middle; -} - -.author-card.block .button:hover { - transition: .5s; - background-color: var(--subdued-gold); - border-color: var(--subdued-gold); - text-decoration: none; -} - -.author-card.block .right-column .author-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; +.author-card.block .content-wrapper h2 { + font-family: var(--ff-alfaslabone); + color: var(--deep-reddish-brown); + margin-top: 0; + text-align: center; } -.author-card.block .author-content { - flex: 0 0 50%; - padding: 3px; +.author-card.block .content-wrapper h2 { + font-size: var(--heading-font-size-s); + line-height: var(--line-height-m); } -.author-card.block .author-content .overlay-image { - margin-right: -100%; - background-image: none; - width: 100%; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - position: relative; - height: auto; +.author-card.block .content-wrapper h2:last-of-type { + font-size: var(--heading-font-size-l); + line-height: var(--line-height-m); + border-image-slice: 50; + border-image-source: url('/cigaradvisor/styles/images/author-underline.png'); + border-bottom-style: solid; + border-bottom-color: var(--deep-reddish-brown); + border-bottom-width: 30px; } -.author-card.block .author-content .overlay-image img { - display: block; +.author-card.block .content-wrapper p.button-container { + font-family: var(--ff-opensans); + font-weight: var(--font-weight-semibold); + color: var(--dark-grey); + font-size: var(--body-font-size-xs); + margin-top: 30px; } -.author-card.block .right-column p { - color: var(--clr-white); - text-transform: uppercase; - background-color: transparent; - font-family: var(--ff-montserrat); - text-align: center; - cursor: default; + +.author-card.block .author-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 6px; } -.author-card.block .right-column p>a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - color: var(--clr-white); - font-weight: var(--font-weight-bold); - font-size: var(--body-font-size-xl); +.author-card.block .author-item { + position: relative; + flex-basis: calc(50% - 3px); } -.author-card.block .right-column p>a:hover { - transition: .8s; - text-decoration: none; + +.author-card.block .author-item picture { + display: block; + height: 100%; + width: 100%; + position: relative; } +.author-card.block .author-item picture img { + object-position: center center; + object-fit: cover; + height: 100%; + width: 100%; +} -.author-card.block .overlay-image:hover::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0 0 0 / 60%); +.author-card.block .author-item .overlay-content { + display: flex; + margin: 0; + padding: 10px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + justify-content: center; + align-items: center; } +.author-card.block .author-item:hover .overlay-content { + background-color: rgb(0 0 0 / 60%); +} + +.author-card.block .author-item .overlay-content p { + display: none; + text-align: center; + font-family: var(--ff-montserrat); + font-size: var(--body-font-size-xl); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-m); + color: var(--clr-white); + text-transform: uppercase; + background-color: transparent; +} -.author-card.block .align-center { +.author-card.block .author-item:hover .overlay-content p { + display: block; +} + +@media screen and (min-width: 900px) { + .author-card.block { + flex-direction: row; + padding: 60px; + } + + .author-card.block .background { position: absolute; top: 50%; left: 50%; + height: 100%; + width: 100%; + max-width: 900px; + max-height: 500px; transform: translate(-50%, -50%); - opacity: 0; - transition: opacity 0.3s ease; - color: var(--clr-white); - text-align: center; -} - -.author-card.block .overlay-image:hover .align-center { - opacity: 1; -} - -@media (max-width: 768px) { - .author-card-container { - padding: 60px 10px; - background: none #ece8e3; - background-size: auto 150%; - } - - .author-wrapper { - display: flex; - width: 100%; - } - - .author-card.block { - flex-flow: column wrap; - width: 100%; - } - - .author-card.block .author-content { - flex: 0 0 100%; - } - - .author-card.block .left-column, - .right-column { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - padding: 0; - } - - .author-card.block .overlay-image { - flex: 0 0 100%; - width: 100%; - } - - .author-card.block .author-content .overlay-image img { - display: block; - width: 100%; - } + background-color: #ede8e3; + z-index: -1000; + } + + .author-card.block .content-wrapper, + .author-card.block .author-wrapper { + flex-basis: 50%; + } + + .author-card.block .content-wrapper { + align-items: flex-start; + justify-content: center; + } + + .author-card.block .content-wrapper h2 { + margin: 0; + font-size: var(--heading-font-size-l); + text-align: left; + } + + + .author-card.block .content-wrapper h2:last-of-type { + font-size: var(--heading-font-size-xl); + } + + .author-card.block .content-wrapper p.button-container { + padding: 0; + } } diff --git a/cigaradvisor/blocks/author-card/author-card.js b/cigaradvisor/blocks/author-card/author-card.js index c098a3b9..86c95704 100644 --- a/cigaradvisor/blocks/author-card/author-card.js +++ b/cigaradvisor/blocks/author-card/author-card.js @@ -1,61 +1,62 @@ import { readBlockConfig, createOptimizedPicture } from '../../scripts/aem.js'; -import { isExternal, fetchData, getRelativePath } from '../../scripts/scripts.js'; +import { isExternal, fetchData, getRelativePath, fetchAuthors } from '../../scripts/scripts.js'; -export default async function decorate(block) { - const configs = readBlockConfig(block); - const { title } = configs; - const buttonLabel = configs['button-label']; - const buttonLink = configs['button-link']; - const { authors } = configs; - const leftDiv = document.createElement('div'); - leftDiv.classList.add('left-column'); - const authorLeftContentWrapper = document.createElement('div'); - authorLeftContentWrapper.classList.add('author-left-content-wrapper'); - title.forEach((titleLine) => { - const h2Tag = document.createElement('h2'); - h2Tag.innerHTML = titleLine; - authorLeftContentWrapper.append(h2Tag); - }); - const anchorWrapper = document.createElement('p'); - const buttonAnchor = document.createElement('a'); - buttonAnchor.innerHTML = buttonLabel; - buttonAnchor.setAttribute('href', buttonLink); - buttonAnchor.setAttribute('target', isExternal(buttonLink) ? '_blank' : '_self'); - buttonAnchor.setAttribute('title', buttonLabel); - buttonAnchor.classList.add('button'); - anchorWrapper.append(buttonAnchor); - authorLeftContentWrapper.append(anchorWrapper); - leftDiv.append(authorLeftContentWrapper); - block.replaceChildren(leftDiv); - - const rightDiv = document.createElement('div'); - rightDiv.classList.add('right-column'); - const authorWrapperSection = document.createElement('section'); - authorWrapperSection.classList.add('author-wrapper'); - authorWrapperSection.innerHTML = ''; - const authorPromises = [...authors].map(async (authorPage) => { - const authorInfo = await fetchData(getRelativePath(authorPage), '/cigaradvisor/author/query-index.json'); - if (authorInfo) { - return `
-
- ${createOptimizedPicture(authorInfo.image).outerHTML} + +async function buildAuthors(authors) { + const root = `${window.location.protocol}//${window.location.host}` + const data = await fetchAuthors(); + const authorDivs = {}; + data.forEach((entry) => { + const url = new URL(`${root}${entry.path}`); + if (authors.includes(url.toString())) { + const div = document.createElement('div'); + div.classList.add('author-item'); + div.innerHTML = ` + +\ ${createOptimizedPicture(entry.image).outerHTML}
-

${authorInfo.name}

+

${entry.name}

-
-
`; + + `; + authorDivs[url.toString()] = div; } - return ''; // return an empty string if there's no authorInfo }); - Promise.all(authorPromises) - .then((authorContents) => { - authorWrapperSection.innerHTML += authorContents.join(''); - }) - .catch((error) => { - // eslint-disable-next-line no-console - console.log('Error fetching author info:', error); - }); - rightDiv.replaceChildren(authorWrapperSection); - block.append(rightDiv); + const wrapper = document.createElement('div'); + wrapper.classList.add('author-wrapper'); + authors.forEach((entry) => { + if (authorDivs[entry]) { + wrapper.append(authorDivs[entry]); + } + }) + return wrapper; +} + +export default async function decorate(block) { + const config = readBlockConfig(block); + const keys = Object.keys(config); + const [keyName] = keys.filter((k) => /button.*link/.test(k)).map((k) => k); + const link = block.querySelectorAll(':scope > div')[keys.indexOf(keyName)].querySelector('a'); + + const bg = document.createElement('div'); + bg.classList.add('background'); + + const contentWrapper = document.createElement('div'); + contentWrapper.classList.add('content-wrapper'); + + config.title.forEach((titleLine) => { + const h2Tag = document.createElement('h2'); + h2Tag.innerHTML = titleLine; + contentWrapper.append(h2Tag); + }); + const p = document.createElement('p'); + p.classList.add('button-container'); + p.append(link); + contentWrapper.append(p); + + const authorWrapper = await buildAuthors(config.authors); + + + block.replaceChildren(bg, contentWrapper, authorWrapper); } diff --git a/cigaradvisor/blocks/hero/hero.js b/cigaradvisor/blocks/hero/hero.js index 9cc8b6d5..126d541b 100644 --- a/cigaradvisor/blocks/hero/hero.js +++ b/cigaradvisor/blocks/hero/hero.js @@ -21,7 +21,9 @@ function buildSearch() { export default async function decorate(block) { const style = getMetadata('hero-style'); if (style) { - block.classList.add(style.toLowerCase()); + style.split(',').map((s) => s.trim()).filter((s) => s).forEach((s) => { + block.classList.add(s.toLowerCase()); + }); } const image = document.createElement('div'); image.classList.add('hero-image'); diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 3a024175..653f7725 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -14,6 +14,9 @@ import { getMetadata, } from './aem.js'; +const POSTS_INDEX = '/cigaradvisor/posts/query-index.json' +const AUTHOR_INDEX = '/cigaradvisor/author/query-index.json'; + const LCP_BLOCKS = []; // add your LCP blocks to the list /** @@ -158,6 +161,8 @@ export async function decorateMain(main) { buildThreeColumnGrid(main); } + +// TODO: Refactor to merge this with next method. /** * Checks if the given path is an external URL. * @param {string} path - The path to be checked. @@ -186,6 +191,7 @@ export function decorateExternalLink(element) { }); } +//TODO: Refactor to remove these /** * Returns the relative path from a given path. * If the path is a URL, it extracts the pathname. @@ -256,6 +262,7 @@ export async function fetchData(filterPath, fetchUrl = '/query-index.json') { return filteredData; } + /** * Decorates social links by adding classes based on their text content. * @param {HTMLElement} element - The element containing the social links. @@ -272,6 +279,19 @@ export function decorateSocialLinks(element) { }); } +export async function fetchAuthors() { + const resp = await fetch(AUTHOR_INDEX); + if (resp.ok) { + const results = await resp.json(); + return results.data; + } else { + //eslint-disable-next-line no-console + console.log(`Unable to fetch Authors index; Status: ${resp.status}`); + } + return {}; +} + + /** * Loads everything needed to get to LCP. * @param {Element} doc The container element diff --git a/cigaradvisor/styles/images/author-underline.png b/cigaradvisor/styles/images/author-underline.png new file mode 100644 index 0000000000000000000000000000000000000000..6a6c887c31ca193d5730a6846c90514b73df7173 GIT binary patch literal 117 zcmeAS@N?(olHy`uVBq!ia0y~yU^D}=r5TxlEaktaVz