Skip to content

Commit 92373b8

Browse files
bennypowersbennypowers
committed
refactor(pfe-tools)!: remove 11ty cem templates
1 parent 0231855 commit 92373b8

24 files changed

+628
-85
lines changed

‎.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v18.12.1
1+
v18.16.0

‎docs/_data/importMap.cjs

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
const fs = require('fs');
22
const path = require('path');
3-
const { promisify } = require('node:util');
4-
const Glob = require('glob');
5-
const glob = promisify(Glob);
3+
const { glob } = require('glob');
64

75
const packageLock = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package-lock.json')));
86

‎docs/_plugins/element-docs.cjs

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
const path = require('path');
2+
3+
function innerMD(content = '') {
4+
const trimmed = content.trim();
5+
return trimmed && `\n\n\n${trimmed}\n\n\n`;
6+
}
7+
8+
function type(content = '', { lang = 'ts' } = {}) {
9+
return content?.trim?.() &&
10+
`\n\n\`\`\`${lang}\n${content.trim()}\n\n\`\`\`\n\n`;
11+
}
12+
13+
// TODO: Object.groupBy instead of reduce
14+
function undeprecate(acc, x) {
15+
acc ??= {};
16+
acc.deprecated ??= [];
17+
acc.current ??= [];
18+
if (x.deprecated) {
19+
acc.deprecated.push(x);
20+
} else {
21+
acc.current.push(x);
22+
}
23+
return acc;
24+
}
25+
26+
/** @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig */
27+
module.exports = function(eleventyConfig) {
28+
/**
29+
* docs pages contain a #styling-hooks anchor as back compat for older versions of the page
30+
* to prevent this id from rendering more than once, we track the number of times each page
31+
* renders css custom properties.
32+
*/
33+
const cssStylingHookIdTracker = new WeakSet();
34+
35+
async function render(tpl, content, kwargs) {
36+
return eleventyConfig.javascriptFunctions.renderFile(
37+
path.join(process.cwd(), '/docs/_plugins/element-docs/templates/', tpl),
38+
{ content, ...kwargs },
39+
);
40+
}
41+
42+
/** Rebuild the site in watch mode when the templates for this plugin change */
43+
eleventyConfig.addWatchTarget('docs/_plugins/element-docs/templates/*.njk');
44+
45+
eleventyConfig.addFilter('cemMdHeading', (header, length = 2) =>
46+
innerMD(`${Array.from({ length }, () => '#').join('')} ${header}`));
47+
48+
eleventyConfig.addFilter('cemInnerMD', innerMD);
49+
50+
eleventyConfig.addFilter('cemType', type);
51+
52+
eleventyConfig.addPairedAsyncShortcode('band', async function(content, kwargs) {
53+
return render('band.njk', content, kwargs);
54+
});
55+
56+
/**
57+
* Render the overview of a component page
58+
*/
59+
eleventyConfig.addPairedAsyncShortcode('renderOverview', async function(content, kwargs = {}) {
60+
const docsPage = this.ctx._;
61+
const tagName = docsPage.packageTagName(kwargs);
62+
const description = docsPage.manifest.getDescription(tagName);
63+
const header = kwargs.title ?? this.title;
64+
const { renderTitleInOverview = false } = this.options ?? {};
65+
const renderedTitle =
66+
!renderTitleInOverview ? ''
67+
: await render('band.njk', '', { level: 1, header });
68+
return `${renderedTitle}\n${await render('overview.njk', content, { description, ...kwargs })}`;
69+
});
70+
71+
/**
72+
* Render the list of element attributes
73+
*/
74+
eleventyConfig.addPairedAsyncShortcode('renderAttributes', async function(content, kwargs = {}) {
75+
const docsPage = this.ctx._;
76+
const tagName = docsPage.packageTagName(kwargs);
77+
const { deprecated, current: attributes } = docsPage.manifest.getAttributes(tagName).reduce(undeprecate, {});
78+
return render('attributes.njk', content, { attributes, deprecated, ...kwargs });
79+
});
80+
81+
/**
82+
* Render the list of element DOM properties
83+
* @deprecated: render your own templates. To be removed in version 3
84+
*/
85+
eleventyConfig.addPairedAsyncShortcode('renderProperties', async function(content = '', kwargs = {}) {
86+
const docsPage = this.ctx._;
87+
const tagName = docsPage.packageTagName(kwargs);
88+
const { deprecated, current: properties } = docsPage.manifest.getProperties(tagName).reduce(undeprecate, {});
89+
return render('properties.njk', content, { properties, deprecated, ...kwargs });
90+
});
91+
92+
/**
93+
* Render a table of element CSS Custom Properties
94+
* @deprecated: render your own templates. To be removed in version 3
95+
*/
96+
eleventyConfig.addPairedAsyncShortcode('renderCssCustomProperties', async function(content, kwargs = {}) {
97+
const hasStylingHooks = cssStylingHookIdTracker.has(this);
98+
cssStylingHookIdTracker.add(this);
99+
const docsPage = this.ctx._;
100+
const tagName = docsPage.packageTagName(kwargs);
101+
const { deprecated, current: cssProperties } = docsPage.manifest.getCssCustomProperties(tagName).reduce(undeprecate, {});
102+
return render('css-custom-properties.njk', content, { cssProperties, deprecated, hasStylingHooks, ...kwargs });
103+
});
104+
105+
/**
106+
* Render the list of element CSS Shadow Parts
107+
* @deprecated: render your own templates. To be removed in version 3
108+
*/
109+
eleventyConfig.addPairedAsyncShortcode('renderCssParts', async function(content, kwargs = {}) {
110+
const docsPage = this.ctx._;
111+
const tagName = docsPage.packageTagName(kwargs);
112+
const { deprecated, current: parts } = docsPage.manifest.getCssParts(tagName).reduce(undeprecate, {});
113+
return render('css-shadow-parts.njk', content, { parts, deprecated, ...kwargs });
114+
});
115+
116+
/**
117+
* Render the list of events for the element
118+
*/
119+
eleventyConfig.addPairedAsyncShortcode('renderEvents', async function(content, kwargs = {}) {
120+
const docsPage = this.ctx._;
121+
const tagName = docsPage.packageTagName(kwargs);
122+
const { deprecated, current: events } = docsPage.manifest.getEvents(tagName).reduce(undeprecate, {});
123+
return render('events.njk', content, { events, deprecated, ...kwargs });
124+
});
125+
126+
/**
127+
* Render the installation instructions for the element
128+
*/
129+
eleventyConfig.addPairedAsyncShortcode('renderInstallation', async function(content, kwargs = {}) {
130+
return `${await render('install.njk', content, kwargs)}`;
131+
});
132+
133+
/**
134+
* Render the list of element methods
135+
*/
136+
eleventyConfig.addPairedAsyncShortcode('renderMethods', async function(content, kwargs = {}) {
137+
const docsPage = this.ctx._;
138+
const tagName = docsPage.packageTagName(kwargs);
139+
const { deprecated, current: methods } = docsPage.manifest.getMethods(tagName).reduce(undeprecate, {});
140+
return render('methods.njk', content, { methods, deprecated, ...kwargs });
141+
});
142+
143+
/**
144+
* Render the list of the element's slots
145+
*/
146+
eleventyConfig.addPairedAsyncShortcode('renderSlots', async function(content, kwargs = {}) {
147+
const docsPage = this.ctx._;
148+
const tagName = docsPage.packageTagName(kwargs);
149+
const { deprecated, current: slots } = docsPage.manifest.getSlots(tagName).reduce(undeprecate, {});
150+
return render('slots.njk', content, { slots, deprecated, ...kwargs });
151+
});
152+
};

