From afadc99f0c321c3a9ccdd33f6b3d0922a7f948b1 Mon Sep 17 00:00:00 2001 From: Lamont Crook Date: Wed, 8 Jul 2026 10:03:49 -0600 Subject: [PATCH] Add Spectrum-styled Getting Started guide site under /docs - Add docs/index.html: self-contained GitHub Pages guide covering the initiative summary, key URLs, how to find the GitHub repo and DA folder, architecture, local development, and blocks reference. Spectrum design language themed with the Holland America Line brand palette. - Add .github/workflows/pages.yaml to publish /docs to GitHub Pages. - Rewrite README.md for the HAL project and link the guide. Co-Authored-By: Claude Opus 4.8 --- .github/workflows/pages.yaml | 39 ++ README.md | 27 +- docs/index.html | 884 +++++++++++++++++++++++++++++++++++ 3 files changed, 942 insertions(+), 8 deletions(-) create mode 100644 .github/workflows/pages.yaml create mode 100644 docs/index.html diff --git a/.github/workflows/pages.yaml b/.github/workflows/pages.yaml new file mode 100644 index 0000000..245b2a9 --- /dev/null +++ b/.github/workflows/pages.yaml @@ -0,0 +1,39 @@ +name: Deploy docs to GitHub Pages + +on: + push: + branches: + - main + paths: + - 'docs/**' + - '.github/workflows/pages.yaml' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment, cancel in-progress runs of this workflow. +concurrency: + group: pages + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload docs artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md index 720552c..e53a09f 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,32 @@ -# Your Project's Title... -Your project's description... +# Holland America Line โ€” AEM Edge Delivery Services + +The Holland America Line website built on Adobe Experience Manager Edge Delivery Services (EDS). Content is authored in Document Authoring (DA); the codebase carries the Holland America brand system and a library of reusable blocks. + +## ๐Ÿ“– Getting Started Guide + +A developer & author guide โ€” the initiative summary, where the code and content live, how to find the GitHub repo and DA folder, and how to run locally โ€” is published via GitHub Pages: + +**https://adobedevxsc.github.io/hal/** + +Source: [`docs/index.html`](docs/index.html) ## Environments -- Preview: https://main--{repo}--{owner}.aem.page/ -- Live: https://main--{repo}--{owner}.aem.live/ + +- Preview: https://main--hal--AdobeDevXSC.aem.page/ +- Live: https://main--hal--AdobeDevXSC.aem.live/ +- Content (DA): https://da.live/#/AdobeDevXSC/hal ## Documentation -Before using the aem-block-collection, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically: +For background on AEM Edge Delivery Services, see https://www.aem.live/docs/ and specifically: 1. [Developer Tutorial](https://www.aem.live/developer/tutorial) 2. [The Anatomy of a Project](https://www.aem.live/developer/anatomy-of-a-project) 3. [Web Performance](https://www.aem.live/developer/keeping-it-100) 4. [Markup, Sections, Blocks, and Auto Blocking](https://www.aem.live/developer/markup-sections-blocks) 5. [AEM Block Collection](https://www.aem.live/developer/block-collection#block-collection-1) +Project-specific coding standards and the publishing workflow live in [AGENTS.md](AGENTS.md). + ## Installation ```sh @@ -28,8 +41,6 @@ npm run lint ## Local development -1. Create a new repository based on the `aem-block-collection` template and add a mountpoint in the `fstab.yaml` -1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli` 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`) -1. Open the `{repo}` directory in your favorite IDE and start coding :) \ No newline at end of file +1. Open the project directory in your favorite IDE and start coding :) diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..8d61589 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,884 @@ + + + + + +Holland America Line โ€” EDS Getting Started + + + + + + + + + + + + +
+ + + + + +
+
+ + +
+
AEM Edge Delivery Services
+

Holland America Line โ€” Getting Started

+

