fix(tools): prevent duplicate ids on docs pages (#2527)

* fix(tools): add weakmap counter DocsPage

* refactor: simplify styling hooks guard

* docs: changeset

---------

Co-authored-by: Benny Powers <[email protected]>

Author: zeroedin

.changeset/tools-styling-hooks-ids.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+`11ty`: prevent duplicate IDs on code pages when multiple elements are documented

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

@@ -24,6 +24,13 @@ export interface RenderKwargs {
   level?: number;
 }
 
+/**
+ * docs pages contain a #styling-hooks anchor as back compat for older versions of the page
+ * to prevent this id from rendering more than once, we track the number of times each page
+ * renders css custom properties.
+ */
+const cssStylingHookIdTracker = new WeakSet();
+
 export declare class DocsPageRenderer {
   public tagName: string;
   public manifest: Manifest;
@@ -136,13 +143,15 @@ export class DocsPage implements DocsPageRenderer {
     return this.templates.render('properties.njk', { content, properties, deprecated, ...kwargs });
   }
 
-  /** Render a talbe of element CSS Custom Properties */
+  /** Render a table of element CSS Custom Properties */
   renderCssCustomProperties(content: string, kwargs: RenderKwargs = {}) {
+    const hasStylingHooks = cssStylingHookIdTracker.has(this);
+    cssStylingHookIdTracker.add(this);
     const allCssProperties = this.manifest.getCssCustomProperties(this.#packageTagName(kwargs)) ?? [];
     const cssProperties = allCssProperties.filter(x => !x.deprecated);
     const deprecated = allCssProperties.filter(x => x.deprecated);
 
-    return this.templates.render('css-custom-properties.njk', { content, cssProperties, deprecated, ...kwargs });
+    return this.templates.render('css-custom-properties.njk', { content, cssProperties, deprecated, hasStylingHooks, ...kwargs });
   }
 
   /** Render the list of element CSS Shadow Parts */
@@ -152,7 +161,7 @@ export class DocsPage implements DocsPageRenderer {
     const parts = allParts.filter(x => !x.deprecated);
     const deprecated = allParts.filter(x => x.deprecated);
 
-    return this.templates.render('css-shadow-parts.njk', { parts, deprecated, content, ...kwargs, });
+    return this.templates.render('css-shadow-parts.njk', { parts, deprecated, content, ...kwargs });
   }
 
   /** Render the list of events for the element */

tools/pfe-tools/11ty/templates/css-custom-properties.njk

@@ -10,7 +10,7 @@
 {%- endmacro -%}
 
 <section class="api band css-custom-properties api-properties">
-  <a id="styling-hooks"></a>
+  {% if not hasStylingHooks %}<a id="styling-hooks"></a>{% endif %}
   {{ header | mdHeading(level) | safe }} {% if not content and not cssProperties.length %}
 
   <em>None</em> {%- else -%}