Skip to content

Commit

Permalink
initial
Browse files Browse the repository at this point in the history
  • Loading branch information
kailasnadh790 committed Jan 11, 2024
1 parent 6f35495 commit 8664ae5
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 5 deletions.
102 changes: 102 additions & 0 deletions cigaradvisor/blocks/articleheader/articleheader.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
47 changes: 47 additions & 0 deletions cigaradvisor/blocks/articleheader/articleheader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
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));
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');
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);
}
44 changes: 39 additions & 5 deletions cigaradvisor/scripts/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
waitForLCP,
loadBlocks,
loadCSS,
getMetadata,
} from './aem.js';

const LCP_BLOCKS = []; // add your LCP blocks to the list
Expand Down Expand Up @@ -53,6 +54,29 @@ function buildHeroBlock(main) {
}
}

function buildArticleHeader(mainEl) {
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
Expand Down Expand Up @@ -94,7 +118,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);
Expand Down Expand Up @@ -145,17 +176,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;
}

/**
Expand Down
7 changes: 7 additions & 0 deletions cigaradvisor/styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ body {
display: none;
margin: 0;
color: var(--clr-text);
font-family: var(--ff-arial);
}

body.appear {
Expand Down Expand Up @@ -379,3 +380,9 @@ main .section[data-layout="50/50"] .right-grid>div {
font-size: 45px;
}
}

@media screen and (min-width: 1200px) {
a {
font-size: 14px;
}
}

0 comments on commit 8664ae5

Please sign in to comment.