A developer & author guide for the Holland America Line website built on Adobe Experience Manager Edge Delivery Services. Learn what the project is, where the code and content live, and how to get running locally.

+
+ + +
+

+ + + + The initiative +

+
+

This project delivers the Holland America Line web experience on Adobe Experience Manager Edge Delivery Services (EDS). It is built from the AEM boilerplate and follows Adobe's standards for fast, easy-to-author, and maintainable web experiences.

+

Content is authored in Document Authoring (DA) and served through the EDS pipeline. The codebase carries the Holland America brand system โ€” navy, orange, and the Quasimoda / Minion display typefaces โ€” applied through global styles and a library of reusable blocks. Adobe Edge Functions have been set up as a baseline for request-time customization at the CDN edge.

+ +
+
+
GOALFast by default
+

Vanilla JS, modern CSS, no build step. Three-phase (eager / lazy / delayed) page loading targets a 100 Lighthouse score.

+
+
+
CONTENTAuthor in DA
+

Authors edit pages in Document Authoring; blocks decorate the content authors produce โ€” no code deploy required to publish.

+
+
+
BRANDHolland America look
+

Brand tokens (navy #022658, orange #e46c24, Quasimoda + Minion) drive global styles, the header, hero, and cards.

+
+
+ + + + + + + + + + + + +
AttributeValue
GitHub orgAdobeDevXSC
Repositoryhal
Primary branchmain
Content systemDocument Authoring (DA) via da.live
Content mountcontent.da.live/AdobeDevXSC/hal/
Base boilerplateadobe/aem-boilerplate
ExtrasAdobe Edge Functions baseline
+
+ + +
+

+ + + + Key URLs +

+
+

Every place you need to reach the code, the content, and the rendered site.

+
+ +
GitHub
+
hal repository
+
github.com/AdobeDevXSC/hal
+
Code, branches, pull requests, Actions CI
+ + +
Document Authoring
+
hal content folder
+
da.live/#/AdobeDevXSC/hal
+
Pages, nav, footer, metadata sheets
+ + +
Preview
+
main--hal--AdobeDevXSC.aem.page
+
main--hal--AdobeDevXSC.aem.page
+
Renders DA content against the main branch code
+ + +
Live
+
main--hal--AdobeDevXSC.aem.live
+
main--hal--AdobeDevXSC.aem.live
+
Production CDN โ€” published content only
+ +
+
+ + The URL pattern for any branch is {branch}--hal--AdobeDevXSC.aem.page (preview) or .aem.live (published). Swap main for your feature branch to preview it. +
+
+ + +
+

+ + + + Find the GitHub repository +

+
+

All of the site's code lives in one repository under the AdobeDevXSC GitHub organization.

+
+
+
+
+
Go straight to the repo
+

Open github.com/AdobeDevXSC/hal. If you have access it opens directly; otherwise request access to the AdobeDevXSC org.

+
+
+
+
+
+
Or discover it from the org
+

Visit github.com/AdobeDevXSC, open the Repositories tab, and search for hal.

+
+
+
+
+
+
Confirm it from a local clone
+

If you already have the code, run git remote -v (or gh repo view --json nameWithOwner) โ€” it reports AdobeDevXSC/hal.

+
+
+
+
+
+
Clone it
+
git clone https://github.com/AdobeDevXSC/hal.git +cd hal
+
+
+
+
+ + The GitHub org (AdobeDevXSC) and repo name (hal) are the two values you plug into every preview and live URL. +
+
+ + +
+

+ + + + Find the DA content folder +

+
+

Page content is authored in Document Authoring (DA), not in the repo. The repo's fstab.yaml tells you exactly which DA folder feeds this site.

+
+
+
+
+
Read the mount point in fstab.yaml
+

At the repo root, fstab.yaml declares where content comes from:

+
mountpoints: + /: + url: https://content.da.live/AdobeDevXSC/hal/ + type: markup
+

The path after content.da.live/ is the DA org and folder: AdobeDevXSC / hal.

+
+
+
+
+
+
Open it in the DA editor
+

Translate that mount into the DA app URL by swapping content.da.live/ for da.live/#/:

+
https://da.live/#/AdobeDevXSC/hal
+

Open da.live/#/AdobeDevXSC/hal to browse and edit pages, nav, footer, and metadata.

+
+
+
+
+
+
Verify the content is being served
+

Any page you preview at main--hal--AdobeDevXSC.aem.page is pulled from that DA folder. Inspect the raw content of a page with:

+
curl https://main--hal--AdobeDevXSC.aem.page/index.plain.html
+
+
+
+
+ + Rule of thumb: the DA folder path always mirrors {org}/{repo}. Here that is AdobeDevXSC/hal โ€” the same org and name as GitHub. +
+
+ + +
+

+ + + + Architecture +

+
+

Content authored in DA and code from GitHub are combined by the EDS pipeline and served through preview and live CDN environments.

+
+
+
DA content
AdobeDevXSC/hal
+
+
+
GitHub code
AdobeDevXSC/hal
+
+
โ†“
+
+
EDS pipeline
+ Adobe Edge Functions
+
+
โ†“
+
+
*.aem.page (preview)
+
|
+
*.aem.live (published)
+
+
+

Repository structure

+
# Key directories +/blocks # reusable content blocks (blockname.js + blockname.css) +/scripts # aem.js ยท scripts.js ยท delayed.js +/styles # styles.css ยท lazy-styles.css ยท fonts.css (HAL brand tokens) +/fonts # web fonts (Quasimoda, Minion display) +/icons # SVG icons +/config # cdn.yaml ยท edgeFunctions.yaml +/aem-edge-functions # Adobe Edge Functions baseline +fstab.yaml # DA content mount โ†’ content.da.live/AdobeDevXSC/hal/ +head.html # global <head> content
+
+ + +
+

+ + + + Local development +

+
+

The AEM CLI proxies your local code against previewed DA content. You edit code locally and see it against real content at localhost:3000.

+
# 1. Install dependencies +npm install + +# 2. Install the AEM CLI (once, globally) +npm install -g @adobe/aem-cli + +# 3. Start the local dev server at http://localhost:3000 +aem up + +# Lint before committing +npm run lint
+
+ + Never modify scripts/aem.js โ€” it is the core EDS library. Add site logic in scripts.js, block files, or global styles instead. +
+
+ + +
+

+ + + + Blocks reference +

+
+

Blocks are the reusable building blocks that add styling and behavior to authored content. Each lives in /blocks/{name}/ as a {name}.js + {name}.css pair. The project currently ships these blocks:

+
+
BLOCKheader

Site navigation, styled to match the Holland America Line brand.

+
BLOCKfooter

Global footer authored from a DA fragment.

+
BLOCKhero

Branded hero with imagery and headline, imported from poc-adobe-eds.

+
BLOCKcards

Responsive card grid using the brand palette.

+
BLOCKcarousel

Rotating slides for featured content.

+
BLOCKcolumns

Multi-column layout for mixed content.

+
BLOCKaccordion

Expandable/collapsible content sections.

+
BLOCKtabs

Tabbed content panels.

+
BLOCKtable

Structured tabular content.

+
BLOCKquote

Pull quotes and testimonials.

+
BLOCKembed

Third-party embeds (video, social, etc.).

+
BLOCKvideo

Inline and modal video playback.

+
BLOCKmodal

Overlay dialogs triggered from content.

+
BLOCKform

Author-configurable forms.

+
BLOCKsearch

On-site search experience.

+
BLOCKfragment

Reuse content authored elsewhere in DA.

+
+
+ + Coding standards, block conventions, and the publishing workflow live in AGENTS.md at the repository root. +
+
+ +
+ + AdobeDevXSC / hal  ยท  Holland America Line on AEM Edge Delivery Services +
+ +
+
+
+ + + +