adobe / pages

pages.adobe.com landing pages

The pages project includes all the client-sided code (js/css) and configuration to run pages.adobe.com on helix.

Public access

The public website is up and running on:

https://pages.adobe.com/

The "inner CDN" or helix origin is at:

https://main--pages--adobe.hlx3.page/

Develop with Helix locally

Get/update NPM & Node

First ensure that you have a somewhat recent version of NPM and Node.

Check your NPM version:
npm -v

Check your Node version:
node -v

If you can't run these commands, install NPM and Node.

If you need to update your existing NPM:
npm install -g npm@latest

If you need to update your existing version of Node, use NVM: nvm install node

If you don't have NVM, install it with these instructions.

Some scripts depend on ES modules, if you encounter errors when running them, update Node.js.

Install helix-cli

Use your fresh NPM to install the Helix client. npm install -g @adobe/helix-cli or sudo npm install -g @adobe/helix-cli (if you get permission errors.)

Clone this repository

git clone https://github.com/adobe/pages

Start up the local server

Switch into the /pages directory of the repository:
cd pages
Run the command to start up Helix:
hlx up

This should automatically open http://localhost:3000/ in your browser. Changes to your local Github repo will show up there.

Dev scripts

Lint

npm run lint

Note: Linting is also performed in a pre-commit hook

Test

npm run test

Compare

./tools/run-compare.js and ./tools/compare/ contain a script for comparing pages between the branch you're working on and the current "source-of-truth" branch/endpoint. The output is based on enabled plugins, any/all of:

1. screenshot
2. lighthouse

The pages compared come from ./tools/pagelist.js, which may be more comparisons than needed for a change and should be edited according to the use case.

Compare all in pagelist

npm run compare

Sync

Used for bulk pushing changes via Admin API.

Flags

glob - for selective matching files/directories (default undefined) env - environment to use, any of: "preview", "publish", "code" (default "preview") owner - repo owner to use (default "adobe") repo - repo name to use (default "pages") branch - branch to use (default "main")

Preview all content

With a locally mounted gdrive, you can bulk preview/publish content.

npm run sync -- "/Volumes/GoogleDrive/My Drive/pages"

Note: Selective globs are preferred, this will take a long time and is unnecessary in most cases.

Publish a specific directory

npm run sync -- "/Volumes/GoogleDrive/My Drive/pages" --env=publish --glob="./my/content/dir/**/*"

Sync a block to codebus

npm run sync -- "/path/to/this/repo/pages" --env=code --glob="./pages/blocks/myblock/**/*"

pages's Issues

Helix 3 Migration - change default branch to `main`

for helix 3, it would be better if the default branch is main.

@davidnuescheler do you think this can easily be switched w/o disrupting too many workflows?

/cc @maxakuru

Duplication of sampleRUM in consonant template

The consonant template block is duplicating the sampleRUM code from /pages/scripts/scripts.js

pages/templates/consonant/consonant.js

Line 13 in 56e0517

