Author Kit

For projects that want a few more batteries. Built by the team who brought you da.live and adobe.com.

Getting started

1. Github

1. Use this template to make a new repo.
2. Install AEM Code Sync.

2. DA content

1. Browse to https://da.live/start.
2. Follow the steps.

3. Local development

1. Clone your new repo to your computer.
2. Install the AEM CLI using your terminal: sudo npm install -g @adobe/aem-cli
3. Start the AEM CLI: aem up.
4. Open the {repo} folder in your favorite code editor and buil something.
5. Recommended: Install common npm packages like linting and testing: npm i.

Features

Localization & globalization

• Language only support - Ex: en, de, hi, ja
• Region only support - Ex: en-us, en-ca, de-de, de-ch
• Hybrid support - Ex: en, en-us, de, de-ch, de-at
• Fragment-based localized 404s
• Localized Header & Footer
• Do not translate support (#_dnt)

Flexible section authoring

• Optional containers to constrain content
• Grids: 1-6
• Columns: 1-12
• Color scheme: light, dark
• Gap: xs, s, m, l, xl, xxl
• Spacing: xs, s, m, l, xl, xxl
• Background: token / image / color / gradient

Base content

• Universal buttons w/ extensive styles
• Images w/ retina breakpoint
• Color scheme support: light, dark
• Modern favicon support
• New window support
• Deep link support
• Modal support

Header and footer content

• Brand - First link in header
• Main Menu - First list in header
• Actions - Last section of header
• Menu & mega menu support
• Disable header/footer via meta props

Scheduled content

• Schedule content using spreadsheets

Sidekick & pre-production

• Quick Edit
• Extensible plumbing for plugins
• Schedule simulator
• Convert production links to relative

Performance

• Extensible LCP detection

Developer tools

• Environment detection
• Extensible logging (console, coralogix, splunk, etc.)
• Buildless reactive framework support (Lit)
• Hash utils patterns (#_blank, #_dnt, etc)
• Modern CSS scoping & nesting
• AEM Operational Telemetry

Queue tool / Fusion config

The pilot queue (tools/queue) loads its Fusion webhook URL from the repo DA Config API at path config, sheet fusion, row key: endpoint. Example payload: config/repo-config.example.json.

POST (create or replace config):

curl -X POST 'https://admin.da.live/config/{org}/{repo}/config' \
  --header 'Authorization: Bearer {IMS_TOKEN}' \
  --form "config=$(cat config/repo-config.example.json)"

GET (same path; used by the queue on load via DA_SDK token):

curl -X GET 'https://admin.da.live/config/{org}/{repo}/config' \
  --header 'Authorization: Bearer {IMS_TOKEN}' \
  --header 'Accept: application/json'

Open the queue from Document Authoring while signed in so the app receives token and context.org / context.repo.

Operations

• Cloudflare Worker reference implementation

Patterns

Page

A page is what holds your content. It can be styled using a metadata property called template which will load styles that apply to the entire page.

Section

A section is a sub-section of your page. It can be styled using a section-metadata block. A section will control the layout of blocks.

Block

Blocks are children of sections. A block adds visual context to parts of a page.

Auto Block

An auto block is a block generated from a pre-defined piece of content. Often times from a link that matches a particular pattern. Link-based auto blocks can be helpful when additional nesting of content is required.

Default content

Default content is content that lives outside a block.

Design System

This project adopts Spectrum 2 via Spectrum Web Components (system="spectrum-two") across site pages, blocks, and tools.

Spectrum 2 (project-wide)

1. After npm i, run npm run build:deps (or npm run build:spectrum) to generate deps/spectrum/dist/.
2. Site: head.html loads /deps/spectrum/dist/tokens.css and styles/spectrum-bridge.css; scripts/scripts.js calls initSpectrum() and wraps the page in <sp-theme>.
3. Blocks / tools: import initSpectrum from scripts/utils/spectrum-theme.js (or tools/shared/spectrum-theme.js) before using sp-* elements.
4. Verify: any authored page via aem up, or /tools/spectrum-demo/spectrum-demo.html.

See deps/spectrum/README.md. Track migration in issue #1.

Spacing & Gap (legacy aliases — bridged to Spectrum where noted in spectrum-bridge.css)

XS, S, M, L, XL, XXL

Emphasis

quiet, default, strong, negative

Buttons

accent, primary, secondary, negative (w/ outline variations)

Columns

1 - 12

Grid

1 - 6

Color tokens

blue, gray, green, magenta, organge, red, purple, yellow (w/ 100-900 variations)

Color schemes

light, dark