docs: migrate feedback to 11ty.ts

docs/_includes/layouts/pages/element.11ty.ts

@@ -107,7 +107,7 @@ export default class ElementsPage {
       : isDemoPage ? await this.#renderDemos(ctx)
       : content}
 
-      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.cjs', ctx)}
+      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.ts', ctx)}
     `;
   }
 

docs/_includes/partials/component/feedback.11ty.cjs → docs/_includes/partials/component/feedback.11ty.ts

@@ -1,16 +1,9 @@
-const html = String.raw; // for editor highlighting
+import { Renderer } from '../../../../eleventy.config.ts';
+import { dedent } from '../../../_plugins/tokensHelpers';
 
-/**
- * Returns a string with common indent stripped from each line. Useful for templating HTML
- * @param str indented string
- */
-function dedent(str) {
-  const stripped = str.replace(/^\n/, '');
-  const match = stripped.match(/^\s+/);
-  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
-}
+const html = String.raw; // for editor highlighting
 
-module.exports = class Feedback {
+export default class Feedback extends Renderer {
   async render({
     doc,
     title,
@@ -20,7 +13,7 @@ module.exports = class Feedback {
     pfeconfig ??= await import('@patternfly/pfe-tools/config.js').then(x => x.getPfeConfig());
     const name = doc?.tagName ?? this.slugify(title);
     const related = [...new Set(relatedItems?.[name] ?? [])].map(x => {
-      const slug = this.getTagNameSlug(x, pfeconfig);
+      const slug = this.getTagNameSlug(x);
       return {
         name: x,
         url: slug === x ? `/patterns/${slug}` : `/elements/${slug}`,

docs/_plugins/element-docs.ts

@@ -187,7 +187,7 @@ async function getDocsPageData(
 
 /** @param  eleventyConfig */
 export default function(eleventyConfig: UserConfig) {
-  eleventyConfig.addCollection('elementDocs', async function(api) {
+  eleventyConfig.addCollection('elementDocs', async function() {
     try {
       const docFilePaths = await Array.fromAsync(glob(`elements/*/docs/*.md`, { cwd }));
       // TODO: adding the code file in the next line is a temporary hack to add in a virtual

docs/_plugins/rhds.ts

@@ -16,7 +16,7 @@ import RHDSShortcodesPlugin from './shortcodes.js';
 import RHDSElementDocsPlugin from './element-docs.ts';
 import RHDSElementDemosPlugin from './element-demos.js';
 
-import { getPfeConfig, type PfeConfig } from '@patternfly/pfe-tools/config.js';
+import { getPfeConfig } from '@patternfly/pfe-tools/config.js';
 import { UserConfig } from '@11ty/eleventy';
 
 const exec = promisify(ChildProcess.exec);
@@ -28,12 +28,13 @@ const cwd = process.cwd();
  * inputPath the path to the page's input file (e.g. template or paginator)
  */
 
+const pfeconfig = getPfeConfig();
+
 /**
  * @param  tagName e.g. pf-jazz-hands
- * @param  config pfe tools repo config
  */
