refactor(tools)!: docs and demos refactor

[bennypowers]

What I Did

• refactor the dev server demos
  • use koa router
  • use /components/jazz-hands urls
• refactor the demo page builds in 11ty
  • allow multiple demos for elements
  • simplify demo rendering code
  • generate demos entries in custom elements manifests

[changeset-bot]

🦋 Changeset detected

Latest commit: dfb9061

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@patternfly/create-element	Patch
@patternfly/pfe-tools	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	dfb9061
🔍 Latest deploy log	https://app.netlify.com/sites/patternfly-elements/deploys/62dd66c8248e270009c16757
😎 Deploy Preview	https://deploy-preview-2059--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

🏮 Lighthouse report for the changes in this PR:

🟠 🟢 🟢 🟠 ⚪️ https://deploy-preview-2059--patternfly-elements.netlify.app/kitchen-sink/

🔦 Lighthouse Report for https://deploy-preview-2059--patternfly-elements.netlify.app/kitchen-sink/

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	55
🟢 Accessibility	92
🟢 Best practices	100
🟠 SEO	83

💥 Assertion Failures

Audit	Result	Docs
Reduce JavaScript execution time	0.28 (expected >=0.9)	📗
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Avoid an excessive DOM size	0.11 (expected >=0.9)	📗
First Contentful Paint	0.04 (expected >=0.9)	📗
First Meaningful Paint	0.16 (expected >=0.9)	📗
Image elements do not have [alt] attributes	0 (expected >=0.9)	📗
Largest Contentful Paint	0.13 (expected >=0.9)	📗
Minimize main-thread work	0.06 (expected >=0.9)	📗
Max Potential First Input Delay	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.08 (expected >=0.9)	📗
Reduce unused JavaScript	1 (expected <=0)	📗
Uses efficient cache policy on static assets	2 (expected <=0)	📗
Preconnect to required origins	1 (expected <=0)	📗
Document does not have a valid rel=canonical	0 (expected >=0.9)	📗
Time to Interactive	0.63 (expected >=0.9)	📗
undefined	0.92 (expected >=1)	📗

🟢 🔴 🟢 🟢 ⚪️ Styles

🔦 Lighthouse Report for Styles

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🔴 Accessibility	0
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors have a sufficient contrast ratio	null (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.67 (expected >=0.9)	📗
First Meaningful Paint	0.86 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.87 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
undefined	null (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Accordion

🔦 Lighthouse Report for Accordion

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	94
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.62 (expected >=0.9)	📗
undefined	0.94 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Autocomplete

🔦 Lighthouse Report for Autocomplete

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.76 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.64 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Avatar

🔦 Lighthouse Report for Avatar

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.75 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.63 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Badge

🔦 Lighthouse Report for Badge

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.62 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Band

🔦 Lighthouse Report for Band

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	96
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.63 (expected >=0.9)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Button

🔦 Lighthouse Report for Button

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	96

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.74 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.64 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.62 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Card

🔦 Lighthouse Report for Card

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.68 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.87 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.64 (expected >=0.9)	📗
Image elements do not have explicit width and height	0 (expected >=0.9)	📗
Properly size images	2 (expected <=0)	📗

🟢 🟢 🟢 🟢 ⚪️ Clipboard

🔦 Lighthouse Report for Clipboard

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.65 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Codeblock

🔦 Lighthouse Report for Codeblock

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.67 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Collapse

🔦 Lighthouse Report for Collapse

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.68 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.68 (expected >=0.9)	📗

🟢 🟢 🟢 🟠 ⚪️ Cta

🔦 Lighthouse Report for Cta

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	96
🟢 Best practices	93
🟠 SEO	88

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Links are not crawlable	0 (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.68 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.67 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.83 (expected >=0.9)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Datetime

🔦 Lighthouse Report for Datetime

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Dropdown

🔦 Lighthouse Report for Dropdown

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Health Index

🔦 Lighthouse Report for Health Index

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Icon

🔦 Lighthouse Report for Icon

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.64 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Icon Panel

🔦 Lighthouse Report for Icon Panel

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	95
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.73 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.68 (expected >=0.9)	📗
undefined	0.95 (expected >=1)	📗

🟠 🟢 🟢 🟢 ⚪️ Jump Links

🔦 Lighthouse Report for Jump Links

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	89
🟢 Accessibility	96
🟢 Best practices	93
🟢 SEO	91

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.65 (expected >=0.9)	📗
First Meaningful Paint	0.86 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.86 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Defer offscreen images	1 (expected <=0)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.03 (expected >=0.9)	📗
Image elements do not have explicit width and height	0 (expected >=0.9)	📗
Uses efficient cache policy on static assets	1 (expected <=0)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Label

🔦 Lighthouse Report for Label

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.66 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Markdown

🔦 Lighthouse Report for Markdown

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.73 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Modal

🔦 Lighthouse Report for Modal

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	98
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.76 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.68 (expected >=0.9)	📗
undefined	0.98 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Number

🔦 Lighthouse Report for Number

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	93
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.76 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.72 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Page Status

🔦 Lighthouse Report for Page Status

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Primary Detail

🔦 Lighthouse Report for Primary Detail

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.67 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Progress Indicator

🔦 Lighthouse Report for Progress Indicator

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	93
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.76 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.7 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Progress Steps

🔦 Lighthouse Report for Progress Steps

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.65 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Readtime

🔦 Lighthouse Report for Readtime

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Select

🔦 Lighthouse Report for Select

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.74 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟠 🟢 🟢 ⚪️ Tabs

🔦 Lighthouse Report for Tabs

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟠 Accessibility	86
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
[role]s do not have all required [aria-*] attributes	0 (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.69 (expected >=0.9)	📗
undefined	0.86 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Toast

🔦 Lighthouse Report for Toast

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	97

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.69 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.69 (expected >=0.9)	📗

[bennypowers]

@zeroedin ok please approve if you think it's ready to roll

[brianferry]

@bennypowers - Made a small change to the PR with an update to fix

[bennypowers]

Nice catch @brianferry. If you're GTG please drop an approval and we'll get this show on the road

[zeroedin]

@brianferry and I found some additional issues

When you load this PR's changes downstream in the RHDS repo:

In Firefox rh-alert generates the following console log:

Uncaught TypeError: Error resolving module specifier “@patternfly/pfe-band”. Relative module specifiers must start with “./”, “../” or “/”. rh-alert.js:1:7
^^ Module TypeError above is polyfilled and can be ignored ^^ es-module-shims.js:34:12

for rh-dialog generates the above and:

Uncaught (in promise) Error: Unable to resolve specifier '@patternfly/pfe-core/decorators/observed.js' imported from http://localhost:8080/components/dialog/rh-dialog.js

Safari is similar to firefox for rh-alert andrh-dialog
rh-alert

[Error] TypeError: Module specifier, '@patternfly/pfe-band' does not start with "/", "./", or "../". Referenced from http://localhost:8080/components/alert/demo/rh-alert.js
	promiseReactionJob
[Log] ^^ Module TypeError above is polyfilled and can be ignored ^^ (es-module-shims.js, line 1)

rh-dialog

[Error] TypeError: Module specifier, '@patternfly/pfe-band' does not start with "/", "./", or "../". Referenced from http://localhost:8080/components/dialog/demo/rh-dialog.js
	promiseReactionJob
[Error] Error: Unable to resolve specifier '@patternfly/pfe-core/decorators/observed.js' imported from http://localhost:8080/components/dialog/rh-dialog.js
	reportError (es-module-shims.js:1:24092)
	throwError (es-module-shims.js:1:1548)
	promiseReactionJob

Chrome seems to fail on the same error on rh-dialog we see in Firefox and Safari:

Uncaught TypeError: Failed to resolve module specifier "@patternfly/pfe-core/decorators/observed.js". Relative references must start with either "/", "./", or "../".

Similar resolution errors were observed when looking at the Patternfly demos through docs:watch:

Chrome loading localhost/components/button/demo

An import map is added after module script load was triggered.
Uncaught TypeError: Failed to resolve module specifier "@patternfly/pfe-band". Relative references must start with either "/", "./", or "../".

Safari loading localhost/components/button/demo

[Error] TypeError: Module specifier, '@patternfly/pfe-band' does not start with "/", "./", or "../". Referenced from http://localhost:8081/components/button/demo/pfe-button.js
	promiseReactionJob
^^ Module TypeError above is polyfilled and can be ignored ^^

Firefox loading localhost/components/button/demo

Uncaught TypeError: Error resolving module specifier “@patternfly/pfe-band”. Relative module specifiers must start with “./”, “../” or “/”.
^^ Module TypeError above is polyfilled and can be ignored ^^

[zeroedin]

A separate issue appears to be no demo pages being generated for footer at all:

    → footer/index.html              docs/components/footer.njk                 33.2kB    9.2ms
    ↘ footer-block/                  --                                             --       --
      → api/index.html               docs/components/components.md              15.2kB    0.0ms
    ↘ footer-copyright/              --                                             --       --
      → api/index.html               docs/components/components.md              15.2kB    0.0ms
    ↘ footer-links/                  --                                             --       --
      → api/index.html               docs/components/components.md              15.2kB    0.0ms
    ↘ footer-social-link/            --                                             --       --
      → api/index.html               docs/components/components.md              15.2kB    0.0ms

[brianferry]

Looks like a fix for the first issue might be moving

<script type="importmap">{{ importMap | dump | safe }}</script>

above

{%- for href in preloads -%}

{%- endfor -%}

in docs/components/demo.html

[zeroedin]

Looks like a fix for the first issue might be moving

This definitely looks to fix the errors for PFE demos. Looks like the observed.js resolve issue is a separate issue.

Error: Unable to resolve specifier '@patternfly/pfe-core/decorators/observed.js'

[bennypowers]

Very helpful notes, thanks

• Added some (dumb, conventional) redirect rules for lightdom css
• fixed the demo files in rhds to point to the right files. or rather, unfixed the mangled paths that were a workaround for the previous behaviour

I'm going to work on

• unifying the urls for demos (so that ux-dot and dev-server use the same pathnames)
• multiple demos in dev-server (with same urls as ux-dot, and a nav ui)
• some refactors so that both 11ty and dev server use the same code to derive demo metadata

then i'll push those changes up and ping you for review

[bennypowers]

ok these changes give us:

• congruent urls (so http://localhost:8000/components/accordion/demo/ is equivalent to https://ux.redhat.com/components/accordion/demo/)
• multiple demos grouped by primary element
  • /components/accordion/demo/
  • /components/accordion/demo/pfe-accordion-panel/
  • /components/accordion/demo/accessbility/

Once this is in place, we can use the demo links on ux-dot as part of the IA to display livecoding playgrounds

[brianferry]

Looks good to me, tested it locally and everything looked good