generated from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6f35495
commit 8664ae5
Showing
4 changed files
with
195 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters