91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
/**
|
|
* This page generates its content from the custom-element.json file as read by
|
|
* the _data/api.11tydata.js script.
|
|
*/
|
|
module.exports = class Docs {
|
|
data() {
|
|
return {
|
|
layout: 'page.11ty.cjs',
|
|
title: '<my-element> ⌲ Docs',
|
|
};
|
|
}
|
|
|
|
render(data) {
|
|
const customElements = data.api['11tydata'].customElements;
|
|
const tags = customElements.tags;
|
|
return `
|
|
<h1>API</h1>
|
|
${tags
|
|
.map(
|
|
(tag) => `
|
|
<h2><${tag.name}></h2>
|
|
<div>
|
|
${tag.description}
|
|
</div>
|
|
${renderTable(
|
|
'Attributes',
|
|
['name', 'description', 'type', 'default'],
|
|
tag.attributes
|
|
)}
|
|
${renderTable(
|
|
'Properties',
|
|
['name', 'attribute', 'description', 'type', 'default'],
|
|
tag.properties
|
|
)}
|
|
${
|
|
/*
|
|
* Methods are not output by web-component-analyzer yet (a bug), so
|
|
* this is a placeholder so that at least _something_ will be output
|
|
* when that is fixed, and element maintainers will hopefully have a
|
|
* signal to update this file to add the neccessary columns.
|
|
*/
|
|
renderTable('Methods', ['name', 'description'], tag.methods)
|
|
}
|
|
${renderTable('Events', ['name', 'description'], tag.events)}
|
|
${renderTable('Slots', ['name', 'description'], tag.slots)}
|
|
${renderTable(
|
|
'CSS Shadow Parts',
|
|
['name', 'description'],
|
|
tag.cssParts
|
|
)}
|
|
${renderTable(
|
|
'CSS Custom Properties',
|
|
['name', 'description'],
|
|
tag.cssProperties
|
|
)}
|
|
`
|
|
)
|
|
.join('')}
|
|
`;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Renders a table of data, plucking the given properties from each item in
|
|
* `data`.
|
|
*/
|
|
const renderTable = (name, properties, data) => {
|
|
if (data === undefined) {
|
|
return '';
|
|
}
|
|
return `
|
|
<h3>${name}</h3>
|
|
<table>
|
|
<tr>
|
|
${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
|
|
</tr>
|
|
${data
|
|
.map(
|
|
(i) => `
|
|
<tr>
|
|
${properties.map((p) => `<td>${i[p]}</td>`).join('')}
|
|
</tr>
|
|
`
|
|
)
|
|
.join('')}
|
|
</table>
|
|
`;
|
|
};
|
|
|
|
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
|