fix: demo urls

.changeset/rotten-sloths-crash.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+Manifest: fixed demo paths in manifest helpers

.nvmrc

@@ -1 +1 @@
-v22.16.0
+v24.4.1

docs/components/demos.11tydata.cjs

@@ -1,24 +1,10 @@
-const { dirname } = require('path');
 module.exports = {
   templateEngineOverride: 'njk',
   permalink: '{{ demo.permalink }}',
   pagination: {
     data: 'demos',
     alias: 'demo',
     size: 1,
-    // somehow the main pf-icon demo is being printed twice.
-    // so we'll group by tag name, and only take the first of each.
-    before: demos => Object.values(Object.groupBy(demos
-        .filter(demo => demo.permalink?.includes(demo.tagName))
-        .map(demo => {
-          if (demo.filePath?.endsWith(`${demo.tagName}.html`)) {
-            return {
-              ...demo,
-              permalink: `${dirname(demo.permalink)}/`,
-            };
-          } else {
-            return demo;
-          }
-        }), demo => demo.tagName)).map(([x]) => x),
+    before: demos => demos.filter(demo => demo.tagName === demo.primaryElementName),
   },
 };

elements/package.json

@@ -74,7 +74,7 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
-    "analyze": "cem generate",
+    "analyze": "cem generate && node ../scripts/cem-demo-index.ts",
     "build": "wireit",
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },

package.json

@@ -290,7 +290,7 @@
     "@lit/react": "^1.0.5",
     "@octokit/core": "^6.1.2",
     "@patternfly/patternfly": "^4.224.5",
-    "@pwrs/cem": "^0.2.3",
+    "@pwrs/cem": "^0.2.15",
     "@rhds/elements": "^1.4.5",
     "@types/koa__router": "^12.0.4",
     "@types/node": "^22.15.32",

scripts/cem-demo-index.ts

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+import { writeFile } from 'node:fs/promises';
+import type * as M from 'custom-elements-manifest/schema';
+
+import manifest from '../elements/custom-elements.json' with { type: 'json' };
+
+function isCustomElementDeclaration(decl: M.Declaration): decl is M.CustomElementDeclaration {
+  return !!(decl as M.CustomElementDeclaration).customElement;
+}
+
+const RE = /^https:\/\/patternflyelements\.org\/components\/(?<slug>[\w-]+)\//;
+
+const copy = structuredClone(manifest) as M.Package;
+
+const getSlug = (demo: M.Demo) =>
+  demo.url.match(RE)?.groups?.slug ?? '';
+
+const isMainDemo = (tagName: string, demo: M.Demo): boolean =>
+  demo.url.endsWith(`demo/${tagName}/`);
+
+// replace all canonical demos with /
+// e.g.
+// from: https://patternflyelements.com/components/button/demo/button/
+//   to: https://patternflyelements.com/components/button/demo/
+// This is a stopgap. the ideal would be to either generate the canonical demo from the cem, aka knobs
+// or to include it in the jsdoc in an @example tag
+// or to rearrange the elements/*/demo/*.html file structure
+await writeFile('custom-elements.json', JSON.stringify({
+  ...manifest,
+  modules: copy.modules.map(module => ({
+    ...module,
+    declarations: module.declarations?.map(decl => ({
+      ...decl,
+      demos:
+          !isCustomElementDeclaration(decl) ? undefined
+        : decl.demos?.map(demo => isMainDemo(decl.tagName!, demo) ? ({
+          ...demo,
+          url: `https://patternflyelements.com/components/${getSlug(demo)}/demo/`,
+        }) : demo)
+            .sort((a, b) =>
+          isMainDemo(decl.tagName!, a) ? -1 : isMainDemo(decl.tagName!, b) ? 1 : 0),
+    })),
+  })),
+}, null, 2), 'utf-8');

tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts

@@ -16,7 +16,7 @@ import type {
   Slot,
 } from 'custom-elements-manifest/schema';
 
-import { join, normalize } from 'node:path';
+import { dirname, join, normalize } from 'node:path';
 import { readFileSync } from 'node:fs';
 
 import { getAllPackages } from './get-all-packages.js';
@@ -301,7 +301,7 @@ export class Manifest {
     const manifest = this;
     const { prettyTag } = Manifest;
     return this.getDemos(tagName).map(demo => {
-      const permalink = demo.url.replace(options.demoURLPrefix, '/');
+      const permalink = new URL(demo.url).pathname;
 
       /**
        * `/components/`
@@ -328,6 +328,7 @@ export class Manifest {
           .replace('.html', '');
       return {
         tagName,
+        isMainElementDemo,
         primaryElementName,
         permalink,
         slug,