feat: test central host UI

[FentPams]

This PR is for testing the feasibility of using central-host plugin's UI files (preview.js, preview.css) on GitHub Pages (https://github.com/FentPams/FentPams.github.io). The goal is to see if we can effectively host and display these files through GitHub Pages and use this as a reference for future implementations on admin.aem.live.

preivew.js and preivew.css files on Github pages:

• https://fentpams.github.io/lab/preview.js
• https://fentpams.github.io/lab/preview.css

Code changes:

• index.js, passing the context needed for preview.js, and import the url that points to the remote preview.js:

export async function loadLazy(document, options = {}) {
  const pluginOptions = { ...DEFAULT_OPTIONS, ...options };
  // do not show the experimentation pill on prod domains
  if (!isDebugEnabled) {
    return;
  }
  // eslint-disable-next-line import/no-cycle
  const preview = await import('https://fentpams.github.io/lab/preview.js');
  const context = {
    getMetadata,
    toClassName,
    debug,
  };
  preview.default.call(context, document, pluginOptions);
}

Screenshots of changing overlay pill's color in preview.css

Test URLs:

• Before: https://main--wknd--hlxsites.hlx.page/
• After: https://central-host--wknd--hlxsites.hlx.page/

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• ff29552 ✅ (latest)

[aem-code-sync]

Page	Scores	Audits	Google
/

[FentPams]

@ramboz Hosting on github pages is workable :) Appreciate your thoughts here.

[ramboz]

Great :)

You can probably create a new branch then directly in the aem experimentation repo for the pages, and I'll configure the repo to point to that branch for the code. That way we can load directly from https://adobe.github.io/aem-experimentation/preview.js