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 @@
{{ prop.type.text | markdownInline | safe }}
+ {{ prop.type.text | trimPipes | markdownInline | safe }}
{% else %}
-
{% endif %}
@@ -211,7 +211,7 @@
{{ 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