Skip to content

Add blog-header block with auto-blocking#4

Closed
shsteimer wants to merge 2 commits intomainfrom
blog-header-block
Closed

Add blog-header block with auto-blocking#4
shsteimer wants to merge 2 commits intomainfrom
blog-header-block

Conversation

@shsteimer
Copy link
Copy Markdown
Contributor

Summary

Adds a new blog-header block that automatically displays blog post metadata (date, author, tags) below the page title.

Implementation

  • Auto-blocking approach: Block is created automatically from page metadata (no manual authoring required)
  • Reads date, author, and article:tag from page <head>
  • Inserts blog-header block immediately after the H1 tag
  • Displays date with RSS icon, author with GitHub avatar, and tag pills
  • Fully responsive design (desktop and mobile tested)

Preview

Test page with blog-header: https://blog-header-block--eds-masterclass--cloudadoption.aem.page/drafts/shsteimer/open-source

Files Changed

  • scripts/scripts.js - Added buildBlogHeaderBlock() function for auto-blocking
  • blocks/blog-header/blog-header.js - Block decoration logic
  • blocks/blog-header/blog-header.css - Responsive styling

Testing

✅ Tested on desktop (1440px)
✅ Tested on mobile (375px)
✅ No linter errors
✅ Works with imported Deno blog content

- Auto-blocks blog metadata (date, author, tags) from page head
- Inserts blog-header block after H1 automatically
- Displays date with RSS icon, author with avatar, and tag pills
- Responsive design for desktop and mobile
- No manual authoring required for blog posts
@aem-code-sync
Copy link
Copy Markdown

aem-code-sync bot commented Nov 10, 2025

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

@aem-code-sync
Copy link
Copy Markdown

aem-code-sync bot commented Nov 10, 2025

Page Scores Audits Google
📱 /drafts/shsteimer/open-source PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /drafts/shsteimer/open-source PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

- Remove unused getMetadata import
- Fix CSS selector specificity ordering
- Fix trailing spaces
- Change hex color from #ffffff to #fff
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant