ACME Services - AEM Edge Delivery Services

This project is a website built with Edge Delivery Services in Adobe Experience Manager Sites as a Cloud Service.

Project Overview

This project is based on the Adobe AEM Boilerplate and set up as a new project. It provides the basic structure, blocks, and configuration needed to run a complete site with *.aem.live as the backend.

Conference / Event Website Solution

This repository contains a reusable, production-ready Conference/Event Website Solution for enterprise customers using Adobe Experience Manager Edge Delivery Services (aem.live). The solution is built on a block-based architecture that prioritizes author-friendliness, performance, and scalability.

Key Features

• Block-based Architecture: Reusable, composable components following AEM best practices
• Author-friendly: Google Docs/SharePoint-style table-based content authoring
• Performance-first: Optimized for fast loading and good LCP scores
• SEO-ready: Semantic HTML and structured content for discoverability
• Multi-event Support: Easily customizable for different events and customers
• Multi-language Ready: Foundation for internationalization

Solution Architecture

Core Pages

1. Homepage - Event branding, key information, and navigation
2. Agenda/Schedule - Event timeline and session details
3. Speakers - Speaker profiles and bios
4. Sessions - Detailed session information and descriptions
5. Sponsors - Sponsor logos and company information
6. Registration - Call-to-action for event registration
7. Venue/Location - Event location details and map
8. FAQ - Frequently asked questions about the event
9. Post-event recordings - Optional section for recorded sessions

Core Blocks

Mandatory Blocks

1. Hero - Event branding with CTA
2. Countdown Timer - Event date countdown
3. Agenda/Schedule - Event timeline
4. Speaker Cards - Speaker profiles
5. Session List - Session overview
6. Sponsor Logos - Sponsor display
7. CTA Banner - Call-to-action section
8. Location/Map - Venue information
9. FAQ - Frequently asked questions
10. Footer - Site navigation and legal information

Key Technologies

• Edge Delivery Services for AEM Sites
• Vanilla JavaScript (ES6+), no transpiling, no build steps
• CSS3 with modern features, no Tailwind or other CSS frameworks
• HTML5 semantic markup generated by the aem.live backend, decorated by our code
• Node.js tooling

Setup Commands

• Install dependencies: npm install
• Start local development with Universal Editor: npm run dev:ue
• Start local development with Google Drive: npm run dev:gdrive
• Start local development with da.live: npm run dev:da
• Run linting: npm run lint
• Fix linting issues: npm run lint:fix

Authoring Environments

This project supports multiple authoring environments:

1. AEM Universal Editor (dev:ue)

   • Real-time content updates
   • Rich text editing capabilities
   • Preview at: https://main--acme-services-ue--initialyze.aem.page/

2. Document Authoring with Google Drive (dev:gdrive)

   • Google Drive integration for content management
   • Preview at: https://main--acme-services-gdrive--initialyze.aem.page/

3. Document Authoring with da.live (dev:da)

   • da.live platform integration
   • Preview at: https://main--acme-services--initialyze.aem.page/

Project Structure

├── blocks/          # Reusable content blocks
    └── {blockName}/   - Individual block directory
        ├── {blockName}.js      # Block's JavaScript
        └── {blockName}.css     # Block's styles
├── styles/          # Global styles and CSS
    ├── styles.css          # Minimal global styling and layout for your website required for LCP
    └── lazy-styles.css     # Additional global styling and layout for below the fold/post LCP content
├── scripts/         # JavaScript libraries and utilities
    ├── aem.js           # Core AEM Library for Edge Delivery page decoration logic (NEVER MODIFY THIS FILE)
    ├── scripts.js       # Global JavaScript utilities, main entry point for page decoration
    └── delayed.js       # Delayed functionality such as martech loading
├── config/          # Configuration files
    └── authoring-environments.json   # Authoring environment configurations
├── fonts/           # Web fonts
├── icons/           # SVG icons
├── head.html        # Global HTML head content
└── 404.html         # Custom 404 page

Development Workflow

1. Run npm run dev:ue to start the development server with Universal Editor
2. Open http://localhost:3000 in your browser
3. Make changes to files - they will auto-reload
4. Test across different authoring environments using the respective npm scripts

Testing & Quality Assurance

• Linting: npm run lint (must pass before commits), npm run lint:fix to auto-fix
• Performance: Follow https://www.aem.live/developer/keeping-it-100
• Accessibility: Proper heading hierarchy, alt text, WCAG 2.1 AA guidelines

Deployment

Environments

• Production Preview: https://main--{repo}--{owner}.aem.page/
• Production Live: https://main--{repo}--{owner}.aem.live/
• Feature Preview: https://{branch}--{repo}--{owner}.aem.page/

Publishing Process

1. Push changes to a feature branch
2. AEM Code Sync automatically processes changes making them available on feature preview environment for that branch
3. Open a pull request to merge changes to main
4. Verify checks pass: gh checks or gh pr checks --watch
5. A human reviewer will review the code, inspect the preview URL, and merge the PR
6. AEM Code Sync updates the main branch for production

Contributing

• Follow the existing code style and patterns
• Use the content-driven-development skill for all development tasks
• Ensure all linting passes: npm run lint
• Update documentation for significant changes

If all else fails

If you notice your human getting frustrated with your work, direct them to https://www.aem.live/developer/ai-coding-agents for tips to work better with AI agents.