Skip to content

Commit

Permalink
Merge pull request #736 from adobe/issue-733
Browse files Browse the repository at this point in the history 
feat: Blog List Page Design
  • Loading branch information
@asthabh23
asthabh23 authored Jan 7, 2025
2 parents 33ddbcf + a88d81b commit 8ab3025
Show file tree
Hide file tree
Showing 4 changed files with 317 additions and 76 deletions.
134 changes: 119 additions & 15 deletions blocks/feed/feed.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,69 @@
.feed.recent {
.feed {
text-align: left;
}

.feed.recent .feed-item img {
.feed-hidden {
display: none;
}

.feed.blog .blog-link {
text-decoration: none;
color: inherit;
}

.right-container {
padding-top: 50px;
display: flex;
flex-direction: column;
gap: 20px;
}

.blog-item:not(.blog-item.latest) {
box-shadow: 0 4px 8px rgba(0 0 0 / 20%);
transition: box-shadow 0.3s ease;
padding: 20px;
background-color: white;
}

.blog-item:not(.blog-item.latest):hover {
box-shadow: 0 8px 16px rgba(0 0 0 / 40%);
}

.left-container {
display: flex;
flex-direction: column;
align-items: center;
}

.left-container .blog-item.latest:not(.read-more) {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.left-container .read-more {
align-self: center;
display: inline-block;
}

.feed.recent .feed-item {
margin: 10px;
}

.feed.recent .feed-item img,
.blog-container .right-container .blog-item img {
max-width: 100%;
filter: var(--image-filter-drop-shadow-small);
width: 100%;
aspect-ratio: 5 / 4;
object-fit: contain;
}

.feed.recent > div {
.feed.recent > div,
.feed.blog > div {
margin-bottom: var(--spacing-s);
padding: var(--spacing-ml) 0;
padding-top: 40px;
gap: var(--spacing-s);
}

Expand All @@ -32,25 +83,43 @@
flex-direction: column;
}

.feed.recent .feed-item .image-wrapper-el {
.feed.recent .feed-item .image-wrapper-el,
.feed.blog .blog-item .image-wrapper {
margin-top: auto;
padding-top: var(--spacing-s);
}

.feed.recent h3 {
.feed.blog h1 {
font-size: var(--type-heading-xl-size);
line-height: var(--type-heading-xl-lh);
font-weight: 700;
letter-spacing: -0.04em;
}

.feed.blog h2 {
font-size: var(--type-heading-l-size);
line-height: var(--type-heading-l-lh);
font-weight: 700;
letter-spacing: -0.04em;
}

.feed.recent h3,
.feed.blog h3 {
margin-bottom: var(--spacing-xs);
font-size: var(--type-heading-xl-size);
line-height: var(--type-heading-xl-lh);
font-weight: 700;
letter-spacing: -0.04em;
}

.feed.recent p {
.feed.recent p,
.feed.blog p {
font-size: var(--type-body-s-size);
line-height: var(--type-body-s-lh);
}

.feed.recent .desc {
.feed.recent .desc,
.feed.blog .desc {
/* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
line-clamp: 5;
Expand All @@ -61,6 +130,10 @@
}

@media screen and (width >= 768px) {
.feed.recent .feed-item {
margin: unset;
}

.feed.recent > div > div {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: var(--spacing-xs);
Expand All @@ -71,16 +144,35 @@
text-align: left;
}

.feed.recent h3 {
.feed.recent h3,
.feed.blog h3 {
font-size: var(--type-heading-s-size);
line-height: var(--type-heading-s-lh);
}

.feed.recent p {
.feed.recent p,
.feed.blog p {
font-size: var(--type-body-xs-size);
line-height: var(--type-body-xs-lh);
margin-bottom: 1em;
}

.blog-container {
display: flex;
gap: 20px;
}

.left-container {
flex: 0 0 70%; /* 70% width */
}

.right-container {
flex: 0 0 30%; /* 30% width */
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 0;
}
}

@media screen and (width >= 900px) {
Expand All @@ -93,13 +185,19 @@
padding: var(--spacing-xs) 0;
}

.feed.recent h3 {
.feed.blog > div {
padding-top: unset;
}

.feed.recent h3,
.feed.blog h3 {
margin-bottom: var(--spacing-s);
font-size: var(--type-heading-m-size);
line-height: var(--type-heading-m-lh);
}

.feed.recent .image-wrapper-el {
.feed.recent .image-wrapper-el,
.feed.blog .image-wrapper {
padding-top: var(--spacing-l);
margin-bottom: 0;
}
Expand All @@ -108,7 +206,7 @@
grid-gap: 32px;
}

.feed.recent > div > div > div{
.feed.recent > div > div > div {
padding: var(--spacing-xl) var(--spacing-m);
margin-bottom: var(--spacing-s);
}
Expand All @@ -119,10 +217,15 @@
font-size: var(--type-body-m-size);
line-height: var(--type-body-s-lh);
}

.feed.blog h1 {
margin-top: 0;
}
}

@media screen and (width >= 1200px) {
.feed.recent h3 {
.feed.recent h3,
.feed.blog h3 {
font-size: var(--type-heading-l-size);
line-height: var(--type-heading-l-lh);
}
Expand All @@ -131,9 +234,10 @@
padding: var(--spacing-xxl) var(--spacing-xl);
}

.feed.recent p {
.feed.recent p,
.feed.blog p {
font-size: var(--type-body-s-size);
line-height: var(--type-body-s-lh);
margin-bottom: 1em;
}
}
}
104 changes: 100 additions & 4 deletions blocks/feed/feed.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import {
createTag,
loadFeedData,
loadBlogData,
} from '../../scripts/scripts.js';

// logic for rendering the community feed
export async function renderFeed(block) {
if (!block) {
return;
Expand Down Expand Up @@ -48,13 +50,107 @@ export async function renderFeed(block) {
block.appendChild(parentDiv);
}

// logic to render blog list home page
export async function fetchBlogContent(url) {
try {
const response = await fetch(url);
const text = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const content = doc.querySelector('body > main > div');
return content ? content.innerHTML : '';
} catch (error) {
// eslint-disable-next-line no-console
console.error('Error fetching blog content:', error);
return '';
}
}

export async function renderBlog(block) {
if (!block) {
return;
}
const blogIndex = window.blogindex.data;
blogIndex.reverse();
const parentDiv = createTag('div', { class: 'blog-container' });

const leftContainer = createTag('div', { class: 'left-container' });
const rightContainer = createTag('div', { class: 'right-container' });

const latestBlog = blogIndex[0];
const latestBlogItem = createTag('div', { class: 'blog-item latest' });

// Fetch the full content of the latest blog post
const latestBlogContent = await fetchBlogContent(latestBlog.path);
if (latestBlogContent) {
// eslint-disable-next-line max-len
const truncatedContent = latestBlogContent.substring(0, Math.floor(latestBlogContent.length * 0.75));
latestBlogItem.innerHTML = truncatedContent;
}

const readMoreButton = createTag('a', { href: latestBlog.path, class: 'read-more button primary large' }, 'Read More');
readMoreButton.addEventListener('click', () => {
window.location.href = latestBlog.path;
});
latestBlogItem.appendChild(readMoreButton);

leftContainer.appendChild(latestBlogItem);

blogIndex.slice(1).forEach((page) => {
const blogItem = createTag('div', { class: 'blog-item' });

const h3 = createTag('h3', { class: 'title' }, page.title);
blogItem.appendChild(h3);

const desc = createTag('p', { class: 'desc' }, page.description);
blogItem.appendChild(desc);

const date = createTag('p', { class: 'date' }, page.publicationDate);
blogItem.appendChild(date);

const image = createTag('p', { class: 'image-wrapper' });
const img = createTag('img', { src: page.image });
image.appendChild(img);
blogItem.appendChild(image);

const blogLink = createTag('a', { href: page.path, target: '_blank', class: 'blog-link' });
blogLink.appendChild(blogItem);

rightContainer.appendChild(blogLink);
});

parentDiv.appendChild(leftContainer);
parentDiv.appendChild(rightContainer);
block.appendChild(parentDiv);
}

export default async function decorate(block) {
loadFeedData();
if (window?.siteindex?.loaded) {
await renderFeed(block);
const isBlog = block.classList.contains('blog');

if (isBlog) {
loadBlogData();
} else {
loadFeedData();
}

const checkDataLoaded = () => {
if (isBlog) {
return window?.blogindex?.loaded;
}
return window?.siteindex?.loaded;
};

const renderFunction = isBlog ? renderBlog : renderFeed;

if (checkDataLoaded()) {
await renderFunction(block);
} else {
const div = createTag('div', { class: 'feed-hidden' }, '');
block.append(div);
document.addEventListener('dataset-ready', () => renderFeed(block));
document.addEventListener('dataset-ready', () => {
if (checkDataLoaded()) {
renderFunction(block);
}
});
}
}
18 changes: 18 additions & 0 deletions scripts/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,24 @@ export function loadFeedData() {
});
}

export function loadBlogData() {
window.blogindex = window.blogindex || { data: [], loaded: false };
const offset = 0;

fetch(`/query-index.json?offset=${offset}`)
.then((response) => response.json())
.then((responseJson) => {
window.blogindex.data = responseJson?.data?.filter((entry) => entry.path.startsWith('/blog/')) || [];
window.blogindex.loaded = true;
const event = new Event('dataset-ready');
document.dispatchEvent(event);
})
.catch((error) => {
// eslint-disable-next-line no-console
console.log(`Error loading query index: ${error.message}`);
});
}

/**
* Decorates the main element.
* @param {Element} main The main element
Expand Down
Loading

0 comments on commit 8ab3025

Please sign in to comment.