Expected Behaviour

When a new project forks the boilerplate, the renovate configuration should not require changes in order to work with the AEM code sync bot.
PRs created by the bot should have test URLs and should just require manual intervention for merge-ing (if not configured to auto-merge).

Actual Behaviour

The recommended config which the boilerplate extends will not have test URLs.
If test URLs are added, they will not work out of the box, because the bot creates branches that include / and . which mess with the url structure and the PSI check will fail to be executed.

Reproduce Scenario (including but not limited to)

See hlxsites/sunstar#276 for example, a PR by the renovate bot that was not merge-able because of the special characters
And see #287 in the boilerplate, that does not have test URLs and as such the PSI check will always fail

Steps to Reproduce

• Fork the boilerplate
• Have the Renovate bot create a PR
• Notice how the PR is not merge-able without admin overrides

Expected Behaviour

the img element generated by createOptimizedPicture should contain width/height attributes.

Actual Behaviour

the current implementation of createOptimizedPicture generates images without specifying width/height attributes - google pagespeed complains about this, and it often leads to cumulative layout shift (CLS).

please note that the actual width/height of the source image is not part the URL that is used as src input parameter, and is not contained in the data generated by query-index.

Having a logo image in the header navigation and it linking to home is a very prevalent use case. It should be a standard feature of Franklin sites. At the same time neither devs nor authors should be bothered with setting up this link.

Expected Behaviour

A logo image added to nav.docx should by default link to the home page, i.e. / or something "configurable".

Actual Behaviour

A logo image added to nav.docx is not wrapped in a link.

Expected Behaviour

Archive.org shows the website as it was.

Actual Behaviour

The website appears blank and the console shows: “Uncaught SyntaxError: Unexpected token ‘export’“, for lib-franklin and scripts respectively.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Access either of these URLs

• https://web.archive.org/web/20230201084316/https://www.netcentric.biz/
• https://web.archive.org/web/20230102083751/https://www.theplayers.com/

Logs taken while reproducing problem

“Uncaught SyntaxError: Uneexpected token ‘export’“

Expected Behaviour

SVG images, including vector logos, displaying correctly all the elements (e.g. rects)

Actual Behaviour

some SVG images are shown with missing rects or polygons

Root cause (identified)

The following lines are stripping width and height attributes from all the vector elements in a svg element:
https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#LL161-L162

In addition, regexp are used to strip or replace attributes and their values: a safer approach (proposed in the linked PR) would be to use an instance of DOMParser.

Proposed solution

• The PR for this fix removes width and height attributes only from the root element.
• Usage of DOMParser where possible (as mentioned)

Expected Behaviour

• Create a new project out of the boilerplate
• Update the 404.html (for example, change the error text in <h2 class="error-message">Page Not Found</h2>)
• Save the file
• Fire hlx up
• Try to open http://localhost:3000/notfoundpage
• The original 404.html gets rendered in the browser

Actual Behaviour

The updated 404.html should be rendered in the browser.
Workaround: commit your changes to a branch and test against the hot deployment.

information link in helix-query.yaml is invalid

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

There are different sources of entropy in RUM data, that bring much more entropy than what is actually needed. Which leads to:

• more data storage required
• potential de-anonymization

In an effort to reduce the entropy we will:

• reduce the RUM ID to a 6 digits random string, encoded in base64
• add a property t = <milliseconds since first read> to the RUM beacon

Expected Behaviour

Page authors should have the ability to specify the link target i.e. whether it opens in the same tab/ new tab etc in the authoring document.

Actual Behaviour

Currently there's no such ability. Developers need to implement custom logic for achieving this. For e.g. hlxsites/mmm-af@9dba400

Reproduce Scenario (including but not limited to)

Not Applicable

Steps to Reproduce

Not Applicable

Platform and Version

All

Sample Code that illustrates the problem

Not Applicable

Logs taken while reproducing problem

Not Applicable

Current decorateIcons implementation is misleading: while it works, after a call to decorateIcons, the DOM might not yet be up to date because of the async callback in the forEach.

adobe/helix-rum-collector#68 adds the ability to serve the web vitals module from https://helix-rum-collector-serve-through.hlx3.one/.rum/web-vitals/dist/web-vitals.base.js

With a tweak to the default service, we can serve it from /.rum/web-vitals/dist/web-vitals.base.js (so that there is no cross-origin loading in the browser).

