From abd9faf4f16d5eee863055f107816a808d339533 Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Fri, 12 Jan 2024 13:22:41 +0100
Subject: [PATCH 1/2] Add author index (#60)

* add author index

* add lastModified back to default index
---
 helix-query.yaml | 52 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 helix-query.yaml

diff --git a/helix-query.yaml b/helix-query.yaml
new file mode 100644
index 00000000..48f60c9d
--- /dev/null
+++ b/helix-query.yaml
@@ -0,0 +1,52 @@
+version: 1
+indices:
+  default:
+    include:
+      - /**
+    target: /query-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      title:
+        select: head > meta[property="og:title"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "https:\/\/[^/]+(/.*)")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+  authors:
+    include:
+      - /cigaradvisor/author/**
+    target: /cigaradvisor/author/query-index.json
+    properties:
+      name:
+        select: div:nth-of-type(1) > h2:nth-of-type(1)
+        value: |
+          textContent(el)
+      description:
+        select: div:nth-of-type(1) > p:nth-of-type(2)
+        value: |
+          textContent(el)
+      image:
+        select: div:nth-of-type(1) > p:nth-of-type(1) > picture:nth-of-type(1) > img
+        value: |
+          attribute(el, 'src')
+      twitter:
+        select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a
+        value: |
+          match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?twitter\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
+      facebook:
+        select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a
+        value: |
+          match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?facebook\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
+      instagram:
+        select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a
+        value: |
+          match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?instagram\.com\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')
+      youtube:
+        select: div:nth-of-type(1) > ul:nth-of-type(1) > li > a
+        value: |
+          match(attribute(el, 'href'), '^https?:\/\/(?:www\.)?youtube\.com\/user\/(?:#!\/)?@?([^/?#]*)\/?(?:[?#].*)?$')

From c35c4c6c847a3cd13ea301236242ee56c934788f Mon Sep 17 00:00:00 2001
From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 12 Jan 2024 08:20:59 -0500
Subject: [PATCH 2/2] Feature/posts pages (#59)

* initial

* Update articleheader.css

* article image caption

* caption

* Update articleheader.css

* article header

* null check

* template styling

* Update styles.css
---
 .../blocks/articleheader/articleheader.css    | 102 ++++++++++++++++++
 .../blocks/articleheader/articleheader.js     |  51 +++++++++
 cigaradvisor/scripts/scripts.js               |  76 ++++++++++++-
 cigaradvisor/styles/styles.css                |  83 ++++++++++++++
 4 files changed, 307 insertions(+), 5 deletions(-)
 create mode 100644 cigaradvisor/blocks/articleheader/articleheader.css
 create mode 100644 cigaradvisor/blocks/articleheader/articleheader.js

diff --git a/cigaradvisor/blocks/articleheader/articleheader.css b/cigaradvisor/blocks/articleheader/articleheader.css
new file mode 100644
index 00000000..e1b92b09
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/cigaradvisor/blocks/articleheader/articleheader.js b/cigaradvisor/blocks/articleheader/articleheader.js
new file mode 100644
index 00000000..4dc80152
--- /dev/null
+++ b/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);
+}
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index a2e6a47b..77daea91 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/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 = '&nbsp;';
+    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;
 }
 
 /**
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 316e0085..a1be8b49 100644
--- a/cigaradvisor/styles/styles.css
+++ b/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;
+  }
+}