diff --git a/README.md b/README.md index 87f5a0a..de2445b 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,6 @@ Training materials and exercises for AEM Edge Delivery Services masterclass sess ## Labs & Exercises - [Labs Overview](labs/README.md) - Complete guide to all exercises - [Setup Instructions](labs/SETUP.md) - Get started with the labs -- [Instructor Setup](labs/INSTRUCTOR_SETUP.md) - Setup guide for instructors ## Documentation diff --git a/labs/INSTRUCTOR_SETUP.md b/labs/INSTRUCTOR_SETUP.md deleted file mode 100644 index 86cdf4d..0000000 --- a/labs/INSTRUCTOR_SETUP.md +++ /dev/null @@ -1,415 +0,0 @@ -# Instructor Setup Guide - NYC Masterclass 2026 - -Complete setup checklist for running the NYC Masterclass lab with 50 participants. - -**Time Required**: 4-6 hours (spread over 1 week) -**Lab Duration**: 3 hours 15 minutes (9:15 AM – 12:30 PM, including 15-minute break) - ---- - -## Overview - -**Key Stats**: -- 50 participants -- 8 exercises (9:15 AM – 12:30 PM, 15-min break 11:20–11:35) -- Multi-site architecture (hands-on repoless setup) -- Real-world collaborative site building - -**Collision Prevention Strategy**: -- Each participant: personal git branch (`jsmith` format) -- All participant content: `/drafts/jsmith/` in DA.live -- Pre-populated shared reference data -- No simultaneous editing of shared resources - ---- - -## Timeline - -### 1 Week Before Lab -- [ ] Deploy Cloudflare Worker for Exercise 6 -- [ ] Test worker and Slack integration - -### 2-3 Days Before Lab -- [ ] Verify all content exists (sessions, labs, speakers, future-events) -- [ ] Verify index config is active in config storage (includes /sessions/**, /labs/**, excludes /drafts/**) -- [ ] Publish all content to `.aem.live` -- [ ] Verify query-index populates with custom metadata - -### 1 Day Before Lab -- [ ] Verify all JSON endpoints work (speakers.json, future-events.json, query-index.json) -- [ ] Verify participants have DA.live access -- [ ] Assign participants to branches -- [ ] Send participant setup instructions - -### Morning of Lab -- [ ] Final endpoint verification (speakers, future-events, query-index) -- [ ] Dev server test -- [ ] Monitor query-index freshness -- [ ] Test worker one final time -- [ ] Verify Site Admin tool is accessible - ---- - -## Phase 1: Verify Query Index Configuration - -### 1.1 Verify Index Configuration (Config Storage) - -The index definition is stored in **EDS config storage** (not in the git repo — `helix-query.yaml` was intentionally removed from the repository). Verify the config is active via the Index Admin tool: - -``` -https://tools.aem.live/tools/index-admin -``` - -The config should have: -- **Includes**: `/sessions/**` and `/labs/**` -- **Excludes**: `/drafts/**` -- **Custom properties**: speaker-name, instructor, category, tags, published-date, session-level, session-time, difficulty-level, duration - -### 1.2 Verify Query Index Working - -After publishing all content, verify: - -```bash -curl https://main--nycmasterclass--cloudadoption.aem.live/query-index.json | jq '.data | length' -# Should return 15+ (7 sessions + 8 labs) - -curl https://main--nycmasterclass--cloudadoption.aem.live/query-index.json | jq '.data[0] | keys' -# Should include custom metadata fields -``` - -**Action**: Verify query index populates after all session/lab pages are published. - ---- - -## Phase 2: Verify Content Exists - -### 2.1 Verify Session Pages (7 total) - -All in `/sessions/` folder, published to `.aem.live`: -- [ ] `/sessions/what-is-edge-delivery` (Amol Anand) -- [ ] `/sessions/architecture-deep-dive` (Matt Ward) -- [ ] `/sessions/authoring-approaches` (David Nuescheler) -- [ ] `/sessions/development-best-practices` (Stefan Seifert) -- [ ] `/sessions/integration-strategies` (Kiran Murugulla) -- [ ] `/sessions/edge-commerce` (Matt Ward) -- [ ] `/sessions/ai-development` (Stefan Seifert) - -Each should have: Hero block, content, metadata block with custom fields (speaker-name, category, tags, session-level, session-time, published-date) - -### 2.2 Verify Lab Pages (8 total) - -All in `/labs/` folder, published to `.aem.live`: -- [ ] `/labs/authoring-first-page` -- [ ] `/labs/block-development` -- [ ] `/labs/dynamic-cards` -- [ ] `/labs/search-block` -- [ ] `/labs/json2html` -- [ ] `/labs/form-submissions` -- [ ] `/labs/da-plugin-development` -- [ ] `/labs/repoless-setup` - -Each should have: Hero block, content, metadata block with custom fields (instructor, difficulty-level, duration, category) - -### 2.3 Verify Data Sheets - -**Speakers Sheet** (`/speakers` in DA.live): -- 6 Adobe expert speakers -- Columns: Name, Title, Company, Bio, Image, Session, LinkedIn -- Published to `.aem.live` -- JSON endpoint: https://main--nycmasterclass--cloudadoption.aem.live/speakers.json - -```bash -curl https://main--nycmasterclass--cloudadoption.aem.live/speakers.json | jq '.total' -# Should output: 6 -``` - -**Future Events Sheet** (`/future-events` in DA.live): -- 6 future masterclass events (Sydney, London, Bangalore, Berlin, Singapore, Dubai) -- Columns: city, country, date, venue, address, description, highlights, image, registrationUrl, URL -- Published to `.aem.live` -- JSON endpoint: https://main--nycmasterclass--cloudadoption.aem.live/future-events.json -- **Note**: `highlights` field is comma-separated string (not array) - -```bash -curl https://main--nycmasterclass--cloudadoption.aem.live/future-events.json | jq '.data.total' -# Should output: 6 -``` - -**Required for**: Exercise 3 (speakers.json), Exercise 5 (future-events.json) - -### 2.4 Verify Supporting Pages - -- [ ] `/` (Homepage with hero, featured cards sections) -- [ ] `/schedule` (Schedule page with hero, table blocks with section metadata) -- [ ] `/register` (Registration page with hero, mc-register block) -- [ ] `/speakers` (Speakers page with hero, placeholder content for Exercise 3) - -### 2.5 Verify Navigation - -- [ ] `/nav.html` includes: Home, Schedule, Speakers, Register links - ---- - -## Phase 3: Participant Branch Setup - -### 3.0 Preserve the `answers` Branch - -The `answers` branch contains complete solution code for all exercises (`blocks/search/`, `blocks/dynamic-cards/`, `blocks/feedback/`, `blocks/tradingview/`, `tools/plugins/embedwidget/`, etc.). Exercise instructions link directly to it so participants can copy block code. - -**Do not delete or force-push the `answers` branch.** It is a permanent reference, not a feature branch. - -### 3.1 Create Participant List - -Create `participants.txt` with branch names (one per line): -``` -jsmith -agarcia -kwang -... -(50 total) -``` - -Format: first initial + last name, lowercase (e.g., John Smith = jsmith) - -### 3.2 Create All Branches - -```bash -git checkout main -git pull origin main - -while read branch; do - git checkout -b "$branch" main - git push origin "$branch" - git checkout main -done < participants.txt -``` - -Verify: `git branch -r | grep -v main | wc -l` should output 50 - -### 3.3 Create Participant Roster - -Document for reference: -``` -| Participant Name | Branch | Preview URL | -|------------------|--------|-------------| -| John Smith | jsmith | https://jsmith--nycmasterclass--cloudadoption.aem.page/ | -``` - ---- - -## Phase 4: Deploy Cloudflare Worker - -**Required for**: [Exercise 6 - Form Submissions](exercise6/instructions.md) - -### 4.1 Create Worker - -1. Create Cloudflare Worker: `nycmasterclass-feedback` -2. Deploy worker code (see Exercise 6 for POST structure) -3. Add environment variable: `SLACK_WEBHOOK_URL` -4. Deploy and note Worker URL - -**Worker must handle**: -- CORS preflight (OPTIONS) -- POST requests with JSON body (name, email, company, participant_id, submission_time) -- Slack Block Kit formatting -- Error responses with proper CORS headers - -### 4.2 Test Worker - -```bash -curl -X POST https://nycmasterclass-feedback.{account}.workers.dev \ - -H "Content-Type: application/json" \ - -d '{"name":"Test","email":"test@test.com","company":"Test"}' -``` - -Verify: Returns `{"success":true}` and posts to Slack - -### 4.3 Document Worker URL - -Create `labs/WORKER_URL.txt` with the worker URL for participants to use in Exercise 6. - ---- - -## Phase 5: Verify Site Admin Access - -**Required for**: [Exercise 8 - Repoless Setup](exercise8/instructions.md) - -### 5.1 Verify Site Admin Tool - -1. Visit: https://tools.aem.live/tools/site-admin/index.html -2. Verify you're logged in (requires AEM Sidekick extension) -3. Search for `cloudadoption/nycmasterclass` -4. Confirm site configuration is visible - -### 5.2 Verify Participant Permissions - -Confirm all participants have: -- [ ] DA.live access to `cloudadoption` organization -- [ ] Ability to create new DA.live projects -- [ ] Access to Site Admin tool (requires AEM Sidekick login) - -**Note**: In Exercise 8, each participant creates their own DA.live project (`cloudadoption/jsmith-mc`) and configures code source via Site Admin tool. No pre-setup needed. - ---- - -## Phase 6: Pre-Lab Communication - -### 6.1 Send Participant Emails - -**Subject**: NYC Masterclass 2026 - Setup Instructions - -Include: -- Branch assignment -- Preview URL: `https://{branch}--nycmasterclass--cloudadoption.aem.page/` -- Setup guide: Link to `labs/SETUP.md` -- DA.live access: https://da.live/#/cloudadoption/nycmasterclass - -### 6.2 Create Slack Channel - -Create: `#nycmasterclass-registrations` for Exercise 6 form submissions - -### 6.3 Final Pre-Lab Checklist - -- [ ] All 50 participant branches exist -- [ ] All participants assigned to branches (roster created) -- [ ] All participants emailed with setup instructions -- [ ] Speakers sheet published (speakers.json works) -- [ ] Future events sheet published (future-events.json works) -- [ ] Query index has 15+ entries with custom metadata -- [ ] Worker deployed and tested -- [ ] Site Admin tool accessible to participants -- [ ] Slack channel created -- [ ] Homepage and schedule published -- [ ] All JSON endpoints verified - ---- - -## Day-of Lab Checklist - -### Morning Setup (30 min before start) - -- [ ] Dev server runs: `aem up` - http://localhost:3000 loads -- [ ] Speakers JSON works: https://main--nycmasterclass--cloudadoption.aem.live/speakers.json -- [ ] Future Events JSON works: https://main--nycmasterclass--cloudadoption.aem.live/future-events.json -- [ ] Query Index works: https://main--nycmasterclass--cloudadoption.aem.live/query-index.json -- [ ] Worker responds: `curl -X POST {worker-url} -d '{"name":"Test"}'` -- [ ] DA.live accessible: https://da.live/ -- [ ] Site Admin tool works: https://tools.aem.live/tools/site-admin/index.html -- [ ] GitHub repo accessible -- [ ] Participant roster available -- [ ] Slack channel open - -### Exercise Monitoring - -**Exercise 1** (20 mins): [Authoring Your First Page](exercise1/instructions.md) -- Verify participants can create pages in `/drafts/jsmith/` -- Check they understand `.md`, `.plain.html`, "View document source" inspection -- Confirm proper naming convention (jsmith format) - -**Exercise 2** (20 mins): [Block Development - Simple Variations](exercise2/instructions.md) -- No special monitoring needed -- Watch for CSS scoping issues - -**Exercise 3** (25 mins): [Dynamic Cards with Data Sources](exercise3/instructions.md) -- Verify participants copy `/speakers.json` to `/drafts/jsmith/speakers.json` -- Confirm they add personal speaker data -- Check dynamic-cards block fetches from `/drafts/jsmith/speakers.json` -- Monitor for fetch/CORS errors - -**Exercise 4** (25 mins): [Extend Search Block from Block Collection](exercise4/instructions.md) -- Verify query-index.json is accessible and populated (15+ entries with custom metadata) -- Confirm participants create `blocks/search/search.js` and `blocks/search/search.css` -- Check that search results render as Cards block cards -- Verify participants can find their own `/labs/jsmith/` page via search -- Monitor for `cards.css` not loading (check browser console for import errors) - -**Exercise 5** (25 mins): [JSON2HTML - Dynamic Pages](exercise5/instructions.md) -- Verify future-events.json is accessible -- Help participants with JSON2HTML Simulator: https://tools.aem.live/tools/json2html-simulator/ -- Guide Admin Edit tool usage: https://tools.aem.live/tools/admin-edit/index.html -- Watch for Mustache template issues (highlights is string, not array) - -**Exercise 6** (20 mins): [Form Submissions to Slack](exercise6/instructions.md) -- Monitor Slack channel for form submissions -- Watch for CORS or worker endpoint errors -- Verify participants use correct Worker URL -- Check JSON POST structure - -**Exercise 7** (30 mins): [DA Plugin Development](exercise7/instructions.md) -- Help with local plugin testing (`?ref=local`) -- Verify branch testing (`?ref=jsmith`) -- Check DA App SDK PostMessage API issues -- Monitor for context/token/actions problems - -**Exercise 8** (30 mins): [Repoless Multi-Site Setup](exercise8/instructions.md) -- Guide participants creating DA.live projects (`cloudadoption/jsmith-mc`) -- Help with Site Admin tool configuration (code source points to `nycmasterclass`) -- Verify DevTools Network tab shows code from `nycmasterclass` -- Watch for DA.live project creation permissions -- Check Site Admin tool access - ---- - -## Troubleshooting Quick Reference - -**Query index empty**: Verify published to `.aem.live`, check helix-query.yaml committed, wait 5-10 mins, force re-index via Index Admin - -**Speakers/Future Events 404**: Verify sheet published (not just previewed), test JSON endpoint - -**Participant can't push**: Verify branch exists, check they're on correct branch, verify GitHub permissions - -**Worker not working**: Test with curl, check Cloudflare logs, verify Slack webhook URL, check CORS headers - -**JSON2HTML not working** (Exercise 5): Verify future-events.json published to `.aem.live`, test template in Simulator first, check worker config in Admin Edit, remember highlights is string not array - -**Site Admin not accessible** (Exercise 8): Verify logged in via AEM Sidekick extension, check org access, try logout/login - -**Can't create DA.live project** (Exercise 8): Verify DA.live access to cloudadoption org, check permissions, confirm creating project not folder - ---- - -## Post-Lab Tasks - -### Collect Participant Work - -```bash -gh pr list -gh pr view {pr-number} -gh pr checks {pr-number} -gh pr merge {pr-number} -``` - -### Archive - -- Archive/delete participant branches after 30 days -- Export lightning talk content -- Collect feedback -- Document lessons learned - ---- - -## Summary - -**Setup creates**: -- Complete starter site (9 pages: sessions, labs, supporting pages) -- 6 speaker profiles via speakers.json -- 6 future events via future-events.json -- Query index with custom metadata -- 50 participant branches (isolated workspaces) -- Cloudflare Worker for form submissions -- Slack integration -- Site Admin tool access for repoless -- Zero collision risk - -**Participant experience**: -- Personal workspace (`/drafts/jsmith/`) -- Personal data first (Exercise 3), shared data later (Exercise 4-5) -- Hands-on with real tools (Simulator, Admin Edit, Site Admin) -- Create own repoless site (Exercise 8) - -**Exercise changes from original**: -- Exercise 3: Dynamic Cards fetching from a personal `speakers.json` (personal workspace approach) -- Exercise 4: Extend Search Block from Block Collection using `query-index.json` as data source -- Exercise 5: JSON2HTML worker (not speaker profiles) -- Exercise 7: Extended to 30 minutes -- Exercise 8: Hands-on site creation (not pre-configured observation) diff --git a/labs/README.md b/labs/README.md index c666130..c6191e8 100644 --- a/labs/README.md +++ b/labs/README.md @@ -1,52 +1,9 @@ # NYC Masterclass 2026 - Lab Guide -**Duration**: 3 hours 15 minutes (9:15 AM – 12:30 PM, including 15-minute break) - **Theme**: Build pages and features for a Masterclass event series that can scale to future meetup sites. --- -## Agenda - -| Time | Activity | -|-----------|----------| -| 9:15 AM | Introduction – EDS overview, architecture, lab objectives | -| 9:30 AM | Exercise 1 – Authoring Your First Page | -| 9:50 AM | Exercise 2 – Block Development (variations) | -| 10:10 AM | Exercise 3 – Dynamic Cards with Data Sources | -| 10:35 AM | Exercise 4 – Extend Search Block from Block Collection | -| 10:55 AM | Exercise 5 – JSON2HTML Generate Pages from Data | -| **11:20–11:35 AM** | **Break (15 min)** | -| 11:35 AM | Exercise 6 – Form Submissions with Workers | -| 11:55 AM | Exercise 7 – DA.live Plugin Development | -| 12:25 PM | Exercise 8 – Repoless Multi-Site & Multi-Brand | -| 12:30 PM | End | - -*Sessions start at 9:15 AM; 15-minute break 11:20–11:35 AM; lab ends at 12:30 PM.* - ---- - -## Lab Narrative - -Welcome to the NYC Masterclass 2026 hands-on lab. Through practical exercises, you'll learn how to build fast, maintainable websites with Adobe Edge Delivery Services (EDS) and DA.live. - -**The journey**: -1. Start as an author creating content -2. Become a developer building blocks -3. Integrate dynamic data from external sources -4. Scale to enterprise multi-site architecture - -**What makes EDS different**: -- Document-based authoring (Word/Google Docs) -- No build steps, no frameworks -- 100 Lighthouse scores by default -- Microservices architecture -- API-first approach - -By the end of this lab, you'll understand how to build production-ready websites that are fast, maintainable, and author-friendly. - ---- - ## Before You Begin **Complete setup**: [SETUP.md](SETUP.md) — Git, development environment, access verification. @@ -62,203 +19,130 @@ By the end of this lab, you'll understand how to build production-ready websites --- -## Session 1: Core Concepts (2 hours 5 minutes) - -**Introduction** (15 mins): EDS overview, architecture, lab objectives +**Introduction**: EDS overview, architecture, lab objectives -**Exercise 1** (20 mins): [Authoring Your First Page](exercise1/instructions.md) +**Exercise 1**: [Authoring Your First Page](exercise1/instructions.md) **What you'll learn**: -- Document semantics and block structure -- DA.live authoring workflow -- Preview and publish pipeline -- Inspecting content in multiple formats (.md, .plain.html, View document source) +- How to **manage content in DA.live** (authoring model, tables → blocks) +- The **Preview** vs **Publish** workflow and what each environment represents +- How to **read document transformations** across source, `.plain.html`, and `.md` **What you'll build**: -- Session or Lab page with Hero block and metadata -- Understanding how sections and blocks are structured -- Personal workspace setup (jsmith naming convention) +- Your **personal workspace** under `/drafts//` +- Your **first authored page** from a Session or Lab template +- A full **Preview → Publish** pass so you see content on `.aem.page` and `.aem.live` -**Key takeaway**: Understanding document semantics is fundamental. Inspect content in different formats to see how EDS transforms authored content into rendered HTML. +**Key takeaway**: Authoring in DA.live and delivery through EDS are connected by a clear pipeline—follow the same content through each stage and the mental model clicks. --- -**Exercise 2** (20 mins): [Block Development - Enhancements & Variations](exercise2/instructions.md) +**Exercise 2**: [Block Development - Enhancements & Variations](exercise2/instructions.md) **What you'll learn**: -- Block decoration lifecycle and `decorate(block)` entrypoint -- Block enhancements (eyebrow from ``) vs variations (list, view switcher) -- Mobile-first responsive CSS and CSS scoping +- How **developer code** turns authored tables into finished UI (**decoration**) +- Two ways to extend a block: **enhancements** (content patterns) vs **variations** (layout / author-chosen variants) +- Why **block-scoped, responsive CSS** matters for maintainability **What you'll build**: -- Eyebrow enhancement for Cards block (italic text → label) -- List variation (single-column layout) -- View Switcher variation (Grid/List toggle) +- **Draft test pages** that exercise the Cards block +- **Code changes** on your branch that add real behavior—not just static markup -**Key takeaway**: One block codebase supports enhancements (content patterns) and variations (layout classes). Test on desktop and mobile with Chrome DevTools responsive view. +**Key takeaway**: One block can stay one “contract” for authors while developers layer behavior underneath. --- -**Exercise 3** (25 mins): [Dynamic Cards with Data Sources](exercise3/instructions.md) +**Exercise 3**: [Dynamic Cards with Data Sources](exercise3/instructions.md) **What you'll learn**: -- How Sheets convert to JSON endpoints -- Fetching data from external sources -- Async/await patterns and error handling -- Safe personal data approach to avoid conflicts +- When **data** should drive the page instead of hand-built rows +- How **structured data** (e.g. Sheets → JSON) connects to the front end +- **Loading and failure** as first-class UX—not only the happy path **What you'll build**: -- Dynamic Cards block that fetches speaker data from your personal workspace -- Copy speakers.json to /drafts/jsmith/ and add your own data -- Loading and error states -- Populate the /speakers page +- A **dynamic-cards** block wired to data you own in drafts +- A small **proof** that changing data changes the page—without re-authoring every card -**Key takeaway**: Dynamic blocks fetch data instead of decorating authored content. Working with personal data in drafts prevents conflicts with other participants. +**Key takeaway**: Separate “what the data says” from “how the block renders it” and you can scale lists, catalogs, and directories. --- -**Exercise 4** (20 mins): [Extend Search Block from Block Collection](exercise4/instructions.md) +**Exercise 4**: [Extend Search Block from Block Collection](exercise4/instructions.md) **What you'll learn**: -- How query-index.json works as a search data source -- Block composition — reusing the Cards block inside Search -- Building a live search UI with fetch + filter + render -- Using `loadCSS` for runtime stylesheet loading -- DA.live publish workflow for making pages discoverable +- How **published site content** becomes a **search index**—and what never gets indexed +- How to **start from Block Collection** instead of inventing search from scratch +- How **composition** lets one block reuse another’s rendering **What you'll build**: -- Search block that fetches and filters query-index.json -- Results rendered using the Cards block (block composition pattern) -- Publish your own page to `/labs/jsmith/` and find it via search +- A **search** experience in your project +- A **discoverable** page in the indexed area of the site so search can actually find *your* work -**Key takeaway**: Block composition lets blocks reuse each other's rendering logic. Query index enables client-side search with zero backend infrastructure. +**Key takeaway**: Search is “read the index, filter in the browser”—plus thoughtful reuse of existing blocks. --- -**Exercise 5** (25 mins): [JSON2HTML - Generate Pages from Data](exercise5/instructions.md) +**Exercise 5**: [JSON2HTML - Generate Pages from Data](exercise5/instructions.md) **What you'll learn**: -- JSON2HTML worker service for dynamic page generation -- Creating Mustache templates for repeatable content -- Configuring JSON2HTML via Admin Edit tool -- Testing templates with JSON2HTML Simulator +- The idea of **many URLs from one dataset** (list + detail) without authoring each page by hand +- How **templates + a worker + edge cache** fit together as a system +- Why **Sidekick Update** matters when data—not code—changed **What you'll build**: -- Multi-city event pages from future-events.json Sheet -- Mustache template in DA.live -- JSON2HTML worker configuration -- Dynamic pages for Sydney, London, Bangalore, Berlin, Singapore, Dubai +- **Confidence** in the pipeline by changing data and seeing new pages appear +- The **event** block on your branch so generated HTML still feels like a polished site -**Key takeaway**: JSON2HTML worker transforms JSON data into HTML pages via templates. One Sheet + one template = unlimited event pages. - -**Break** (15 mins) — 11:20–11:35 AM +**Key takeaway**: Treat rows in a sheet like records in a database and let the platform generate pages at scale. --- -## Session 2: Advanced Topics (1 hour 30 minutes) - -**Exercise 6** (20 mins): [Form Submissions with Workers](exercise6/instructions.md) +**Exercise 6**: [Form Submissions with Workers](exercise6/instructions.md) **What you'll learn**: -- Building forms in EDS blocks -- Handling form submissions with JavaScript -- Worker middleware for external integrations -- Providing user feedback during async operations +- Why the **browser is the wrong place for secrets** and integrations +- How a **worker** sits between the form and systems like Slack +- How to keep authors and visitors **informed** while async work runs **What you'll build**: -- Feedback form block with client-side validation -- Integration with Cloudflare Worker -- Slack webhook connection to post submissions +- A **form block** on a draft page +- An **end-to-end submission** you can trace from click to notification -**Key takeaway**: Workers provide secure middleware for forms. Keep API keys server-side, validate data, integrate with external services. +**Key takeaway**: Forms are a trust boundary—blocks collect; workers protect and connect. --- -**Exercise 7** (30 mins): [DA.live Plugin Development](exercise7/instructions.md) +**Exercise 7**: [DA.live Plugin Development](exercise7/instructions.md) **What you'll learn**: -- How DA.live plugins work as library integrations (DA App SDK) -- Plugin architecture (HTML + JS in iframe, PostMessage) -- Developing plugins locally and deploying to your branch -- Inserting content into documents via SDK actions +- How **plugins extend authoring** without polluting documents with raw embeds +- The split between **author experience** (paste, dialog) and **delivery** (clean block markup) +- How **local vs branch** loading speeds up plugin development **What you'll build**: -- EmbedWidget plugin (paste TradingView embed → structured block) -- TradingView block decorator to render the widget on the page -- Plugin accessible from library palette with `?ref=local` or `?ref=jsmith` +- A **plugin + block pair** that turns messy third-party snippets into structured content +- A workflow authors could actually use week after week -**Key takeaway**: Plugins let authors use familiar paste workflows while keeping only block markup in the document. One plugin, reusable across pages. +**Key takeaway**: Plugins are the guardrail that keeps “easy for authors” and “safe for the site” aligned. --- -**Exercise 8** (30 mins): [Repoless Multi-Site & Multi-Brand](exercise8/instructions.md) +**Exercise 8**: [Repoless Multi-Site & Multi-Brand](exercise8/instructions.md) **What you'll learn**: -- Repoless architecture in EDS -- Sharing code across multiple sites -- Using Site Admin tool to configure code sources -- Verifying repoless setup with DevTools +- **Repoless** as “many sites, one codebase” via configuration—not copy-paste repos +- How **content** and **code** can live in different places yet assemble into one experience +- **Multi-brand** as theming and metadata—not necessarily new repositories **What you'll build**: -- Your own DA.live project (cloudadoption/jsmith-mc) -- Configure code source to point to shared nycmasterclass codebase -- Create custom content pages with shared styling -- Prove code independence using browser DevTools +- A **second site** in DA.live that reuses this project’s code +- **Evidence** (e.g. in DevTools) that shared scripts and styles really come from the shared repo -**Key takeaway**: Repoless enables launching unlimited sites with shared code. Create your own site in minutes, leverage existing codebase, maintain content independence. +**Key takeaway**: Scale out sites and brands by separating *where content lives* from *where code lives*. --- -**Go-Live Discussion** (10 mins): Production readiness checklist - ---- - -## Exercise Flow - -Each exercise builds on previous concepts: - -**Exercises 1-2**: Foundation -- Author perspective -> Developer perspective -- Static content -> Decorated blocks - -**Exercises 3-4**: Data Integration -- External data (Sheets/personal workspace) -> Internal data (query index) -- API-first architecture in practice -- Dynamic data fetch -> Block composition (Search reuses Cards) - -**Exercise 5**: Content Scale -- Manual pages -> Worker-generated pages -- JSON2HTML service: Data + Mustache templates = Unlimited pages - -**Exercises 6-7**: Real-World Integrations -- Forms → Worker → Slack; Plugins → paste embed → block content - -**Exercise 8**: Enterprise Scale -- Single site -> Multi-site architecture (hands-on repoless setup) - ---- - -## Key Concepts - -**Separation of Concerns**: -- DA.live = Authoring -- EDS = Delivery -- Workers = Middleware - -**API-First**: -- Every resource has a JSON representation -- DA.live API for content management -- EDS Admin API for preview/publish - -**Performance by Default**: -- No frameworks, vanilla JavaScript -- Automatic image optimization -- Progressive loading (eager/lazy/delayed) - -**Author-Friendly**: -- Document-based authoring -- Blocks for reusable components -- Metadata for SEO control +**Go-Live Discussion**: Production readiness checklist --- @@ -277,9 +161,9 @@ Each exercise builds on previous concepts: **Tools**: - [EDS Admin Tools](https://tools.aem.live/) -- [Index Admin](https://tools.aem.live/tools/index-admin) -- [Site Admin](https://tools.aem.live/tools/site-admin) -- [JSON2HTML Simulator](https://tools.aem.live/tools/json2html) +- [Index Admin](https://tools.aem.live/tools/index-admin/index.html) +- [Site Admin](https://tools.aem.live/tools/site-admin/index.html) +- [JSON2HTML Simulator](https://tools.aem.live/tools/json2html-simulator/index.html) **APIs**: - [DA.live API](https://docs.da.live/developers/api) diff --git a/labs/exercise4/instructions.md b/labs/exercise4/instructions.md index ce03103..0942525 100644 --- a/labs/exercise4/instructions.md +++ b/labs/exercise4/instructions.md @@ -32,7 +32,7 @@ - Local dev server at `http://localhost:3000` - Code editor open with the repository - Exercises 1–3 completed (if doing in sequence) -- Exercise 1 page published to `/labs/jsmith/` (see end of Exercise 3) +- Exercise 1 Session/Lab page published under `/labs//` to `.aem.live` (follow **Before You Move On** at the end of Exercise 3 — `/drafts/**` is not indexed) - DA.live access **Verify you're on your branch**: `git branch` → should show `* jsmith` (your name). @@ -142,7 +142,7 @@ indices: ## Step 1: Verify query-index.json -Verify your `/labs/jsmith/` page from the end of Exercise 3 appears in the index: +Verify your `/labs/jsmith/` page (published in Exercise 3’s **Before You Move On** section) appears in the index: ``` http://localhost:3000/query-index.json diff --git a/labs/exercise5/instructions.md b/labs/exercise5/instructions.md index 99dfd84..1e6a78e 100644 --- a/labs/exercise5/instructions.md +++ b/labs/exercise5/instructions.md @@ -332,7 +332,7 @@ The JSON2HTML worker has been configured with two path rules. Here's the configu Try the **JSON2HTML Simulator** to see exactly how templates are rendered. -**Open**: [https://tools.aem.live/tools/json2html-simulator/](https://tools.aem.live/tools/json2html-simulator/) +**Open**: [JSON2HTML Simulator](https://tools.aem.live/tools/json2html-simulator/index.html) ### Test the Detail Template: @@ -641,8 +641,8 @@ JSON Data → Worker → [Match Path + Apply Template] → HTML → EDS Decorati ## References - [JSON2HTML Documentation](https://www.aem.live/developer/json2html) -- [JSON2HTML Simulator](https://tools.aem.live/tools/json2html-simulator/) -- [Admin Edit Tool](https://tools.aem.live/tools/admin-edit/) +- [JSON2HTML Simulator](https://tools.aem.live/tools/json2html-simulator/index.html) +- [Admin Edit Tool](https://tools.aem.live/tools/admin-edit/index.html) - [Mustache Documentation](https://mustache.github.io/mustache.5.html) - [EDS Markup Reference](https://www.aem.live/developer/markup-sections-blocks) - [CSS :has() Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)