Add editorial-promo block#39
Merged
Merged
Conversation
Implement a new recipe-nav block that displays navigation links to the previous and next recipes. This block can be directly authored or populated from page metadata. Features: - Displays previous and next recipe links in a horizontal layout - Includes arrow icons for better UX - Fully responsive design (stacks vertically on mobile) - Accessible with proper ARIA labels and semantic HTML - Uses modern CSS with range notation for media queries - Follows project coding standards and passes all linting checks The block decorates authored content into a semantic nav structure with proper styling and hover states. Closes #6 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove button-style borders and backgrounds for cleaner look - Use teal chevrons (‹ ›) instead of arrows - Style text as uppercase gray with proper letter-spacing - Increase spacing and adjust colors to match mockup - Maintain responsive behavior and accessibility features 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Implements a responsive recipe information block that displays: - Level (difficulty) - Total time - Prep/Active time - Cook time (if present) - Yield (servings) - Nutrition Info link (non-functional per requirements) Layout: - Mobile: 2-column grid with specific item ordering - Desktop: 3-column grid with vertical dividers Resolves #9 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Implements a card-style promo block for displaying editorial content links with thumbnail images. Each item shows an image thumbnail (161x121px) alongside linked text. Features: - Vertical list layout with 16px gap between items - Optimized images using createOptimizedPicture - Hover effects on links - Responsive design - Clean semantic HTML structure Closes #18 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implementation Details
createOptimizedPicturefor efficient image loadingTest Plan
Test URL
https://feature-editorial-promo--food-network--cloudadoption.aem.page/recipes/goulash-8670582
Check the sidebar on the right to see the editorial promo blocks under "What's Cooking" and "Shop With Us" sections.
Closes #18
🤖 Generated with Claude Code