diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk index 8b087b89..e377e692 100644 --- a/docs/_includes/component.njk +++ b/docs/_includes/component.njk @@ -160,7 +160,7 @@ {% if prop.type.text %} - {{ prop.type.text | markdownInline | safe }} + {{ prop.type.text | trimPipes | markdownInline | safe }} {% else %} - {% endif %} @@ -211,7 +211,7 @@ {{ event.description | markdownInline | safe }} {% if event.type.text %} - {{ event.type.text }} + {{ event.type.text | trimPipes }} {% else %} - {% endif %} @@ -245,7 +245,7 @@ {% if method.parameters.length %} {% for param in method.parameters %} - {{ param.name }}: {{ param.type.text }}{% if not loop.last %},{% endif %} + {{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %} {% endfor %} {% else %} diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs index 2377943f..85724240 100644 --- a/docs/eleventy.config.cjs +++ b/docs/eleventy.config.cjs @@ -96,6 +96,12 @@ module.exports = function (eleventyConfig) { return shoelaceFlavoredMarkdown.renderInline(content); }); + // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited. + // With Prettier 3, this means a leading pipe will exist if the line wraps. + eleventyConfig.addFilter('trimPipes', content => { + return content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, ''); + }); + eleventyConfig.addFilter('classNameToComponentName', className => { let name = capitalCase(className.replace(/^Sl/, '')); if (name === 'Qr Code') name = 'QR Code'; // manual override