# yami-kolhe/edge-delivery-service architecture

> Architecture diagram of the GitHub repository yami-kolhe/edge-delivery-service, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yami-kolhe/edge-delivery-service
- Repository: https://github.com/yami-kolhe/edge-delivery-service

## Overview

This is an AEM boilerplate for rendering and decorating authored web pages. The principal workflow starts with page markup in the browser, decorates its main content and blocks, then loads remaining sections and header/footer fragments. The graph also preserves the supplied cards, columns, hero, and fragment capabilities. Source excerpts show the page loader and several block implementations; the broader AEM helper internals and unsampled blocks are represented only where the tree or README supports them.

Main entry points: [`scripts/scripts.js`](https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/scripts.js) (Page loader), [`scripts/aem.js`](https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/aem.js) (AEM runtime helpers), [`blocks/fragment/fragment.js`](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/fragment/fragment.js) (Fragment loader), [`blocks/header/header.js`](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/header/header.js) (Header navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page Runtime"]
  node_page_loader["Page loader<br/>[scripts.js]"]
  node_aem_runtime["AEM runtime helpers<br/>[aem.js]"]
  node_page_content["Page content"]
  node_styles["Page styles<br/>[styles.css]"]
  node_lazy_styles["Deferred styles<br/>[lazy-styles.css]"]
  node_fonts["Font styles<br/>[fonts.css]"]
  node_icons["Site icons"]
end

subgraph group_blocks["Content Blocks"]
  node_header["Header navigation<br/>[header.js]"]
  node_footer["Footer<br/>[footer.js]"]
  node_cards["Cards block<br/>[cards.js]"]
  node_columns["Columns block<br/>[columns.js]"]
  node_hero["Hero block<br/>[hero.js]"]
end

subgraph group_fragments["Fragments"]
  node_fragment_loader["Fragment loader<br/>[fragment.js]"]
  node_fragment_content["Fragment content"]
end

node_visitor(("Page visitor"))

node_visitor -->|"opens page"| node_page_loader
node_page_loader -->|"decorates"| node_page_content
node_page_loader -->|"uses helpers"| node_aem_runtime
node_aem_runtime -->|"decorates blocks"| node_page_content
node_aem_runtime -->|"loads block"| node_cards
node_aem_runtime -->|"loads block"| node_columns
node_page_loader -->|"builds block"| node_hero
node_page_loader -->|"loads header"| node_header
node_page_loader -->|"loads footer"| node_footer
node_page_loader -->|"loads styles"| node_lazy_styles
node_page_loader -->|"loads styles"| node_fonts
node_page_loader -.->|"page styling"| node_styles
node_aem_runtime -->|"loads icons"| node_icons
node_header -->|"reads metadata"| node_aem_runtime
node_footer -->|"reads metadata"| node_aem_runtime
node_header -->|"loads fragment"| node_fragment_loader
node_footer -->|"loads fragment"| node_fragment_loader
node_fragment_loader -->|"fetches markup"| node_fragment_content
node_fragment_loader -->|"decorates content"| node_page_loader
node_fragment_loader -->|"loads sections"| node_aem_runtime
node_aem_runtime -->|"loads block"| node_fragment_loader
node_cards -->|"optimizes images"| node_aem_runtime

click node_page_loader "https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/scripts.js"
click node_aem_runtime "https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/aem.js"
click node_header "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/header/header.js"
click node_footer "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/footer/footer.js"
click node_fragment_loader "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/fragment/fragment.js"
click node_cards "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/cards/cards.js"
click node_columns "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/columns/columns.js"
click node_hero "https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/hero/hero.js"
click node_styles "https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/styles.css"
click node_lazy_styles "https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/lazy-styles.css"
click node_fonts "https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/fonts.css"
click node_icons "https://github.com/yami-kolhe/edge-delivery-service/tree/main/icons"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page_loader,node_aem_runtime,node_page_content,node_styles,node_lazy_styles,node_fonts,node_icons toneBlue
class node_header,node_footer,node_cards,node_columns,node_hero toneAmber
class node_fragment_loader,node_fragment_content toneMint
class node_visitor toneIndigo
```

## Components

### Page Runtime

- [Page loader](https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/scripts.js): `scripts/scripts.js`
- [AEM runtime helpers](https://github.com/yami-kolhe/edge-delivery-service/blob/main/scripts/aem.js): `scripts/aem.js`
- **Page content**
- [Page styles](https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/styles.css): `styles/styles.css`
- [Deferred styles](https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/lazy-styles.css): `styles/lazy-styles.css`
- [Font styles](https://github.com/yami-kolhe/edge-delivery-service/blob/main/styles/fonts.css): `styles/fonts.css`
- [Site icons](https://github.com/yami-kolhe/edge-delivery-service/tree/main/icons): `icons`

### Content Blocks

- [Header navigation](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/header/header.js): `blocks/header/header.js`
- [Footer](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/footer/footer.js): `blocks/footer/footer.js`
- [Cards block](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/cards/cards.js): `blocks/cards/cards.js`
- [Columns block](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/columns/columns.js): `blocks/columns/columns.js`
- [Hero block](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/hero/hero.js): `blocks/hero/hero.js`

### Fragments

- [Fragment loader](https://github.com/yami-kolhe/edge-delivery-service/blob/main/blocks/fragment/fragment.js): `blocks/fragment/fragment.js`
- **Fragment content**

### Other components

- **Page visitor**

## Connections

- Page visitor → Page loader: opens page (evidence: `scripts/scripts.js`)
- Page loader → Page content: decorates (evidence: `scripts/scripts.js`)
- Page loader → AEM runtime helpers: uses helpers (evidence: `scripts/scripts.js`)
- AEM runtime helpers → Page content: decorates blocks (evidence: `scripts/aem.js`)
- AEM runtime helpers → Cards block: loads block (evidence: `scripts/aem.js`)
- AEM runtime helpers → Columns block: loads block (evidence: `scripts/aem.js`)
- Page loader → Hero block: builds block (evidence: `scripts/scripts.js`)
- Page loader → Header navigation: loads header (evidence: `scripts/scripts.js`)
- Page loader → Footer: loads footer (evidence: `scripts/scripts.js`)
- Page loader → Deferred styles: loads styles (evidence: `scripts/scripts.js`)
- Page loader → Font styles: loads styles (evidence: `scripts/scripts.js`)
- Page loader → Page styles: page styling
- AEM runtime helpers → Site icons: loads icons (evidence: `scripts/aem.js`)
- Header navigation → AEM runtime helpers: reads metadata (evidence: `blocks/header/header.js`)
- Footer → AEM runtime helpers: reads metadata (evidence: `blocks/footer/footer.js`)
- Header navigation → Fragment loader: loads fragment (evidence: `blocks/header/header.js`)
- Footer → Fragment loader: loads fragment (evidence: `blocks/footer/footer.js`)
- Fragment loader → Fragment content: fetches markup (evidence: `blocks/fragment/fragment.js`)
- Fragment loader → Page loader: decorates content (evidence: `blocks/fragment/fragment.js`)
- Fragment loader → AEM runtime helpers: loads sections (evidence: `blocks/fragment/fragment.js`)
- AEM runtime helpers → Fragment loader: loads block (evidence: `scripts/aem.js`)
- Cards block → AEM runtime helpers: optimizes images (evidence: `blocks/cards/cards.js`)