export function sampleRUM(checkpoint, data = {}) {

pages/pages/scripts/scripts.js

Line 26 in 56e0517

function sampleRUM(checkpoint, data = {}) {

https://pages.adobe.com/stock/en/artisthub/get-inspired/seasonal/summer-2022?rum=on shows that the same events will get fired twice, so it makes sense to remove this duplication

Prepare for upcoming data format change in content-proxy for steps.json

https://github.com/davidnuescheler/pages/blob/ce9194e1bc74b0901625ddd3c2dedac795005563/scripts/twp3.js#L4-L7

see adobe/helix-content-proxy#121

[Enhancement request] Add Marquee block to default Pages block library (or, enhance existing Hero block)

Note: I'm not sure if the more logical enhancement is to port over the Marquee block from Consonant to the default Pages blocks, or to enhance the existing Hero block with a new functionality; please let me know, and I can update this ticket to reflect the planned course of action. I think either would work for my desired use case.

Expected Behaviour

I'd like to create a Marquee/hero section on my form landing page that looks like this:

The icon/logo, header, and copy should all be centered in the marquee/hero image (in this case, the black banner with the rainbow trim). That asset can be found here:

Actual Behaviour

There are two ways I've tried to produce this, but neither works how I'd like it to:

Version 1: using the default Hero block

This is what my page looks like in Helix:

This is what it renders like:

The black banner is placed on top of the Logo/Header/Copy instead of being the background. In addition, my form does not render properly. The desired enhancement for this version would be to have the Hero block support a background banner (so that the banner serves as the background for the Logo/Header/Copy. The Logo/Header/Copy should remain centered-justified.

Version 2: using the Consonant template's Marquee block

An alternative approach was using the Consonant template library's Marquee block (reference example here). My Helix page looked like this:

But it rendered like this:

The black hero/marquee banner behaves correctly here, but there are still issues; the spacing between the logo and header is way too large, the Logo/Header/Copy is all left justified instead of center-justified, and most importantly, the form does not render at all (and the form format doesn't seem to be recognized, as indicated by the strings of text on the preview). A potential other solution would be to port this Marquee block over to the default Pages block library so that the page can still read forms.

I reviewed these two scenarios with Sean Choi, and it seemed to us that an enhancement to the Hero block to support a background marquee image would probably be easier. But either of the two would be great for what I'm looking for, so happy to defer to the Dev's opinion.

Reproduce Scenario (including but not limited to)

My test pages can all be found in this folder: https://drive.google.com/drive/u/1/folders/1lNBMLjx2ca2LDdbcjp7ylrVDFV8Z468e

"Express-your-brand" and "Express-your-brand-2" are the two test pages. Two sample forms are also in the folder for testing.

Steps to Reproduce

1. Open either "Express-your-brand" or "Express-your-brand-2"
2. Try to load the page using Helix sidekick

Platform and Version

N/A

Sample Code that illustrates the problem

N/A

Logs taken while reproducing problem

N/A

Parameterize comparisons script

Right now the compare tool (npm run compare) uses hardcoded constants for certain fields that should be cli flags.

Parameterize these:

• baseHost - base host to compare against (default hlx3.page)
• baseOwner - base owner to compare against (default adobe)
• baseBranch - base branch to compare against (default main)
• baseRootUrl - if set, uses this to build base URLs instead of branch/domain/owner, for testing outer CDN (default undefined)
• currentHost - current host to compare from (default hlx3.page)
• currentOwner - current owner to compare from (default adobe)
• currentBranch - current branch to compare from (default <git branch --show-current>)
• currentRootUrl - same as baseRootUrl, but for current (default undefined)
• repoName - repo name (default pages)
• output - path to output directory (default .comparisons)
• pagelist - path to ESM js file that default exports an array of page routes, ie. paths in Docs/Word (default ./.tools/pagelist.js)
• page - single page route, overrides pagelist (default undefined)
• plugins - list of plugins to use (default screenshot)

Only add valid URLs to publish dependencies

Invalid URLs will cause the publish action to fail.

Helix 3 Migration

Code-related steps for Helix 3 migration of pages.adobe.com, see https://github.com/adobe/project-helix/issues/604

Preparation

• Use main branch #328
• Add client-side embed insertions #339
• Isolate templates; default.css, global.css, etc #339
• Type definitions for global namespace, BlockDecorator, Component
• Sample block directory
• Update README; inner CDN link, dev setup, scripts #362
• Parameterize comparisons script #364
• Sync code to code bus
• QA comparisons
  • https://main--pages--adobe.hlx.live/ (hlx3) vs. https://pages.adobe.com/ (expected)
  • See the comparison pagelist for pathnames tested

During migration

• Change default branch to main #328

After migration

• QA comparisons
  • https://pages.adobe.com/ (migrated) vs. https://pages-adobe.hlx.page/ (expected)