‎docs/_plugins/element-docs/templates/attributes.njk

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{% set level = level or 2 %}
2+
{% set header = header or 'Attributes' %}
3+
4+
<section class="band api attributes api-properties">
5+
{{ header | cemMdHeading(level) | safe }} {% if not content and not attributes.length %}
6+
7+
<em>None</em> {%- else -%}
8+
9+
{{ content | cemInnerMD | safe }}
10+
<dl> {%- for attribute in attributes -%}
11+
<dt><strong><code>{{ attribute.name }}</code></strong></dt>
12+
<dd>
13+
{{- attribute.description | cemInnerMD | safe -}}
14+
<dl class="member"> {%- if attribute.fieldName -%}
15+
<dt>DOM Property</dt> <dd><code>{{ attribute.fieldName }}</code></dd> {%- endif -%}
16+
<dt>Type</dt> <dd class="inline-type"> {{- (attribute.type.text or 'unknown') | cemType | safe -}} </dd>
17+
<dt>Default</dt> <dd class="inline-type">{{- (attribute.default or 'unknown') | cemType | safe -}}</dd>
18+
</dl>
19+
</dd> {%- endfor -%}
20+
</dl> {%- endif -%} {%- if deprecated.length -%}
21+
22+
<details>
23+
<summary>{{ ('Deprecated ' + header) | cemMdHeading(level + 1) | safe }}</summary>
24+
<dl> {%- for attribute in deprecated -%}
25+
<dt><strong><code>{{ attribute.name }}</code></strong></dt>
26+
<dd>
27+
{{- attribute.description | cemInnerMD | safe -}}
28+
<em>Note: {{ attribute.name }} is deprecated. {{ item.deprecated | cemInnerMD | safe }}</em>
29+
<dl class="member"> {%- if attribute.fieldName -%}
30+
<dt>DOM Property</dt> <dd><code>{{ attribute.fieldName }}</code></dd> {%- endif -%}
31+
<dt>Type</dt> <dd class="inline-type"> {{- (attribute.type.text or 'unknown') | cemType | safe -}} </dd>
32+
<dt>Default</dt> <dd class="inline-type"> {{- (attribute.default or 'unknown') | cemType | safe -}} </dd>
33+
</dl>
34+
</dd> {%- endfor -%}
35+
</dl>
36+
</details>{%- endif -%}
37+
</section>

