AEM Edge Delivery Developer Guides

Comprehensive implementation guides for AEM Edge Delivery Services featuring blocks, plugins, tools, and integrations.

📚 What's Included

• 26 Developer Guides with complete implementations
• 15 Block Guides - UI components from simple layouts to complex interactions
• 3 Plugins & Tools - Sidekick extensions and authoring tools
• 4 Calculators - Interactive financial tools with Chart.js
• Full Code Examples - Every guide includes working code
• Architecture Diagrams - Mermaid.js diagrams showing system design
• Test Checklists - Comprehensive testing guidance

🎯 Categories

Blocks

• Layout: Hero, Columns, Teaser
• Content Display: Cards, Table, Fragment
• Interactive: Tabs, Modal, Embed, Quiz, FAQ
• Forms: Form, N8N Form
• Discovery: Related Articles, Product Grid, Journey Map

Plugins & Tools

• Fragment Picker Plugin
• Tags Plugin
• Quick Edit Tool

Calculators

• Compound Interest Calculator
• Net Worth Calculator
• Savings Rate Calculator
• N8N Form Integration

Features & Platform

• Search Page Implementation
• Experimentation & A/B Testing
• Auth Toggle Preview
• Page Load & scripts.js Lifecycle

🚀 Getting Started

View Locally

Simply open index.html in your browser. All dependencies are included or loaded from CDN.

# Option 1: Open directly
open index.html

# Option 2: Use a local server
python3 -m http.server 8000
# Then visit http://localhost:8000

Distribution

This package is ready to distribute. Just zip the entire directory:

cd ..
zip -r developer-guides.zip developer-guides \
  -x "developer-guides/.DS_Store" \
  -x "developer-guides/**/.DS_Store"

📁 Structure

developer-guides/
├── index.html              # Main landing page with category navigation
├── README.md               # This file
├── styles/
│   ├── styles.css          # Main stylesheet
│   └── prism-tomorrow.css  # Syntax highlighting theme
├── scripts/
│   ├── prism-core.js       # Syntax highlighting engine
│   └── prism-plugins.js    # Line numbers and toolbar
├── assets/
│   └── styles.css          # Legacy stylesheet (for compatibility)
└── use-cases/              # Individual guide HTML files
    ├── how-to-build-hero-block.html
    ├── how-to-build-tabs-block.html
    └── ... (26 guides total)

🛠️ Development Tools

Development tools (Playwright validation, etc.) are in a separate directory:

../developer-guides-dev/
├── node_modules/           # Playwright dependencies
├── package.json
├── package-lock.json
└── validate-guide.mjs      # Guide validation script

To run validation tests:

cd ../developer-guides-dev
node validate-guide.mjs ../developer-guides/use-cases/[guide-name].html

🎨 Features

• Category-Based Navigation - Sticky nav with smooth scrolling
• Card-Based Layout - Inspired by aem.live/docs
• Responsive Design - Mobile-friendly grid layouts
• Light/Dark Mode Support - Uses light-dark() CSS function
• Syntax Highlighting - Prism.js with Tomorrow theme
• Mermaid Diagrams - Architecture and flow diagrams
• Accessibility - ARIA compliance, keyboard navigation

📖 Guide Structure

Each guide follows a consistent 9-section format:

1. Overview - Key features and capabilities
2. Authoring Structure - Document authoring examples
3. Implementation - JavaScript and CSS code
4. How It Works - Detailed technical explanation
5. Use Cases - Common scenarios and examples
6. Testing - Comprehensive test checklists
7. Customization - Extension ideas
8. Best Practices - Content, design, and accessibility
9. Resources - Links to official docs

🔗 Resources

• Live Demos
• AEM Tutorial
• Official Documentation

📝 License

These guides are provided as educational resources for the AEM developer community.

🤝 Contributing

Found an issue or want to improve a guide? Contributions are welcome!

---

Built with ❤️ for the AEM Edge Delivery developer community