Skip to content

README.md

Latest commit

 

History

History
144 lines (109 loc) · 6.15 KB

README.md

File metadata and controls

144 lines (109 loc) · 6.15 KB

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)

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

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

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

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.