From 1addae06ca963b7db70621a12cc79fc8d41db673 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 13 Oct 2024 09:08:34 +0300 Subject: [PATCH] docs: migrate feedback to 11ty.ts --- docs/_includes/layouts/pages/element.11ty.ts | 2 +- .../{feedback.11ty.cjs => feedback.11ty.ts} | 17 +++++------------ docs/_plugins/element-docs.ts | 2 +- docs/_plugins/rhds.ts | 14 +++++++------- .../foundations/iconography/iconography.11ty.js | 2 +- docs/foundations/index.md | 2 +- docs/patterns/announcement/index.md | 2 +- docs/patterns/card/examples.md | 2 +- docs/patterns/card/guidelines.md | 2 +- docs/patterns/card/index.md | 2 +- docs/patterns/disclosure/index.md | 2 +- docs/patterns/filter/index.md | 2 +- docs/patterns/form/index.md | 2 +- docs/patterns/link-with-icon/index.md | 2 +- docs/patterns/link/index.md | 2 +- docs/patterns/logo-wall/examples.md | 2 +- docs/patterns/logo-wall/guidelines.md | 2 +- docs/patterns/logo-wall/index.md | 2 +- docs/patterns/logo-wall/style.md | 2 +- docs/patterns/search-bar/index.md | 2 +- docs/patterns/skip-navigation/index.md | 2 +- docs/patterns/sticky-banner/index.md | 2 +- docs/patterns/sticky-card/index.md | 2 +- docs/patterns/video-thumbnail/index.md | 2 +- docs/release-notes/prerelease.md | 2 +- docs/theming/color-palettes.md | 2 +- docs/theming/customizing.md | 2 +- docs/tokens/index.md | 2 +- docs/tokens/search.html | 2 +- docs/tokens/tokens.11ty.js | 2 +- eleventy.config.ts | 2 ++ 31 files changed, 42 insertions(+), 47 deletions(-) rename docs/_includes/partials/component/{feedback.11ty.cjs => feedback.11ty.ts} (75%) diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts index 09882571aa..8b61e058e2 100644 --- a/docs/_includes/layouts/pages/element.11ty.ts +++ b/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)} `; } diff --git a/docs/_includes/partials/component/feedback.11ty.cjs b/docs/_includes/partials/component/feedback.11ty.ts similarity index 75% rename from docs/_includes/partials/component/feedback.11ty.cjs rename to docs/_includes/partials/component/feedback.11ty.ts index 037db7614f..8f8041b85a 100644 --- a/docs/_includes/partials/component/feedback.11ty.cjs +++ b/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}`, diff --git a/docs/_plugins/element-docs.ts b/docs/_plugins/element-docs.ts index 059699a7bf..3eccb9221b 100644 --- a/docs/_plugins/element-docs.ts +++ b/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 diff --git a/docs/_plugins/rhds.ts b/docs/_plugins/rhds.ts index c2ddfe9b53..eb27065628 100644 --- a/docs/_plugins/rhds.ts +++ b/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); }); diff --git a/docs/foundations/iconography/iconography.11ty.js b/docs/foundations/iconography/iconography.11ty.js index 2d87851de4..ca41633a0c 100644 --- a/docs/foundations/iconography/iconography.11ty.js +++ b/docs/foundations/iconography/iconography.11ty.js @@ -72,7 +72,7 @@ export default class IconsPage { - ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.cjs', ctx)} + ${await this.renderFile('./docs/_includes/partials/component/feedback.11ty.ts', ctx)} `; } diff --git a/docs/foundations/index.md b/docs/foundations/index.md index 8ad708611c..6ba38bbabd 100644 --- a/docs/foundations/index.md +++ b/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:digital-design-system@redhat.com). -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/announcement/index.md b/docs/patterns/announcement/index.md index b6b6442f86..219f1ce9f1 100644 --- a/docs/patterns/announcement/index.md +++ b/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 %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/card/examples.md b/docs/patterns/card/examples.md index f119e36de3..25f4b8e3e7 100644 --- a/docs/patterns/card/examples.md +++ b/docs/patterns/card/examples.md @@ -131,7 +131,7 @@ Secondary call to action may be used or not.

Logo and quote

-{% 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 diff --git a/docs/patterns/card/guidelines.md b/docs/patterns/card/guidelines.md index d95e55b574..1c36508c11 100644 --- a/docs/patterns/card/guidelines.md +++ b/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' %} diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index b5032edc88..592b96be19 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -80,7 +80,7 @@ the colors used meet [color contrast guidelines][color-contrast]. -{% 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 diff --git a/docs/patterns/disclosure/index.md b/docs/patterns/disclosure/index.md index 2250115974..0d66e9dbb0 100644 --- a/docs/patterns/disclosure/index.md +++ b/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 %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/filter/index.md b/docs/patterns/filter/index.md index a1e0fe7e07..e9ae1a066d 100644 --- a/docs/patterns/filter/index.md +++ b/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 %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/form/index.md b/docs/patterns/form/index.md index 7e95893681..5748702647 100644 --- a/docs/patterns/form/index.md +++ b/docs/patterns/form/index.md @@ -632,4 +632,4 @@ values between elements. {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/link-with-icon/index.md b/docs/patterns/link-with-icon/index.md index 1d16d88c96..85121cdd6e 100644 --- a/docs/patterns/link-with-icon/index.md +++ b/docs/patterns/link-with-icon/index.md @@ -133,4 +133,4 @@ between elements. {% spacerTokensTable tokens="--rh-space-lg" %}{% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/link/index.md b/docs/patterns/link/index.md index 4081727d30..8e63dc5333 100644 --- a/docs/patterns/link/index.md +++ b/docs/patterns/link/index.md @@ -462,4 +462,4 @@ the same line.

Visit the Spacing page to see spacing values between link variants and other elements.

-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/logo-wall/examples.md b/docs/patterns/logo-wall/examples.md index 72efe1e0d1..c424382843 100644 --- a/docs/patterns/logo-wall/examples.md +++ b/docs/patterns/logo-wall/examples.md @@ -46,4 +46,4 @@ importElements:

With 2x3 grid

-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md index 3555a1fcd6..8dc4a88a17 100644 --- a/docs/patterns/logo-wall/guidelines.md +++ b/docs/patterns/logo-wall/guidelines.md @@ -180,4 +180,4 @@ with this case -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/logo-wall/index.md b/docs/patterns/logo-wall/index.md index 2c4c7323a2..377d8721cb 100644 --- a/docs/patterns/logo-wall/index.md +++ b/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' %} diff --git a/docs/patterns/logo-wall/style.md b/docs/patterns/logo-wall/style.md index 4f97d10ab6..255c162152 100644 --- a/docs/patterns/logo-wall/style.md +++ b/docs/patterns/logo-wall/style.md @@ -140,4 +140,4 @@ Interaction states are visual representations used to communicate the status of height="114"> -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/search-bar/index.md b/docs/patterns/search-bar/index.md index b051833a05..a61c0a7e53 100644 --- a/docs/patterns/search-bar/index.md +++ b/docs/patterns/search-bar/index.md @@ -375,4 +375,4 @@ between elements. -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/skip-navigation/index.md b/docs/patterns/skip-navigation/index.md index 8b6c12c0e7..306dccb07b 100644 --- a/docs/patterns/skip-navigation/index.md +++ b/docs/patterns/skip-navigation/index.md @@ -108,4 +108,4 @@ values between elements. {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/sticky-banner/index.md b/docs/patterns/sticky-banner/index.md index 029b29351e..9c8783bdfb 100644 --- a/docs/patterns/sticky-banner/index.md +++ b/docs/patterns/sticky-banner/index.md @@ -271,4 +271,4 @@ section. {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/sticky-card/index.md b/docs/patterns/sticky-card/index.md index c2dbfa3dbe..0527b39ebc 100644 --- a/docs/patterns/sticky-card/index.md +++ b/docs/patterns/sticky-card/index.md @@ -289,4 +289,4 @@ values between elements. {% spacerTokensTable headingLevel="4", tokens=spacerTokens %}{% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/patterns/video-thumbnail/index.md b/docs/patterns/video-thumbnail/index.md index 506dcea2d8..23c9faf029 100644 --- a/docs/patterns/video-thumbnail/index.md +++ b/docs/patterns/video-thumbnail/index.md @@ -251,4 +251,4 @@ values between elements. {% endspacerTokensTable %} -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/release-notes/prerelease.md b/docs/release-notes/prerelease.md index 96a59e017d..4d17270c54 100644 --- a/docs/release-notes/prerelease.md +++ b/docs/release-notes/prerelease.md @@ -405,4 +405,4 @@ importElements: -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md index eb1265da09..f75d95b41b 100644 --- a/docs/theming/color-palettes.md +++ b/docs/theming/color-palettes.md @@ -227,7 +227,7 @@ palette, e.g. from `lightest` to `light`. visual tension.

-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} [^1]: As the web platform [improves][wpt], the RHDS authors expect that eventually no JavaScript will be required for this feature. diff --git a/docs/theming/customizing.md b/docs/theming/customizing.md index 7cf6c48e8f..c8d8ce1cfc 100644 --- a/docs/theming/customizing.md +++ b/docs/theming/customizing.md @@ -91,4 +91,4 @@ system if possible. src="/assets/theming/custom-theme.png"> -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/tokens/index.md b/docs/tokens/index.md index 695fcbb038..8dae4cfac6 100644 --- a/docs/tokens/index.md +++ b/docs/tokens/index.md @@ -232,4 +232,4 @@ different audience or brand requirements. [typography]: /tokens/typography/ [contact]: mailto:design-system@redhat.com -{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/tokens/search.html b/docs/tokens/search.html index 5f783d8fa6..b32f9cad52 100644 --- a/docs/tokens/search.html +++ b/docs/tokens/search.html @@ -40,4 +40,4 @@

Token Categories

-{% renderFile './docs/_includes/partials/component/feedback.11ty.cjs' %} +{% renderFile './docs/_includes/partials/component/feedback.11ty.ts' %} diff --git a/docs/tokens/tokens.11ty.js b/docs/tokens/tokens.11ty.js index 2f5c103d38..f5d6e66291 100644 --- a/docs/tokens/tokens.11ty.js +++ b/docs/tokens/tokens.11ty.js @@ -420,7 +420,7 @@ export default class TokensPage { import '@rhds/elements/rh-table/rh-table.js'; ${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)} `; } }; diff --git a/eleventy.config.ts b/eleventy.config.ts index 4d0a891723..e2a76d0799 100644 --- a/eleventy.config.ts +++ b/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 }