‎docs/_plugins/element-docs/templates/band.njk

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% set level = level or 2 %}
2+
3+
<section class="band">
4+
{{ header | cemMdHeading(level) | safe }}
5+
{{ content | cemInnerMD | safe }}
6+
</section>

‎docs/_plugins/element-docs/templates/css-custom-properties.njk

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{% set level = level or 2 %}
2+
{% set header = header or 'CSS Custom Properties' %}
3+
4+
{%- macro propRow(prop, deprecated=false) -%}
5+
<tr>
6+
<td style="text-align:left"><code>{{ prop.name }}</code></td>
7+
<td style="text-align:left">{{ prop.description | cemInnerMD | safe }}</td>
8+
<td style="text-align:left">{{ (prop.default or '—') | cemInnerMD | safe }}</td>
9+
</tr>
10+
{%- endmacro -%}
11+
12+
<section class="api band css-custom-properties api-properties">
13+
{% if not hasStylingHooks %}<a id="styling-hooks"></a>{% endif %}
14+
{{ header | cemMdHeading(level) | safe }} {% if not content and not cssProperties.length %}
15+
16+
<em>None</em> {%- else -%}
17+
18+
{{ content | cemInnerMD | safe }}
19+
<table class=css-custom-properties>
20+
<thead>
21+
<tr>
22+
<th style="text-align:left">CSS Property</th>
23+
<th style="text-align:left">Description</th>
24+
<th style="text-align:left">Default</th>
25+
</tr>
26+
</thead>
27+
<tbody> {% for prop in cssProperties -%}
28+
<tr>
29+
<td style="text-align:left"><code>{{ prop.name }}</code></td>
30+
<td style="text-align:left">{{ prop.description | cemInnerMD | safe }}</td>
31+
<td style="text-align:left"><code{{
32+
(' data-color='+prop.default+' style=--color:'+(prop.default|safe)) if
33+
prop.default and prop.default.startsWith('#')
34+
}}>{{ (prop.default or '—') | safe }}</code></td>
35+
</tr> {% endfor %}
36+
</tbody>
37+
</table> {%- endif -%} {%- if deprecated.length -%}
38+
39+
<details>
40+
<summary>{{ ('Deprecated ' + header) | cemMdHeading(level + 1) | safe }}</summary>
41+
<table>
42+
<thead>
43+
<tr>
44+
<th style="text-align:left">CSS Property</th>
45+
<th style="text-align:left">Description</th>
46+
<th style="text-align:left">Default</th>
47+
</tr>
48+
</thead>
49+
<tbody> {% for prop in deprecated -%}
50+
<tr>
51+
<td style="text-align:left"><code>{{ prop.name }}</code></td>
52+
<td style="text-align:left">{{ prop.description | cemInnerMD | safe }}</td>
53+
<td style="text-align:left">{{ (prop.default or '—') | cemInnerMD | safe }}</td>
54+
</tr> {% endfor %}
55+
</tbody>
56+
</table>
57+
</details> {%- endif -%}
58+
</section>
59+
60+
<style>
61+
62+
table.css-custom-properties code[data-color] {
63+
display: inline-flex;
64+
align-items: center;
65+
gap: 8px;
66+
}
67+
table.css-custom-properties code[data-color]:after {
68+
content: '';
69+
background: var(--color);
70+
display: inline-block;
71+
width: 1rem;
72+
height: 1rem;
73+
border-radius: 1rem;
74+
inset-inline-end: -1rem;
75+
}
76+
</style>