Once the PR is merged and the VCL has been updated, we can drop the library and update the import from line.

Expected Behaviour

When I create a new project from the aem-boilerplate I expect the cleanup workflow to run once after the creation and remove the unnecessary files.

Actual Behaviour

The workflow does not run as it can be seen here: https://github.com/Buuhuu/hlx-2/actions/workflows/cleanup-on-create.yaml

Reproduce Scenario (including but not limited to)

Create a new repo from the aem-boilerplate and check the GH actions if the cleanup workflow runs.

Seems like the condition https://github.com/Buuhuu/hlx-2/blob/main/.github/workflows/cleanup-on-create.yaml#L16 is not working as expected anymore.

Feature Request

It should be possible to specify images which act as hyperlinks.

Why should this be included in boilerplate?

This seems to be a commonly required pattern across multiple repositories. I see atleast 18 occurrences of linkPicture (mostly across PGA sites but there are more). Beyond this there may be other instances where the pattern is same but doesn't use linkPicture . I know 2 Asprey sites doing the same. Then there's decorateHyperlinkImages doing the same for Volvo. So >=21 occurrences across projects.
Also linking related slack conversation on this.

Consider this an idea more than concrete proposal

I've run across a number of ACS and partner projects who are modifying aem.js as their default way of changing things, as opposed to doing it in scripts.js. I view modifying aem.js as not necessarily verboten, but to be avoided when possible.

But my thought would be to have the PR workflow check the hash against a known value, and if it doesn't match, print a message indicating to use caution when modifying, etc.

If the project really wants to or needs to, they can update the hash in the pr script and move on, but should at least encourage the right behavior. thoughts?

before (tools overhang hero):

after (tools in nav bar):

Originally posted by @fkakatie in #91 (comment)

When programatically calling decorateIcons() more than once during the initial rendering ( e.g. from a block js that is present more than once in a page) only the icon related to the first call will be printed,
the rest of the icons will be replaced with: https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#L189

The current hypothesis it concurrent access to ICONS_CACHE, the first call sets the value to true in:
https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#LL151C7-L151C18

and while the icon is loading for the first call to decorateIcons() , the second call to decorateIcons() does not evaluate https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#LL150C16-L150C16 but directly jumps to https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#L186.

To better align the name, we need to rename this repo to aem-boilerplate. The rename will happen when #257 is done (~aem-ification of the boilerplate).

Also, the current https://github.com/adobe/aem-boilerplate/ is a temporary repo for preparing the documentation and test the aem-lib deployment. It will be deleted when we rename this one.

Hello, I was curious as to the proper process with adding npm packages and utilizing within the workflow.
We are scoping out some options with your team, and judging the scalability with enhancing the HTML parsing.

So if you install a package with the typical npm i * and then try the standard import { example } from "example", you will get an error. I am assuming the docker container and/or proxy is not seeming to understand the path.
I will list the details below, but this question is really just around the appropriate steps with how adding / interacting with NPM packages

Expected Behaviour

I would like the install a npm package, then import and use it.

Actual Behaviour

Console error:
failed to load module for footer TypeError: Failed to resolve module specifier "EXAMPLE" ...

Reproduce Scenario (including but not limited to)

npm i html-to-json-parser
import { HTMLParser } from "html-to-json-parser"

console error:
failed to load module for footer TypeError: Failed to resolve module specifier "html-to-json-parser". Relative references must start with either "/", "./", or "../".

There is a potential for an Unhandled Promise Rejection in the fetchPlaceholders of lib-franklin. The promise is wrapping the fetch call in a try/catch but as there is no await, it should instead add a catch at the end of the chain. Otherwise, a rejected fetch results in an unhandled promise.

Furthermore, the response status of the fetch is not checked which will make it potentially fail on the .json call in case of a request with a response that has a status other than ok.

Additionally, the resulting json is assumed to have entries with Key and Text in the data section - if that is not the case, the resulting object has undefined keys.

Expected Behaviour

A rejected fetch should not result in an unhandled promise and a fetch with a status that is not ok should result in a promise rejection. Additionally, the final placeholders object should not contain undefined keys.

Actual Behaviour

A rejected fetch causes an Unhandled Promise Rejection. A fetch with a status that is not ok errors on the .json call. A result with entries without Key in the data section adds undefined.

Reproduce Scenario (including but not limited to)

