forked from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 5
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
Showing
2 changed files
with
106 additions
and
0 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,21 @@ | ||
/* stylelint-disable */ | ||
|
||
.recent-articles { | ||
position: relative; | ||
display: inline-block; | ||
} | ||
|
||
.recent-articles picture img { | ||
width: 100%; | ||
display: block; | ||
} | ||
|
||
.recent-articles .title { | ||
font-size: 2rem; | ||
border-radius: 10px; | ||
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow for depth */ | ||
white-space: nowrap; /* Ensures text doesn't wrap */ | ||
text-align: center; | ||
z-index: 10; /* Ensures text is above the image */ | ||
} | ||
|
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,85 @@ | ||
export default async function decorate(block) { | ||
// Select the image within the block | ||
const anchorElement = block.querySelector('a'); | ||
|
||
if (!anchorElement) { | ||
console.error('Image element not found within the block.'); | ||
return; | ||
} | ||
|
||
const hrefSrc = anchorElement.getAttribute('href'); | ||
|
||
if (!hrefSrc) { | ||
console.error('Image source (src) attribute is missing.'); | ||
return; | ||
} | ||
|
||
let deliveryUrl = null; | ||
let deliveryImageTitle = null; | ||
|
||
try { | ||
const url = new URL(hrefSrc); | ||
|
||
// Check if the URL contains 'delivery-' in its path | ||
if (url.toString().includes('delivery-')) { | ||
// Remove query parameters from the URL | ||
url.search = ''; | ||
deliveryUrl = url.toString().substring(0, url.toString().lastIndexOf('/play')); | ||
} | ||
} catch (error) { | ||
console.error('Error parsing the image URL:', error); | ||
return; // Abort further execution if URL parsing fails | ||
} | ||
|
||
// Fetch metadata if delivery URL is valid | ||
//append current timestamp as a cache killer in the URL e.g. ${deliveryUrl}/metadata?${Date.now()} | ||
if (deliveryUrl) { | ||
try { | ||
const response = await fetch(`${deliveryUrl}/metadata?${Date.now()}`, { | ||
headers: { | ||
'If-None-Match': 'no-cache' // Set 'no-cache' to ensure the latest metadata is fetched | ||
} | ||
}); | ||
|
||
// Handle HTTP response errors | ||
if (!response.ok) { | ||
console.error(`Failed to fetch metadata. HTTP status: ${response.status}`); | ||
return; | ||
} | ||
|
||
const metadata = await response.json(); | ||
|
||
// Safely access title within assetMetadata | ||
if (metadata && metadata.assetMetadata && metadata.assetMetadata['dc:title']) { | ||
deliveryImageTitle = metadata.assetMetadata['dc:title']; | ||
} else { | ||
console.warn('No title found in the asset metadata.'); | ||
} | ||
} catch (error) { | ||
console.error('Error fetching metadata from the delivery URL:', error); | ||
return; | ||
} | ||
} | ||
|
||
// Apply title as the alt and title attribute for SEO if found | ||
if (deliveryImageTitle) { | ||
anchorElement.setAttribute('alt', deliveryImageTitle); | ||
anchorElement.setAttribute('title', deliveryImageTitle); | ||
|
||
// Insert title below the picture element | ||
const buttonElement = block.querySelector('div.button-container'); | ||
if (buttonElement) { | ||
const titleElement = document.createElement('div'); | ||
titleElement.classList.add('title'); | ||
titleElement.innerText = deliveryImageTitle; | ||
|
||
// Insert the title element before the picture element | ||
buttonElement.before(titleElement); | ||
buttonElement.remove(); | ||
} else { | ||
console.error('Picture element not found within the block.'); | ||
} | ||
} else { | ||
console.warn('Delivery image title is not available, skipping title insertion.'); | ||
} | ||
} |