From 6f354953ba1bef92c544982c58c04e955213e5df Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 10 Jan 2024 09:40:25 -0500 Subject: [PATCH] Feature/authorcard (#56) * initial * Update authorcard.css * final * Update authorcard.css * font update * review comments --- .../blocks/article-teaser/article-teaser.js | 10 +- cigaradvisor/blocks/authorcard/authorcard.css | 224 ++++++++++++++++++ cigaradvisor/blocks/authorcard/authorcard.js | 71 ++++++ cigaradvisor/scripts/scripts.js | 14 ++ cigaradvisor/styles/fonts.css | 18 ++ cigaradvisor/styles/lazy-styles.css | 4 +- head.html | 2 +- 7 files changed, 332 insertions(+), 11 deletions(-) create mode 100644 cigaradvisor/blocks/authorcard/authorcard.css create mode 100644 cigaradvisor/blocks/authorcard/authorcard.js diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 9547592e..26a57d34 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,4 +1,5 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; +import { fetchData } from '../../scripts/scripts.js'; function formatDate(originalDateString) { const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); @@ -12,15 +13,6 @@ function formatDate(originalDateString) { return `${formattedDate}|${dateTimeAttribute}`; } -async function fetchData(url) { - const resp = await fetch(url); - let jsonDataJson = ''; - if (resp.ok) { - jsonDataJson = await resp.json(); - } - return jsonDataJson.data; -} - export default async function decorate(block) { const filterPath = block.querySelector('a').getAttribute('href'); block.classList.add('article-teaser'); diff --git a/cigaradvisor/blocks/authorcard/authorcard.css b/cigaradvisor/blocks/authorcard/authorcard.css new file mode 100644 index 00000000..fa9233bb --- /dev/null +++ b/cigaradvisor/blocks/authorcard/authorcard.css @@ -0,0 +1,224 @@ +.authorcard-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; +} + +.authorcard-wrapper::after { + display: block; + clear: both; +} + +.authorcard-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; +} + +.authorcard.block { + display: flex; +} + +.authorcard.block .left-column, +.right-column { + display: flex; + float: none; + width: 50%; + align-items: center; + justify-content: flex-start; + padding: 10px; +} + +.authorcard.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; +} + +.authorcard.block .left-column h2:first-child { + font-size: var(--heading-font-size-l); + border-bottom: none; +} + + +.authorcard.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; +} + +.authorcard.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; +} + +.authorcard.block .button:hover { + transition: .5s; + background-color: var(--subdued-gold); + border-color: var(--subdued-gold); + text-decoration: none; +} + +.authorcard.block .right-column .author-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.authorcard.block .author-content { + flex: 0 0 50%; + padding: 3px; +} + +.authorcard.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; +} + +.authorcard.block .author-content .overlay-image img { + display: block; +} + +.authorcard.block .right-column p { + color: var(--clr-white); + text-transform: uppercase; + background-color: transparent; + font-family: var(--ff-montserrat); + text-align: center; + cursor: default; +} + +.authorcard.block .right-column p>a { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + color: var(--clr-white); + font-weight: var(--font-weight-extrabold); + font-size: var(--body-font-size-xl); +} + +.authorcard.block .right-column p>a:hover { + transition: .8s; + text-decoration: none; +} + + +.authorcard.block .overlay-image:hover::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0 0 0 / 60%); +} + + +.authorcard.block .align-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity 0.3s ease; + color: var(--clr-white); + text-align: center; +} + +.authorcard.block .overlay-image:hover .align-center { + opacity: 1; +} + +@media (max-width: 768px) { + .authorcard-container { + padding: 60px 10px; + background: none #ece8e3; + background-size: auto 150%; + } + + .author-wrapper { + display: flex; + width: 100%; + } + + .authorcard.block { + flex-flow: column wrap; + width: 100%; + } + + .authorcard.block .author-content { + flex: 0 0 100%; + } + + .authorcard.block .left-column, + .right-column { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 0; + } + + .authorcard.block .overlay-image { + flex: 0 0 100%; + width: 100%; + } + + .authorcard.block .author-content .overlay-image img { + display: block; + width: 100%; + } +} \ No newline at end of file diff --git a/cigaradvisor/blocks/authorcard/authorcard.js b/cigaradvisor/blocks/authorcard/authorcard.js new file mode 100644 index 00000000..6f7ee276 --- /dev/null +++ b/cigaradvisor/blocks/authorcard/authorcard.js @@ -0,0 +1,71 @@ +import { readBlockConfig, createOptimizedPicture } from '../../scripts/aem.js'; +import { isExternal, fetchData } 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'); + // TODO: fetch author details from query-index.xlsx + const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; + const authorContent = await fetchData(fetchUrl); + const authorsObj = []; + [...authors].forEach((authorPage) => { + let authorPath; + try { + const url = new URL(authorPage); + authorPath = url.pathname; + } catch (error) { + authorPath = authorPage; + } + const authorInfo = authorContent.find((obj) => obj.path === authorPath); + if (authorInfo) { + const authorDetails = { + page: authorInfo.path, + name: authorInfo.authorName, + image: authorInfo.authorImage, + }; + authorsObj.push(authorDetails); + } + }); + const authorWrapperSection = document.createElement('section'); + authorWrapperSection.classList.add('author-wrapper'); + authorWrapperSection.innerHTML = ''; + [...authorsObj].forEach((author) => { + authorWrapperSection.innerHTML + += `
+
+ ${createOptimizedPicture(author.image).outerHTML} +
+

${author.name}

+
+
+
`; + }); + rightDiv.replaceChildren(authorWrapperSection); + block.append(rightDiv); +} diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 3deaa907..a2e6a47b 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -144,6 +144,20 @@ export function decorateExternalLink(element) { }); } +/** + * Simple funtion to fetch json data from a spreadsheet + * @param {*} url + * @returns jsonData + */ +export async function fetchData(url) { + const resp = await fetch(url); + let jsonData = ''; + if (resp.ok) { + jsonData = await resp.json(); + } + return jsonData.data; +} + /** * Decorates social links by adding classes based on their text content. * @param {HTMLElement} element - The element containing the social links. diff --git a/cigaradvisor/styles/fonts.css b/cigaradvisor/styles/fonts.css index e0613849..c41d2128 100644 --- a/cigaradvisor/styles/fonts.css +++ b/cigaradvisor/styles/fonts.css @@ -20,3 +20,21 @@ font-display: swap; src: url('../fonts/alfaslabone.woff2') format('woff2'); } + +@font-face { + font-family: "alfa-slab-one-normal-400-fallback"; + size-adjust: 89.069%; + src: local("Courier New"); + } + + @font-face { + font-family: "montserrat-normal-400-fallback"; + size-adjust: 97.069%; + src: local("Verdana"); + } + + @font-face { + font-family: "open-sans-normal-400-fallback"; + size-adjust: 78.069%; + src: local("Courier New"); + } \ No newline at end of file diff --git a/cigaradvisor/styles/lazy-styles.css b/cigaradvisor/styles/lazy-styles.css index bd0ef008..5972756a 100644 --- a/cigaradvisor/styles/lazy-styles.css +++ b/cigaradvisor/styles/lazy-styles.css @@ -1 +1,3 @@ -@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=5.5.1'); \ No newline at end of file +/* add global styles that can be loaded post LCP here */ +@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One%7CMontserrat%3A300%2C400%2C500%2C600%2C700%2C800%2C900%7COpen+Sans%3A400%2C600%2C700&ver=5.5.1'); +@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=5.5.1'); diff --git a/head.html b/head.html index bbb5128b..1cf3826c 100644 --- a/head.html +++ b/head.html @@ -1,4 +1,4 @@ - + \ No newline at end of file