A call to fetchPlaceholders where there is no placeholders sheet. A status code returned other than 200. A mistake in the sheet where no Key is given.

Steps to Reproduce

For the main cases (the Unhandled Promise Rejection) it is enough to do a fetchPlaceholders where there is no placeholders sheet set-up.

Sample Code that illustrates the problem

import { fetchPlaceholders } from '../../scripts/lib-franklin.js';
....
const placeholders = await fetchPlaceholders(`/en`);

Logs taken while reproducing problem

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (placeholders.json, line 0)
[Error] Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.
	promiseEmptyOnRejected
	promiseReactionJob

Expected Behaviour

if the author inputs a somewhat invalid section style metadata, it should not prevent the page from rendering.

Author adds the following, should still render:

Actual Behaviour

Page fails to render due to an empty class name attempted to be added to the section class list.

lib-franklin.js:350 Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.
at https://main--troweprice-rf--hlxsites.hlx.page/scripts/lib-franklin.js:350:55
at Array.forEach (<anonymous>)
at https://main--troweprice-rf--hlxsites.hlx.page/scripts/lib-franklin.js:350:18
at Array.forEach (<anonymous>)
at https://main--troweprice-rf--hlxsites.hlx.page/scripts/lib-franklin.js:347:25
at NodeList.forEach (<anonymous>)
at decorateSections (https://main--troweprice-rf--hlxsites.hlx.page/scripts/lib-franklin.js:326:41)
at decorateMain (https://main--troweprice-rf--hlxsites.hlx.page/scripts/scripts.js:56:3)
at loadEager (https://main--troweprice-rf--hlxsites.hlx.page/scripts/scripts.js:69:5)

Can be seen here.

Steps to Reproduce

Edit any page's section metadata, and end the style declaration with a comma (,)

Block to dynamically include content from another page by specifying an absolute or relative URL:

• https://main--helix-project-boilerplate--adobe.hlx3.page/fragment
• ./fragment

Expected Behaviour

Able to transmit data to launch, and therefore the other extensions

Expected Behaviour

When an icon is linked, attributes should be set not cause accessibility issues. I think this could be handled in a few ways (aria label/aria-labelledby, sr-only text, etc.), but ideally if the svg contains a <title>, that is used, and if not, it falls back to the icon name.

Actual Behaviour

No aria label or sr text is set, so links are flagged by the accessibility checks. This seems to only be a problem for the svg use references from the sprite, when svgs are inlined, if those svgs have a <title> it seems to be fine from my testing.

Reproduce Scenario (including but not limited to)

see https://pagespeed.web.dev/analysis/https-surest-com/yknkix6bfs?form_factor=mobile but reproducible across many Franklin sites who have icons that are linked (very common in header and footer)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour

Icons should contain some form of alt text for the image tag.

Actual Behaviour

No alt text exists, and thus Accessibility issue is raised on PSI check.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Load any demo page. Here is a PSI check of a page with multiple icon references.

Create a new project based on the current aem-boilerplate. Open the homepage and check the console.log:

Failed to load resource: the server responded with a status of 404 - search.svg

Default table styling is a bit empty: no borders, no sizing, paragraph margins are a bit big.

While not strictly necessary, consider adding https://editorconfig.org/.

In consider it a useful baseline for styling between different code editors.

The goal is to extract the lib-franklin.js code, move it to https://github.com/adobe/aem-lib repo, write unit tests for each function and make sure the build process bundles and updates a aem.js file in the boilerplate repo.

When authors use SVG icons and then create links out of them, the resulting code is an a tag without any text, or an aria-label attribute. A good usage example for this is the brand icon in the header. This output results in a "Links do not have a discernible name" accessibility error and a deduction in the lighthouse score - https://dequeuniversity.com/rules/axe/4.7/link-name. To resolve this we can simply add a label attribute to the parent a element. I'm proposing we modify this default functionality to add the icon name as the label, this way we aren't leaving it empty and thus improving our score.

OOTB code should not result in accessibility deductions.

OOTB code does not add an aria-label attribute when :svg-icons: are created in word and then hyperlinked.

To reproduce this scenario, open a document, add an SVG icon via :icon-name: and then link the icon. Preview the page then run a lighthouse accessibility report. You should see the deduction.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update babel monorepo to v7.24.5 (@babel/core, @babel/eslint-parser)
• chore(deps): update dependency stylelint to v16.5.0
• chore(deps): update dependency eslint to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Many PSI reports show a warning about preloading the FCP image to improve the user experience.

I figure this should come with the boilerplate.

the reference in here...
https://github.com/adobe/helix-project-boilerplate/blob/main/helix-query.yaml#L2
...seems very outdated and possibly targeting a different audience.

Open https://main--helix-project-boilerplate--adobe.hlx.page/
The scrollbar disappears after a few ms and the content cannot be scrolled.

An overflow-y: hidden attribute is added to the body. I suspect the new header to have introduced this regression (https://github.com/adobe/helix-project-boilerplate/blob/main/blocks/header/header.js#L58 ?)
@fkakatie can you please have a look ?

If you use the same icon 20 times on the page, you will see 20 requests being made in the network tab. This can be optimised by requesting only each icon once and potentially cache the result for the next decorateIcons calls.

Hey team
I tried building website using helix but i am facing an issue while i am changing the endpoint your drive repository to my drive i am getting only page but page doesn't contain the header and footer i also cross checked with the folder structure i kept the folder structure same as yours. i would really appreciate if you provide the solution for it.

Add example 404 handling.

Expected Behaviour

Defining the style in CSS should be sufficient:
https://github.com/adobe/helix-project-boilerplate/blob/main/styles/styles.css#L63

But it also set in JS which I think is not needed:
https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#L626

Actual Behaviour

Don't set the same property multiple times.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

https://github.com/adobe/helix-project-boilerplate/blob/da7dabc6c620c7be46ae2a54b1df89f558488585/blocks/header/header.css#L161

Expected Behaviour

Only use defined vars.

Actual Behaviour

There is an undefined var.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour

The loadLazy function can handle invalid hash value is provided in the URL (such as a 3rd party system could inject) without throwing an error.

Actual Behaviour

An error is thrown L95 by the main.querySelector fucntion.

Reproduce Scenario (including but not limited to)

Run the boilerplate code in local, and enter a URL such as: http://localhost:3000/#old_hash=&from_ims=true.
Check the navigator console.

Reference of ${window.hlx.codeBasePath} to be added by default in header and footer blocks.
This will be helpful for projects dealing with subpaths for site URL

Expected Behaviour

franklin-svg-sprite should be a unique list of icons

Actual Behaviour

franklin-svg-sprite contains duplicated icons, with duplicate ids, which I believe is not actually allowed because IDs must be unique

Reproduce Scenario (including but not limited to)

pretty sure this would be reproducible on just about any project where more than one icon is used. can be see https://main--elixirsolutions--hlxsites.hlx.page where the sprite looks like:

<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"><symbol id="icons-sprite-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></symbol><symbol id="icons-sprite-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></symbol><symbol id="icons-sprite-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></symbol>
<symbol id="icons-sprite-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
    c2.9,2.9,7.5,3.1,10.6,0.6c0,0.1,0,0.1,0,0.1l4.2,4.2c0.5,0.4,1.1,0.4,1.5,0c0.4-0.4,0.4-1,0-1.4L16.9,15.5
    C16.9,15.5,16.9,15.5,16.9,15.5L16.9,15.5z M14.8,6.3c2.3,2.3,2.3,6.1,0,8.5c-2.3,2.3-6.1,2.3-8.5,0C4,12.5,4,8.7,6.3,6.3
    C8.7,4,12.5,4,14.8,6.3z"></path>
</symbol>
</svg>

note that id="icons-sprite-tag" is there 3 times

I believe the issue is that https://github.com/adobe/helix-project-boilerplate/blob/main/scripts/lib-franklin.js#L180 appends to symbols rather than replacing it.

In some quick local testing, just changing that to an assignment worked, but maybe there are cases where you need to do an append (I'm thinking multiple icons being decorated at the same time in asyc/await code?), in which case we might need to add icons individually only after checking if they already exist?

cc: @ramboz who I think set this up originally

In the past, we had problems with browser support for optional chaining (the foo?.bar syntax) and I've been seeing it a few times in PRs I reviewed.

Is this still an ongoing concern?

Should be try to catch it early through an eslint rule?

Expected Behaviour

No errors if my navigation document is empty (yet).

I like my browser js console clean from framework errors :) But it's a minor issue.

Actual Behaviour

With an empty nav.docx (see below), I see this error in the js console (using localhost:3000 dev server):

failed to load module for header TypeError: Cannot read properties of null (reading 'querySelectorAll')
    at toggleAllNavSections (header.js:44:12)
    at toggleMenu (header.js:60:3)
    at Module.decorate (header.js:138:5)
    at async lib-franklin.js:360:15

This is because this line here does not check if sections is null nor not.

Empty nav.docx: The nav.plain.html seen in the browser looks like this:

<div></div>

Reproduce Scenario (including but not limited to)

Steps to Reproduce

1. have an empty navigation doc (e.g. nav.docx)
2. use default boilerplate code
3. run hlx up
4. open any page in localhost:3000

Platform and Version

boilerplate: https://github.com/adobe/helix-project-boilerplate/tree/a906cfc82b7a6f807e6a1899fa69a062ade2a0bc

franklin-simulator v14.20.0

Sample Code that illustrates the problem

Standard boilerplate code.

Logs taken while reproducing problem

With existing getMetadata(), it returns only first item that matches with property or name.
For example, when a page has multiple tags like this:

The function will return only Marketing Executive.
I found this out while I was updating business-website with the scripts.js from this repo.

Current code:

export function getMetadata(name) {
  const attr = name && name.includes(':') ? 'property' : 'name';
  const meta = document.head.querySelector(`meta[${attr}="${name}"]`);
  return meta && meta.content;
}

Suggesting:

export function getMetadata(name) {
  const attr = name && name.includes(':') ? 'property' : 'name';
  const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((el) => el.content).join(', ');
  return meta;
}

The loading sequence (mainly from initial page load to LCP and post LCP) has evolved a lot recently.
The project starter code must be aligned. The "source of truth" should be in https://github.com/adobe/business-website/.

Expected Behaviour : Specific SVG Icon which is processed through decorateIcons does not get rendered properly.

SVG1 : https://adobe.sharepoint.com/:u:/r/sites/HelixProjects/Shared%20Documents/sites/sunstar/sunstar-engineering/icons/[auto-paint-shop.svg](https://adobe.sharepoint.com/:u:/r/sites/HelixProjects/Shared%20Documents/sites/sunstar/sunstar-engineering/icons/auto-paint-shop.svg?csf=1&web=1&e=lvJ21A)?csf=1&web=1&e=lvJ21A

SVG2 : https://adobe.sharepoint.com/:u:/r/sites/HelixProjects/Shared%20Documents/sites/sunstar/sunstar-engineering/icons/[auto-speciality.svg](https://adobe.sharepoint.com/:u:/r/sites/HelixProjects/Shared%20Documents/sites/sunstar/sunstar-engineering/icons/auto-speciality.svg?csf=1&web=1&e=6rOje0)?csf=1&web=1&e=6rOje0

Actual Behaviour

SVG1 over web page :

SVG2 over web page:

Slack Conversation for reference : https://cq-dev.slack.com/archives/C9KD0TT6G/p1690463563902089

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour

PSI tests are more accurate when run against .live (where there is caching) as opposed to .page (where there is no caching) so by default we should encourage developers to be testing against .live URLs.

Actual Behaviour

Because the boilerplate default PR template uses .page URLs, people might think that we should be testing against .page and then updating to .live to get a more accurate test, causing unnecessary churn.

Expected Behaviour

A developer using node > 14 with npm > 8 is able to successfully get past npm install in the build.

Actual Behaviour

Build fails about 30% of the time when a package-lock file is rewritten by npm > 8 since the build uses npm < 8 which only supports package-lock Versions 1. npm < 8 makes a best effort, but this is not reliable in all cases.

Reproduce Scenario (including but not limited to)

make a change (eg npm audit fix) that changes the package-lock.json file.

Steps to Reproduce

install node > 14 locally, 16 will do.
remove package-lock.json
npm install
commit, push PR

Use case

As a developer, I'd like to have a minimal plugin system so that I can organize common features into individual opt-in plugins that I can re-use across projects, so that my scripts.js is easier to maintain, my code more portable and re-usable, and so that I only load what is really needed for my use case.

In particular, I'd like to:

• have a simple instrumentation of my scripts.js for the plugins I use
• have the capability to pass down configuration settings to the plugin to tailor it for my project
• be able to define various "hooks" in my plugin so it automatically runs in the eager/lazy/delayed phases
• be able to reference another plugin from my plugin so I can re-use features