feat: add experience-auditor showcase example [EXT-7476]#11010
Open
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
Open
feat: add experience-auditor showcase example [EXT-7476]#11010Jared Jolton (jjolton-contentful) wants to merge 1 commit into
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
Conversation
Add a polished, customer-facing example app for the ExO toolbar location that goes beyond the minimal starter (EXT-7365). Experience Auditor runs inside the Experience Editor toolbar and continuously audits the experience for accessibility, SEO, and content-completeness issues. It demonstrates the standout capability of the toolbar location: live, selection-aware tooling that reads and mutates the experience tree. A scored dashboard lists findings; clicking one locates the offending component on the canvas (selection.set + selection.highlight), safe deterministic fixes apply in place via setContentProperty (permission- checked, with notifier feedback), and publish is gated on outstanding errors. Audit rules are pure functions over an SDK-independent node shape, fully unit-tested without a live SDK; the SDK boundary is isolated in a thin collector. Typed with ExperienceEditorToolbarAppSDK (app-sdk@4.58.0). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.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
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.
EXT-7476 · sibling of EXT-7365 under epic EXT-6925
Summary
examples/experience-auditor— a polished, customer-facing showcase app for the ExO toolbar location that goes well beyond the minimal starter (PR feat: add experience-toolbar starter example [EXT-7365] #11009 / EXT-7365). Scaffoldable vianpx create-contentful-app --example experience-auditor.What it demonstrates
getRootNodes()→getNode()→getProperties(), re-running onsdk.exo.experience.onChange().selection.set()+selection.highlight(nodeId, { flash, scrollIntoView })to jump to the offending component (visual mode only; gracefully disabled in form mode).getNode().setContentProperty(), permission-checked withsdk.access.can()and confirmed viasdk.notifier.experience.publish()blocked while any error-level finding remains.Design
Audit rules are pure functions over an SDK-independent
CollectedNodeshape (src/audit/rules.ts), so they're fully unit-tested without a live SDK. The only SDK-coupled piece is a thin collector (src/audit/collect.ts). This keeps all the interesting logic testable in isolation. Adding a rule = dropping anotherAuditRuleintoAUDIT_RULES.Typed with
ExperienceEditorToolbarAppSDKfrom@contentful/app-sdk@4.58.0. Follows repo conventions (React + TS + Vite + Vitest + Forma 36), mirroringexamples/typescript.Verification status
tsc --noEmitclean against the published 4.58.0 types.vite buildclean.sdk.exois still rolling out (EXT-7363/EXT-7364). README states this. API shapes match the published types exactly.Test plan
npm install && npm run buildinexamples/experience-auditorsucceedsnpm run test:cipassesnpx create-contentful-app --example experience-auditorscaffolds a working project (after merge tomaster)experience-toolbarlocation, open an experience with a missing-alt-text image, confirm the finding appears, Locate highlights the node, the fix writes back, and publish unblocks once errors are resolvedGenerated with Claude Code