Feature/posts pages

cigaradvisor/blocks/articleheader/articleheader.css

@@ -0,0 +1,102 @@
+main .articleheader-container {
+    margin-top: 46px;
+}
+
+.articleheader.block .image-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-height: 650px;
+    background-color: #eaeaea;
+}
+
+.articleheader.block .image-wrapper img {
+    display: block;
+    width: 100%;
+    max-height: 650px;
+}
+
+.articleheader.block .article-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1080px;
+    text-align: center;
+}
+
+.articleheader.block .article-info .article-category {
+    float: none;
+    display: flex;
+    justify-content: center;
+    margin: 30px auto 10px;
+}
+
+.articleheader.block .article-info .article-category a {
+    position: relative;
+    top: 0;
+    left: 0;
+    padding: 7px 24px;
+    margin: 0 auto;
+    text-transform: capitalize;
+    display: flex;
+    justify-content: center;
+    color: #fff;
+    font-family: montserrat, sans-serif;
+    font-weight: 600;
+    background-color: #3c3a3b;
+    font-size: 12px;
+}
+
+.articleheader.block .article-info h1 {
+    font-size: 36px;
+}
+
+.articleheader.block .article-info .article-author {
+    padding-left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 40px auto;
+}
+
+/* separate children of .article-author with a pipe */
+.articleheader.block .article-info .article-author>a::after {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 12px;
+    background-color: #3c3a3b;
+    margin: 0 10px;
+}
+
+.articleheader.block .article-info .article-author .article-published-date {
+    font-family: var(--ff-opensans);
+    font-weight: 600;
+    color: #141414;
+    font-size: 14px;
+}
+
+.articleheader.block .article-read-time {
+    text-align: justify;
+    font-size: 18px;
+    line-height: 30px;
+    color: var(--grey);
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1080px;
+}
+
+@media screen and (min-width: 900px) {
+    main .articleheader-container {
+        margin-top: 77px;
+    }
+}

cigaradvisor/blocks/articleheader/articleheader.js

@@ -0,0 +1,51 @@
+import { fetchData } from '../../scripts/scripts.js';
+
+function getRelativePath(path) {
+  let relPath = path;
+  try {
+    const url = new URL(path);
+    relPath = url.pathname;
+  } catch (error) {
+    // do nothing
+  }
+  return relPath;
+}
+
+export default async function decorate(block) {
+  const imageWrapper = document.createElement('div');
+  imageWrapper.classList.add('image-wrapper');
+  const picture = block.querySelector('picture');
+  imageWrapper.append(picture);
+  const articleInfo = document.createElement('div');
+  articleInfo.classList.add('article-info');
+  const categoryLink = block.querySelector('p.category').innerText;
+  const category = await fetchData(getRelativePath(categoryLink));
+  if (category) {
+    const categoryLinkEl = document.createElement('div');
+    categoryLinkEl.classList.add('article-category');
+    categoryLinkEl.innerHTML = `<a href="${categoryLink}">${category.title}</a>`;
+    articleInfo.append(categoryLinkEl);
+  }
+  articleInfo.append(block.querySelector('h1'));
+  const authorLink = block.querySelector('p.author').innerText;
+  const author = await fetchData(getRelativePath(authorLink));
+  const authorLinkEl = document.createElement('div');
+  authorLinkEl.classList.add('article-author');
+  if (author) {
+    authorLinkEl.innerHTML = `<a href="${authorLink}">By ${author.title}</a>`;
+    articleInfo.append(authorLinkEl);
+  }
+  const publishedDate = block.querySelector('p.published-date').innerText;
+  const publishedDateEl = document.createElement('span');
+  publishedDateEl.classList.add('article-published-date');
+  publishedDateEl.innerText = publishedDate;
+  authorLinkEl.append(publishedDateEl);
+  articleInfo.append(authorLinkEl);
+  const readTime = block.querySelector('p.read-time') ? block.querySelector('p.read-time').innerText : '';
+  const readTimeEl = document.createElement('span');
+  readTimeEl.classList.add('article-read-time');
+  readTimeEl.innerHTML = `<span class="rt-label rt-prefix">Reading Time: </span> <span class="rt-time">${readTime}</span>`;
+  articleInfo.append(readTimeEl);
+  block.replaceChildren(imageWrapper);
+  block.append(articleInfo);
+}

cigaradvisor/scripts/scripts.js

@@ -11,6 +11,7 @@ import {
   waitForLCP,
   loadBlocks,
   loadCSS,
+  getMetadata,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -53,6 +54,61 @@ function buildHeroBlock(main) {
   }
 }
 