-function getTagNameSlug(tagName: string, config: PfeConfig) {
-  const name = config?.aliases?.[tagName] ?? tagName.replace(`${config?.tagPrefix ?? 'rh'}-`, '');
+function getTagNameSlug(tagName: string) {
+  const name = pfeconfig?.aliases?.[tagName] ?? tagName.replace(`${pfeconfig?.tagPrefix ?? 'rh'}-`, '');
   return slugify(name, {
     strict: true,
     lower: true,
@@ -72,7 +73,7 @@ function getFilesToCopy() {
 
   // Copy all component and core files to _site
   return Object.fromEntries(tagNames.flatMap(tagName => {
-    const slug = getTagNameSlug(tagName, config);
+    const slug = getTagNameSlug(tagName);
     return Object.entries({
       [`elements/${tagName}/demo/`]: `elements/${slug}/demo`,
       [`elements/${tagName}/docs/**/*.{${COPY_CONTENT_EXTENSIONS.join(',')}}`]: `elements/${slug}`,
@@ -117,8 +118,7 @@ export default function(eleventyConfig: UserConfig, { tagsToAlphabetize }: Optio
   eleventyConfig.addJavaScriptFunction('getTagNameSlug', getTagNameSlug);
 
   eleventyConfig.addFilter('getPrettyElementName', function(tagName) {
-    const pfeconfig = getPfeConfig();
-    const slug = getTagNameSlug(tagName, pfeconfig);
+    const slug = getTagNameSlug(tagName);
     const deslugify = eleventyConfig.getFilter('deslugify');
     return pfeconfig.aliases[tagName] || deslugify(slug);
   });

docs/foundations/iconography/iconography.11ty.js

@@ -72,7 +72,7 @@ export default class IconsPage {
         <ul class="icon-set">${this.#renderIcons('social', icons)}</ul>
       </section>
 
-      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.cjs', ctx)}
+      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.ts', ctx)}
     `;
   }
 

docs/foundations/index.md

@@ -76,4 +76,4 @@ tags:
 To request a new foundation or if updates need to be made to an existing
 foundation, [contact us](mailto:[email protected]).
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/announcement/index.md

@@ -197,4 +197,4 @@ values between elements.
 {% spacerTokensTable headingLevel="3", tokens="--rh-space-sm,--rh-space-lg, --rh-space-xl, --rh-space-3xl" %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/card/examples.md

@@ -131,7 +131,7 @@ Secondary call to action may be used or not.
   <h3 id="logo-and-quote" slot="heading">Logo and quote</h3>
 </uxdot-pattern>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}
 
 [element]: /elements/card
 [css-props]: /elements/card/code/#css-custom-properties

docs/patterns/card/guidelines.md

@@ -61,4 +61,4 @@ The recommended maximum character count for the elements of a card are listed be
 
 
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/card/index.md

@@ -80,7 +80,7 @@ the colors used meet [color contrast guidelines][color-contrast].
 <uxdot-pattern src="./patterns/custom-themes.html">
 </uxdot-pattern>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}
 
 [element]: /elements/card
 [css-props]: /elements/card/code/#css-custom-properties

docs/patterns/disclosure/index.md

@@ -290,4 +290,4 @@ values between elements.
 {% spacerTokensTable headingLevel="4", tokens="--rh-space-sm,--rh-space-lg, --rh-space-xl, --rh-space-3xl" %} {% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/filter/index.md

@@ -291,4 +291,4 @@ values between elements.
 {% spacerTokensTable headingLevel="4", tokens="--rh-space-xs, --rh-space-sm,--rh-space-lg, --rh-space-xl" %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/form/index.md

@@ -632,4 +632,4 @@ values between elements.
 {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/link-with-icon/index.md

@@ -133,4 +133,4 @@ between elements.
 {% spacerTokensTable tokens="--rh-space-lg" %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/link/index.md

@@ -462,4 +462,4 @@ the same line.
   <p>Visit the <a href="/foundations/spacing/">Spacing</a> page to see spacing values between link variants and other elements.</p>
 </rh-alert>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/logo-wall/examples.md

@@ -46,4 +46,4 @@ importElements:
   <h2 slot="heading">With 2x3 grid</h2>
 </uxdot-pattern>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/logo-wall/guidelines.md

@@ -180,4 +180,4 @@ with this case</rh-alert>
   </uxdot-best-practice>
 </div>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/logo-wall/index.md

@@ -47,4 +47,4 @@ A logo wall is a visual arrangement of logos representing various brands, compan
 
 Use a logo wall pattern when you need to display multiple logos in a group.
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/logo-wall/style.md

@@ -140,4 +140,4 @@ Interaction states are visual representations used to communicate the status of
       height="114">
 </uxdot-example>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/search-bar/index.md

@@ -375,4 +375,4 @@ between elements.
 </rh-table>
 
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/skip-navigation/index.md

@@ -108,4 +108,4 @@ values between elements.
 {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/sticky-banner/index.md

@@ -271,4 +271,4 @@ section.
 {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/sticky-card/index.md

@@ -289,4 +289,4 @@ values between elements.
 {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/patterns/video-thumbnail/index.md

@@ -251,4 +251,4 @@ values between elements.
   {% endspacerTokensTable %}
 </rh-table>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/release-notes/prerelease.md

@@ -405,4 +405,4 @@ importElements:
 
 </section>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/theming/color-palettes.md

@@ -227,7 +227,7 @@ palette, e.g. from `lightest` to `light`.
      visual tension.</p>
 </rh-alert>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}
 
 [^1]: As the web platform [improves][wpt], the <abbr>RHDS</abbr> authors expect that eventually no JavaScript will be required for this feature.
 

docs/theming/customizing.md

@@ -91,4 +91,4 @@ system if possible.
        src="/assets/theming/custom-theme.png">
 </uxdot-example>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/tokens/index.md

@@ -232,4 +232,4 @@ different audience or brand requirements.
 [typography]: /tokens/typography/
 [contact]: mailto:[email protected]
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/tokens/search.html

@@ -40,4 +40,4 @@ <h2>Token Categories</h2>
   </rh-tile>
 </nav>
 
-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %}
+{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %}

docs/tokens/tokens.11ty.js

@@ -420,7 +420,7 @@ export default class TokensPage {
         import '@rhds/elements/rh-table/rh-table.js';
       </script>
       ${await this.#renderCategory({ tokens, name, path, slug, level: 1, exclude, include, seenPaths })}
-      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.cjs', ctx)}
+      ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.ts', ctx)}
     `;
   }
 };

eleventy.config.ts

@@ -272,4 +272,6 @@ export class Renderer {
   declare highlight: (lang: string, content: string) => string;
   declare dedent: (str: string) => string;
   declare slugify: (str: string) => string;
+  declare deslugify: (str: string) => string;
+  declare getTagNameSlug: (str: string) => string
 }