Feature/authorcard (#56)

* initial * Update authorcard.css * final * Update authorcard.css * font update * review comments
hlxsites · Jan 10, 2024 · 6f35495 · 6f35495
1 parent 534ea7c
commit 6f35495
Show file tree

Hide file tree

Showing 7 changed files with 332 additions and 11 deletions.
diff --git 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
@@ -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%;
+    }
+}
diff --git a/cigaradvisor/blocks/authorcard/authorcard.js 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
+      += `<div class="author-content">
+    <div class="overlay-image">
+    ${createOptimizedPicture(author.image).outerHTML}
+    <div class="overlay-content">
+    <p class="align-center"><a href="${author.page}">${author.name}</a></p>
+    </div>
+    </div>
+    </div>`;
+  });
+  rightDiv.replaceChildren(authorWrapperSection);
+  block.append(rightDiv);
+}
diff --git 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
@@ -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");
+  }
diff --git 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');
+/* 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&#038;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
@@ -1,4 +1,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <script src="/cigaradvisor/scripts/aem.js" type="module"></script>
 <script src="/cigaradvisor/scripts/scripts.js" type="module"></script>
-<link rel="stylesheet" href="/cigaradvisor/styles/styles.css"/>
+<link rel="stylesheet" href="/cigaradvisor/styles/styles.css"/>