[MWPW-160630] - Added new Article template UI

[snowiewdev]

Description

Added new Article page UI based on new design in Figma. Updates include:

• Added in support for adding Page Template as sidebar in Metadata table, which will render new article layout with sidebar. Without this identifier, the UI would stay the same as the original article page with the full-width article header
• Added article-hero-marquee block for the new article hero (split marquee)
  • users can custom background via passing in image, color, or circle-gradient(#hexcode1, #hexcode2) in table content directly
  • the block would automatically fetch article information (i.e. category link, article title & description) and display those as text, so that editors don’t need to re-enter information for the newly styled hero section
• Added article-meta block for
  • loading the original full-width article header
  • loading the simplified version of author information & social sharing block for the updated article sidebar layout
  • putting the logic in the same block so that we can reuse the same styles on social sharing block & author information section
• Added progress-bar block for better UI
• Updated banner ui to support new design in Figma. The code is the same with the one under redesign/home branch
• Updated recommended articles section with minor css updates in styles.css

Resolves

• Jira Ticket: https://jira.corp.adobe.com/browse/MWPW-160630
• Figma: https://www.figma.com/design/Dz1Y9DeroVATX3RG73S4vY/Adobe-Blog-(INT)?node-id=2965-18232&t=yjvvJBXgXAQ9ZHSQ-4

Test Urls

Article Page - with sidebar Page Template applied & new article-hero-marquee

• Before: https://main--blog--adobecom.hlx.page/en/drafts/snowie-testing/blog-detail/article-with-banner?martech=off
• After: https://redesign-article--blog--adobecom.hlx.page/en/drafts/snowie-testing/blog-detail/article-with-banner?martech=off

Article Page - without sidebar identifier (keeps original article layout)

• Before: https://main--blog--adobecom.hlx.page/en/publish/2024/09/19/sustainability-constructive-perspectives?martech=off
• After: https://redesign-article--blog--adobecom.hlx.page/en/publish/2024/09/19/sustainability-constructive-perspectives?martech=off

QA Tracking Sheet:

• https://docs.google.com/spreadsheets/d/175GuPMerA_eqMZuxwynazG4iBnjBwuh0bYIJXp1onFY/edit?gid=648067526#gid=648067526

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 73616bb ✅ (latest)
• 8d9f150 ✅
• 83f6b69 ✅
• b58fe3b ✅
• 04a9808 ✅
• 94963f4 ✅
• 596c9dc ✅
• e77a184 ✅
• 698f78b ✅
• 4fa95f3 ✅
• e32e0e2 ✅
• bc10f96 ✅
• 6e90532 ✅
• 446cb98 ✅
• 4e4c1c1 ✅
• 9eac2ea ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/en/drafts/snowie-testing/blog-detail/article-with-banner?martech=off
🖥️	/en/drafts/snowie-testing/blog-detail/article-with-banner?martech=off
📱	/en/publish/2024/09/19/sustainability-constructive-perspectives?martech=off
🖥️	/en/publish/2024/09/19/sustainability-constructive-perspectives?martech=off

[rgclayton]

Hi @snowiewdev,

I noticed if I do not use the new header block on the page, the description from the metatadata is not populated, only the title is followed by page content.

Here's a sample page I created.
https://redesign-article--blog--adobecom.hlx.page/en/drafts/rclayton/article-with-video