From e60c9532ea0fe7ad920bac31b7c5740807da5d4f Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 12 Jan 2024 16:12:21 -0500 Subject: [PATCH] Author block (#63) * initial * Update articleheader.css * article image caption * caption * Update articleheader.css * article header * null check * template styling * wip author block * Update styles.css * progress * complete * Update scripts.js * Update styles.css --------- Co-authored-by: tmaret --- cigaradvisor/blocks/author/author.css | 158 ++++++++++++++++++++++++++ cigaradvisor/blocks/author/author.js | 80 +++++++++++++ cigaradvisor/scripts/scripts.js | 4 +- cigaradvisor/styles/styles.css | 8 +- 4 files changed, 246 insertions(+), 4 deletions(-) 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..3310765b --- /dev/null +++ b/cigaradvisor/blocks/author/author.css @@ -0,0 +1,158 @@ +.author.block { + display: flex; + padding: 20px 0; +} + +.author.block>div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 20px; + width: 100%; +} + +.author.block .image-wrapper { + text-align: center; + display: flex; + align-items: center; + justify-content: center; + padding: 0; +} + +.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: 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 { + display: flex; + margin-top: 5px; +} + +.author.block .author-details .author-heading { + display: flex; + flex-direction: column; + 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; +} + +.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 new file mode 100644 index 00000000..d6414017 --- /dev/null +++ b/cigaradvisor/blocks/author/author.js @@ -0,0 +1,80 @@ +import { decorateExternalLink } from '../../scripts/scripts.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; +} + +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); + 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'); + 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]; + 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); + } +} 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); } diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index a1be8b49..cb818bb0 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,11 @@ color: #b19b5e; } @media screen and (min-width: 1200px) { - a { + h2 { + font-size: 16px; + } + + a,p { font-size: 14px; }