How pchamoun/universal-editor-getting-started works
This is an Adobe AEM Edge Delivery Services starter site: browser page loading decorates authored markup into sections and blocks, loads shared header/footer fragments, and supports editor-side content updates. The blocks provide reusable presentation features, including cards, navigation, fragments, and Dynamic Media image transformation. Model and component-definition files configure authoring; styles and Sidekick configuration support the site. The README is boilerplate-level and does not describe a specific content source or deployment workflow; unsampled block implementations are represented by their existing directories.
Main entry points: scripts.js Page loader · aem.js DOM framework · fragment.js Content fragments · editor-support.js Editor updates
Components 19
Page runtime
- Page loader
scripts/scripts.js - DOM framework
scripts/aem.js
Page blocks
- Header navigation
blocks/header/header.js - Footer
blocks/footer/footer.js - Content fragments
blocks/fragment/fragment.js - Cards
blocks/cards/cards.js - Columns
blocks/columns/columns.js - Dynamic Media image
blocks/dynamic-media-image/dynamic-media-image.js - Teaser
blocks/teaser/teaser.js - Hero and quote
blocks
Authoring support
- Editor updates
scripts/editor-support.js - Rich text editing
scripts/editor-support-rte.js - Content models
models - Component definitions
component-definition.json - Sidekick settings
tools/sidekick/config.json
Presentation
- Site styles
styles - Block styles
blocks
Other components
- Site visitor
- Dynamic Media delivery
Connections 17
- Site visitor → Page loader: opens page
- Page loader → DOM framework: uses runtime
scripts/scripts.js - Page loader → Header navigation: loads header
scripts/scripts.js - Page loader → Footer: loads footer
scripts/scripts.js - DOM framework → Content fragments: dispatches blocks
scripts/aem.js - Header navigation → DOM framework: reads metadata
blocks/header/header.js - Header navigation → Content fragments: loads fragment
blocks/header/header.js - Footer → DOM framework: reads metadata
blocks/footer/footer.js - Footer → Content fragments: loads fragment
blocks/footer/footer.js - Content fragments → Page loader: decorates content
blocks/fragment/fragment.js - Content fragments → DOM framework: loads sections
blocks/fragment/fragment.js - Cards → DOM framework: optimizes images
blocks/cards/cards.js - Cards → Page loader: moves instrumentation
blocks/cards/cards.js - Editor updates → DOM framework: updates DOM
scripts/editor-support.js - Editor updates → Rich text editing: decorates text
scripts/editor-support.js - Editor updates → Page loader: redecorates content
scripts/editor-support.js - Dynamic Media image → Dynamic Media delivery: builds delivery URL