fix(tools): remove special characters from slugs (#2460)

* fix(tools): remove special characters from slug

* fix(tools): use slugify strict option to enforce no special characters

* chore(tools): add changeset

Author: zeroedin

.changeset/cuddly-scissors-reply.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Removes special characters from component slugs ie. `special (characters)` becomes `special-characters`

tools/pfe-tools/11ty/DocsPage.ts

@@ -74,7 +74,7 @@ export class DocsPage implements DocsPageRenderer {
     private options?: DocsPageOptions) {
     this.tagName = options?.tagName ?? '';
     this.title = options?.title ?? Manifest.prettyTag(this.tagName);
-    this.slug = slugify(options?.aliases?.[this.tagName] ?? this.tagName.replace(/^\w+-/, '')).toLowerCase();
+    this.slug = slugify(options?.aliases?.[this.tagName] ?? this.tagName.replace(/^\w+-/, ''), { strict: true, lower: true });
     this.summary = this.manifest.getSummary(this.tagName);
     this.description = this.manifest.getDescription(this.tagName);
     this.templates = nunjucks.configure(DocsPage.#templatesDir);

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

@@ -20,6 +20,7 @@ import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 
 import { getAllPackages } from './get-all-packages.js';
+import slugify from 'slugify';
 import { deslugify } from '@patternfly/pfe-tools/config.js';
 
 type PredicateFn = (x: unknown) => boolean;
@@ -266,7 +267,9 @@ export class Manifest {
     const { prettyTag } = Manifest;
     return this.getDemos(tagName).map(demo => {
       const permalink = demo.url.replace(options.demoURLPrefix, '/');
-      const [, slug = ''] = permalink.match(/\/components\/(.*)\/demo/) ?? [];
+      let [, slug = ''] = permalink.match(/\/components\/(.*)\/demo/) ?? [];
+      // strict removes all special characters from slug
+      slug = slugify(slug, { strict: true, lower: true });
       const primaryElementName = deslugify(slug, options.rootDir);
       const filePath = demo.source?.href.replace(options.sourceControlURLPrefix, `${options.rootDir}/`) ?? '';
       const [last = ''] = filePath.split('/').reverse();