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 <[email protected]>

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;
+    }
+}

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);
+  }
+}

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);
     }

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;
   }