+/**
+ * Builds the article header for the given main element.
+ * @param {HTMLElement} mainEl - The main element to build the article header for.
+ */
+function buildArticleHeader(mainEl) {
+  // eslint-disable-next-line no-use-before-define
+  decorateExternalLink(mainEl);
+  const paragraphs = mainEl.querySelectorAll('p');
+  paragraphs.forEach((paragraph) => {
+    if (paragraph.querySelector('picture') !== null) {
+      const imageWrapper = document.createElement('div');
+      imageWrapper.classList.add('article-image-wrapper');
+      if (paragraph.querySelector('a') !== null) {
+        const a = paragraph.querySelector('a');
+        a.replaceChildren(paragraph.querySelector('picture'));
+        imageWrapper.append(a);
+      } else {
+        imageWrapper.append(paragraph.querySelector('picture'));
+      }
+      const nextSibling = paragraph.nextElementSibling;
+      if (nextSibling && nextSibling.querySelector('em') !== null) {
+        nextSibling.classList.add('article-image-caption');
+        imageWrapper.append(nextSibling);
+      }
+      paragraph.replaceChildren(imageWrapper);
+    }
+  });
+  const h3 = mainEl.querySelectorAll('h3');
+  h3.forEach((heading) => {
+    const p = document.createElement('p');
+    p.innerHTML = ' ';
+    heading.prepend(p);
+  });
+  const div = document.createElement('div');
+  const h1 = mainEl.querySelector('h1');
+  const picture = mainEl.querySelector('picture');
+  const category = getMetadata('category');
+  const authorLink = getMetadata('author');
+  const publishedDate = getMetadata('publisheddate');
+  const readTime = document.querySelector('meta[name="readingtime"]').content;
+  const articleBlurb = getMetadata('articleblurb');
+
+  const articleHeaderBlockEl = buildBlock('articleheader', [
+    [picture],
+    [`<p class="category">${category}</p>`],
+    [h1],
+    [`<p class="read-time">${readTime}</p>`],
+    [`<p class="author">${authorLink}</p>`],
+    [`<p class="published-date">${publishedDate}</p>`],
+    [`<p class="article-blurb">${articleBlurb}</p>`],
+  ]);
+  div.append(articleHeaderBlockEl);
+  mainEl.prepend(div);
+}
+
 /**
  * Builds two column grid.
  * @param {Element} main The container element
@@ -94,7 +150,14 @@ async function loadFonts() {
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    const isHome = document.querySelector('body.homepage');
+    const isBlogPost = !!document.querySelector('body.blog-post-template');
+    if (isHome) {
+      buildHeroBlock(main);
+    }
+    if (isBlogPost) {
+      buildArticleHeader(main);
+    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);
@@ -145,17 +208,20 @@ export function decorateExternalLink(element) {
 }
 
 /**
- * Simple funtion to fetch json data from a spreadsheet
+ * Simple funtion to fetch json data from query-index.json
  * @param {*} url
  * @returns jsonData
  */
-export async function fetchData(url) {
-  const resp = await fetch(url);
+export async function fetchData(filterPath) {
+  const fetchUrl = '/query-index.json';
+  const resp = await fetch(fetchUrl);
   let jsonData = '';
   if (resp.ok) {
     jsonData = await resp.json();
   }
-  return jsonData.data;
+  const responseData = jsonData.data;
+  const filteredData = responseData.find((obj) => obj.path === filterPath);
+  return filteredData;
 }
 
 /**

cigaradvisor/styles/styles.css

@@ -197,6 +197,7 @@ body {
   display: none;
   margin: 0;
   color: var(--clr-text);
+  font-family: var(--ff-arial);
 }
 
 body.appear {
@@ -244,6 +245,10 @@ h2 {
   font-size: 12px;
 }
 
+b,strong{
+  font-weight: bolder;
+}
+
 a {
   font-family: var(--ff-montserrat);
   font-weight: 600;
@@ -361,6 +366,74 @@ main .section[data-layout="50/50"] .right-grid>div {
   background-color: var(--clr-pampas);
 }
 
+/* Blog post template starts */
+
+.blog-post-template .author-container>.default-content-wrapper {
+  padding: 0 15px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1080px;
+  text-align: justify;
+}
+
+.blog-post-template .author-container>.default-content-wrapper p {
+  font-size: 18px;
+  line-height: 30px;
+  font-family: var(--ff-opensans);
+  font-weight: 600;
+  color: #141414;
+  cursor: default;
+}
+
+.blog-post-template .author-container>.default-content-wrapper a{
+  font-size: 18px;
+  line-height: 30px;
+  text-decoration: underline;
+color: #b19b5e;
+}
+
+.blog-post-template .author-container>.default-content-wrapper .article-image-wrapper {
+  width: 1000px;
+  padding: 20px;
+  max-width: 100%;
+  clear: both;
+}
+
+.blog-post-template .author-container>.default-content-wrapper picture img {
+  padding: 20px 20px 20px 0;
+}
+
+.blog-post-template .author-container>.default-content-wrapper .article-image-caption {
+  font-family: var(--ff-opensans);
+  font-size: 16px;
+  text-align: center;
+  font-style: italic;
+  font-weight: 700;
+  color: #888;
+  margin: 0;
+}
+
+.blog-post-template .author-container>.default-content-wrapper blockquote {
+  border-color: #e0e0e0;
+  border-width: 1px 0;
+  border-style: solid;
+  margin: 0 0 20px;
+  padding: 10px 0 10px 50px;
+  background: transparent url('/cigaradvisor/images/blog-post/blockquote.png') no-repeat 0 20px;
+}
+
+.blog-post-template .author-container>.default-content-wrapper blockquote p{
+  padding: 10px;
+  margin: 0;
+  color: #1c1c1c;
+  background: transparent url('/cigaradvisor/images/blog-post/pattern-1.png') repeat;
+}
+
+.blog-post-template .author-container>.default-content-wrapper blockquote p strong{
+  font-weight: 700;
+}
+
 @media screen and (max-width: 600px) {
   main .section[data-layout="50/50"] {
     width: 100%;
@@ -379,3 +452,13 @@ main .section[data-layout="50/50"] .right-grid>div {
     font-size: 45px;
   }
 }
+
+@media screen and (min-width: 1200px) {
+  a {
+    font-size: 14px;
+  }
+
+  .blog-post-template .author-container>.default-content-wrapper {
+    padding: 0;
+  }
+}