‎docs/_plugins/element-docs/templates/css-shadow-parts.njk

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% set level = level or 2 %}
2+
{% set header = header or 'CSS Shadow Parts' %}
3+
4+
<section class="api band css-shadow-parts api-properties">
5+
{{ header | cemMdHeading(level) | safe }} {% if not content and not parts.length %}
6+
7+
<em>None</em> {%- else -%}
8+
9+
{{ content | cemInnerMD | safe }}
10+
11+
<dl> {% for part in parts -%}
12+
<dt><strong><code>{{ part.name }}</code></strong></dt>
13+
<dd>{{- part.description | cemInnerMD | safe -}}</dd> {% endfor %}
14+
</dl> {%- endif -%} {%- if deprecated.length -%}
15+
16+
<details>
17+
<summary>{{ ('Deprecated ' + header) | cemMdHeading(level + 1) | safe }}</summary>
18+
<dl> {% for part in deprecated -%}
19+
<dt><strong><code>{{ part.name }}</code></strong></dt>
20+
<dd>
21+
{{- part.description | cemInnerMD | safe -}}
22+
<em>Note: {{ part.name }} is deprecated. {{- part.deprecated | cemInnerMD | safe -}}</em>
23+
</dd> {% endfor %}
24+
</dl>
25+
26+
</details> {%- endif -%}
27+
</section>

‎docs/_plugins/element-docs/templates/events.njk

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% set level = level or 2 %}
2+
{% set header = header or 'Events' %}
3+
4+
<section class="api band events api-properties">
5+
{{ header | cemMdHeading(level) | safe }} {% if not content and not events.length %}
6+
7+
<em>None</em> {% else %}
8+
9+
{{ content | cemInnerMD | safe }}
10+
<dl> {%- for event in events -%}
11+
<dt><strong><code>{{ event.name }}</code></strong></dt>
12+
<dd>
13+
{{- event.description | cemInnerMD | safe -}}
14+
<span>
15+
<em>Event Type</em>: <span class="inline-type">{{ (event.type.text or 'unknown') | cemType | safe }}</span>
16+
</span>
17+
</dd> {%- endfor -%}
18+
</dl> {%- endif -%} {%- if deprecated.length -%}
19+
20+
<details>
21+
<summary>{{ ('Deprecated ' + header) | cemMdHeading(level + 1) | safe }}</summary>
22+
<dl> {%- for event in deprecated -%}
23+
<dt><strong><code>{{ event.name }}</code></strong></dt>
24+
<dd>
25+
{{- event.description | cemInnerMD | safe -}}
26+
<em>Note: {{ event.name }} is deprecated. {{- event.deprecated | cemInnerMD | safe -}}</em>
27+
<em>Event Type</em>: <span class="inline-type">{{- (event.type.text or 'unknown') | cemType | safe -}}</span>
28+
</dd> {%- endfor -%}
29+
</dl>
30+
31+
</details> {%- endif -%}
32+
</section>

‎docs/_plugins/element-docs/templates/install.njk

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% set level = level or 2 %}
2+
{% set header = header or 'Installation' %}
3+
4+
<section class="band">
5+
{{ header | cemMdHeading(level) | safe }} {% if not content and not slots.length %}
6+
7+
<em>None</em> {%- else -%}
8+
9+
We recommend loading elements via a CDN such as [JSPM](https://jspm.dev) and using an import map to manage your dependencies.
10+
11+
For more information on import maps and how to use them, see the [import map reference on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/).
12+
13+
If you are using node and NPM, you can install this component using npm:
14+
15+
```shell
16+
npm install {{ package.name }}
17+
```
18+
19+
Then import this component into your project by using a [bare module specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
20+
```js
21+
import '@patternfly/elements/{{ tagName }}/{{ tagName }}.js'
22+
```
23+
24+
<strong>Please Note:</strong> You should either load elements via a CDN or install them locally through NPM. <em>Do not do both.</em>
25+
26+
</section>
27+
{%- endif -%}

0 commit comments

Comments
 (0)