feat: add recipe sidebar auto-block and layout#38
Conversation
- Created recipe-ingredients block with checkbox functionality - Each ingredient can be checked/unchecked to track preparation - Checked ingredients get strikethrough styling - Responsive design with clean, modern UI - Fixed linting issues in recipe template files
- Red circular checkmarks (faded when unchecked, solid when checked) - Select All/Deselect All toggle with dynamic label - Three action buttons at bottom (Add to Shopping List, View Shopping List, Ingredient Substitutions) - Add to Shopping List button disabled when nothing selected - Custom icons for all buttons using CSS pseudo-elements - Clean white background with proper borders - Fully responsive design
- Set breadcrumb=recipe metadata in eager phase if not defined - Auto-create recipe-sidebar block in aside element - Load sidebar content from /fragments/recipe-sidebar - Desktop layout uses CSS Grid with main and aside side by side - Sidebar hidden on mobile, shown as sticky element on desktop (900px+) - Header and footer span full width across both columns Part of #5
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting
| // eslint-disable-next-line no-unused-vars | ||
| export async function lazy(doc) { | ||
| // no operations | ||
| // Load blocks in the aside | ||
| const aside = doc.querySelector('aside'); | ||
| if (aside) { | ||
| await loadSections(aside); |
There was a problem hiding this comment.
The lazy phase loads blocks for doc.querySelector('aside'), which simply returns the first <aside> in the document. If recipe content ever includes its own <aside> (for example inside the main article), this code will load that element instead of the auto‑inserted sidebar next to <main>, leaving the intended sidebar block unloaded and the layout showing an empty column. Consider selecting the sibling main.nextElementSibling or adding a distinguishing class when creating the sidebar so the lazy phase loads the right element.
Useful? React with 👍 / 👎.
1 participant
Summary
This PR implements the recipe sidebar auto-blocking feature as part of issue #5.
Changes
Recipe Template Eager Phase:
breadcrumb=recipemetadata if not already definedrecipe-sidebarblock in anasideelementbuildAutoBlocks()function to handle auto-blocking logicRecipe Template Lazy Phase:
Recipe Sidebar Block:
/fragments/recipe-sidebarfragmentLayout:
Test Link
Preview: https://recipe-template--food-network--cloudadoption.aem.page/recipes/goulash-8670582
Part of
Part of #5