Implement DDD-005: Post Detail page reading experience#27
Merged
Conversation
Extract TYPE_LABELS, DATE_FORMATTER, parseDate, toIsoDate from post-index.js to scripts/post-utils.js for reuse by post detail. Add Quote block with standard and pull-quote variants per DDD-005. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
Path-based detection adds body.post-detail class on /blog/* pages. Post header decoration injects type badge, sr-only prefix, metadata line with dates and tags. Scoped CSS for all typography, spacing, body links, inline code, tables, and decorateButtons() override. Resolves the core implementation of DDD-005. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
Add Page-Type Detection section to AGENTS.md documenting the body.post-detail class pattern. Add blockquote authoring notes to content-model.md covering Quote block variants. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
- Move pre tabindex to loadLazy (after loadSections) so all sections are decorated, not just the eager-loaded first section - Remove role="region" and aria-label from pre (unnecessary noise) - Preserve inline markup in Quote block (bold, italic, code, links) instead of stripping to textContent - Remove duplicate tag link CSS rules (dead code at lower specificity) - Move focus-visible rule to higher-specificity selector block Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
Document da.live as the content authoring platform, including editor URL, admin API, auth constraints, and test page workflow. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Ben Peter <bp@ben-peter.com>
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
2 participants
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.
Nefario Report: Implement DDD-005 Post Detail
Summary
Implemented the post detail reading experience at
/blog/{slug}per the DDD-005 design contract. Created path-based page detection inscripts.js, post header decoration (type badge, sr-only prefix, metadata line with dates and tags), scoped CSS for all typography and spacing overrides, a Quote block with standard and pull-quote variants, shared post utilities module, comprehensive test content, and documentation updates.Original Prompt
Implement DDD-005 Post Detail page reading experience (#26). Path-based detection, post header decoration, scoped CSS, Quote block, pre tabindex, test content, and documentation updates per the design contract in docs/design-decisions/DDD-005-post-detail.md.
Key Design Decisions
No article wrapper on main
accessibility-minion flagged that adding
role="article"to<main>would destroy the main landmark (WCAG 1.3.1). Resolution: skip the<article>wrapper entirely. A single blog post inside<main>with an<h1>is semantically complete.Tag links get subtle underlines (WCAG 1.4.1)
The DDD-005 spec originally matched DDD-004 precedent (no underline on tag links). accessibility-minion flagged this as a WCAG 1.4.1 violation — links rely on color alone to be distinguishable. Resolution: add
text-decoration: underline; text-decoration-color: var(--color-border)to tag links, which nearly melts into the background while meeting accessibility requirements. DDD-004 post-index tags are a separate concern.CSS override for decorateButtons()
frontend-minion recommended CSS override over JS exclusion for the
decorateButtons()side effect. At the timedecorateButtons()runs indecorateMain(), sections do not yet exist. A CSS reset of.buttonstyles scoped behindbody.post-detail .default-content-wrapperis declarative and avoids coupling to execution order.Pre tabindex in loadLazy, not eager
Code review caught that
querySelectorAll('pre')indecoratePostDetail()runs during the eager phase when only the first section is loaded. Code blocks in body sections (sections 2+) are loaded lazily. Resolution: moved the tabindex decoration toloadLazyafterloadSections(main)completes, ensuring all<pre>elements receivetabindex="0".Quote block preserves inline markup
Code review caught that the original quote block implementation stripped all inline markup (bold, italic, code, links) by using
textContent. Resolution: refactoredextractParagraphsto move child nodes rather than extract text, preserving authored inline markup.Eager CSS loading for post-detail.css
frontend-minion recommended eager loading (~150 lines, ~3KB) to avoid FOUC. The post header with h1 is likely the LCP element, so post-scoped CSS must be available before first paint.
Content discipline as convention only
ux-strategy-minion recommended against programmatic enforcement of the pull-quote content discipline (pull-quote text must appear verbatim elsewhere in the post body). Single-author blog; editorial discipline is sufficient. Documented in content-model.md.
Phases
Execution
Task 1: Extract shared post utilities
scripts/post-utils.js(new, +49),blocks/post-index/post-index.js(modified, -43)Task 2: Post detail decoration and CSS
scripts/scripts.js(modified, +119),styles/post-detail.css(new, +214)Task 3: Quote block
blocks/quote/quote.js(new, +84),blocks/quote/quote.css(new, +55)Task 4: Test content and documentation
AGENTS.md(modified, +17),docs/content-model.md(modified, +10), drafts (gitignored)Task 5: Integration verification
Verification
Verification: 2 code review findings auto-fixed (pre tabindex timing, quote markup preservation), lint passes. (Tests: not applicable — no test framework.)
Agent Contributions
Planning agents (Phase 2)
Review agents (Phase 3.5)
Session Resources
Skills Invoked
/nefario— orchestrationWorking Files
Companion directory:
docs/history/nefario-reports/2026-03-13-185109-implement-ddd-005-post-detail/Test Plan
npm run lintpasses--html-folder drafts:/blog/building-eds-design-systemrenders type badge, h1 with sr-only prefix, metadata line with date + updated + tags/blog/eds-gotcha-source-mapsrenders as TIL without updated element/continues to render post-index without post-detail body class<pre>elements havetabindex="0"and are keyboard-scrollableborder-radius: 0Test URLs:
Resolves #26